evilspins/app/components/Platine.vue

<template>
  <div class="platine relative">
    <div class="disc" :style="{ 'background-image': `url(${track?.coverId})` }" ref="discRef" id="disc">
      <div
        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-1/12 rounded-full bg-esyellow">
      </div>
      <div class="disc-label rounded-full bg-cover bg-center">
        <img src="/favicon.svg" class="size-1/3">
        <div v-if="isLoadingTrack" class="loading-indicator">
          <div class="spinner"></div>
        </div>
      </div>
    </div>
    <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 type { Track } from '~~/types/types'

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

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 () => {
  disc = new Disc(discRef.value!)
  sampler = new Sampler()

  disc.callbacks.onStop = () => {
    sampler?.pause()
  }
  disc.callbacks.onDragEnded = () => {
    if (!isPlaying.value) {
      return
    }
    sampler?.play(disc?.secondsPlayed)
  }

  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 lang="scss">
.platine {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

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

.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%;
  cursor: pointer !important;
}

.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;
}

.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>