feat(front): Image fallback function

front/src/components/library/ArtistBase.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Track, Album, Artist, Library } from '~/types'
+import type { Track, Album, Artist, Library, Cover } from '~/types'
 
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -56,15 +56,41 @@ const wikipediaUrl = computed(() => `https://en.wikipedia.org/w/index.php?search
 const musicbrainzUrl = computed(() => object.value?.mbid ? `https://musicbrainz.org/artist/${object.value.mbid}` : null)
 const discogsUrl = computed(() => `https://discogs.com/search/?type=artist&title=${encodeURI(object.value?.name ?? '')}`)
 const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
-const cover = computed(() => object.value?.cover?.urls.large_square_crop
+
-  ? object.value.cover
+
-  : object.value?.albums.find(album => album.cover?.urls.large_square_crop)?.cover || `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
+
-)
+const cover =  computed(() => {
-const imageUrl = computed(() => cover.value?.urls.large_square_crop
+  const artistCover: Cover | undefined = object.value?.cover
-  ? store.getters['instance/absoluteUrl']
+
-    (cover.value.urls.large_square_crop)
+  const albumCover: Cover | undefined = object.value?.albums
-  : `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
+    .find(album => album.cover?.urls.large_square_crop)?.cover
+
+  const trackCover: Cover | undefined =
+    tracks.value?.find(
+      track => track.cover
     )
+    ?.cover
+
+  // TODO: Find out why artistCover in fake-data is null but the type is undefined
+  console.log("ARTIST", artistCover);
+  console.log("ALBUM", albumCover);
+  console.log("TRACK", trackCover);
+
+  // Use the fallback cover in case you can't find any cover for the artist:
+  const fallback : Cover = {
+      uuid: '',
+      urls: {
+          original: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
+          medium_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
+          large_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
+      }
+  }
+
+  return artistCover
+  || albumCover
+  || trackCover
+  || fallback
+})
 
 const { t } = useI18n()
 const labels = computed(() => ({
@@ -111,7 +137,7 @@ watch(() => props.id, fetchData, { immediate: true })
     <template v-if="object && !isLoading">
       <Layout flex>
         <img
-          v-lazy="imageUrl"
+          v-lazy="cover.urls.large_square_crop"
           :alt="object.name"
           class="channel-image"
         >
@@ -141,7 +167,6 @@ watch(() => props.id, fetchData, { immediate: true })
             <PlayButton
               :is-playable="isPlayable"
               split
-              class="vibrant"
               :artist="object"
             >
               {{ t('components.library.ArtistBase.button.play') }}