From 1c4cbfe21c3696e9377f8219ac8e0bff22589ca1 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Thu, 18 Dec 2025 19:59:23 +0100
Subject: [PATCH] platine as component

---
 app/components/Card.vue              |   2 +-
 app/components/Platine.vue           | 215 +++++++++++++++++----------
 app/components/deck/DeckPlaylist.vue |   2 +-
 app/layouts/empty.vue                |   5 +
 app/pages/draggable.vue              |   9 +-
 app/pages/mix.vue                    |  15 +-
 app/platine-tools/controls.ts        |  48 ------
 app/platine-tools/disc.ts            |   4 +-
 8 files changed, 155 insertions(+), 145 deletions(-)
 create mode 100644 app/layouts/empty.vue
 delete mode 100644 app/platine-tools/controls.ts

diff --git a/app/components/Card.vue b/app/components/Card.vue
index 6afc935..4805a02 100644
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="card w-56 h-80" :class="[
+  <article class="card w-56 h-80 min-w-56 min-h-80" :class="[
     isFaceUp ? 'face-up' : 'face-down',
     { 'current-track': playerStore.currentTrack?.id === track.id }
   ]">
diff --git a/app/components/Platine.vue b/app/components/Platine.vue
index 77dcdb2..07191dd 100644
--- a/app/components/Platine.vue
+++ b/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>
diff --git a/app/components/deck/DeckPlaylist.vue b/app/components/deck/DeckPlaylist.vue
index 2b1c4be..1c455e1 100644
--- a/app/components/deck/DeckPlaylist.vue
+++ b/app/components/deck/DeckPlaylist.vue
@@ -20,7 +20,7 @@
       <SelectCardSuit @change="onSuitChange" />
     </div>
     <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
-      <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" tabindex="i"
+      <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
         :is-face-up="isCardRevealed(track.id)" />
     </div>
   </div>
diff --git a/app/layouts/empty.vue b/app/layouts/empty.vue
new file mode 100644
index 0000000..8e18f92
--- /dev/null
+++ b/app/layouts/empty.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full flex flex-col items-center">
+    <slot />
+  </div>
+</template>
diff --git a/app/pages/draggable.vue b/app/pages/draggable.vue
index b4d2b62..1698a1b 100644
--- a/app/pages/draggable.vue
+++ b/app/pages/draggable.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="deck">
-    <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors relative z-30"
-      @click="cardStore.revealAllCards(tracks)">
-      reveal
-    </button>
     <draggable v-model="tracks" item-key="id" class="draggable-container" @start="drag = true" @end="onDragEnd">
       <template #item="{ element: track }">
-        <card :key="track.id" :track="track" tabindex="0" :is-face-up="track.isFaceUp" class="draggable-item"
-          @click="flipCard(track)" />
+        <card :key="track.id" :track="track" tabindex="0" is-face-up class="draggable-item" @click="flipCard(track)" />
       </template>
     </draggable>
   </div>
@@ -16,9 +11,7 @@
 <script setup>
 import { useDataStore } from '~/store/data'
 import draggable from 'vuedraggable'
-import { useCardStore } from '~/store/card'
 
-const cardStore = useCardStore()
 const drag = ref(false)
 const tracks = ref([])
 // Configuration du layout
diff --git a/app/pages/mix.vue b/app/pages/mix.vue
index eee2a57..e738374 100644
--- a/app/pages/mix.vue
+++ b/app/pages/mix.vue
@@ -1,22 +1,25 @@
 <template>
-  <Platine />
+  <Platine :track="track1" />
+  <!-- <card v-if="track1" :track="track1" is-face-up /> -->
+  <Platine :track="track2" />
+  <!-- <card v-if="track2" :track="track2" is-face-up /> -->
 </template>
 
 <script setup>
-import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
 
+const dataStore = useDataStore()
+const track1 = computed(() => dataStore.getTrackById(2023322))
+const track2 = computed(() => dataStore.getTrackById(2023329))
+
 // Configuration du layout
 definePageMeta({
-  layout: 'default'
+  layout: 'empty'
 })
 
-const uiStore = useUiStore()
-
 onMounted(async () => {
   const dataStore = useDataStore()
   await dataStore.loadData()
-  uiStore.listBoxes()
 })
 </script>
 
diff --git a/app/platine-tools/controls.ts b/app/platine-tools/controls.ts
deleted file mode 100644
index 74d4277..0000000
--- a/app/platine-tools/controls.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-class Controls {
-  public toggleButton: HTMLButtonElement;
-  public rewindButton: HTMLButtonElement;
-
-  public isPlaying: boolean = false;
-
-  public callbacks = {
-    // @ts-expect-error: unused var
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onIsplayingChanged: (isPlaying: boolean) => {},
-    onRewind: () => {},
-  };
-
-  constructor({
-    toggleButton,
-    rewindButton,
-  }: {
-    toggleButton: HTMLButtonElement;
-    rewindButton: HTMLButtonElement;
-  }) {
-    this.toggleButton = toggleButton;
-    this.rewindButton = rewindButton;
-
-    this.toggleButton.addEventListener('click', () => this.toggle());
-    this.rewindButton.addEventListener('click', () => this.rewind());
-
-    this.isDisabled = true;
-  }
-
-  set isDisabled(disabled: boolean) {
-    this.toggleButton.disabled = disabled;
-    this.rewindButton.disabled = disabled;
-  }
-
-  toggle() {
-    this.isPlaying = !this.isPlaying;
-
-    this.toggleButton.classList.toggle('is-active', this.isPlaying);
-
-    this.callbacks.onIsplayingChanged(this.isPlaying);
-  }
-
-  rewind() {
-    this.callbacks.onRewind();
-  }
-}
-
-export default Controls;
diff --git a/app/platine-tools/disc.ts b/app/platine-tools/disc.ts
index 34c627c..ce87515 100644
--- a/app/platine-tools/disc.ts
+++ b/app/platine-tools/disc.ts
@@ -50,7 +50,7 @@ type DiscProgress = {
   progress: number
 }
 class Disc {
-  public el: HTMLDivElement
+  public el: HTMLElement
 
   private _playbackSpeed = 1
   private _duration = 0
@@ -92,7 +92,7 @@ class Disc {
     onLoop: (params: DiscProgress) => {}
   }
 
-  constructor(el: HTMLDivElement) {
+  constructor(el: HTMLElement) {
     this.el = el
 
     this._center = getElementCenter(this.el)