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

app/pages/mix.vue

@@ -1,16 +1,16 @@
 <template>
+  <div class="mix">
     <Platine :track="track1" />
-  <!-- <card v-if="track1" :track="track1" is-face-up /> -->
     <Platine :track="track2" />
-  <!-- <card v-if="track2" :track="track2" is-face-up /> -->
+  </div>
 </template>
 
 <script setup>
 import { useDataStore } from '~/store/data'
 
 const dataStore = useDataStore()
-const track1 = computed(() => dataStore.getTrackById(2023322))
-const track2 = computed(() => dataStore.getTrackById(2023329))
+const track1 = ref(null)
+const track2 = ref(null)
 
 // Configuration du layout
 definePageMeta({
@@ -18,13 +18,43 @@ definePageMeta({
 })
 
 onMounted(async () => {
-  const dataStore = useDataStore()
   await dataStore.loadData()
+  track1.value = dataStore.getRandomPlaylistTrack()
+  track2.value = dataStore.getRandomPlaylistTrack()
 })
 </script>
 
 <style>
-.logo {
-  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
+.mix {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+}
+
+/* Écran portrait (plus haut que large) */
+@media (orientation: portrait) {
+  .mix {
+    flex-direction: column;
+  }
+
+  .platine {
+    height: 50vh;
+
+    .disc {
+      height: 100%;
+      width: auto;
+    }
+  }
+}
+
+/* Écran paysage (plus large que haut) */
+@media (orientation: landscape) {
+  .mix {
+    flex-direction: row;
+  }
+
+  .platine {
+    width: 50vw;
+  }
 }
 </style>

app/platine-tools/disc.ts

@@ -82,14 +82,10 @@ class Disc {
   public isReversed: boolean = false
 
   public callbacks = {
-    // @ts-expect-error: unused var
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDragStart: (): void => {},
     onDragEnded: (secondsPlayed: number): void => {},
-    onStop: () => {},
-
-    // @ts-expect-error: unused var
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onLoop: (params: DiscProgress) => {}
+    onStop: (): void => {},
+    onLoop: (params: DiscProgress): void => {}
   }
 
   constructor(el: HTMLElement) {
@@ -172,18 +168,25 @@ class Disc {
     // Empêcher le comportement par défaut pour éviter le défilement
     e.preventDefault()
 
+    // Appeler le callback onDragStart
+    this.callbacks.onDragStart()
+
     // Obtenir les coordonnées du toucher ou de la souris
     const getCoords = (event: PointerEvent | TouchEvent): { x: number; y: number } => {
-      if ('touches' in event) {
+      // Gestion des événements tactiles
+      const touchEvent = event as TouchEvent
+      if (touchEvent.touches?.[0]) {
         return {
-          x: event.touches[0].clientX,
-          y: event.touches[0].clientY
+          x: touchEvent.touches[0].clientX,
+          y: touchEvent.touches[0].clientY
         }
-      } else {
+      }
+
+      // Gestion des événements de souris
+      const mouseEvent = event as PointerEvent
       return {
-          x: event.clientX,
-          y: event.clientY
-        }
+        x: mouseEvent.clientX ?? this._center.x,
+        y: mouseEvent.clientY ?? this._center.y
       }
     }
 

app/store/data.ts

@@ -57,6 +57,12 @@ export const useDataStore = defineStore('data', {
       if (box) {
         box.activeSide = side
       }
+    },
+
+    getRandomPlaylistTrack() {
+      if (this.tracks.length === 0) return null
+      const randomIndex = Math.floor(Math.random() * this.tracks.length)
+      return this.tracks[randomIndex]
     }
   },