play/pause works

app/components/compilations.vue

@@ -4,7 +4,9 @@
       :BoxState="boxStates[compilation.id]" @click="() => openCompilation(compilation.id)"
       :class="boxStates[compilation.id]" class="text-center">
       <button @click="playerStore.playCompilation(compilation.id)" v-if="boxStates[compilation.id] === 'selected'"
-        class="relative z-40 rounded-full size-24 bottom-1/2 text-2xl">▶</button>
+        class="relative z-40 rounded-full size-24 bottom-1/2 text-2xl">
+        {{ !playerStore.isPaused && playerStore.currentTrack?.compilationId === compilation.id ? 'II' : '▶' }}
+      </button>
       <deck :compilation="compilation" class="box-page" v-if="boxStates[compilation.id] === 'selected'" />
     </box>
   </div>
@@ -30,6 +32,7 @@ function openCompilation(id: string) {
       behavior: 'smooth'
     });
 
+    navigateTo(`/box/${id}`)
   }
 }
 

app/components/player.vue

@@ -1,50 +1,27 @@
 <template>
   <div class="fixed left-0 bottom-0 opacity-1 z-50 w-full bg-white transition-all"
     :class="{ '-bottom-20 opacity-0': !playerStore.currentTrack }">
-    <!-- <p>
-      {{ Math.round(currentTime) }}
-      {{ Math.round(currentProgression) }}%
-    </p> -->
     <audio ref="audioRef" class="w-full" :src="playerStore.currentTrack?.url || ''" controls />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { usePlayerStore } from '~/store/player'
 
 const playerStore = usePlayerStore()
 const audioRef = ref<HTMLAudioElement | null>(null)
-const currentTime = ref(0)
-const lastValidProgression = ref(0)
-
-const currentProgression = computed(() => {
-  if (!audioRef.value) return 0
-  const progression = (currentTime.value / audioRef.value.duration) * 100
-
-  if (!isNaN(progression)) {
-    lastValidProgression.value = progression
-  }
-
-  return lastValidProgression.value
-})
-
-function updateTime() {
-  if (audioRef.value) {
-    currentTime.value = audioRef.value.currentTime
-  }
-}
 
 onMounted(() => {
   if (audioRef.value) {
     playerStore.audio = audioRef.value
-    audioRef.value.addEventListener("timeupdate", updateTime)
+    audioRef.value.addEventListener("timeupdate", playerStore.updateTime)
   }
 })
 
 onUnmounted(() => {
   if (audioRef.value) {
-    audioRef.value.removeEventListener("timeupdate", updateTime)
+    audioRef.value.removeEventListener("timeupdate", playerStore.updateTime)
   }
 })
 </script>