evilspins/app/components/Platine.vue

<template>
  <div class="platine" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
    @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
    <card v-if="currentTrack" :track="currentTrack" />
    <div class="disc fixed" ref="discRef" :style="'background-image: url(/card-dock.svg)'" 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="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 v-if="!isLoadingTrack" class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
      </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 }>(), {})
const discRef = ref<HTMLElement>()
const currentTurns = ref(0)
const totalTurns = ref(0)
const progressPercentage = ref(0)
const drag = ref(false)
const isDragOver = ref(false)
const isFirstDrag = ref(true)
const isLoadingTrack = ref(false)
const isPlaying = ref(false)
const coverUrl = computed(() => currentTrack.value?.coverId || '/card-dock.svg')

let disc: Disc | null = null
let sampler: Sampler | null = null

const currentTrack = ref()

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 startPlayback = () => {
  if (!disc || !sampler || !currentTrack.value || isPlaying.value) return

  isPlaying.value = true
  sampler.play(disc.secondsPlayed)
  disc.powerOn()
}

const togglePlay = () => {
  if (!disc || !sampler || !currentTrack.value) return

  isPlaying.value = !isPlaying.value

  if (isPlaying.value) {
    startPlayback()
  } else {
    disc.powerOff()
  }
};

const toggleMute = () => {
  if (!sampler) return

  sampler.mute()
}

const loadTrack = async (track: Track) => {
  if (!sampler || !track) return

  currentTrack.value = track
  isLoadingTrack.value = true
  try {
    await sampler.loadTrack(currentTrack.value.url)
    if (disc) {
      disc.setDuration(sampler.duration)
      updateTurns(disc)
      sampler.play(0)
      disc.secondsPlayed = 0
      disc.powerOn()
    }
  } finally {
    isLoadingTrack.value = false
  }
}

// Gestion du drag and drop
const onDragEnter = (e: DragEvent) => {
  e.preventDefault()
  isDragOver.value = true
}

const onDragOver = (e: DragEvent) => {
  e.preventDefault()
  isDragOver.value = true
}

const onDragLeave = () => {
  isDragOver.value = false
}

const onDragStart = () => {
  drag.value = true
}

const onDragEnd = () => {
  drag.value = false
  isDragOver.value = false
}

const onDrop = (e: DragEvent) => {
  isDragOver.value = false
  const cardData = e.dataTransfer?.getData('application/json')
  if (cardData) {
    try {
      const newTrack = JSON.parse(cardData)
      if (newTrack && newTrack.url) {
        loadTrack(newTrack)
        disc?.powerOn()
      }
    } catch (error) {
      console.error('Erreur lors du traitement de la carte déposée', error)
    }
  }
}
onMounted(async () => {
  disc = new Disc(discRef.value!)
  sampler = new Sampler()

  disc.callbacks.onStop = () => {
    sampler?.pause()
  }

  disc.callbacks.onDragStart = () => {
    if (isFirstDrag.value) {
      isFirstDrag.value = false
      isPlaying.value = true
      if (sampler && disc) {
        sampler.play(disc.secondsPlayed)
        disc.powerOn()
      }
    }
  }

  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, (propTrack) => {
  if (propTrack) {
    loadTrack(propTrack)
  }
})

onUnmounted(() => {
  if (disc) {
    disc.stop();
    disc.powerOff();
  }
  if (sampler) {
    sampler.pause();
  }
});
</script>

<style lang="scss">
.platine {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;

  .card {
    position: absolute !important;
    z-index: 99;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
}

.disc {
  position: relative;
  background-color: white;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 50%;
  cursor: grab;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

  .dragoOver & {
    background-color: #4CAF50;
  }
}

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