2022-08-30 17:56:04 +00:00
< script setup lang = "ts" >
import { humanSize , truncate } from '~/utils/filters'
import { useGettext } from 'vue3-gettext'
import { useRouter } from 'vue-router'
import { computed , ref } from 'vue'
import axios from 'axios'
import FetchButton from '~/components/federation/FetchButton.vue'
import TagsList from '~/components/tags/List.vue'
import useErrorHandler from '~/composables/useErrorHandler'
interface Props {
id : number
}
const props = defineProps < Props > ( )
const { $pgettext } = useGettext ( )
const router = useRouter ( )
const labels = computed ( ( ) => ( {
statsWarning : $pgettext ( 'Content/Moderation/Help text' , 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object' )
} ) )
const isLoading = ref ( false )
const object = ref ( )
const fetchData = async ( ) => {
isLoading . value = true
try {
const response = await axios . get ( ` manage/library/albums/ ${ props . id } / ` )
object . value = response . data
} catch ( error ) {
useErrorHandler ( error as Error )
}
2022-08-31 22:03:32 +00:00
isLoading . value = false
2022-08-30 17:56:04 +00:00
}
const isLoadingStats = ref ( false )
const stats = ref ( )
const fetchStats = async ( ) => {
isLoadingStats . value = true
try {
const response = await axios . get ( ` manage/library/albums/ ${ props . id } /stats/ ` )
stats . value = response . data
} catch ( error ) {
useErrorHandler ( error as Error )
}
2022-08-31 22:03:32 +00:00
isLoadingStats . value = false
2022-08-30 17:56:04 +00:00
}
fetchStats ( )
fetchData ( )
const remove = async ( ) => {
isLoading . value = true
try {
await axios . delete ( ` manage/library/albums/ ${ props . id } / ` )
router . push ( { name : 'manage.library.albums' } )
} catch ( error ) {
useErrorHandler ( error as Error )
}
2022-08-31 22:03:32 +00:00
isLoading . value = false
2022-08-30 17:56:04 +00:00
}
const getQuery = ( field : string , value : string ) => ` ${ field } :" ${ value } " `
< / script >
2019-04-17 12:17:59 +00:00
< template >
< main >
2021-12-06 10:35:20 +00:00
< div
v - if = "isLoading"
class = "ui vertical segment"
>
< div : class = "['ui', 'centered', 'active', 'inline', 'loader']" / >
2019-04-17 12:17:59 +00:00
< / div >
< template v-if ="object" >
2021-12-06 10:35:20 +00:00
< section
v - title = "object.title"
: class = "['ui', 'head', 'vertical', 'stripe', 'segment']"
>
2019-04-17 12:17:59 +00:00
< div class = "ui stackable one column grid" >
< div class = "ui column" >
< div class = "segment-content" >
< h2 class = "ui header" >
2021-12-06 10:35:20 +00:00
< img
2022-08-31 22:36:40 +00:00
v - if = "object.cover?.urls.original"
2021-12-06 10:35:20 +00:00
v - lazy = "$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
alt = ""
>
< img
v - else
alt = ""
src = "../../../assets/audio/default-cover.png"
>
2019-04-17 12:17:59 +00:00
< div class = "content" >
2022-04-30 20:46:37 +00:00
{ { truncate ( object . title ) } }
2019-04-17 12:17:59 +00:00
< div class = "sub header" >
< template v-if ="object.is_local" >
2020-06-22 14:46:43 +00:00
< span class = "ui tiny accent label" >
2021-12-06 10:35:20 +00:00
< i class = "home icon" / >
2019-04-17 12:17:59 +00:00
< translate translate -context = " Content / Moderation / * / Short , Noun " > Local < / translate >
< / span >
& nbsp ;
< / template >
< / div >
< / div >
< / h2 >
2019-07-25 08:57:59 +00:00
< template v-if ="object.tags && object.tags.length > 0" >
2021-12-06 10:35:20 +00:00
< tags -list
: limit = "5"
detail - route = "manage.library.tags.detail"
: tags = "object.tags"
/ >
< div class = "ui hidden divider" / >
2019-07-25 08:57:59 +00:00
< / template >
2019-04-17 12:17:59 +00:00
< div class = "header-buttons" >
< div class = "ui icon buttons" >
2021-12-06 10:35:20 +00:00
< router -link
class = "ui labeled icon button"
: to = "{name: 'library.albums.detail', params: {id: object.id }}"
>
< i class = "info icon" / >
< translate translate -context = " Content / Moderation / Link / Verb " >
Open local profile
< / translate > & nbsp ;
2019-04-17 12:17:59 +00:00
< / r o u t e r - l i n k >
2021-12-06 10:35:20 +00:00
< button
v - dropdown
class = "ui floating dropdown icon button"
>
< i class = "dropdown icon" / >
2019-04-17 12:17:59 +00:00
< div class = "menu" >
< a
2019-04-29 13:26:54 +00:00
v - if = "$store.state.auth.profile && $store.state.auth.profile.is_superuser"
2019-04-17 12:17:59 +00:00
class = "basic item"
: href = "$store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
2021-12-06 10:35:20 +00:00
target = "_blank"
rel = "noopener noreferrer"
>
< i class = "wrench icon" / >
2019-04-17 12:17:59 +00:00
< translate translate -context = " Content / Moderation / Link / Verb " > View in Django ' s admin < / translate > & nbsp ;
< / a >
2021-12-06 10:35:20 +00:00
< a
v - if = "object.mbid"
class = "basic item"
: href = "`https://musicbrainz.org/release/${object.mbid}`"
target = "_blank"
rel = "noopener noreferrer"
>
< i class = "external icon" / >
2019-04-17 12:17:59 +00:00
< translate translate -context = " Content / Moderation / Link / Verb " > Open on MusicBrainz < / translate > & nbsp ;
< / a >
2021-12-06 10:35:20 +00:00
< fetch -button
v - if = "!object.is_local"
class = "basic item"
: url = "`albums/${object.id}/fetches/`"
@ refresh = "fetchData"
>
< i class = "refresh icon" / > & nbsp ;
< translate translate -context = " Content / Moderation / Button / Verb " >
Refresh from remote server
< / translate > & nbsp ;
2019-04-18 12:37:17 +00:00
< / f e t c h - b u t t o n >
2021-12-06 10:35:20 +00:00
< a
class = "basic item"
: href = "object.url || object.fid"
target = "_blank"
rel = "noopener noreferrer"
>
< i class = "external icon" / >
2019-04-17 12:17:59 +00:00
< translate translate -context = " Content / Moderation / Link / Verb " > Open remote profile < / translate > & nbsp ;
< / a >
< / div >
2020-08-04 11:22:31 +00:00
< / button >
2019-04-17 12:17:59 +00:00
< / div >
< div class = "ui buttons" >
< router -link
v - if = "object.is_local"
: to = "{name: 'library.albums.edit', params: {id: object.id }}"
2021-12-06 10:35:20 +00:00
class = "ui labeled icon button"
>
< i class = "edit icon" / >
< translate translate -context = " Content / * / Button.Label / Verb " >
Edit
< / translate >
2019-04-17 12:17:59 +00:00
< / r o u t e r - l i n k >
< / div >
< div class = "ui buttons" >
< dangerous -button
2020-05-15 12:12:36 +00:00
: class = "['ui', {loading: isLoading}, 'basic danger button']"
2021-12-06 10:35:20 +00:00
: action = "remove"
>
< translate translate -context = " * / * / * / Verb " >
Delete
< / translate >
2022-05-01 14:15:57 +00:00
< template # modal -header >
2021-12-06 10:35:20 +00:00
< p >
2022-05-01 14:15:57 +00:00
< translate translate -context = " Popup / Library / Title " >
Delete this album ?
2021-12-06 10:35:20 +00:00
< / translate >
< / p >
2022-05-01 14:15:57 +00:00
< / template >
< template # modal -content >
< div >
< p >
< translate translate -context = " Content / Moderation / Paragraph " >
The album will be removed , as well as associated uploads , tracks , favorites and listening history . This action is irreversible .
< / translate >
< / p >
< / div >
< / template >
< template # modal -confirm >
< p >
< translate translate -context = " * / * / * / Verb " >
Delete
< / translate >
< / p >
< / template >
2019-04-17 12:17:59 +00:00
< / d a n g e r o u s - b u t t o n >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< div class = "ui vertical stripe segment" >
< div class = "ui stackable three column grid" >
< div class = "column" >
< section >
< h3 class = "ui header" >
2021-12-06 10:35:20 +00:00
< i class = "info icon" / >
2019-04-17 12:17:59 +00:00
< div class = "content" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " Content / Moderation / Title " >
Album data
< / translate >
2019-04-17 12:17:59 +00:00
< / div >
< / h3 >
< table class = "ui very basic table" >
< tbody >
< tr >
< td >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / * / * / Noun " >
Title
< / translate >
2019-04-17 12:17:59 +00:00
< / td >
< td >
{ { object . title } }
< / td >
< / tr >
< tr >
< td >
< router -link : to = "{name: 'manage.library.artists.detail', params: {id: object.artist.id }}" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / * / * / Noun " >
Artist
< / translate >
2019-04-17 12:17:59 +00:00
< / r o u t e r - l i n k >
< / td >
< td >
{ { object . artist . name } }
< / td >
< / tr >
< tr v-if ="!object.is_local" >
< td >
< router -link : to = "{name: 'manage.moderation.domains.detail', params: {id: object.domain }}" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " Content / Moderation / * / Noun " >
Domain
< / translate >
2019-04-17 12:17:59 +00:00
< / r o u t e r - l i n k >
< / td >
2019-04-19 10:05:13 +00:00
< td >
{ { object . domain } }
< / td >
2019-04-17 12:17:59 +00:00
< / tr >
2020-01-14 13:00:08 +00:00
< tr v-if ="object.description" >
< td >
2021-12-06 10:35:20 +00:00
< translate translate -context = " ' * / * / * / Noun " >
Description
< / translate >
2020-01-14 13:00:08 +00:00
< / td >
2022-07-21 01:21:36 +00:00
< sanitized -html
2022-07-01 13:55:13 +00:00
tag = "td"
2022-07-21 01:21:36 +00:00
: html = "object.description.html"
2022-07-01 13:55:13 +00:00
/ >
2020-01-14 13:00:08 +00:00
< / tr >
2019-04-17 12:17:59 +00:00
< / tbody >
< / table >
< / section >
< / div >
< div class = "column" >
< section >
< h3 class = "ui header" >
2021-12-06 10:35:20 +00:00
< i class = "feed icon" / >
2019-04-17 12:17:59 +00:00
< div class = "content" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " Content / Moderation / Title " >
Activity
< / translate > & nbsp ;
< span :data-tooltip ="labels.statsWarning" > < i class = "question circle icon" / > < / span >
2019-04-17 12:17:59 +00:00
< / div >
< / h3 >
2021-12-06 10:35:20 +00:00
< div
v - if = "isLoadingStats"
class = "ui placeholder"
>
< div class = "full line" / >
< div class = "short line" / >
< div class = "medium line" / >
< div class = "long line" / >
2019-04-17 12:17:59 +00:00
< / div >
2021-12-06 10:35:20 +00:00
< table
v - else
class = "ui very basic table"
>
2019-04-17 12:17:59 +00:00
< tbody >
2019-04-19 10:05:13 +00:00
< tr >
< td >
2021-12-06 10:35:20 +00:00
< translate translate -context = " Content / Moderation / Table.Label / Short ( Value is a date ) " >
First seen
< / translate >
2019-04-19 10:05:13 +00:00
< / td >
< td >
2021-12-06 10:35:20 +00:00
< human -date :date ="object.creation_date" / >
2019-04-19 10:05:13 +00:00
< / td >
< / tr >
2019-04-17 12:17:59 +00:00
< tr >
< td >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / * / * / Noun " >
Listenings
< / translate >
2019-04-17 12:17:59 +00:00
< / td >
< td >
{ { stats . listenings } }
< / td >
< / tr >
< tr >
< td >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / * / * " >
Favorited tracks
< / translate >
2019-04-17 12:17:59 +00:00
< / td >
< td >
{ { stats . track _favorites } }
< / td >
< / tr >
< tr >
< td >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / * / * " >
Playlists
< / translate >
2019-04-17 12:17:59 +00:00
< / td >
< td >
{ { stats . playlists } }
< / td >
< / tr >
2019-09-13 03:53:40 +00:00
< tr >
< td >
< router -link : to = "{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `album:${object.id}`) }}" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " Content / Moderation / Table.Label / Noun " >
Linked reports
< / translate >
2019-09-13 03:53:40 +00:00
< / r o u t e r - l i n k >
< / td >
< td >
{ { stats . reports } }
< / td >
< / tr >
2019-04-17 12:17:59 +00:00
< tr >
< td >
< router -link : to = "{name: 'manage.library.edits', query: {q: getQuery('target', 'album ' + object.id)}}" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / Admin / * / Noun " >
Edits
< / translate >
2019-04-17 12:17:59 +00:00
< / r o u t e r - l i n k >
< / td >
< td >
{ { stats . mutations } }
< / td >
< / tr >
< / tbody >
< / table >
< / section >
< / div >
< div class = "column" >
< section >
< h3 class = "ui header" >
2021-12-06 10:35:20 +00:00
< i class = "music icon" / >
2019-04-17 12:17:59 +00:00
< div class = "content" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " Content / Moderation / Title " >
Audio content
< / translate > & nbsp ;
< span :data-tooltip ="labels.statsWarning" > < i class = "question circle icon" / > < / span >
2019-04-17 12:17:59 +00:00
< / div >
< / h3 >
2021-12-06 10:35:20 +00:00
< div
v - if = "isLoadingStats"
class = "ui placeholder"
>
< div class = "full line" / >
< div class = "short line" / >
< div class = "medium line" / >
< div class = "long line" / >
2019-04-17 12:17:59 +00:00
< / div >
2021-12-06 10:35:20 +00:00
< table
v - else
class = "ui very basic table"
>
2019-04-17 12:17:59 +00:00
< tbody >
< tr >
< td >
2021-12-06 10:35:20 +00:00
< translate translate -context = " Content / Moderation / Table.Label / Noun " >
Cached size
< / translate >
2019-04-17 12:17:59 +00:00
< / td >
< td >
2022-04-30 20:46:37 +00:00
{ { humanSize ( stats . media _downloaded _size ) } }
2019-04-17 12:17:59 +00:00
< / td >
< / tr >
< tr >
< td >
2021-12-06 10:35:20 +00:00
< translate translate -context = " Content / Moderation / Table.Label " >
Total size
< / translate >
2019-04-17 12:17:59 +00:00
< / td >
< td >
2022-04-30 20:46:37 +00:00
{ { humanSize ( stats . media _total _size ) } }
2019-04-17 12:17:59 +00:00
< / td >
< / tr >
< tr >
< td >
2019-04-19 10:05:13 +00:00
< router -link : to = "{name: 'manage.library.libraries', query: {q: getQuery('album_id', object.id) }}" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / * / * / Noun " >
Libraries
< / translate >
2019-04-19 10:05:13 +00:00
< / r o u t e r - l i n k >
2019-04-17 12:17:59 +00:00
< / td >
< td >
{ { stats . libraries } }
< / td >
< / tr >
< tr >
< td >
2019-04-19 10:05:13 +00:00
< router -link : to = "{name: 'manage.library.uploads', query: {q: getQuery('album_id', object.id) }}" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / * / * " >
Uploads
< / translate >
2019-04-19 10:05:13 +00:00
< / r o u t e r - l i n k >
2019-04-17 12:17:59 +00:00
< / td >
< td >
{ { stats . uploads } }
< / td >
< / tr >
< tr >
< td >
< router -link : to = "{name: 'manage.library.tracks', query: {q: getQuery('album_id', object.id) }}" >
2021-12-06 10:35:20 +00:00
< translate translate -context = " * / * / * " >
Tracks
< / translate >
2019-04-17 12:17:59 +00:00
< / r o u t e r - l i n k >
< / td >
< td >
2020-07-09 09:51:58 +00:00
{ { object . tracks _count } }
2019-04-17 12:17:59 +00:00
< / td >
< / tr >
< / tbody >
< / table >
< / section >
< / div >
< / div >
< / div >
< / template >
< / main >
< / template >