platine as component

app/components/Platine.vue

@@ -1,112 +1,136 @@
 <template>
-  <div class="layout fixed z-40">
-    <div class="disc bg-slate-900" id="disc">
+  <div class="platine relative">
+    <div class="disc" :style="{ 'background-image': `url(${track?.coverId})` }" ref="discRef" 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"
+        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-5 rounded-full bg-esyellow">
+      <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">
-      </div>
-      <div class="disc-middle">
+        <img src="/favicon.svg" class="size-1/3">
+        <div v-if="isLoadingTrack" class="loading-indicator">
+          <div class="spinner"></div>
+        </div>
       </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>
+    <button class="rewind absolute left-0 bottom-0" @click="toggleMute">mute</button>
+    <button class="power absolute right-0 bottom-0" :class="{ 'is-active': isPlaying }"
+      @click="togglePlay">power</button>
   </div>
 </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';
+import { ref, onMounted, onUnmounted } from 'vue'
+import Disc from '@/platine-tools/disc'
+import Sampler from '@/platine-tools/sampler'
+import type { Track } from '~~/types/types'
 
-const currentTurns = ref(0);
-const totalTurns = ref(0);
-const progressPercentage = ref(0);
-let discInstance: Disc | null = null;
+const props = withDefaults(defineProps<{ track: Track | undefined }>(), {})
+const discRef = ref<HTMLElement>()
+const currentTurns = ref(0)
+const totalTurns = ref(0)
+const progressPercentage = ref(0)
+const isPlaying = ref(false)
+const isLoadingTrack = ref(false)
+let disc: Disc | null = null
+let sampler: Sampler | 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);
+  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
+const togglePlay = () => {
+  if (!disc || !sampler || !props.track) return
+
+  isPlaying.value = !isPlaying.value
+
+  if (isPlaying.value) {
+    sampler.play(disc.secondsPlayed)
+    disc.powerOn()
+  } else {
+    disc.powerOff()
+  }
+};
+
+const toggleMute = () => {
+  if (!sampler) return
+
+  sampler.mute()
+}
+
+const handleRewind = () => {
+  if (!disc || !sampler || !props.track) return
+
+  sampler.pause()
+  disc.rewind()
+  if (isPlaying.value) {
+    sampler.play(0)
+  }
+};
+
+const loadTrack = async () => {
+  if (!sampler || !props.track) return
+
+  isLoadingTrack.value = true
+  try {
+    await sampler.loadTrack(props.track.url)
+    if (disc) {
+      disc.setDuration(sampler.duration)
+      updateTurns(disc)
+      disc.powerOn()
+      disc.powerOff()
+    }
+  } finally {
+    isLoadingTrack.value = false
+  }
+}
 
 onMounted(async () => {
-  discInstance = new Disc(document.querySelector('#disc')!)
-  const disc = discInstance;
-  const sampler = new Sampler()
+  disc = new Disc(discRef.value!)
+  sampler = new Sampler()
 
-  const controls = new Controls({
-    toggleButton: document.querySelector('#playToggle') as HTMLButtonElement,
-    rewindButton: document.querySelector('#rewind') as HTMLButtonElement,
-  })
-
-  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.callbacks.onStop = () => {
+    sampler?.pause()
   }
-
-  disc.setDuration(sampler.duration)
-
-  disc.start()
-
-  disc.callbacks.onStop = () => sampler.pause()
-
   disc.callbacks.onDragEnded = () => {
-    if (!controls.isPlaying) {
+    if (!isPlaying.value) {
       return
     }
-
-    sampler.play(disc.secondsPlayed)
+    sampler?.play(disc?.secondsPlayed)
   }
 
   disc.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
-    sampler.updateSpeed(playbackSpeed, isReversed, secondsPlayed);
-    if (discInstance) {
-      updateTurns(discInstance);
+    sampler?.updateSpeed(playbackSpeed, isReversed, secondsPlayed);
+    if (disc) {
+      updateTurns(disc);
     }
   }
 
-  controls.callbacks.onIsplayingChanged = (isPlaying) => {
-    if (isPlaying) {
-      disc.powerOn()
-      sampler.play(disc.secondsPlayed)
-    } else {
-      disc.powerOff()
-    }
-  }
-
-  controls.callbacks.onRewind = () => {
-    disc.rewind()
-  }
 })
+
+watch(() => props.track, () => {
+  loadTrack()
+})
+
+onUnmounted(() => {
+  if (disc) {
+    disc.stop();
+    disc.powerOff();
+  }
+  if (sampler) {
+    sampler.pause();
+  }
+});
 </script>
 
-<style>
-.layout {
-  width: 100vw;
-  height: 100vw;
-  max-width: 500px;
-  max-height: 500px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+<style lang="scss">
+.platine {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 
 .disc {
@@ -116,6 +140,8 @@ onMounted(async () => {
   overflow: hidden;
   border-radius: 50%;
   cursor: grab;
+  background-position: center;
+  background-size: cover;
 }
 
 .disc.is-scratching {
@@ -134,10 +160,10 @@ onMounted(async () => {
   background-size: cover;
   width: 45%;
   aspect-ratio: 1/1;
-  background: no-repeat url(/favicon.svg) center center;
+  // background: no-repeat url(/favicon.svg) center center;
   background-size: 30%;
   border-radius: 50%;
-  pointer-events: none;
+  cursor: pointer !important;
 }
 
 .disc-middle {
@@ -166,11 +192,42 @@ onMounted(async () => {
     transform 0.05s ease-in;
 }
 
-.button.is-active {
+.power.is-active {
   transform: translate(1px, 2px);
+  color: red;
 }
 
 .button[disabled] {
   opacity: 0.5;
 }
+
+.loading-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  z-index: 10;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>