365 lines
11 KiB
Vue
365 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import type { Track, Artist, Library } from '~/types'
|
|
|
|
import { momentFormat } from '~/utils/filters'
|
|
import { computed, ref, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { getDomain } from '~/utils'
|
|
import { useStore } from '~/store'
|
|
|
|
import axios from 'axios'
|
|
|
|
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
|
|
import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
|
|
import EmbedWizard from '~/components/audio/EmbedWizard.vue'
|
|
import Layout from '~/components/ui/Layout.vue'
|
|
import Loader from '~/components/ui/Loader.vue'
|
|
import Modal from '~/components/ui/Modal.vue'
|
|
import PlayButton from '~/components/audio/PlayButton.vue'
|
|
import Button from '~/components/ui/Button.vue'
|
|
import Link from '~/components/ui/Link.vue'
|
|
import OptionsButton from '~/components/ui/button/Options.vue'
|
|
import Popover from '~/components/ui/Popover.vue'
|
|
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
|
|
import Alert from '~/components/ui/Alert.vue'
|
|
import Spacer from '~/components/ui/Spacer.vue'
|
|
|
|
import updateQueryString from '~/composables/updateQueryString'
|
|
import useErrorHandler from '~/composables/useErrorHandler'
|
|
import useReport from '~/composables/moderation/useReport'
|
|
import useLogger from '~/composables/useLogger'
|
|
|
|
interface Events {
|
|
(e: 'deleted'): void
|
|
}
|
|
|
|
interface Props {
|
|
id: number
|
|
}
|
|
|
|
const emit = defineEmits<Events>()
|
|
const props = defineProps<Props>()
|
|
|
|
const { report, getReportableObjects } = useReport()
|
|
|
|
const track = ref<Track | null>(null)
|
|
const artist = ref<Artist | null>(null)
|
|
const showEmbedModal = ref(false)
|
|
const showDeleteModal = ref(false)
|
|
const libraries = ref([] as Library[])
|
|
|
|
const logger = useLogger()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const store = useStore()
|
|
|
|
const domain = computed(() => getDomain(track.value?.fid ?? ''))
|
|
const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
|
|
const isEmbedable = computed(() => artist.value?.channel?.actor || publicLibraries.value.length)
|
|
const upload = computed(() => track.value?.uploads?.[0] ?? null)
|
|
const wikipediaUrl = computed(() => `https://en.wikipedia.org/w/index.php?search=${encodeURI(`${track.value?.title ?? ''} ${track.value?.artist_credit?.[0].artist?.name ?? ''}`)}`)
|
|
const discogsUrl = computed(() => `https://discogs.com/search/?type=release&title=${encodeURI(track.value?.album?.title ?? '')}&artist=${encodeURI(track.value?.artist_credit?.[0].artist?.name ?? '')}&title=${encodeURI(track.value?.title ?? '')}`)
|
|
const downloadUrl = computed(() => {
|
|
const url = store.getters['instance/absoluteUrl'](upload.value?.listen_url ?? '')
|
|
return store.state.auth.authenticated
|
|
? updateQueryString(url, 'token', encodeURI(store.state.auth.scopedTokens.listen ?? ''))
|
|
: url
|
|
})
|
|
|
|
const attributedToUrl = computed(() => router.resolve({
|
|
name: 'profile.full.overview',
|
|
params: {
|
|
username: track.value?.attributed_to.preferred_username,
|
|
domain: track.value?.attributed_to.domain
|
|
}
|
|
})?.href)
|
|
|
|
const { t } = useI18n()
|
|
const labels = computed(() => ({
|
|
title: t('components.library.TrackBase.title'),
|
|
download: t('components.library.TrackBase.button.download'),
|
|
more: t('components.library.TrackBase.button.more')
|
|
}))
|
|
|
|
const isLoading = ref(false)
|
|
const fetchData = async () => {
|
|
isLoading.value = true
|
|
logger.debug(`Fetching track "${props.id}"`)
|
|
try {
|
|
const trackResponse = await axios.get(`tracks/${props.id}/`, { params: { refresh: 'true' } })
|
|
track.value = trackResponse.data
|
|
const artistResponse = await axios.get(`artists/${trackResponse.data.artist.id}/`)
|
|
artist.value = artistResponse.data
|
|
} catch (error) {
|
|
useErrorHandler(error as Error)
|
|
}
|
|
isLoading.value = false
|
|
}
|
|
|
|
watch(() => props.id, fetchData, { immediate: true })
|
|
|
|
const remove = async () => {
|
|
isLoading.value = true
|
|
try {
|
|
await axios.delete(`tracks/${track.value?.id}`)
|
|
emit('deleted')
|
|
router.push({ name: 'library.artists.detail', params: { id: artist.value?.id } })
|
|
} catch (error) {
|
|
useErrorHandler(error as Error)
|
|
}
|
|
|
|
isLoading.value = false
|
|
}
|
|
|
|
const open = ref(false)
|
|
|
|
watch(showDeleteModal, (newValue) => {
|
|
if (newValue) {
|
|
// NOTE: Explicitly close the popover when delete modal opens
|
|
open.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Layout stack main>
|
|
<Loader
|
|
v-if="isLoading"
|
|
v-title="labels.title"
|
|
/>
|
|
<template v-if="track">
|
|
<Layout flex>
|
|
<img
|
|
v-if="track.album && track.album.cover"
|
|
v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
|
|
alt=""
|
|
class="channel-image"
|
|
>
|
|
<img
|
|
v-else
|
|
alt=""
|
|
class="channel-image"
|
|
src="../../assets/audio/default-cover.png"
|
|
>
|
|
|
|
<Layout stack style="flex: 1; gap: 8px;">
|
|
<Layout flex no-gap style="align-items: baseline; margin-bottom: 24px;">
|
|
<h1>{{ track.title }}</h1>
|
|
<Spacer grow />
|
|
<Button
|
|
v-if="upload"
|
|
:aria-label="labels.download"
|
|
:to="downloadUrl"
|
|
target="_blank"
|
|
primary
|
|
icon="bi-download"
|
|
:title="labels.download"
|
|
>
|
|
{{ labels.download }}
|
|
</Button>
|
|
</Layout>
|
|
<div class="meta">
|
|
<template v-if="track.attributed_to">
|
|
<Link
|
|
:to="attributedToUrl"
|
|
>
|
|
<i class="bi bi-at" />
|
|
{{ track.attributed_to.full_username }}
|
|
</Link>
|
|
<i class="bi bi-dot" />
|
|
</template>
|
|
|
|
<time
|
|
:title="track.creation_date"
|
|
:datetime="track.creation_date"
|
|
>
|
|
{{ momentFormat(new Date(track.creation_date), 'LL') }}
|
|
</time>
|
|
|
|
<template v-if="track.album">
|
|
<i class="bi bi-dot" />
|
|
<span>{{ track.album.title }}</span>
|
|
</template>
|
|
</div>
|
|
|
|
<Layout flex>
|
|
<PlayButton
|
|
class="vibrant"
|
|
split
|
|
:track="track"
|
|
/>
|
|
|
|
<Spacer h grow />
|
|
|
|
<TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
|
|
<TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
|
|
<Popover v-model:open="open">
|
|
<template #default="{ toggleOpen }">
|
|
<OptionsButton @click="toggleOpen" />
|
|
</template>
|
|
<template #items>
|
|
<PopoverItem
|
|
v-if="domain != store.getters['instance/domain']"
|
|
:to="track.fid"
|
|
target="_blank"
|
|
icon="bi-box-arrow-up-right"
|
|
>
|
|
{{ t('components.library.TrackBase.link.domain', { domain }) }}
|
|
</PopoverItem>
|
|
|
|
<PopoverItem
|
|
v-if="isEmbedable"
|
|
@click="showEmbedModal = !showEmbedModal"
|
|
icon="bi-code"
|
|
>
|
|
{{ t('components.library.TrackBase.button.embed') }}
|
|
</PopoverItem>
|
|
|
|
<PopoverItem
|
|
:to="wikipediaUrl"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
icon="bi-wikipedia"
|
|
>
|
|
{{ t('components.library.TrackBase.link.wikipedia') }}
|
|
</PopoverItem>
|
|
|
|
<PopoverItem
|
|
v-if="discogsUrl"
|
|
:to="discogsUrl"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
icon="bi-box-arrow-up-right"
|
|
>
|
|
{{ t('components.library.TrackBase.link.discogs') }}
|
|
</PopoverItem>
|
|
|
|
<PopoverItem
|
|
v-if="track.is_local"
|
|
icon="bi-pencil-fill"
|
|
:to="{ name: 'library.tracks.edit', params: { id: track.id } }"
|
|
>
|
|
{{ t('components.library.TrackBase.button.edit') }}
|
|
</PopoverItem>
|
|
|
|
<PopoverItem
|
|
v-if="artist &&
|
|
store.state.auth.authenticated &&
|
|
artist.channel &&
|
|
artist.attributed_to.full_username === store.state.auth.fullUsername"
|
|
@click="showDeleteModal = true"
|
|
icon="bi-trash"
|
|
>
|
|
{{ t('components.library.TrackBase.button.delete') }}
|
|
</PopoverItem>
|
|
|
|
<hr>
|
|
|
|
<PopoverItem
|
|
v-for="obj in getReportableObjects({ track })"
|
|
:key="obj.target.type + obj.target.id"
|
|
@click="report(obj)"
|
|
icon="bi-flag"
|
|
>
|
|
{{ obj.label }}
|
|
</PopoverItem>
|
|
|
|
<hr>
|
|
|
|
<PopoverItem
|
|
v-if="store.state.auth.availablePermissions['library']"
|
|
:to="{
|
|
name: 'manage.library.tracks.detail',
|
|
params: { id: track.id }
|
|
}"
|
|
icon="bi-wrench"
|
|
>
|
|
{{ t('components.library.TrackBase.link.moderation') }}
|
|
</PopoverItem>
|
|
|
|
<PopoverItem
|
|
v-if="store.state.auth.profile?.is_superuser"
|
|
:to="store.getters['instance/absoluteUrl'](`/api/admin/music/track/${track.id}`)"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
icon="bi-wrench"
|
|
>
|
|
{{ t('components.library.TrackBase.link.django') }}
|
|
</PopoverItem>
|
|
</template>
|
|
</Popover>
|
|
</Layout>
|
|
</Layout>
|
|
</Layout>
|
|
|
|
<Modal
|
|
v-if="isEmbedable"
|
|
v-model="showEmbedModal"
|
|
:title="t('components.library.TrackBase.modal.embed.header')"
|
|
>
|
|
<embed-wizard
|
|
:id="track.id"
|
|
type="track"
|
|
/>
|
|
|
|
<template #actions>
|
|
<Button
|
|
secondary
|
|
@click="showEmbedModal = false"
|
|
>
|
|
{{ t('components.library.TrackBase.button.cancel') }}
|
|
</Button>
|
|
</template>
|
|
</Modal>
|
|
<router-view
|
|
v-if="track"
|
|
:key="route.fullPath"
|
|
:track="track"
|
|
:object="track"
|
|
object-type="track"
|
|
@libraries-loaded="libraries = $event"
|
|
/>
|
|
</template>
|
|
|
|
<Modal
|
|
v-model="showDeleteModal"
|
|
:title="t('components.library.TrackBase.modal.delete.header')"
|
|
destructive
|
|
>
|
|
<template #alert>
|
|
<Alert red>
|
|
{{ t('components.library.TrackBase.modal.delete.content.warning') }}
|
|
</Alert>
|
|
</template>
|
|
|
|
<template #actions>
|
|
<Button
|
|
secondary
|
|
@click="showDeleteModal = false"
|
|
>
|
|
{{ t('components.library.TrackBase.button.cancel') }}
|
|
</Button>
|
|
<Button
|
|
destructive
|
|
:is-loading="isLoading"
|
|
@click="remove()"
|
|
>
|
|
{{ t('components.library.TrackBase.button.delete') }}
|
|
</Button>
|
|
</template>
|
|
</Modal>
|
|
</Layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.channel-image {
|
|
width: 300px;
|
|
height: 300px;
|
|
border: none;
|
|
}
|
|
.meta {
|
|
line-height: 48px;
|
|
}
|
|
</style>
|