bucket cards management

app/components/Platine.vue

@@ -6,6 +6,8 @@
       <div
         class="bobine bg-slate-900 bg-opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full"
         :style="{ height: platineStore.progressPercentage + '%', width: platineStore.progressPercentage + '%' }"></div>
+      <img class="absolute size-full rounded-full" :src="platineStore.currentTrack?.coverId"
+        :alt="platineStore.currentTrack?.title">
 
       <div class="disc-label rounded-full bg-cover bg-center">
         <img src="/favicon.svg" class="size-1/3">
@@ -13,14 +15,14 @@
           <div class="spinner"></div>
         </div>
       </div>
-      <div class="w-full h-1/5 flex justify-center items-center text-8xl text-white absolute pointer-events-none">
-        {{ platineStore.currentTrack?.title }}
-        <br>
-        {{ platineStore.currentTrack?.artist.name }}
-      </div>
       <div v-if="!platineStore.isLoadingTrack" class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
       </div>
     </div>
+    <div class="w-full h-1/5 text-base">
+      {{ platineStore.currentTrack?.title }}
+      <br>
+      {{ platineStore.currentTrack?.artist?.name }}
+    </div>
   </div>
 </template>