initiation librodrome

app/components/player/PlayerPersistent.vue

@@ -0,0 +1,159 @@
+<template>
+  <Transition name="player-slide">
+    <div
+      v-if="store.currentSong"
+      class="player-bar fixed inset-x-0 bottom-0 z-70 border-t border-white/8 bg-surface-600/80 backdrop-blur-xl"
+    >
+      <!-- Expanded panel -->
+      <Transition name="panel-expand">
+        <div v-if="store.isExpanded" class="border-b border-white/8">
+          <div class="container-content grid gap-4 p-4 md:grid-cols-2">
+            <PlayerVisualizer />
+            <PlayerPlaylist />
+          </div>
+        </div>
+      </Transition>
+
+      <!-- Progress bar (top of player) -->
+      <PlayerProgress />
+
+      <!-- Main player bar -->
+      <div class="container-content flex items-center gap-4 px-4 py-2">
+        <!-- Track info -->
+        <div class="flex-1 min-w-0">
+          <PlayerTrackInfo />
+        </div>
+
+        <!-- Controls -->
+        <div class="flex items-center gap-4">
+          <PlayerControls />
+        </div>
+
+        <!-- Right section: mode + volume + expand -->
+        <div class="hidden md:flex items-center gap-3 flex-shrink-0">
+          <PlayerModeToggle />
+
+          <!-- Volume -->
+          <div class="flex items-center gap-2">
+            <button class="btn-ghost !p-1" @click="toggleMute">
+              <div :class="volumeIcon" class="h-4 w-4" />
+            </button>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              :value="store.volume"
+              class="volume-slider w-20"
+              @input="handleVolumeChange"
+            >
+          </div>
+
+          <!-- Time display -->
+          <span class="font-mono text-xs text-white/40 w-24 text-center">
+            {{ store.formattedCurrentTime }} / {{ store.formattedDuration }}
+          </span>
+
+          <!-- Expand toggle -->
+          <button
+            class="btn-ghost !p-2"
+            :aria-label="store.isExpanded ? 'Réduire' : 'Développer'"
+            @click="store.toggleExpanded()"
+          >
+            <div :class="store.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const store = usePlayerStore()
+const { setVolume } = useAudioPlayer()
+
+// Initialize media session
+useMediaSession()
+
+let previousVolume = 0.8
+
+const volumeIcon = computed(() => {
+  if (store.volume === 0) return 'i-lucide-volume-x'
+  if (store.volume < 0.3) return 'i-lucide-volume'
+  if (store.volume < 0.7) return 'i-lucide-volume-1'
+  return 'i-lucide-volume-2'
+})
+
+function handleVolumeChange(e: Event) {
+  const value = parseFloat((e.target as HTMLInputElement).value)
+  setVolume(value)
+}
+
+function toggleMute() {
+  if (store.volume > 0) {
+    previousVolume = store.volume
+    setVolume(0)
+  }
+  else {
+    setVolume(previousVolume)
+  }
+}
+</script>
+
+<style scoped>
+.player-slide-enter-active,
+.player-slide-leave-active {
+  transition: transform 0.3s var(--ease-out-expo);
+}
+
+.player-slide-enter-from,
+.player-slide-leave-to {
+  transform: translateY(100%);
+}
+
+.panel-expand-enter-active,
+.panel-expand-leave-active {
+  transition: all 0.3s var(--ease-out-expo);
+  overflow: hidden;
+}
+
+.panel-expand-enter-from,
+.panel-expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+.panel-expand-enter-to,
+.panel-expand-leave-from {
+  max-height: 400px;
+  opacity: 1;
+}
+
+.volume-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: hsl(0 0% 100% / 0.15);
+  border-radius: 2px;
+  outline: none;
+}
+
+.volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background: white;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.volume-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: white;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+</style>