compose elt v0.1

app/components/Platine.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="platine relative">
-    <div class="disc" :style="{ 'background-image': `url(${track?.coverId})` }" ref="discRef" id="disc">
+  <div class="platine" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
+    @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
+    <div class="disc" ref="discRef" :style="'background-image: url(' + coverUrl + ')'" 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 + '%' }">
@@ -26,14 +27,19 @@ 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 props = withDefaults(defineProps<{ track?: Track }>(), {})
 const discRef = ref<HTMLElement>()
 const currentTurns = ref(0)
 const totalTurns = ref(0)
 const progressPercentage = ref(0)
-const isPlaying = ref(false)
-const isLoadingTrack = ref(false)
+const drag = ref(false)
+const isDragOver = ref(false)
 const isFirstDrag = ref(true)
+const isLoadingTrack = ref(false)
+const isPlaying = ref(false)
+
+const coverUrl = computed(() => props.track?.coverId || '/card-dock.svg')
+
 let disc: Disc | null = null
 let sampler: Sampler | null = null
 
@@ -79,12 +85,12 @@ const handleRewind = () => {
   }
 };
 
-const loadTrack = async () => {
-  if (!sampler || !props.track) return
+const loadTrack = async (track: Track) => {
+  if (!sampler || !track) return
 
   isLoadingTrack.value = true
   try {
-    await sampler.loadTrack(props.track.url)
+    await sampler.loadTrack(track.url)
     if (disc) {
       disc.setDuration(sampler.duration)
       updateTurns(disc)
@@ -96,6 +102,44 @@ const loadTrack = async () => {
   }
 }
 
+// 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)
+      }
+    } 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()
@@ -131,8 +175,10 @@ onMounted(async () => {
 
 })
 
-watch(() => props.track, () => {
-  loadTrack()
+watch(() => props.track, (newTrack) => {
+  if (newTrack) {
+    loadTrack(newTrack)
+  }
 })
 
 onUnmounted(() => {
@@ -149,12 +195,15 @@ onUnmounted(() => {
 <style lang="scss">
 .platine {
   overflow: hidden;
+  position: relative;
   width: 100%;
   height: 100%;
+  padding: 20px;
 }
 
 .disc {
   position: relative;
+  background-color: white;
   aspect-ratio: 1;
   width: 100%;
   overflow: hidden;
@@ -162,6 +211,11 @@ onUnmounted(() => {
   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 {