fix(front): Use new split playbutton in artistcards and show default covers, related to #2384

front/src/components/album/Card.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import { computed } from 'vue'
+import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 import { momentFormat } from '~/utils/filters'
 
@@ -35,23 +37,21 @@ if (import.meta.env.PROD) {
     ? router.push({ name: 'library.albums.detail', params: { id: album.id } })
     : router.push({ name: 'library.artists.detail', params: { id: firstArtist?.id } })
 }
+
+const store = useStore()
+const imageUrl = computed(() => props.album.cover?.urls.original
+  ? store.getters['instance/absoluteUrl'](props.album.cover?.urls.medium_square_crop)
+  : `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
+)
 </script>
 
 <template>
   <Card
     :title="album.title"
-    :image="album.cover?.urls.original"
+    :image="imageUrl"
+    :tags="album.tags"
     :to="{name: 'library.albums.detail', params: {id: album.id}}"
   >
-    <template #image
-      v-if="!album.cover || !album.cover.urls.original"
-    >
-      <div
-        :class="[{'default-cover': !album.cover || !album.cover.urls.original}]"
-        style="height: 200px; background-repeat: no-repeat; margin: 39px;"
-      >
-      </div>
-    </template>
 
     <template
       v-for="ac in album.artist_credit"
@@ -74,6 +74,7 @@ if (import.meta.env.PROD) {
     />
 
     <template #action>
+      <Spacer :size="8" />
       <span v-if="album.release_date">
         {{ momentFormat(new Date(album.release_date), 'Y') }}
       </span>

front/src/components/artist/Card.vue

@@ -4,6 +4,7 @@ import { computed } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
+import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 import Card from '~/components/ui/Card.vue'
 
@@ -42,15 +43,12 @@ const imageUrl = computed(() => cover.value?.urls.original
 </script>
 
 <template>
-  <span style="position:absolute; font-size:.7em">/front/src/components/artist/Card.vue</span>
-
   <Card
     :title="artist.name"
     :image="imageUrl"
     :tags="artist.tags"
-    class="artist-card"
+    :to="{name: 'library.artists.detail', params: {id: artist.id}}"
   >
-    <fw-play-button @play="play(artist)" />
 
     <TagsList
       label-classes="tiny"
@@ -60,22 +58,24 @@ const imageUrl = computed(() => cover.value?.urls.original
       :tags="artist.tags"
     />
 
-    <template #footer>
-        <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 #action>
+      <Spacer :size="8" />
+      <i class="bi bi-music-note-list" />
+      <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>
+      <Spacer style="flex-grow: 1" />
+      <PlayButton
+        id="playmenu"
+        :dropdown-only="true"
+        :is-playable="artist.is_playable"
+        :artist="artist"
+      />
     </template>
 
-    <router-link
-        class="discrete link"
-        :to="{name: 'library.artists.detail', params: {id: artist.id}}"
-      >
-      Go to artist
-    </router-link>
-
   </Card>
 </template>