dupont release

app/components/Platine.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="platine" :class="{ 'loading': isLoadingTrack, 'mounted': isMounted, 'playing': isPlaying }" ref="platine">
-    <div v-if="true" class="debug">
+    <div v-if="false" class="debug">
       <button @click="Reverse">
         <b v-if="isReversed">reversed</b>
         <b v-else>normal</b>
@@ -20,8 +20,9 @@
         width: progressPercentage + '%'
       }"></div>
       <button class="power-button" @click="Power" @touchstart="Power" :disabled="isLoadingTrack">
-        <img class="macaron" src="/favicon.svg">
+        <img class="Macaron" src="/favicon.svg" v-if="!isEndOfTrack">
         <div class="spinner" v-if="isLoadingTrack" />
+        <img class="Macaron" @click="Rewind" src="/rewind.svg" v-if="isEndOfTrack" />
       </button>
       <div class="turn-point" v-if="!isLoadingTrack">
       </div>
@@ -42,6 +43,8 @@ const autoplay = props.autoplay ?? false
 // State
 const isLoadingTrack = ref(false)
 const isFirstPlay = ref(true)
+const isEndOfTrack = ref(false)
+
 const progressPercentage = ref(0)
 const currentTurns = ref(0)
 const totalTurns = ref(0)// Refs pour les instances
@@ -111,6 +114,7 @@ const updateTurns = () => {
     currentTurns.value = newTurns
     totalTurns.value = newTotalTurns
     progressPercentage.value = newProgressPercentage
+    isEndOfTrack.value = disc.value.secondsPlayed + 0.1 >= (disc.value as any)._duration
   }
 }
 
@@ -171,6 +175,9 @@ const cleanup = () => {
 }
 
 const Power = (e: MouseEvent) => {
+  if (isEndOfTrack.value) {
+    Rewind()
+  }
   togglePlay()
 }
 
@@ -221,6 +228,7 @@ const Rewind = async () => {
     }
 
     requestAnimationFrame(slowDown)
+    play()
   }
 
   const performRewind = () => {
@@ -324,6 +332,7 @@ watch(() => props.card, (newCard) => {
 .platine {
   overflow: hidden;
   position: relative;
+  display: flex;
   width: 100%;
   height: 100%;
 
@@ -365,12 +374,12 @@ watch(() => props.card, (newCard) => {
     transform-origin: center;
     width: 33%;
     height: 33%;
-    border-radius: 999px;
+    border-radius: 100%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 
-    .macaron {
+    .Macaron {
       position: absolute;
       filter: grayscale(1);
       transition: transform 0.1s, filter 0.8s;
@@ -382,13 +391,13 @@ watch(() => props.card, (newCard) => {
     }
 
     &:active {
-      .macaron {
+      .Macaron {
         transform: scale(0.8);
       }
     }
   }
 
-  &.playing .power-button .macaron {
+  &.playing .power-button .Macaron {
     filter: grayscale(0);
   }
 
@@ -426,7 +435,7 @@ watch(() => props.card, (newCard) => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    @apply relative bg-black bg-opacity-30 backdrop-blur-sm rounded-full;
+    @apply relative bg-black bg-opacity-60 backdrop-blur-sm rounded-full;
   }
 }
 </style>