koel/resources/assets/js/components/album/AlbumInfo.vue

61 lines
1.8 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
2024-04-04 22:20:42 +00:00
<AlbumArtistInfo :mode="mode" data-testid="album-info">
<template #header>{{ album.name }}</template>
2022-04-15 14:24:30 +00:00
2024-04-04 22:20:42 +00:00
<template #art>
<AlbumThumbnail :entity="album" />
</template>
2022-04-15 14:24:30 +00:00
2024-04-04 22:20:42 +00:00
<template v-if="info">
<template v-if="info.wiki">
<ExpandableContentBlock v-if="mode === 'aside'">
<div v-html="info.wiki.full" />
</ExpandableContentBlock>
2022-04-15 14:24:30 +00:00
2024-04-04 22:20:42 +00:00
<div v-else v-html="info.wiki.full" />
2022-04-15 14:24:30 +00:00
</template>
2024-04-04 22:20:42 +00:00
<TrackList
v-if="info.tracks?.length"
:album="album"
:tracks="info.tracks"
class="mt-8"
2024-04-23 21:01:27 +00:00
data-testid="album-info-tracks"
2024-04-04 22:20:42 +00:00
/>
</template>
<template v-if="info" #footer>
Data &copy;
<a :href="info.url" rel="noopener" target="_blank">Last.fm</a>
</template>
</AlbumArtistInfo>
2022-04-15 14:24:30 +00:00
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2024-04-04 22:20:42 +00:00
import { defineAsyncComponent, ref, toRefs, watch } from 'vue'
import { mediaInfoService } from '@/services'
import { useThirdPartyServices } from '@/composables'
2022-04-15 14:24:30 +00:00
2024-04-29 19:50:03 +00:00
import AlbumThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
2024-04-04 22:20:42 +00:00
import AlbumArtistInfo from '@/components/ui/album-artist/AlbumOrArtistInfo.vue'
import ExpandableContentBlock from '@/components/ui/album-artist/ExpandableContentBlock.vue'
const props = withDefaults(defineProps<{ album: Album, mode?: MediaInfoDisplayMode }>(), { mode: 'aside' })
const TrackList = defineAsyncComponent(() => import('@/components/album/AlbumTrackList.vue'))
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const { album, mode } = toRefs(props)
2022-04-15 14:24:30 +00:00
const { useLastfm, useSpotify } = useThirdPartyServices()
2022-11-18 18:44:20 +00:00
const info = ref<AlbumInfo | null>(null)
2022-04-15 14:24:30 +00:00
watch(album, async () => {
info.value = null
if (useLastfm.value || useSpotify.value) {
info.value = await mediaInfoService.fetchForAlbum(album.value)
}
}, { immediate: true })
2022-04-15 14:24:30 +00:00
</script>