platine / bobine progression

app/components/Platine.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="layout fixed z-40">
     <div class="disc bg-slate-900" id="disc">
+      <div
+        class="bobine bg-orange-300 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-5 rounded-full bg-esyellow">
       </div>
       <div class="disc-label rounded-full bg-cover bg-center">
@@ -9,6 +13,11 @@
       </div>
     </div>
   </div>
+  <div class="turns-display fixed bottom-12 left-0 right-0 text-center text-white text-sm z-50">
+    <div class="flex justify-center gap-4">
+      <span>Tours: {{ currentTurns.toFixed(2) }} / {{ totalTurns.toFixed(2) }}</span>
+    </div>
+  </div>
   <div class="control fixed bottom-0 z-50">
     <button class="control button rewind" id="rewind">&lt;&lt;</button>
     <button class="control button toggle" id="playToggle">power</button>
@@ -16,12 +25,27 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
 import Disc from '@/platine-tools/disc';
 import Sampler from '@/platine-tools/sampler';
 import Controls from '@/platine-tools/controls';
 
+const currentTurns = ref(0);
+const totalTurns = ref(0);
+const progressPercentage = ref(0);
+let discInstance: Disc | null = null;
+
+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
+  progressPercentage.value = Math.min(100, (disc.secondsPlayed / (disc as any)._duration) * 100);
+};
+
+// computed CARD
+
 onMounted(async () => {
-  const disc = new Disc(document.querySelector('#disc')!)
+  discInstance = new Disc(document.querySelector('#disc')!)
+  const disc = discInstance;
   const sampler = new Sampler()
 
   const controls = new Controls({
@@ -29,10 +53,15 @@ onMounted(async () => {
     rewindButton: document.querySelector('#rewind') as HTMLButtonElement,
   })
 
-  await sampler.loadTrack('https://files.erudi.fr/music/2004011815__connie_francis__siboney.mp3')
+  await sampler.loadTrack('https://files.erudi.fr/music/2020030515__hideyoshi__majinahanashi.mp3')
 
   controls.isDisabled = false
 
+  // Mettre à jour le nombre total de tours après le chargement de la piste
+  if (discInstance) {
+    updateTurns(discInstance);
+  }
+
   disc.setDuration(sampler.duration)
 
   disc.start()
@@ -48,7 +77,10 @@ onMounted(async () => {
   }
 
   disc.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
-    sampler.updateSpeed(playbackSpeed, isReversed, secondsPlayed)
+    sampler.updateSpeed(playbackSpeed, isReversed, secondsPlayed);
+    if (discInstance) {
+      updateTurns(discInstance);
+    }
   }
 
   controls.callbacks.onIsplayingChanged = (isPlaying) => {
@@ -102,20 +134,19 @@ onMounted(async () => {
   background-size: cover;
   width: 45%;
   aspect-ratio: 1/1;
-  background: no-repeat url(/logo.svg) center center;
+  background: no-repeat url(/favicon.svg) center center;
-  background-size: cover;
+  background-size: 30%;
   border-radius: 50%;
   pointer-events: none;
 }
 
 .disc-middle {
-  --dim: 10px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 10px;
+  width: 20px;
-  height: 10px;
+  height: 20px;
   background: rgb(26, 26, 26);
   border-radius: 50%;
 }