platine as component

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 }
   ]">

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 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
 
-onMounted(async () => {
-  discInstance = new Disc(document.querySelector('#disc')!)
-  const disc = discInstance;
-  const 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.setDuration(sampler.duration)
-
-  disc.start()
-
-  disc.callbacks.onStop = () => sampler.pause()
-
-  disc.callbacks.onDragEnded = () => {
-    if (!controls.isPlaying) {
-      return
-    }
+  isPlaying.value = !isPlaying.value
 
+  if (isPlaying.value) {
     sampler.play(disc.secondsPlayed)
-  }
-
-  disc.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
-    sampler.updateSpeed(playbackSpeed, isReversed, secondsPlayed);
-    if (discInstance) {
-      updateTurns(discInstance);
-    }
-  }
-
-  controls.callbacks.onIsplayingChanged = (isPlaying) => {
-    if (isPlaying) {
     disc.powerOn()
-      sampler.play(disc.secondsPlayed)
   } 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 () => {
+  disc = new Disc(discRef.value!)
+  sampler = new Sampler()
+
+  disc.callbacks.onStop = () => {
+    sampler?.pause()
+  }
+  disc.callbacks.onDragEnded = () => {
+    if (!isPlaying.value) {
+      return
+    }
+    sampler?.play(disc?.secondsPlayed)
   }
 
-  controls.callbacks.onRewind = () => {
-    disc.rewind()
+  disc.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
+    sampler?.updateSpeed(playbackSpeed, isReversed, secondsPlayed);
+    if (disc) {
+      updateTurns(disc);
     }
+  }
+
 })
+
+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>

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>

app/layouts/empty.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full flex flex-col items-center">
+    <slot />
+  </div>
+</template>

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

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>
 

app/platine-tools/controls.ts

@@ -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;

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)