koel/resources/assets/js/components/artist/ArtistInfo.vue

77 lines
2.3 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<article :class="mode" class="artist-info" data-testid="artist-info">
<h1 v-if="mode === 'aside'" class="name">
2022-04-15 14:24:30 +00:00
<span>{{ artist.name }}</span>
2022-07-15 07:23:55 +00:00
<button :title="`Play all songs by ${artist.name}`" class="control" type="button" @click.prevent="play">
2023-11-10 13:16:06 +00:00
<Icon :icon="faCirclePlay" size="xl" />
2022-04-15 14:24:30 +00:00
</button>
</h1>
<main>
2022-12-02 16:17:37 +00:00
<ArtistThumbnail v-if="mode === 'aside'" :entity="artist" />
2022-04-15 14:24:30 +00:00
<template v-if="info">
<div v-if="info.bio?.summary" class="bio">
2022-12-02 16:17:37 +00:00
<div v-if="showSummary" class="summary" data-testid="summary" v-html="info.bio.summary" />
<div v-if="showFull" class="full" data-testid="full" v-html="info.bio.full" />
2022-04-15 14:24:30 +00:00
<button v-if="showSummary" class="more" @click.prevent="showingFullBio = true">
2022-04-15 14:24:30 +00:00
Full Bio
</button>
</div>
<footer>
2022-06-10 10:47:46 +00:00
Data &copy;
<a :href="info.url" rel="openener" target="_blank">Last.fm</a>
2022-06-10 10:47:46 +00:00
</footer>
2022-04-15 14:24:30 +00:00
</template>
</main>
</article>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2022-07-15 07:23:55 +00:00
import { faCirclePlay } from '@fortawesome/free-solid-svg-icons'
import { computed, ref, toRefs, watch } from 'vue'
import { mediaInfoService, playbackService } from '@/services'
2022-11-18 18:44:20 +00:00
import { useRouter, useThirdPartyServices } from '@/composables'
2022-06-10 10:47:46 +00:00
import { songStore } from '@/stores'
2022-04-15 14:24:30 +00:00
2024-02-24 15:37:01 +00:00
import ArtistThumbnail from '@/components/ui/ArtistAlbumThumbnail.vue'
2022-04-15 14:24:30 +00:00
2022-07-10 09:31:55 +00:00
const props = withDefaults(defineProps<{ artist: Artist, mode?: MediaInfoDisplayMode }>(), { mode: 'aside' })
2022-04-15 17:00:08 +00:00
const { artist, mode } = toRefs(props)
2022-04-15 14:24:30 +00:00
2022-11-18 18:44:20 +00:00
const { go } = useRouter()
const { useLastfm, useSpotify } = useThirdPartyServices()
2022-06-10 10:47:46 +00:00
const info = ref<ArtistInfo | null>(null)
const showingFullBio = ref(false)
watch(artist, async () => {
showingFullBio.value = false
info.value = null
if (useLastfm.value || useSpotify.value) {
info.value = await mediaInfoService.fetchForArtist(artist.value)
}
}, { immediate: true })
2022-04-15 14:24:30 +00:00
2022-04-26 11:32:13 +00:00
const showSummary = computed(() => mode.value !== 'full' && !showingFullBio.value)
2022-04-15 17:00:08 +00:00
const showFull = computed(() => !showSummary.value)
2022-04-15 14:24:30 +00:00
const play = async () => {
2022-10-21 20:06:43 +00:00
playbackService.queueAndPlay(await songStore.fetchForArtist(artist.value))
2022-11-18 18:44:20 +00:00
go('queue')
}
2022-04-15 14:24:30 +00:00
</script>
<style lang="scss" scoped>
2022-04-15 14:24:30 +00:00
.artist-info {
@include artist-album-info();
.none {
margin-top: 1rem;
}
}
</style>