draggable / touchable card v0.1

app/components/Platine.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="platine" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
     @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
-    <div class="disc" ref="discRef" :style="'background-image: url(' + coverUrl + ')'" id="disc">
+    <card v-if="currentTrack" :track="currentTrack" />
+    <div class="disc fixed" ref="discRef" :style="'background-image: url(/card-dock.svg)'" id="disc">
       <div
         class="bobine bg-slate-800 bg-opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full"
         :style="{ height: progressPercentage + '%', width: progressPercentage + '%' }">
@@ -37,12 +38,13 @@ const isDragOver = ref(false)
 const isFirstDrag = ref(true)
 const isLoadingTrack = ref(false)
 const isPlaying = ref(false)
-
-const coverUrl = computed(() => props.track?.coverId || '/card-dock.svg')
+const coverUrl = computed(() => currentTrack.value?.coverId || '/card-dock.svg')
 
 let disc: Disc | null = null
 let sampler: Sampler | null = null
 
+const currentTrack = ref()
+
 const updateTurns = (disc: Disc) => {
   currentTurns.value = disc.secondsPlayed * 0.75 // 0.75 tours par seconde (RPS)
   totalTurns.value = (disc as any)._duration * 0.75 // Accès à la propriété _duration privée
@@ -50,7 +52,7 @@ const updateTurns = (disc: Disc) => {
 };
 
 const startPlayback = () => {
-  if (!disc || !sampler || !props.track || isPlaying.value) return
+  if (!disc || !sampler || !currentTrack.value || isPlaying.value) return
 
   isPlaying.value = true
   sampler.play(disc.secondsPlayed)
@@ -58,7 +60,7 @@ const startPlayback = () => {
 }
 
 const togglePlay = () => {
-  if (!disc || !sampler || !props.track) return
+  if (!disc || !sampler || !currentTrack.value) return
 
   isPlaying.value = !isPlaying.value
 
@@ -75,27 +77,19 @@ const toggleMute = () => {
   sampler.mute()
 }
 
-const handleRewind = () => {
-  if (!disc || !sampler || !props.track) return
-
-  sampler.pause()
-  disc.rewind()
-  if (isPlaying.value) {
-    sampler.play(0)
-  }
-};
-
 const loadTrack = async (track: Track) => {
   if (!sampler || !track) return
 
+  currentTrack.value = track
   isLoadingTrack.value = true
   try {
-    await sampler.loadTrack(track.url)
+    await sampler.loadTrack(currentTrack.value.url)
     if (disc) {
       disc.setDuration(sampler.duration)
       updateTurns(disc)
+      sampler.play(0)
+      disc.secondsPlayed = 0
       disc.powerOn()
-      disc.powerOff()
     }
   } finally {
     isLoadingTrack.value = false
@@ -134,6 +128,7 @@ const onDrop = (e: DragEvent) => {
       const newTrack = JSON.parse(cardData)
       if (newTrack && newTrack.url) {
         loadTrack(newTrack)
+        disc?.powerOn()
       }
     } catch (error) {
       console.error('Erreur lors du traitement de la carte déposée', error)
@@ -175,9 +170,9 @@ onMounted(async () => {
 
 })
 
-watch(() => props.track, (newTrack) => {
-  if (newTrack) {
-    loadTrack(newTrack)
+watch(() => props.track, (propTrack) => {
+  if (propTrack) {
+    loadTrack(propTrack)
   }
 })
 
@@ -199,6 +194,14 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   padding: 20px;
+
+  .card {
+    position: absolute !important;
+    z-index: 99;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 50%);
+  }
 }
 
 .disc {