platine transition

app/components/Platine.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="platine pointer-events-none" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
-    @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
+  <div class="platine pointer-events-none" :class="{ 'loading': platineStore.isLoadingTrack, 'mounted': isMounted }"
+    ref="platine">
     <div class="disc pointer-events-auto fixed" ref="discRef" :style="'background-image: url(/card-dock.svg)'"
       id="disc">
       <div
         class="bobine bg-slate-900 bg-opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full"
         :style="{ height: platineStore.progressPercentage + '%', width: platineStore.progressPercentage + '%' }"></div>
-      <img class="absolute size-full rounded-full" :src="platineStore.currentTrack?.coverId"
-        :alt="platineStore.currentTrack?.title">
+      <img class="cover" :src="platineStore.currentTrack?.coverId" :alt="platineStore.currentTrack?.title">
 
       <div class="disc-label rounded-full bg-cover bg-center">
         <img src="/favicon.svg" class="size-1/3">
@@ -34,41 +33,12 @@ import type { Track } from '~~/types/types'
 const props = defineProps<{ track?: Track }>()
 const platineStore = usePlatineStore()
 const discRef = ref<HTMLElement>()
-const isDragOver = ref(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 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) {
-        platineStore.loadTrack(newTrack)
-      }
-    } catch (error) {
-      console.error('Erreur lors du traitement de la carte déposée', error)
-    }
-  }
-}
+const platine = ref<HTMLElement>()
+const isMounted = ref(false)
 
 // Initialisation du lecteur
 onMounted(() => {
+  isMounted.value = true
   if (discRef.value) {
     platineStore.initPlatine(discRef.value)
   }
@@ -76,6 +46,7 @@ onMounted(() => {
 
 // Nettoyage
 onUnmounted(() => {
+  isMounted.value = false
   platineStore.cleanup()
 })
 
@@ -195,6 +166,20 @@ watch(() => props.track, (newTrack) => {
   z-index: 10;
 }
 
+.cover {
+  position: absolute;
+  border-radius: 100%;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  transition: opacity 3s ease;
+
+  .loading & {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+}
+
 .spinner {
   width: 40px;
   height: 40px;

app/layouts/default.vue

@@ -1,12 +1,14 @@
 <template>
   <slot />
   <Bucket />
-  <Platine />
+  <Platine v-if="playerStore.currentTrack" />
 </template>
 
 <script setup lang="ts">
 import type { Track } from '~~/types/types'
+import { usePlayerStore } from '~/store/player'
 
+const playerStore = usePlayerStore()
 const onCardDropped = (card: Track) => {
   console.log('Carte déposée dans le bucket:', card)
 }
@@ -16,16 +18,17 @@ const onCardDropped = (card: Track) => {
 .bucket,
 .platine {
   position: fixed;
-  bottom: 0;
+  bottom: -100%;
   right: 0;
+  height: auto;
 }
 
 .bucket {
   z-index: 70;
   bottom: -260px;
-  transition: bottom 0.3s ease;
   width: 100%;
   overflow-x: scroll;
+  transition: bottom .3s ease;
 
   &:hover,
   .card-dragging & {
@@ -38,9 +41,13 @@ const onCardDropped = (card: Track) => {
 }
 
 .platine {
+  bottom: -100%;
+  transition: bottom 2s ease;
+
+  &.mounted {
     z-index: 60;
-  bottom: -70%;
-  transition: bottom 0.3s ease;
-  /* width: 25%; */
+    bottom: 0;
+    width: 25%;
+  }
 }
 </style>