104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import type { components } from '~/generated/types.ts'
|
|
|
|
import PlayButton from '~/components/audio/PlayButton.vue'
|
|
import Card from '~/components/ui/Card.vue'
|
|
import Spacer from '~/components/ui/Spacer.vue'
|
|
|
|
import type { Artist, Album } from '~/types'
|
|
|
|
const albums = ref([] as Album[])
|
|
|
|
interface Props {
|
|
artist: Artist | components['schemas']['ArtistWithAlbums'];
|
|
}
|
|
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const { artist } = props
|
|
|
|
if ('albums' in artist && Array.isArray(artist.albums)) {
|
|
albums.value = artist.albums
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Card
|
|
:title="artist.name"
|
|
class="artist-card"
|
|
:tags="artist.tags"
|
|
:to="{name: 'library.artists.detail', params: {id: artist.id}}"
|
|
small
|
|
style="align-self: flex-start;"
|
|
>
|
|
<template #topright>
|
|
<PlayButton
|
|
icon-only
|
|
:is-playable="true"
|
|
:artist="artist"
|
|
/>
|
|
</template>
|
|
|
|
<template #image>
|
|
<img
|
|
v-if="artist.cover"
|
|
v-lazy="artist.cover.urls.medium_square_crop"
|
|
:alt="artist.name"
|
|
:class="[artist.content_category === 'podcast' ? 'podcast-image' : 'channel-image']"
|
|
>
|
|
<i
|
|
v-else
|
|
class="bi bi-person-circle"
|
|
style="font-size: 167px; margin: 16px;"
|
|
/>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<span v-if="artist.content_category === 'music' && 'tracks_count' in artist">
|
|
{{ t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
|
|
</span>
|
|
<span v-else-if="'tracks_count' in artist">
|
|
{{ t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
|
|
</span>
|
|
<i
|
|
v-if="albums"
|
|
class="bi bi-dot"
|
|
/>
|
|
<span v-if="albums">
|
|
{{ t('components.audio.artist.Card.meta.albums', albums.length) }}
|
|
</span>
|
|
<Spacer style="flex-grow: 1" />
|
|
<PlayButton
|
|
:dropdown-only="true"
|
|
:is-playable="Boolean(albums.find(album => album.is_playable))"
|
|
:artist="artist"
|
|
discrete
|
|
/>
|
|
</template>
|
|
</Card>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.channel-image {
|
|
border-radius: 50%;
|
|
width: 168px;
|
|
height: 168px;
|
|
margin: 16px;
|
|
}
|
|
|
|
.podcast-image {
|
|
width: 168px;
|
|
height: 168px;
|
|
margin: 16px;
|
|
}
|
|
|
|
.play-button {
|
|
top: 16px;
|
|
right: 16px;
|
|
}
|
|
</style>
|