route v1

app/store/data.ts

@@ -10,59 +10,62 @@ export const useDataStore = defineStore('data', {
     boxes: [] as Box[], // Store your box data here
     artists: [] as Artist[], // Store artist data here
     tracks: [] as Track[], // Store track data here
-    isLoaded: false // Remember if data is already loaded
+    isLoaded: false, // Remember if data is already loaded
+    isLoading: true
   }),
 
   actions: {
     async loadData() {
       if (this.isLoaded) return
+      this.isLoading = true
+      try {
+        this.boxes = await $fetch<Box[]>('/api/boxes')
+        this.artists = await $fetch<Artist[]>('/api/artists')
+        const compilationTracks = await $fetch<Track[]>('/api/tracks/compilation')
+        const playlistTracks = await $fetch<Track[]>('/api/tracks/playlist')
 
-      this.boxes = await $fetch<Box[]>('/api/boxes')
-      this.artists = await $fetch<Artist[]>('/api/artists')
-      const compilationTracks = await $fetch<Track[]>('/api/tracks/compilation')
-      const playlistTracks = await $fetch<Track[]>('/api/tracks/playlist')
+        // Mapper les tracks pour remplacer l'artist avec un objet Artist cohérent
+        const artistMap = new Map(this.artists.map((a) => [a.id, a]))
+        const allTracks = [...(compilationTracks ?? []), ...(playlistTracks ?? [])]
 
-      // Mapper les tracks pour remplacer l'artist avec un objet Artist cohérent
-      const artistMap = new Map(this.artists.map((a) => [a.id, a]))
-      const allTracks = [...(compilationTracks ?? []), ...(playlistTracks ?? [])]
+        this.tracks = allTracks.map((track) => {
+          const a = track.artist as unknown
+          let artistObj: Artist
+          if (typeof a === 'number') {
+            artistObj = artistMap.get(a) ?? { id: a, name: String(a), url: '', coverId: '' }
+          } else if (typeof a === 'string') {
+            artistObj = { id: 0, name: a, url: '', coverId: '' }
+          } else if (a && typeof a === 'object' && 'id' in (a as any)) {
+            const idVal = (a as any).id as number | undefined
+            artistObj = idVal != null ? artistMap.get(idVal) ?? (a as Artist) : (a as Artist)
+          } else {
+            artistObj = { id: 0, name: '', url: '', coverId: '' }
+          }
 
-      this.tracks = allTracks.map((track) => {
-        const a = track.artist as unknown
-        let artistObj: Artist
-        if (typeof a === 'number') {
-          artistObj = artistMap.get(a) ?? { id: a, name: String(a), url: '', coverId: '' }
-        } else if (typeof a === 'string') {
-          artistObj = { id: 0, name: a, url: '', coverId: '' }
-        } else if (a && typeof a === 'object' && 'id' in (a as any)) {
-          const idVal = (a as any).id as number | undefined
-          artistObj = idVal != null ? artistMap.get(idVal) ?? (a as Artist) : (a as Artist)
-        } else {
-          artistObj = { id: 0, name: '', url: '', coverId: '' }
+          return {
+            ...track,
+            artist: artistObj
+          }
+        })
+        const favBox: Box = {
+          id: FAVORITES_BOX_ID,
+          type: 'playlist',
+          name: 'Favoris',
+          duration: 0,
+          tracks: [],
+          description: '',
+          color1: '#0f172a',
+          color2: '#1e293b',
+          color3: '#334155',
+          state: 'box-list'
         }
-
-        return {
-          ...track,
-          artist: artistObj
+        if (!this.boxes.find((b) => b.id === FAVORITES_BOX_ID)) {
+          this.boxes = [favBox, ...this.boxes]
         }
-      })
-      const favBox: Box = {
-        id: FAVORITES_BOX_ID,
-        type: 'playlist',
-        name: 'Favoris',
-        duration: 0,
-        tracks: [],
-        description: '',
-        color1: '#0f172a',
-        color2: '#1e293b',
-        color3: '#334155',
-        state: 'box-list'
+        this.isLoaded = true
+      } finally {
+        this.isLoading = false
       }
-      if (!this.boxes.find((b) => b.id === FAVORITES_BOX_ID)) {
-        this.boxes = [favBox, ...this.boxes]
-      }
-      this.isLoaded = true
-      const uiStore = useUiStore()
-      uiStore.closeBox()
     }
   },
 

app/store/player.ts

@@ -136,12 +136,34 @@ export const usePlayerStore = defineStore('player', {
       if (!isNaN(progression)) {
         this.progressionLast = progression
       }
+      // update current track when changing time in compilation
+      const cur = this.currentTrack
+      if (cur && cur.type === 'compilation') {
+        const dataStore = useDataStore()
+        const tracks = dataStore
+          .getTracksByboxId(cur.boxId)
+          .slice()
+          .filter((t) => t.type === 'compilation')
+          .sort((a, b) => (a.start ?? 0) - (b.start ?? 0))
 
-      // auto advance behavior: playlists use 'ended', compilations use time boundary
-      const track = this.currentTrack
-      if (!track) return
-      const dataStore = useDataStore()
-      const t = audio.currentTime
+        if (tracks.length > 0) {
+          const now = audio.currentTime
+          // find the last track whose start <= now (fallback to first track)
+          let found = tracks[0]
+          for (const t of tracks) {
+            const s = t.start ?? 0
+            if (s <= now) {
+              found = t
+            } else {
+              break
+            }
+          }
+          if (found && found.id !== cur.id) {
+            // only update metadata reference; do not reload audio
+            this.currentTrack = found
+          }
+        }
+      }
     }
   },
 

app/store/ui.ts

@@ -25,6 +25,13 @@ export const useUiStore = defineStore('ui', {
       this.searchQuery = q
     },
 
+    listBoxes() {
+      const dataStore = useDataStore()
+      dataStore.boxes.forEach((box) => {
+        box.state = 'box-list'
+      })
+    },
+
     selectBox(id: string) {
       const dataStore = useDataStore()
       dataStore.boxes.forEach((box) => {