WIP starbook demo

2026-02-10 07:31:31 +01:00
parent 7fa6f6ccc8
commit 7be09dd12d
17 changed files with 516 additions and 914 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,8 +1,36 @@
 <template>
-  <div class="min-h-screen bg-gray-100">
+  <div class="min-h-screen" @keydown.esc="resetFocus">
    <NuxtRouteAnnouncer />
    <NuxtLayout>
-      <NuxtPage />
+      <NuxtPage ref="pageContent" />
    </NuxtLayout>
  </div>
 </template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const pageContent = ref < HTMLElement | null > (null)
+
+const resetFocus = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    // On déplace le focus sur l'élément racine
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur()
+    }
+
+    // On force le focus sur le body
+    document.body.focus()
+  }
+}
+
+// Ajout du gestionnaire d'événement au montage du composant
+onMounted(() => {
+  window.addEventListener('keydown', resetFocus)
+})
+
+// Nettoyage du gestionnaire d'événement lors du démontage du composant
+onUnmounted(() => {
+  window.removeEventListener('keydown', resetFocus)
+})
+</script>
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -4,27 +4,19 @@
    isFaceUp ? 'face-up' : 'face-down',
    showPlayButtonFaceUp ? 'show-play-button-face-up' : ''
  ]" :tabindex="props.tabindex" :aria-disabled="false" @click="$emit('click', $event)"
-    @keydown.enter="$emit('click', $event)" @keydown.space.prevent="$emit('click', $event)">
+    @keydown.enter="$emit('click', $event)">
    <div class="flip-inner" ref="cardElement">
      <!-- Face-Up -->
      <main
-        class="face-up backdrop-blur-sm border-2 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden">
+        class="face-up backdrop-blur-sm border-2 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all shadow-lg flex flex-col overflow-hidden">

-        <div class="flex items-center justify-center size-7 absolute top-7 right-7">
-          <div class="suit text-7xl absolute"
-            :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.card?.suit]">
-            <img :src="`/${props.card?.suit}.svg`" />
-          </div>
-          <div class="rank text-white font-bold absolute -mt-1">
-            {{ props.card?.rank }}
-          </div>
-        </div>
+        <Rank :card="props.card" />

        <!-- Cover -->
-        <figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl cursor-pointer">
-          <playButton />
+        <figure class="flex-1 flex justify-center items-center overflow-hidden cursor-pointer">
+          <PlayButton />
          <img :src="props.card.url_image" alt="Pochette de l'album" :loading="props.imageLoadingType"
-            @load="$emit('image-loaded', $event)" class="w-full h-full object-cover object-center" />
+            @load="$emit('image-loaded', $event)" class="pochette w-full h-full object-cover object-center" />
        </figure>

        <!-- Body -->
@@ -44,7 +36,7 @@
        class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden select-none">
        <figure class="h-full flex text-center rounded-xl justify-center items-center"
          :style="{ backgroundColor: cardColor }">
-          <playButton />
+          <PlayButton />
          <img src="/face-down.svg" />
        </figure>
      </footer>
@@ -75,7 +67,6 @@ const props = withDefaults(defineProps<{
 import { getYearColor } from '~/utils/colors'

 const cardColor = computed(() => getYearColor(props.card.year || 0))
-const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit === '♦'))

 /* loading states of the card */
 const isApiLoaded = ref(false)
@@ -103,6 +94,10 @@ const isTrackLoaded = ref(false)
  perspective: 1000px;
  @apply transition-all scale-100 w-56 h-80 min-w-56 min-h-80;

+  .pochette {
+    border-radius: 0.75rem;
+  }
+
  .flip-inner {
    position: relative;
    width: 100%;
@@ -123,6 +118,7 @@ const isTrackLoaded = ref(false)
  }

  .face-up {
+    border-radius: 1rem;
    transform: rotateY(0deg);
    transition: box-shadow 0.6s;
  }
@@ -158,7 +154,7 @@ const isTrackLoaded = ref(false)
      @apply shadow-2xl;
      transition:
        box-shadow 0.6s,
-        transform 0.6s;
+        transform 6s;
    }
  }

--- a/app/components/Platine.vue
+++ b/app/components/Platine.vue
@@ -1,49 +1,43 @@
 <template>
-  <div class="platine" :class="{ 'loading': isLoadingCard, 'mounted': isMounted }" ref="platine">
+  <div class="platine" :class="{ 'loading': isLoadingTrack, 'mounted': isMounted, 'playing': isPlaying }" ref="platine">
+    <div v-if="true" class="debug">
+      <button @click="Reverse">
+        <b v-if="isReversed">reversed</b>
+        <b v-else>normal</b>
+      </button>
+      <button @click="Rewind">
+        rewind
+      </button>
+      <div>{{ progressPercentage }}</div>
+      <div>{{ currentSpeed }}</div>
+    </div>
    <div class="disc" ref="discRef" id="disc">
      <div class="bobine" :style="{
        height: progressPercentage + '%',
        width: progressPercentage + '%'
      }"></div>
-      <div class="power-button" @mousedown.stop @click.stop="handlePowerButtonClick">
-        <img class="power-logo" src="/favicon.svg">
-        <div class="power-loading" v-if="isLoadingCard">
-          <div class="spinner"></div>
-        </div>
+      <button class="power-button" @click="Power" @touchstart="Power" :disabled="isLoadingTrack">
+        <img class="macaron" src="/favicon.svg">
+        <div class="spinner" v-if="isLoadingTrack" />
+      </button>
+      <div class="turn-point" v-if="!isLoadingTrack">
      </div>
-      <div class="turn-point" v-if="!isLoadingCard">
-      </div>
-    </div>
-    <div class="debug">
-      <b>progressPercentage</b>: <br>
-      </br>{{ Math.round(progressPercentage) }}%
-      <br>
-      <b>Disc</b>: <br>
-      </br>{{ Math.round(disc?.secondsPlayed || 0) }}sec
-      <br>
-      </br>{{ Math.round(sampler?.duration || 0) }}sec
-      <br>
-      <!-- <pre>{{ sampler }}</pre> -->
-      isPlaying:
-      </br>{{ isPlaying }}
-      <br>
-      <b>isFirstDrag</b>: <br>
-      </br>{{ isFirstDrag }}
    </div>
  </div>
 </template>

 <script setup lang="ts">
 import type { Card } from '~~/types/types'
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
 import Disc from '~/utils/platine/disc'
 import Sampler from '~/utils/platine/sampler'

-const props = defineProps<{ card?: Card }>()
+const props = defineProps<{ card?: Card, autoplay?: boolean }>()
+const autoplay = props.autoplay ?? false

 // State
-const isLoadingCard = ref(false)
-const isFirstDrag = ref(true)
+const isLoadingTrack = ref(false)
+const isFirstPlay = ref(true)
 const progressPercentage = ref(0)
 const currentTurns = ref(0)
 const totalTurns = ref(0)// Refs pour les instances
@@ -56,6 +50,8 @@ const platine = ref<HTMLElement>()
 const isMounted = ref(false)

 const isPlaying = computed(() => Math.abs(Math.round(sampler.value?.currentSpeed || 0)) !== 0)
+const isReversed = computed(() => disc.value?.isReversed || false)
+const currentSpeed = computed(() => sampler.value?.currentSpeed || 0)

 // Actions
 const initPlatine = (element: HTMLElement) => {
@@ -72,23 +68,13 @@ const initPlatine = (element: HTMLElement) => {
    }

    disc.value.callbacks.onDragStart = () => {
-      // console.log('[DISC] On Drag Start')
-      if (isFirstDrag.value) {
-        isFirstDrag.value = false
-        // togglePlay()
-        if (sampler.value && disc.value) {
-          sampler.value.play(disc.value.secondsPlayed)
-          disc.value.powerOn()
-          // console.log('[DISC] Power ON')
-        }
+      // Activer le son à chaque fois qu'on glisse, pas seulement au premier play
+      if (sampler.value && disc.value) {
+        // On joue toujours le son quand on glisse, même après une pause
+        sampler.value.play(disc.value.secondsPlayed || 0)
      }
    }

-    disc.value.callbacks.onDragEnded = () => {
-      // console.log('[DISC] On Drag END')
-      sampler.value?.play(disc.value?.secondsPlayed || 0)
-    }
-
    disc.value.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
      // Ne mettre à jour que si nécessaire et s'assurer que la position est valide
      if (Math.abs((sampler.value?.currentSpeed || 0) - playbackSpeed) > 0.01) {
@@ -106,10 +92,11 @@ const updateTurns = () => {
  const newTurns = disc.value.secondsPlayed * 0.75
  const newTotalTurns = (disc.value as any)._duration * 0.75

-  // Calcul du pourcentage de progression pour l'affichage visuel (22% à 100%)
-  const minPercentage = 22
+  // Calcul du pourcentage de progression pour l'affichage visuel (17% à 100%)
+  const minPercentage = 17
+  const maxPercentage = 100
  const progressRatio = disc.value.secondsPlayed / (disc.value as any)._duration
-  const newProgressPercentage = minPercentage + (progressRatio * (100 - minPercentage))
+  const newProgressPercentage = minPercentage + (progressRatio * (maxPercentage - minPercentage))

  // Ne mettre à jour que si les valeurs ont changé de manière significative
  if (
@@ -127,7 +114,7 @@ const loadCard = async (card: Card) => {
  // console.log('[LOAD CARD]', card)
  if (!sampler.value || !card) return

-  isLoadingCard.value = true
+  isLoadingTrack.value = true
  // console.log(disc.value)
  try {
    await sampler.value.loadTrack(card.url_audio)
@@ -137,12 +124,12 @@ const loadCard = async (card: Card) => {
      updateTurns()
    }
  } finally {
-    isLoadingCard.value = false
+    isLoadingTrack.value = false
  }
 }

 const play = (position = 0) => {
-  // console.log('[PLAY]')
+  isFirstPlay.value = false
  if (!disc.value || !sampler.value || !props.card) return

  sampler.value.play(position)
@@ -179,11 +166,24 @@ const cleanup = () => {
  }
 }

-const handlePowerButtonClick = (e: MouseEvent) => {
-  e.stopPropagation() // Empêcher la propagation de l'événement
-  e.preventDefault() // Empêcher tout comportement par défaut
+const Power = (e: MouseEvent) => {
  togglePlay()
-  return false // Empêcher tout autre comportement
+}
+
+const Reverse = () => {
+  if (!disc.value || !sampler.value) return
+
+  // Sauvegarder la position actuelle
+  const currentPosition = disc.value.secondsPlayed || 0
+  const wasPlaying = !disc.value.isStopped()
+
+  // Inverser la direction du disque et du sampler
+  disc.value.reverse()
+  sampler.value.reverse(wasPlaying ? currentPosition : 0)
+}
+
+const Rewind = async () => {
+  // ...
 }

 const handleKeyDown = (e: KeyboardEvent) => {
@@ -194,14 +194,17 @@ const handleKeyDown = (e: KeyboardEvent) => {
 }

 // Initialisation du lecteur
-onMounted(() => {
+onMounted(async () => {
  isMounted.value = true
  if (discRef.value) {
    initPlatine(discRef.value)
-    loadCard(props.card!)
+    await loadCard(props.card!)
+    if (autoplay) {
+      await nextTick()
+      play()
+    }
  }

-  // Ajouter l'écouteur d'événement clavier
  window.addEventListener('keydown', handleKeyDown)
 })

@@ -224,134 +227,111 @@ watch(() => props.card, (newCard) => {

 <style lang="scss">
 .platine {
-  pointer-events: none;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
-  padding: 20px;
-}

-.disc {
-  pointer-events: auto;
-  position: fixed;
-  background-color: transparent;
-  position: relative;
-  aspect-ratio: 1;
-  width: 100%;
-  overflow: hidden;
-  border-radius: 50%;
-  cursor: grab;
-  background-position: center;
-  background-size: cover;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+  .disc {
+    pointer-events: auto;
+    position: fixed;
+    background-color: transparent;
+    position: relative;
+    aspect-ratio: 1;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 50%;
+    cursor: grab;
+    background-position: center;
+    background-size: cover;
+    padding: 14px;

-  .loading & {
-    box-shadow: none;
-  }
-}
-
-.turn-point {
-  @apply absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow;
-}
-
-.disc.is-scratching {
-  cursor: grabbing;
-}
-
-.power-button {
-  border-radius: 999px;
-  background-size: cover;
-  background-position: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  width: 45%;
-  aspect-ratio: 1/1;
-  // background: no-repeat url(/favicon.svg) center center;
-  background-size: 30%;
-  border-radius: 50%;
-  cursor: pointer !important;
-
-  .power-logo {
-    @apply size-1/2 bg-black rounded-full p-5;
+    .loading & {
+      box-shadow: none;
+    }
  }

-  .power-loading {
+  .turn-point {
+    @apply absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow;
+  }
+
+  .disc.is-scratching {
+    cursor: grabbing;
+  }
+
+  .power-button {
+    position: absolute;
+    z-index: 100;
+    cursor: pointer;
+    transition: all 0.1s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform-origin: center;
+    width: 33%;
+    height: 33%;
+    border-radius: 999px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .macaron {
+      position: absolute;
+      filter: grayscale(1);
+      transition: transform 0.1s, filter 0.8s;
+      @apply size-2/3;
+    }
+
+    .spinner {
+      @apply size-1/2;
+    }
+
+    &:active {
+      .macaron {
+        transform: scale(0.8);
+      }
+    }
+  }
+
+  &.playing .power-button .macaron {
+    filter: grayscale(0);
+  }
+
+  .disc-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
+    width: 20px;
+    height: 20px;
+    background: rgb(26, 26, 26);
    border-radius: 50%;
  }
-}

-.disc-middle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 20px;
-  height: 20px;
-  background: rgb(26, 26, 26);
-  border-radius: 50%;
-}
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    // @apply md:border-8;
+  }

-.button {
-  border-radius: 0;
-  border: none;
-  background: rgb(69, 69, 69);
-  font-size: 0.75rem;
-  padding: 0.4rem;
-  color: #fff;
-  line-height: 1.3;
-  cursor: pointer;
-  will-change: box-shadow;
-  transition:
-    box-shadow 0.2s ease-out,
-    transform 0.05s ease-in;
-}
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }

-.power.is-active {
-  transform: translate(1px, 2px);
-  color: red;
-}
-
-.button[disabled] {
-  opacity: 0.5;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(255, 255, 255, 0.3);
-  border-top-color: #fff;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
+  .bobine {
+    width: 17%;
+    height: 17%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    @apply relative bg-black bg-opacity-30 backdrop-blur-sm rounded-full;
  }
 }
-
-.bobine {
-  @apply bg-slate-900 bg-opacity-50 backdrop-blur absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full;
-}
-
-.debug {
-  @apply fixed top-4 right-4 bg-slate-200 rounded-md p-2;
-}
 </style>
--- a/app/components/Rank.vue
+++ b/app/components/Rank.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="rank flex items-center justify-center size-7 absolute top-7 right-7">
+    <div class="suit text-7xl absolute" :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.card?.suit]">
+      <img :src="`/${props.card?.suit}.svg`" />
+    </div>
+    <div class="rank text-white font-bold absolute -mt-1">
+      {{ props.card?.rank }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '~~/types/types';
+
+const props = defineProps<{ card?: Card }>()
+
+const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit === '♦'))
+</script>
+
+<style>
+.rank {
+  transition: opacity 0.5s ease-in-out;
+}
+</style>
--- a/app/components/UI/CloseButton.vue
+++ b/app/components/UI/CloseButton.vue
@@ -0,0 +1,39 @@
+<template>
+  <button ref="buttonRef">
+    <svg viewBox="0 0 24 24" fill="none" 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">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3165 19.0976 14.6834 19.0976 14.2929 18.7071L8.46963 12.8839C7.98148 12.3957 7.98148 11.6043 8.46963 11.1161L14.2929 5.29289C14.6834 4.90237 15.3165 4.90237 15.7071 5.29289Z"
+          fill="#0F1729"></path>
+      </g>
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const buttonRef = ref<HTMLButtonElement | null>(null)
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && buttonRef.value) {
+    buttonRef.value.click()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+})
+</script>
+
+<style scoped lang="scss">
+button {
+  @apply fixed bottom-4 md:top-4 left-4 size-20;
+}
+</style>
--- a/app/components/UI/PlayButton.vue
+++ b/app/components/UI/PlayButton.vue
@@ -1,7 +1,5 @@
 <template>
-  <button tabindex="-1"
-    class="play-button pointer-events-none rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
-    :class="{ loading: isLoading }" :disabled="isLoading">
+  <button tabindex="-1" class="play-button" :class="{ loading: isLoading }" :disabled="isLoading">
    <template v-if="props.isLoading">
      <img src="/loader.svg" alt="Chargement" class="size-16" />
    </template>
@@ -21,7 +19,11 @@ const props = withDefaults(defineProps<{
 })
 </script>

-<style>
+<style scoped lang="scss">
+.play-button {
+  @apply pointer-events-none rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-100 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold;
+}
+
 .loading,
 .play-button-changed {
  opacity: 1 !important;
--- a/app/pages/card/[slug].vue
+++ b/app/pages/card/[slug].vue
@@ -19,7 +19,7 @@ useHead({
 })

 const clickOnSlugCard = () => {
-  isFaceUp.value = true
+  //
 }

 const imageLoaded = () => {
@@ -28,7 +28,7 @@ const imageLoaded = () => {

 onMounted(() => {
  setTimeout(() => {
-    clickOnSlugCard()
+    isFaceUp.value = true
  }, 700)
 })
 </script>
--- a/app/pages/random.vue
+++ b/app/pages/random.vue
@@ -1,8 +1,8 @@
 <template>
-  <section class="flex justify-center items-center h-screen">
-    <div class="aspect-square size-[100vmin] max-h-screen max-w-screen overflow-hidden">
-      <Platine :card="card" />
-    </div>
+  <section class="platine-card" :class="{ 'platine-card--platine-open': platineOpen }">
+    <Card :card="card!" :is-face-up @click="clickOnCard" :role="platineOpen ? 'img' : 'button'" showPlayButtonFaceUp />
+    <Platine v-if="platineOpen && card" :card="card" autoplay />
+    <CloseButton v-if="platineOpen" @click="platineOpen = false" />
  </section>
 </template>

@@ -11,9 +11,84 @@ import type { Card } from '~~/types/types'

 const { data: card, pending, error } = await useFetch<Card>('/api/card/random')

+const isFaceUp = ref(false)
+const platineOpen = ref(false)
+
 useHead({
  title: computed(() =>
    card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
  )
 })
+
+onMounted(() => {
+  setTimeout(() => {
+    isFaceUp.value = true
+  }, 700)
+})
+
+const clickOnCard = () => {
+  platineOpen.value = !platineOpen.value
+}
 </script>
+
+<style scoped lang="scss">
+$open-speed: 0.4s;
+
+.platine-card {
+  @apply screen-centered h-screen;
+
+  :deep(.card) {
+    transition: width $open-speed, height $open-speed, transform 0.1s;
+    position: absolute;
+
+    .face-up,
+    .pochette {
+      transition: border-radius $open-speed, box-shadow $open-speed;
+
+      &:active {
+        .play-button {
+          @apply scale-90;
+        }
+      }
+    }
+  }
+
+  &--platine-open {
+    .card {
+      pointer-events: none;
+
+      &:focus {
+        @apply z-auto scale-100;
+      }
+    }
+
+    .card,
+    .platine {
+      width: 100vmin;
+      height: 100vmin;
+    }
+
+    &:deep(.card) {
+      .face-up {
+        border-radius: 999px;
+        @apply shadow-xl;
+
+        .pochette {
+          border-radius: 999px;
+        }
+
+        .rank {
+          opacity: 0;
+        }
+      }
+
+      .play-button,
+      .card-body,
+      .face-down {
+        display: none;
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>
--- a/app/utils/platine/disc.ts
+++ b/app/utils/platine/disc.ts
@@ -74,16 +74,17 @@ class Disc {
  private _inertiaVelocity: number = 0
  private _isInertiaActive: boolean = false
  private _basePlaybackSpeed: number = 1 // Vitesse de lecture normale
-  private _inertiaFriction: number = 0.93 // Coefficient de frottement pour l'inertie (plus proche de 1 = plus long)
+  private _inertiaFriction: number = 1 // Coefficient de frottement pour l'inertie (plus proche de 1 = plus long)
  private _lastDragVelocity: number = 0 // Dernière vitesse de drag
  private _lastDragTime: number = 0 // Dernier temps de drag
-  private _inertiaAmplification: number = 25 // Facteur d'amplification de l'inertie
+  private _inertiaAmplification: number = 45 // Facteur d'amplification de l'inertie
  private _previousDuration: number = 0 // Pour suivre les changements de durée

  public isReversed: boolean = false

  public callbacks = {
    onDragStart: (): void => {},
+    onDragProgress: (): void => {},
    onDragEnded: (secondsPlayed: number): void => {},
    onStop: (): void => {},
    onLoop: (params: DiscProgress): void => {}
@@ -147,12 +148,9 @@ class Disc {
  }

  powerOn() {
-    if (!this.rafId) {
-      this.start()
-    }
    this._isPoweredOn = true
-    this._basePlaybackSpeed = 1
-    this._playbackSpeed = 1
+    this._basePlaybackSpeed = this.isReversed ? -1 : 1
+    this.start()
  }

  powerOff() {
@@ -250,15 +248,18 @@ class Disc {

    const anglePointerToCenter = angleBetween(this._center, pointerPosition)
    const angle_DraggingFromToCenter = angleBetween(this._center, this._draggingFrom)
-    const angleDragged = angleDifference(angle_DraggingFromToCenter, anglePointerToCenter)
+    let angleDragged = angleDifference(angle_DraggingFromToCenter, anglePointerToCenter)

    // Calcul de la vitesse de déplacement angulaire (radians par milliseconde)
-    // On inverse le signe pour que le sens de l'inertie soit naturel
+    // Le signe est inversé pour que le glissement vers la droite fasse tourner vers la droite
    if (deltaTime > 0) {
      this._lastDragVelocity = -angleDragged / deltaTime
    }

    this._lastDragTime = currentTime
+
+    // Appliquer la rotation au disque
+    // Le signe est inversé pour que le glissement vers la droite fasse tourner vers la droite
    this.setAngle(this._currentAngle - angleDragged)
    this._draggingFrom = { ...pointerPosition }
  }
@@ -269,12 +270,15 @@ class Disc {

    // Activer l'inertie avec la vitesse de drag actuelle
    this._isInertiaActive = true
-    // Augmenter la sensibilité du drag avec le facteur d'amplification
-    this._inertiaVelocity = this._lastDragVelocity * this._inertiaAmplification
+
+    // Ajuster la direction de l'inertie en fonction du mode reverse
+    const direction = this.isReversed ? -1 : 1
+    this._inertiaVelocity = this._lastDragVelocity * this._inertiaAmplification * direction
+
    this.isDragging = false

    // Toujours conserver la vitesse de base actuelle (1 si allumé, 0 si éteint)
-    this._basePlaybackSpeed = this._isPoweredOn ? 1 : 0
+    this._basePlaybackSpeed = this._isPoweredOn ? (this.isReversed ? -1 : 1) : 0

    // Si le lecteur est éteint, s'assurer que la vitesse de base est bien à 0
    if (!this._isPoweredOn) {
@@ -286,25 +290,41 @@ class Disc {

  autoRotate(currentTimestamp: number) {
    const timestampElapsed = currentTimestamp - this.previousTimestamp
+    const direction = this.isReversed ? -1 : 1
+
+    // Vérifier si on est au début du morceau en mode reverse
+    if (this.isReversed && this.secondsPlayed <= 0) {
+      this._currentAngle = 0
+      this._inertiaVelocity = 0
+      this._isInertiaActive = false
+      this._playbackSpeed = 0
+      this._basePlaybackSpeed = 0 // Arrêter complètement la lecture
+      this.el.style.transform = 'rotate(0rad)'
+      this.callbacks.onStop()
+
+      // Éteindre le lecteur pour éviter toute reprise automatique
+      this._isPoweredOn = false
+      this.stop()
+      return
+    }

    if (this._isInertiaActive) {
-      // Appliquer l'inertie
-      const inertiaRotation = this._inertiaVelocity * timestampElapsed
-      this.setAngle(this._currentAngle + inertiaRotation)
+      // Appliquer l'inertie en tenant compte de la direction
+      const inertiaRotation = this._inertiaVelocity * timestampElapsed * direction
+      this.setAngle(this._currentAngle + inertiaRotation, true)

      // Si le lecteur est allumé, faire une transition fluide vers la vitesse de lecture
      if (this._isPoweredOn) {
+        const targetVelocity =
+          RADIANS_PER_MILLISECOND * Math.abs(this._basePlaybackSpeed) * direction
+
        // Si on est proche de la vitesse de lecture normale, on désactive l'inertie
-        if (
-          Math.abs(this._inertiaVelocity - RADIANS_PER_MILLISECOND * this._basePlaybackSpeed) <
-          0.0001
-        ) {
+        if (Math.abs(this._inertiaVelocity - targetVelocity) < 0.0001) {
          this._isInertiaActive = false
-          this._inertiaVelocity = RADIANS_PER_MILLISECOND * this._basePlaybackSpeed
+          this._inertiaVelocity = targetVelocity
        } else {
          // Réduire progressivement la vitesse d'inertie vers la vitesse de lecture
-          this._inertiaVelocity +=
-            (RADIANS_PER_MILLISECOND * this._basePlaybackSpeed - this._inertiaVelocity) * 0.1
+          this._inertiaVelocity += (targetVelocity - this._inertiaVelocity) * 0.1
        }
      } else {
        // Si le lecteur est éteint, appliquer un frottement normal
@@ -314,18 +334,61 @@ class Disc {
        if (Math.abs(this._inertiaVelocity) < 0.0001) {
          this._isInertiaActive = false
          this._inertiaVelocity = 0
-          this._playbackSpeed = 0 // Mettre à jour la vitesse de lecture à 0 uniquement à la fin
+          this._playbackSpeed = 0
        }
      }
    } else {
-      // Rotation normale à la vitesse de lecture de base
-      const baseRotation = RADIANS_PER_MILLISECOND * this._basePlaybackSpeed * timestampElapsed
-      this.setAngle(this._currentAngle + baseRotation)
+      // Rotation normale à la vitesse de lecture de base, dans la direction actuelle
+      const baseRotation =
+        RADIANS_PER_MILLISECOND * Math.abs(this._basePlaybackSpeed) * timestampElapsed * direction
+      this.setAngle(this._currentAngle + baseRotation, true)
    }
  }

-  setAngle(angle: number) {
-    this._currentAngle = clamp(angle, 0, this._maxAngle)
+  setAngle(angle: number, checkBounds = false) {
+    // Vérifier les limites si demandé
+    if (checkBounds) {
+      // Arrêt au début (angle < 0)
+      if (angle < 0) {
+        this._currentAngle = 0
+        this._inertiaVelocity = 0
+        this._isInertiaActive = false
+        this._playbackSpeed = 0
+        this._basePlaybackSpeed = 0
+        this.el.style.transform = 'rotate(0rad)'
+        this.callbacks.onStop()
+        this._isPoweredOn = false
+        this.stop()
+        return 0
+      }
+      // Arrêt à la fin (angle >= _maxAngle)
+      else if (angle >= this._maxAngle) {
+        this._currentAngle = this._maxAngle
+        this._inertiaVelocity = 0
+        this._isInertiaActive = false
+        this._playbackSpeed = 0
+        this._basePlaybackSpeed = 0
+        this.el.style.transform = `rotate(${this._maxAngle}rad)`
+        this.callbacks.onStop()
+        this._isPoweredOn = false
+        this.stop()
+        return this._maxAngle
+      }
+    }
+
+    // Si on dépasse les limites, on reste aux bornes
+    if (angle < 0) {
+      this._currentAngle = 0
+    } else if (angle > this._maxAngle) {
+      this._currentAngle = this._maxAngle
+    } else {
+      this._currentAngle = angle
+    }
+
+    // Appliquer la rotation à l'élément
+    if (this.el) {
+      this.el.style.transform = `rotate(${this._currentAngle}rad)`
+    }

    return this._currentAngle
  }
@@ -337,15 +400,43 @@ class Disc {
  }

  stop() {
-    if (this.rafId) {
-      cancelAnimationFrame(this.rafId)
-      this.rafId = null
-    }
-    this.callbacks.onStop()
+    this._isInertiaActive = false
+    this._inertiaVelocity = 0
+    cancelAnimationFrame(this.rafId!)
+    this.rafId = null
  }

-  rewind() {
-    this.setAngle(0)
+  /**
+   * Vérifie si le disque est à l'arrêt
+   */
+  isStopped(): boolean {
+    return this.rafId === null && !this._isInertiaActive
+  }
+
+  /**
+   * Inverse la direction de rotation du disque
+   * @returns true si l'inversion a réussi, false sinon
+   */
+  reverse(): boolean {
+    if (!this.el) return false
+
+    // Inverser la direction
+    this.isReversed = !this.isReversed
+
+    // Inverser la vitesse de base si nécessaire
+    if (this._isPoweredOn) {
+      this._basePlaybackSpeed = this.isReversed ? -1 : 1
+    }
+
+    // Mettre à jour la direction de l'animation
+    this.el.style.animationDirection = this.isReversed ? 'reverse' : 'normal'
+
+    // Inverser la vitesse d'inertie si elle est active
+    if (this._isInertiaActive) {
+      this._inertiaVelocity = -this._inertiaVelocity
+    }
+
+    return true
  }

  loop() {
@@ -357,11 +448,18 @@ class Disc {
      this.autoRotate(currentTimestamp)
    }

-    // Calculer la vitesse de lecture
-    const rotated = this._currentAngle - this._previousAngle
-    const rotationNormal = RADIANS_PER_MILLISECOND * timestampDifferenceMS
-    this.playbackSpeed = rotated / rotationNormal || 0
-    this.isReversed = this._currentAngle < this._previousAngle
+    // Calculer la vitesse de lecture uniquement pendant le glissement ou l'inertie
+    if (this.isDragging || this._isInertiaActive) {
+      const rotated = this._currentAngle - this._previousAngle
+      const rotationNormal = RADIANS_PER_MILLISECOND * timestampDifferenceMS
+      this.playbackSpeed = rotated / rotationNormal || 0
+    } else if (this._isPoweredOn) {
+      // En mode lecture normale, utiliser la vitesse de base
+      this._playbackSpeed = this._basePlaybackSpeed
+    } else {
+      // Si le lecteur est éteint, vitesse à 0
+      this._playbackSpeed = 0
+    }

    // Mettre à jour la rotation visuelle
    this.el.style.transform = `rotate(${this._currentAngle}rad)`
@@ -373,7 +471,7 @@ class Disc {
    // Ne pas appeler onLoop si rien n'a changé
    if (this._previousAngle !== this._currentAngle || this._previousDuration !== this._duration) {
      this.callbacks.onLoop({
-        playbackSpeed: this.playbackSpeed,
+        playbackSpeed: this._playbackSpeed, // Utiliser _playbackSpeed directement
        isReversed: this.isReversed,
        secondsPlayed,
        progress
--- a/app/utils/platine/sampler.ts
+++ b/app/utils/platine/sampler.ts
@@ -105,6 +105,26 @@ class Sampler {
    this.audioSource.stop()
  }

+  /**
+   * Inverse la direction de lecture
+   * @returns La nouvelle direction (true = inversé, false = normal)
+   */
+  reverse(secondsPlayed: number = 0): boolean {
+    if (!this.audioBuffer) return false
+
+    // Inverser la direction
+    this.isReversed = !this.isReversed
+
+    // Si on a une position, on relance la lecture à cette position
+    if (secondsPlayed > 0) {
+      // S'assurer que la position est dans les limites
+      const safePosition = Math.max(0, Math.min(secondsPlayed, this.duration))
+      this.play(safePosition)
+    }
+
+    return this.isReversed
+  }
+
  mute() {
    this.gainNode.gain.value = 0
  }