imporve cards animations

app/components/PlayButton.vue

@@ -1,9 +1,7 @@
 <template>
   <button
     class="play-button rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
-    :class="{ loading: isLoading }"
-    :disabled="isLoading"
-  >
+    :class="{ loading: isLoading }" :disabled="isLoading">
     <template v-if="isLoading">
       <img src="/loader.svg" alt="Chargement" class="size-16" />
     </template>
@@ -20,26 +18,40 @@ import type { Box, Track } from '~/../types/types'
 const playerStore = usePlayerStore()
 const props = defineProps<{ objectToPlay: Box | Track }>()
 
+const isCurrentBox = computed(() => {
+  if ('activeSide' in props.objectToPlay) {
+    // Vérifier si la piste courante appartient à cette box
+    if (playerStore.currentTrack?.boxId === props.objectToPlay.id) {
+      // Si c'est une compilation, on vérifie le side actif
+      if (props.objectToPlay.type === 'compilation') {
+        return playerStore.currentTrack.side === props.objectToPlay.activeSide
+      }
+      return true
+    }
+    return false
+  }
+  return false
+})
+
+const isCurrentTrack = computed(() => {
+  if (!('activeSide' in props.objectToPlay)) {
+    return playerStore.currentTrack?.id === props.objectToPlay.id
+  }
+  return false
+})
+
 const isPlaying = computed(() => {
-  if (!playerStore.currentTrack) return false
-  return (
-    playerStore.isPlaying &&
-    (playerStore.currentTrack?.boxId === props.objectToPlay.id ||
-      playerStore.currentTrack?.id === props.objectToPlay.id)
-  )
+  return playerStore.isPlaying && (isCurrentTrack.value || isCurrentBox.value)
 })
 
 const isLoading = computed(() => {
-  if (!playerStore.currentTrack || !playerStore.isLoading) return false
-  return (
-    playerStore.currentTrack.boxId === props.objectToPlay.id ||
-    playerStore.currentTrack.id === props.objectToPlay.id
-  )
+  return playerStore.isLoading && (isCurrentTrack.value || isCurrentBox.value)
 })
 </script>
 
 <style>
-.loading {
+.loading,
+.play-button-changed {
   opacity: 1 !important;
 }
 </style>