sql server + platine v2

app/components/Card.vue

@@ -1,7 +1,8 @@
 <template>
   <article :role="props.role" :class="[
     'card cursor-pointer',
-    isFaceUp ? 'face-up' : 'face-down'
+    isFaceUp ? 'face-up' : 'face-down',
+    showPlayButtonFaceUp ? 'show-play-button-face-up' : ''
   ]" :tabindex="props.tabindex" :aria-disabled="false" @click="$emit('click', $event)"
     @keydown.enter="$emit('click', $event)" @keydown.space.prevent="$emit('click', $event)">
     <div class="flip-inner" ref="cardElement">
@@ -21,9 +22,9 @@
 
         <!-- Cover -->
         <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl cursor-pointer">
-          <playButton :objectToPlay="card" />
-          <img v-if="isFaceUp" :src="props.card.url_image" alt="Pochette de l'album" loading="lazy"
-            class="w-full h-full object-cover object-center" />
+          <playButton />
+          <img :src="props.card.url_image" alt="Pochette de l'album" :loading="props.imageLoadingType"
+            @load="$emit('image-loaded', $event)" class="w-full h-full object-cover object-center" />
         </figure>
 
         <!-- Body -->
@@ -43,7 +44,7 @@
         class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden select-none">
         <figure class="h-full flex text-center rounded-xl justify-center items-center"
           :style="{ backgroundColor: cardColor }">
-          <playButton :objectToPlay="card" />
+          <playButton />
           <img src="/face-down.svg" />
         </figure>
       </footer>
@@ -54,17 +55,21 @@
 <script setup lang="ts">
 import type { Card } from '~~/types/types'
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'image-loaded'])
 
 const props = withDefaults(defineProps<{
   card: Card;
   isFaceUp?: boolean;
   role?: string;
   tabindex?: string | number;
+  imageLoadingType?: 'lazy' | 'eager';
+  showPlayButtonFaceUp?: boolean;
 }>(), {
   isFaceUp: false,
   role: 'button',
-  tabindex: '0'
+  tabindex: '0',
+  imageLoadingType: 'eager',
+  showPlayButtonFaceUp: false
 })
 
 import { getYearColor } from '~/utils/colors'
@@ -72,6 +77,11 @@ import { getYearColor } from '~/utils/colors'
 const cardColor = computed(() => getYearColor(props.card.year || 0))
 const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit === '♦'))
 
+/* loading states of the card */
+const isApiLoaded = ref(false)
+const isImageLoaded = ref(false)
+const isTrackLoaded = ref(false)
+
 </script>
 
 <style lang="scss">
@@ -163,9 +173,12 @@ const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit
     opacity: 0;
   }
 
-  .face-up:hover {
-    .play-button {
-      opacity: 1;
+  .face-up {
+
+    &:hover {
+      .play-button {
+        opacity: 1;
+      }
     }
 
     .flip-inner {
@@ -177,6 +190,20 @@ const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit
     @apply absolute bottom-1/2 top-28 opacity-0 hover:opacity-100;
   }
 
+  &.show-play-button {
+    .play-button {
+      opacity: 1;
+    }
+  }
+
+  &.show-play-button-face-up {
+    .face-up {
+      .play-button {
+        opacity: 1;
+      }
+    }
+  }
+
   .pochette:active,
   .face-down:active {
     .play-button {