From d18c1462a6e05e25ec67634216e221824202ac87 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 16 Jan 2025 15:58:04 +0100
Subject: [PATCH] fix(front): Use new split playbutton in albumcards and show
 default covers, related to #2384

---
 front/src/components/album/Card.vue | 56 +++++++++++++++++++----------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/front/src/components/album/Card.vue b/front/src/components/album/Card.vue
index 6b1d40c48..be9799608 100644
--- a/front/src/components/album/Card.vue
+++ b/front/src/components/album/Card.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { momentFormat } from '~/utils/filters'
 
-import PlayButton from '~/components/ui/button/Play.vue'
+import Play from '~/components/ui/button/Play.vue'
+import PlayButton from '~/components/audio/PlayButton.vue'
 import OptionsButton from '~/components/ui/button/Options.vue'
 import Card from '~/components/ui/Card.vue'
+import Link from '~/components/ui/Link.vue'
 import TagsList from '~/components/tags/List.vue'
 
 import type { Album } from '~/types'
@@ -38,19 +41,29 @@ if (import.meta.env.PROD) {
   <Card
     :title="album.title"
     :image="album.cover?.urls.original"
-    class="album-card"
+    :to="{name: 'library.albums.detail', params: {id: album.id}}"
   >
-    <PlayButton @play="play(album)" />
+    <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>
 
-    <a
+    <template
       v-for="ac in album.artist_credit"
       :key="ac.artist.id"
-      class="funkwhale link"
-      @click.stop="navigate('artist')"
     >
-      {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
-      {{ ac.joinphrase }}
-    </a>
+      <router-link
+        :to="{ name: 'library.artists.detail', params: { id: ac.artist.id }}"
+      >
+        {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
+      </router-link>
+      <span>{{ ac.joinphrase }}</span>
+    </template>
 
     <TagsList
       label-classes="tiny"
@@ -60,16 +73,21 @@ if (import.meta.env.PROD) {
       :tags="album.tags"
     />
 
-    <router-link
-      class="discrete link"
-      :to="{name: 'library.albums.detail', params: {id: album.id}}"
-    >
-      Go to album
-    </router-link>
-
-    <template #footer>
-      {{ t('components.audio.album.Card.meta.tracks', album.tracks?.length || 0) }}
-      <OptionsButton />
+    <template #action>
+      <span v-if="album.release_date">
+        {{ momentFormat(new Date(album.release_date), 'Y') }}
+      </span>
+      <span>
+        <i class="bi bi-music-note-list" />
+        {{ t('components.audio.album.Card.meta.tracks', album.tracks_count) }}
+      </span>
+      <Spacer style="flex-grow: 1" />
+      <PlayButton
+        id="playmenu"
+        :dropdown-only="true"
+        :is-playable="album.is_playable"
+        :album="album"
+      />
     </template>
   </Card>
 </template>