evilspins/app/components/Platine.vue

<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">
      </div>
      <div class="disc-middle">
      </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>
  </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';

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 () => {
  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
    }

    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()
    }
  }

  controls.callbacks.onRewind = () => {
    disc.rewind()
  }
})
</script>

<style>
.layout {
  width: 100vw;
  height: 100vw;
  max-width: 500px;
  max-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.disc {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 50%;
  cursor: grab;
}

.disc.is-scratching {
  cursor: grabbing;
}

.disc-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-size: cover;
  width: 45%;
  aspect-ratio: 1/1;
  background: no-repeat url(/favicon.svg) center center;
  background-size: 30%;
  border-radius: 50%;
  pointer-events: none;
}

.disc-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: rgb(26, 26, 26);
  border-radius: 50%;
}

.button {
  border-radius: 0;
  border: none;
  background: rgb(69, 69, 69);
  font-size: 0.75rem;
  padding: 0.4rem;
  color: #fff;
  line-height: 1.3;
  cursor: pointer;
  will-change: box-shadow;
  transition:
    box-shadow 0.2s ease-out,
    transform 0.05s ease-in;
}

.button.is-active {
  transform: translate(1px, 2px);
}

.button[disabled] {
  opacity: 0.5;
}
</style>