feat(front): Load fallback image from album (feature was present in components/audio/artist/Card.vue)

front/src/components/artist/Card.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import { computed } from 'vue'
+import { useStore } from '~/store'
 
 import type { Artist } from '~/types'
 
@@ -20,26 +22,54 @@ if (import.meta.env.PROD) {
   navigate = () =>
     router.push({ name: 'library.artists.detail', params: { id: artist.id } })
 }
-const image = artist.cover
-  ? artist.cover.urls.original
+
+const cover = computed(() => !props.artist.cover?.urls.original
+  ? props.artist.albums.find(album => !!album.cover?.urls.original)?.cover
+  : props.artist.cover
+)
+
+const store = useStore()
+const imageUrl = computed(() => cover.value?.urls.original
+  ? store.getters['instance/absoluteUrl'](cover.value.urls.medium_square_crop)
   : `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
+)
 </script>
 
 <template>
   <span style="position:absolute; font-size:.7em">/front/src/components/artist/Card.vue</span>
+
   <fw-card
     :title="artist.name"
-    :image="image"
+    :image="imageUrl"
     :tags="artist.tags"
-    @click="navigate"
     class="artist-card"
   >
     <fw-play-button @play="play(artist)" />
 
+    <tags-list
+      label-classes="tiny"
+      :truncate-size="20"
+      :limit="2"
+      :show-more="false"
+      :tags="artist.tags"
+    />
+
     <template #footer>
-      {{ $t("components.audio.artist.Card.meta.tracks", artist.tracks_count) }}
-      <fw-options-button />
+        <span v-if="artist.content_category === 'music'">
+            {{ $t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
+        </span>
+        <span v-else>
+            {{ $t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
+        </span>
     </template>
+
+    <router-link
+        class="discrete link"
+        :to="{name: 'library.artists.detail', params: {id: artist.id}}"
+      >
+      Go to artist
+    </router-link>
+
   </fw-card>
 </template>
 

front/src/components/library/Artists.vue

@@ -16,7 +16,6 @@ import axios from 'axios'
 import $ from 'jquery'
 
 import TagsSelector from '~/components/library/TagsSelector.vue'
-// import ArtistCard from '~/components/audio/artist/Card.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -227,7 +226,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       <div class="ui hidden divider" />
       <div
         v-if="result && result.results.length > 0"
-        style = "display:flex; flex-wrap:wrap; gap: 32px;"
+        style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
       >
         <div
           v-if="isLoading"
@@ -235,11 +234,6 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         >
           <div class="ui loader" />
         </div>
-        <ArtistCard
-         v-for="artist in result.results"
-         :key="artist.id"
-         :artist="artist"
-           />
         <artist-card
           v-for="artist in result.results"
           :key="artist.id"