refactor(front): change artist cover to correct type

front/src/components/artist/Card.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
-import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
 import PlayButton from '~/components/audio/PlayButton.vue'
 import Card from '~/components/ui/Card.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 
-import type { Artist, Cover, Track } from '~/types'
+import type { Artist, Cover, Track, Album } from '~/types'
-
-const play = defineEmit<[artist: Artist]>()
 
 const albums = ref([] as Album[])
 const tracks = ref([] as Track[])
@@ -25,30 +21,18 @@ const props = defineProps<Props>()
 
 const { artist } = props
 
-let navigate = () => {}
-
-if (import.meta.env.PROD) {
-  const router = useRouter()
-  navigate = () =>
-    router.push({ name: 'library.artists.detail', params: { id: artist.id } })
-}
-
-const store = useStore()
-
-
 const cover = computed(() => {
-  const artistCover: Cover | undefined = artist.cover
+  const artistCover = artist.attachment_cover ?? undefined
 
-  const albumCover: Cover | undefined = artist.albums
+  const albumCover = albums.value?.find(
-    .find(album => album.cover?.urls.medium_square_crop)?.cover
+    (album: Album) => album.cover?.urls.medium_square_crop
+  )?.cover
 
-  const trackCover: Cover | undefined =
+  const trackCover = tracks.value?.find(
-    tracks.value?.find(
+    (track: Track) => track.cover
-      track => track.cover
+  )?.cover
-    )
-    ?.cover
 
-  const fallback : Cover = {
+  const fallback: Cover = {
     uuid: '',
     urls: {
       original: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
@@ -57,10 +41,7 @@ const cover =  computed(() => {
     }
   }
 
-  return artistCover
+  return artistCover || albumCover || trackCover || fallback
-  || albumCover
-  || trackCover
-  || fallback
 })
 
 </script>
@@ -76,7 +57,7 @@ const cover =  computed(() => {
     <template #topright>
       <PlayButton
         icon-only
-        :is-playable="artist.is_playable"
+        :is-playable="Boolean(albums.find(album => album.is_playable))"
         :artist="artist"
       />
     </template>
@@ -99,7 +80,7 @@ const cover =  computed(() => {
       <Spacer style="flex-grow: 1" />
       <PlayButton
         :dropdown-only="true"
-        :is-playable="artist.is_playable"
+        :is-playable="Boolean(albums.find(album => album.is_playable))"
         :artist="artist"
         discrete
       />

front/src/components/audio/ArtistCreditLabel.vue

@@ -32,8 +32,8 @@ const getRoute = (ac: ArtistCredit) => {
         :to="getRoute(ac)"
       >
         <img
-          v-if="ac.index === 0 && ac.artist.cover && ac.artist.cover.urls.original"
+          v-if="ac.index === 0 && ac.artist.attachment_cover && ac.artist.attachment_cover.urls.original"
-          v-lazy="store.getters['instance/absoluteUrl'](ac.artist.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](ac.artist.attachment_cover.urls.medium_square_crop)"
           alt=""
           :class="[{circular: ac.artist.content_category != 'podcast'}]"
         >

front/src/components/audio/ArtistLabel.vue

@@ -24,8 +24,8 @@ const route = computed(() => props.artist.channel
     :to="route"
   >
     <img
-      v-if="artist.cover && artist.cover.urls.original"
+      v-if="artist.attachment_cover && artist.attachment_cover.urls.original"
-      v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop)"
+      v-lazy="store.getters['instance/absoluteUrl'](artist.attachment_cover.urls.medium_square_crop)"
       alt=""
       :class="[{circular: artist.content_category != 'podcast'}]"
     >

front/src/components/audio/artist/Card.vue

@@ -17,9 +17,9 @@ const { t } = useI18n()
 
 const props = defineProps<Props>()
 
-const cover = computed(() => !props.artist.cover?.urls.original
+const cover = computed(() => !props.artist.attachment_cover?.urls.original
   ? props.artist.albums.find(album => !!album.cover?.urls.original)?.cover
-  : props.artist.cover
+  : props.artist.attachment_cover
 )
 
 const store = useStore()

front/src/components/audio/track/Modal.vue

@@ -114,7 +114,7 @@ const labels = computed(() => ({
           class="ui centered image"
         >
         <img
-          v-else-if="!!track.artist_credit.length && track.artist_credit[0].artist.cover"
+          v-else-if="!!track.artist_credit.length && track.artist_credit[0].artist.attachment_cover"
           v-lazy="getArtistCoverUrl(track.artist_credit)"
           alt=""
           class="ui centered image"

front/src/components/audio/track/Row.vue

@@ -139,8 +139,8 @@ const hover = ref(false)
         class="ui artist-track mini image"
       >
       <img
-        v-else-if="showArt && track.artist_credit?.length && track.artist_credit[0].artist.cover?.urls.original"
+        v-else-if="showArt && track.artist_credit?.length && track.artist_credit[0].artist.attachment_cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.artist_credit[0].artist.cover.urls.medium_square_crop) "
+        v-lazy="store.getters['instance/absoluteUrl'](track.artist_credit[0].artist.attachment_cover.urls.medium_square_crop) "
         alt=""
         class="ui artist-track mini image"
       >

front/src/components/library/AlbumBase.vue

@@ -165,10 +165,10 @@ const remove = async () => {
           class="channel-image"
         >
         <img
-          v-else-if="object.artist_credit && object.artist_credit[0] && object.artist_credit[0].artist.cover"
+          v-else-if="object.artist_credit && object.artist_credit[0] && object.artist_credit[0].artist.attachment_cover"
           alt=""
           class="channel-image"
-          :src="object.artist_credit[0].artist.cover.urls.large_square_crop"
+          v-lazy="object.artist_credit[0].artist.attachment_cover.urls.large_square_crop"
           />
         <img
           v-else
@@ -177,9 +177,10 @@ const remove = async () => {
           src="../../assets/audio/default-cover.png"
         >
         <!-- ({target}) => target -->
-        <!-- Header (TODO: Put into Header component) -->
+        <!-- Header (TODO: Put into Header component) Hint: Header is heavier fontweight than h1! -->
           <Layout stack style="flex: 1; gap: 8px;">
             <h1>{{ object.title }}</h1>
+            <Header :h1="object.title" />
             <artist-credit-label
               v-if="artistCredit"
               :artist-credit="artistCredit"
@@ -232,6 +233,17 @@ const remove = async () => {
               >
                 {{ labels.shuffle }}
               </Button>
+              <DangerousButton
+              v-if="artistCredit[0] &&
+                     store.state.auth.authenticated &&
+                     artistCredit[0].artist.channel &&
+                     artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
+                :is-loading="isLoading"
+                @confirm="remove()"
+                icon="bi-trash"
+              >
+                {{ t('components.library.AlbumDropdown.button.delete') }}
+              </DangerousButton>
               <Spacer h grow />
               <TrackFavoriteIcon v-if="store.state.auth.authenticated" :album="object" />
               <TrackPlaylistIcon v-if="store.state.auth.authenticated" :album="object" />

front/src/components/library/ArtistBase.vue

@@ -59,16 +59,14 @@ const publicLibraries = computed(() => libraries.value?.filter(library => librar
 
 
 const cover =  computed(() => {
-  const artistCover: Cover | undefined = object.value?.cover
+  const artistCover: Cover | undefined = object.value?.attachment_cover
 
   const albumCover: Cover | undefined = object.value?.albums
     .find(album => album.cover?.urls.large_square_crop)?.cover
 
-  const trackCover: Cover | undefined =
+  const trackCover = tracks.value?.find(
-    tracks.value?.find(
+    (track: Track) => track.cover
-      track => track.cover
+  )?.cover
-    )
-    ?.cover
 
   const fallback : Cover = {
       uuid: '',

front/src/composables/audio/queue.ts

@@ -125,7 +125,7 @@ export const useQueue = createGlobalState(() => {
       coverUrl: (
         (track.cover?.urls)
         || (track.album?.cover?.urls)
-        || ((track.artist_credit && track.artist_credit[0] && track.artist_credit[0].artist && track.artist_credit[0].artist.cover?.urls))
+        || ((track.artist_credit && track.artist_credit[0] && track.artist_credit[0].artist && track.artist_credit[0].artist.attachment_cover?.urls))
         || {}
       )?.original ?? new URL('../../assets/audio/default-cover.png', import.meta.url).href,
       sources: track.uploads.map(upload => ({