PLATINE drag to play & random tracks

app/components/Platine.vue

@@ -5,14 +5,14 @@
         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 + '%' }">
       </div>
-      <div class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
-      </div>
       <div class="disc-label rounded-full bg-cover bg-center">
         <img src="/favicon.svg" class="size-1/3">
         <div v-if="isLoadingTrack" class="loading-indicator">
           <div class="spinner"></div>
         </div>
       </div>
+      <div v-if="!isLoadingTrack" class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
+      </div>
     </div>
     <button class="rewind absolute left-0 bottom-0" @click="toggleMute">mute</button>
     <button class="power absolute right-0 bottom-0" :class="{ 'is-active': isPlaying }"
@@ -33,6 +33,7 @@ const totalTurns = ref(0)
 const progressPercentage = ref(0)
 const isPlaying = ref(false)
 const isLoadingTrack = ref(false)
+const isFirstDrag = ref(true)
 let disc: Disc | null = null
 let sampler: Sampler | null = null
 
@@ -42,14 +43,21 @@ const updateTurns = (disc: Disc) => {
   progressPercentage.value = Math.min(100, (disc.secondsPlayed / (disc as any)._duration) * 100)
 };
 
+const startPlayback = () => {
+  if (!disc || !sampler || !props.track || isPlaying.value) return
+
+  isPlaying.value = true
+  sampler.play(disc.secondsPlayed)
+  disc.powerOn()
+}
+
 const togglePlay = () => {
   if (!disc || !sampler || !props.track) return
 
   isPlaying.value = !isPlaying.value
 
   if (isPlaying.value) {
-    sampler.play(disc.secondsPlayed)
-    disc.powerOn()
+    startPlayback()
   } else {
     disc.powerOff()
   }
@@ -95,6 +103,18 @@ onMounted(async () => {
   disc.callbacks.onStop = () => {
     sampler?.pause()
   }
+
+  disc.callbacks.onDragStart = () => {
+    if (isFirstDrag.value) {
+      isFirstDrag.value = false
+      isPlaying.value = true
+      if (sampler && disc) {
+        sampler.play(disc.secondsPlayed)
+        disc.powerOn()
+      }
+    }
+  }
+
   disc.callbacks.onDragEnded = () => {
     if (!isPlaying.value) {
       return