set route /mix & /draggable

app/components/Platine.vue

@@ -1,16 +1,11 @@
 <template>
-  <div class="layout player fixed z-40"
-    :class="playerStore.currentTrack ? '-bottom-1/4 opacity-100' : '-bottom-1/2 opacity-0'">
+  <div class="layout fixed z-40">
     <div class="disc bg-slate-900" id="disc">
-      <div class="disc__que">
+      <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" :style="{
-        backgroundImage: playerStore.currentTrack?.coverId
-          ? `url(${playerStore.currentTrack.coverId})`
-          : 'none'
-      }">
+      <div class="disc-label rounded-full bg-cover bg-center">
       </div>
-      <div class="disc__middle">
+      <div class="disc-middle">
       </div>
     </div>
   </div>
@@ -24,9 +19,6 @@
 import Disc from '@/platine-tools/disc';
 import Sampler from '@/platine-tools/sampler';
 import Controls from '@/platine-tools/controls';
-import { usePlayerStore } from '~/store/player'
-
-const playerStore = usePlayerStore()
 
 onMounted(async () => {
   const disc = new Disc(document.querySelector('#disc')!)
@@ -37,7 +29,7 @@ onMounted(async () => {
     rewindButton: document.querySelector('#rewind') as HTMLButtonElement,
   })
 
-  await sampler.loadTrack('/jet.mp3')
+  await sampler.loadTrack('https://files.erudi.fr/music/2004011815__connie_francis__siboney.mp3')
 
   controls.isDisabled = false
 
@@ -75,10 +67,6 @@ onMounted(async () => {
 </script>
 
 <style>
-.player {
-  transition: all 1s ease-in-out;
-}
-
 .layout {
   width: 100vw;
   height: 100vw;
@@ -89,30 +77,12 @@ onMounted(async () => {
   align-items: center;
 }
 
-.disc-container {
-  width: 100%;
-
-  aspect-ratio: 1;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 50%;
-  border: 2px solid #000;
-  background: linear-gradient(45deg, #f0f0f0, #424242);
-}
-
 .disc {
   position: relative;
-
   aspect-ratio: 1;
   width: 100%;
-
   overflow: hidden;
-
   border-radius: 50%;
-
   cursor: grab;
 }
 
@@ -120,56 +90,32 @@ onMounted(async () => {
   cursor: grabbing;
 }
 
-.disc__que {
-  --dim: 20px;
-
+.disc-label {
   position: absolute;
-
-  top: 50%;
-  right: 30px;
-
-  width: var(--dim);
-  height: var(--dim);
-
-  background: var(--color-theme);
-  border-radius: 50%;
-}
-
-.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(/logo.svg) center center; */
+  background: no-repeat url(/logo.svg) center center;
   background-size: cover;
   border-radius: 50%;
-
   pointer-events: none;
 }
 
-.disc__middle {
+.disc-middle {
   --dim: 10px;
-
   position: absolute;
-
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-
-  width: var(--dim);
-  height: var(--dim);
-
+  width: 10px;
+  height: 10px;
   background: rgb(26, 26, 26);
   border-radius: 50%;
 }
@@ -182,13 +128,7 @@ onMounted(async () => {
   padding: 0.4rem;
   color: #fff;
   line-height: 1.3;
-
   cursor: pointer;
-
-  box-shadow:
-    1px 1px 0px 1px rgb(0 0 0),
-    0px 0px 0px 0px var(--color-theme);
-
   will-change: box-shadow;
   transition:
     box-shadow 0.2s ease-out,
@@ -197,7 +137,6 @@ onMounted(async () => {
 
 .button.is-active {
   transform: translate(1px, 2px);
-  box-shadow: 0px 0px 5px 1px var(--color-theme);
 }
 
 .button[disabled] {