imporve cards animations

app/store/player.ts

@@ -11,7 +11,8 @@ export const usePlayerStore = defineStore('player', {
     audio: null as HTMLAudioElement | null,
     progressionLast: 0,
     isPlaying: false,
-    isLoading: false
+    isLoading: false,
+    history: [] as string[]
   }),
 
   actions: {
@@ -56,7 +57,7 @@ export const usePlayerStore = defineStore('player', {
 
     async playBox(box: Box) {
       // Si c'est la même box, on toggle simplement la lecture
-      if (this.currentTrack?.boxId === box.id) {
+      if (this.currentTrack?.boxId === box.id && this.currentTrack?.side === box.activeSide) {
         this.togglePlay()
         return
       }
@@ -188,6 +189,7 @@ export const usePlayerStore = defineStore('player', {
 
         // Lancer la lecture
         await audio.play()
+        this.history.push(this.currentTrack?.id)
         this.isLoading = false
       } catch (error) {
         console.error('Error loading/playing track:', error)
@@ -263,7 +265,17 @@ export const usePlayerStore = defineStore('player', {
 
   getters: {
     isCurrentBox: (state) => {
-      return (boxId: string) => boxId === state.currentTrack?.boxId
+      return (box: Box) => {
+        if (box.type === 'compilation') {
+          return box.id === state.currentTrack?.boxId && box.activeSide === state.currentTrack?.side
+        } else {
+          return box.id === state.currentTrack?.boxId
+        }
+      }
+    },
+
+    isCurrentSide: (state) => {
+      return (side: string) => side === state.currentTrack?.side
     },
 
     isPlaylistTrack: () => {