add working player

app/components/molecule/player.vue

@@ -1,7 +1,14 @@
 <template>
-  <audio ref="audioRef" class="fixed z-50 bottom-0 left-1/2 -translate-x-1/2 w-1/2"
-    :src="playerStore.currentTrack ? playerStore.getCompilationUrlFromTrack(playerStore.currentTrack) : ''" controls
-    @timeupdate="updatePosition" @ended="onEnded" />
+  <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 class="hidden">
+      {{ Math.round(currentTime) }}
+      {{ Math.round(currentProgression) }}%
+    </p> -->
+    <audio ref="audioRef" class="w-full"
+      :src="playerStore.currentTrack ? playerStore.getCompilationUrlFromTrack(playerStore.currentTrack) : ''"
+      controls />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -10,39 +17,36 @@ import { usePlayerStore } from '~/store/player'
 
 const playerStore = usePlayerStore()
 const audioRef = ref<HTMLAudioElement | null>(null)
+const currentTime = ref(0)
+const lastValidProgression = ref(0)
 
-onMounted(() => {
-  if (audioRef.value) playerStore.audio = audioRef.value
+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
 })
 
-// Mettre à jour la position
-function updatePosition() {
-  if (audioRef.value) playerStore.position = audioRef.value.currentTime
-}
-
-function onEnded() {
-  playerStore.isPlaying = false
-}
-
-// Si la track change, mettre à jour le src et le start
-watch(
-  () => playerStore.currentTrack,
-  (newTrack) => {
-    if (newTrack && audioRef.value) {
-      audioRef.value.src = newTrack.url
-      audioRef.value.currentTime = newTrack.start || 0
-      if (playerStore.isPlaying) audioRef.value.play()
-    }
+function updateTime() {
+  if (audioRef.value) {
+    currentTime.value = audioRef.value.currentTime
   }
-)
+}
+
+onMounted(() => {
+  if (audioRef.value) {
+    playerStore.audio = audioRef.value
+    audioRef.value.addEventListener("timeupdate", updateTime)
+  }
+})
+
+onUnmounted(() => {
+  if (audioRef.value) {
+    audioRef.value.removeEventListener("timeupdate", updateTime)
+  }
+})
 </script>
-
-<style scoped>
-audio {
-  transition: all 1s;
-}
-
-audio[src=""] {
-  @apply -bottom-1.5 opacity-0
-}
-</style>