150 lines
4.1 KiB
Vue
150 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Artist, Track, Album, Library } from '~/types'
|
|
import type { ContentFilter } from '~/store/moderation'
|
|
|
|
import { ref, computed, reactive } from 'vue'
|
|
import { useStore } from '~/store'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import axios from 'axios'
|
|
|
|
import LibraryWidget from '~/components/federation/LibraryWidget.vue'
|
|
import TrackTable from '~/components/audio/track/Table.vue'
|
|
import TagsList from '~/components/tags/List.vue'
|
|
import AlbumCard from '~/components/album/Card.vue'
|
|
import Layout from '~/components/ui/Layout.vue'
|
|
import Heading from '~/components/ui/Heading.vue'
|
|
import Loader from '~/components/ui/Loader.vue'
|
|
import Link from '~/components/ui/Link.vue'
|
|
import Spacer from '~/components/ui/Spacer.vue'
|
|
import Button from '~/components/ui/Button.vue'
|
|
import Alert from '~/components/ui/Alert.vue'
|
|
|
|
import useErrorHandler from '~/composables/useErrorHandler'
|
|
|
|
interface Events {
|
|
(e: 'libraries-loaded', libraries: Library[]): void
|
|
}
|
|
|
|
interface Props {
|
|
object: Artist
|
|
tracks: Track[]
|
|
albums: Album[]
|
|
isLoadingAlbums: boolean
|
|
nextTracksUrl?: string | null
|
|
nextAlbumsUrl?: string | null
|
|
}
|
|
|
|
const { t } = useI18n()
|
|
|
|
const emit = defineEmits<Events>()
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
nextTracksUrl: null,
|
|
nextAlbumsUrl: null
|
|
})
|
|
|
|
const store = useStore()
|
|
|
|
const additionalAlbums = reactive([] as Album[])
|
|
const contentFilter = computed(() => store.getters['moderation/artistFilters']().find((filter: ContentFilter) => filter.target.id === props.object.id))
|
|
const allAlbums = computed(() => [...props.albums, ...additionalAlbums])
|
|
|
|
const isLoadingMoreAlbums = ref(false)
|
|
const loadMoreAlbumsUrl = ref(props.nextAlbumsUrl)
|
|
const loadMoreAlbums = async () => {
|
|
if (loadMoreAlbumsUrl.value === null) return
|
|
isLoadingMoreAlbums.value = true
|
|
|
|
try {
|
|
const response = await axios.get(loadMoreAlbumsUrl.value)
|
|
additionalAlbums.push(...additionalAlbums.concat(response.data.results))
|
|
loadMoreAlbumsUrl.value = response.data.next
|
|
} catch (error) {
|
|
useErrorHandler(error as Error)
|
|
}
|
|
|
|
isLoadingMoreAlbums.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Layout
|
|
v-if="object"
|
|
stack
|
|
>
|
|
<TagsList
|
|
v-if="object.tags && object.tags.length > 0"
|
|
style="margin-top: -16px;"
|
|
:tags="object.tags"
|
|
/>
|
|
<Alert
|
|
v-if="contentFilter"
|
|
blue
|
|
>
|
|
<p>
|
|
{{ t('components.library.ArtistDetail.message.filter') }}
|
|
</p>
|
|
<Link
|
|
class="right floated"
|
|
:to="{name: 'settings'}"
|
|
>
|
|
{{ t('components.library.ArtistDetail.link.filter') }}
|
|
</Link>
|
|
<Button
|
|
class="tiny"
|
|
@click="store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
|
|
>
|
|
{{ t('components.library.ArtistDetail.button.filter') }}
|
|
</Button>
|
|
</Alert>
|
|
<Loader v-if="isLoadingAlbums" />
|
|
<template v-else-if="albums && albums.length > 0">
|
|
<Heading
|
|
:h2="t('components.library.ArtistDetail.header.album')"
|
|
section-heading
|
|
/>
|
|
<Layout flex>
|
|
<album-card
|
|
v-for="album in allAlbums"
|
|
:key="album.id"
|
|
:album="album"
|
|
/>
|
|
<Spacer
|
|
h
|
|
grow
|
|
/>
|
|
<Button
|
|
v-if="loadMoreAlbumsUrl !== null"
|
|
primary
|
|
:is-loading="isLoadingMoreAlbums"
|
|
@click="loadMoreAlbums()"
|
|
>
|
|
{{ t('components.library.ArtistDetail.button.more') }}
|
|
</Button>
|
|
</Layout>
|
|
</template>
|
|
<template v-if="tracks.length > 0">
|
|
<Heading
|
|
:h2="t('components.library.ArtistDetail.header.track')"
|
|
section-heading
|
|
/>
|
|
<TrackTable
|
|
:is-artist="true"
|
|
:show-position="false"
|
|
:track-only="true"
|
|
:tracks="tracks.slice(0,5)"
|
|
/>
|
|
</template>
|
|
<Heading
|
|
:h2="t('components.library.ArtistDetail.header.library')"
|
|
section-heading
|
|
/>
|
|
<LibraryWidget
|
|
:url="'artists/' + object.id + '/libraries/'"
|
|
@loaded="emit('libraries-loaded', $event)"
|
|
>
|
|
{{ t('components.library.ArtistDetail.description.library') }}
|
|
</LibraryWidget>
|
|
</Layout>
|
|
</template>
|