dupont release

app/components/Card.vue

@@ -13,10 +13,10 @@
         <Rank :card="props.card" />
 
         <!-- Cover -->
-        <figure class="flex-1 flex justify-center items-center overflow-hidden cursor-pointer">
+        <figure class="cover">
           <PlayButton />
-          <img :src="props.card.url_image" alt="Pochette de l'album" :loading="props.imageLoadingType"
-            @load="$emit('image-loaded', $event)" class="pochette w-full h-full object-cover object-center" />
+          <img :src="props.card.url_image" alt="cover-image de l'album" :loading="props.imageLoadingType"
+            @load="$emit('image-loaded', $event)" class="cover-image w-full h-full object-cover object-center" />
         </figure>
 
         <!-- Body -->
@@ -92,11 +92,7 @@ const isTrackLoaded = ref(false)
 /* Flip effect */
 .card {
   perspective: 1000px;
-  @apply transition-all scale-100 w-56 h-80 min-w-56 min-h-80;
-
-  .pochette {
-    border-radius: 0.75rem;
-  }
+  @apply transition-all scale-100 size-full;
 
   .flip-inner {
     position: relative;
@@ -121,6 +117,14 @@ const isTrackLoaded = ref(false)
     border-radius: 1rem;
     transform: rotateY(0deg);
     transition: box-shadow 0.6s;
+
+    .cover {
+      @apply flex-1 flex justify-center items-center overflow-hidden cursor-pointer;
+
+      .cover-image {
+        border-radius: 0.75rem;
+      }
+    }
   }
 
   .face-down {
@@ -200,7 +204,7 @@ const isTrackLoaded = ref(false)
     }
   }
 
-  .pochette:active,
+  .cover-image:active,
   .face-down:active {
     .play-button {
       @apply scale-90;

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>

app/components/PlayingCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="playing-card" :class="{ 'playing-card--platine-open': platineOpen }">
+  <section class="playing-card" :class="{ 'platine-open': platineOpen }">
     <Card :card="props.card!" :is-face-up="props.isFaceUp" @click="clickOnCard" :role="platineOpen ? 'img' : 'button'"
       showPlayButtonFaceUp />
     <Platine v-if="platineOpen && card" :card="card" autoplay />
@@ -15,7 +15,9 @@ const props = defineProps<{ card: Card, isFaceUp: boolean }>()
 const platineOpen = ref(false)
 
 const clickOnCard = () => {
-  platineOpen.value = !platineOpen.value
+  setTimeout(() => {
+    platineOpen.value = !platineOpen.value
+  }, 600);
 }
 </script>
 
@@ -23,16 +25,23 @@ const clickOnCard = () => {
 $open-speed: 0.4s;
 
 .playing-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  @apply size-card;
+  position: relative;
+
+  .card,
+  .platine {
+    height: 100%;
+    width: 100%;
+    transition: width $open-speed, height $open-speed, min-width $open-speed,
+      min-height $open-speed, transform 0.1s;
+  }
 
   :deep(.card) {
-    transition: width $open-speed, height $open-speed, transform 0.1s;
+    // transition: width $open-speed, height $open-speed, transform 0.1s;
     position: absolute;
 
     .face-up,
-    .pochette {
+    .cover {
       transition: border-radius $open-speed, box-shadow $open-speed;
 
       &:active {
@@ -43,7 +52,13 @@ $open-speed: 0.4s;
     }
   }
 
-  &--platine-open {
+  &.platine-open {
+    $open-size: 20rem;
+    width: $open-size;
+    height: $open-size;
+    min-height: $open-size;
+    min-width: $open-size;
+
     .card {
       pointer-events: none;
 
@@ -52,19 +67,13 @@ $open-speed: 0.4s;
       }
     }
 
-    .card,
-    .platine {
-      width: 100vmin;
-      height: 100vmin;
-    }
-
     &:deep(.card) {
       .face-up {
-        border-radius: 999px;
+        border-radius: 100%;
         @apply shadow-xl;
 
-        .pochette {
-          border-radius: 999px;
+        .cover {
+          border-radius: 100%;
         }
 
         .rank,

app/components/UI/CloseButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button ref="buttonRef">
-    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
       <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
       <g id="SVGRepo_iconCarrier">
@@ -34,6 +34,6 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 button {
-  @apply fixed bottom-4 md:top-4 left-4 size-20;
+  @apply bottom-4 md:top-4 left-4 size-20 fill-slate-600 bg-slate-500;
 }
 </style>