librodrome/app/components/player/PlayerPersistent.vue

<template>
  <Transition name="player-slide">
    <div
      v-if="store.currentSong"
      ref="widgetRef"
      class="mini-player"
    >
      <!-- Expanded panel (above the pill) -->
      <Transition name="panel-expand">
        <div v-if="isExpanded" class="mini-panel">
          <!-- Visualizer -->
          <div class="mini-panel-section">
            <KeepAlive>
              <PlayerVisualizer />
            </KeepAlive>
          </div>

          <!-- Progress bar + controls -->
          <div class="mini-panel-section">
            <PlayerProgress />
            <div class="mt-3 flex items-center justify-center">
              <PlayerControls />
            </div>
          </div>

          <!-- Volume + mode + time -->
          <div class="mini-panel-section mini-panel-row">
            <PlayerModeToggle />
            <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>
            <span class="font-mono text-xs text-white/40">
              {{ store.formattedCurrentTime }} / {{ store.formattedDuration }}
            </span>
          </div>

          <!-- Playlist -->
          <div class="mini-panel-playlist">
            <PlayerPlaylist />
          </div>
        </div>
      </Transition>

      <!-- Compact pill (always visible) -->
      <div class="mini-pill" @click="onPillClick">
        <!-- SVG circular progress ring -->
        <div class="mini-pill-ring">
          <svg viewBox="0 0 40 40" class="mini-pill-svg">
            <circle
              cx="20" cy="20" r="18"
              fill="none"
              stroke="hsl(0 0% 100% / 0.1)"
              stroke-width="2.5"
            />
            <circle
              cx="20" cy="20" r="18"
              fill="none"
              stroke="hsl(12 76% 48%)"
              stroke-width="2.5"
              stroke-linecap="round"
              :stroke-dasharray="circumference"
              :stroke-dashoffset="circumference - (circumference * store.progress / 100)"
              class="mini-pill-progress"
            />
          </svg>
          <!-- Cover image inside ring -->
          <div class="mini-pill-cover">
            <img
              v-if="store.currentSong.coverImage"
              :src="store.currentSong.coverImage"
              :alt="store.currentSong.title"
              class="h-full w-full object-cover"
            >
            <div v-else class="i-lucide-music h-4 w-4 text-primary" />
          </div>
        </div>

        <!-- Title -->
        <span class="mini-pill-title">{{ store.currentSong.title }}</span>

        <!-- Play/Pause -->
        <button
          class="mini-pill-btn"
          :aria-label="store.isPlaying ? 'Pause' : 'Lecture'"
          @click.stop="togglePlayPause"
        >
          <div :class="store.isPlaying ? 'i-lucide-pause' : 'i-lucide-play'" class="h-4 w-4" />
        </button>

        <!-- Expand chevron -->
        <button
          class="mini-pill-btn"
          :aria-label="isExpanded ? 'Réduire' : 'Développer'"
          @click.stop="toggleExpanded"
        >
          <div :class="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
        </button>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core'

const store = usePlayerStore()
const { setVolume, togglePlayPause } = useAudioPlayer()

useMediaSession()

const widgetRef = ref<HTMLElement>()
const isExpanded = ref(false)
let previousVolume = 0.8

const circumference = 2 * Math.PI * 18 // r=18

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)
  }
}

function toggleExpanded() {
  isExpanded.value = !isExpanded.value
}

function onPillClick() {
  isExpanded.value = !isExpanded.value
}

// Close expanded panel on click outside
onClickOutside(widgetRef, () => {
  if (isExpanded.value) isExpanded.value = false
})
</script>

<style scoped>
/* ═══════════════════════════════════════
   MINI-PLAYER FLOATING WIDGET
   ═══════════════════════════════════════ */
.mini-player {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 360px;
}

/* ─── COMPACT PILL ─── */
.mini-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
  border-radius: 9999px;
  background: hsl(20 8% 8% / 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(0 0% 100% / 0.1);
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
}
.mini-pill:hover {
  border-color: hsl(12 76% 48% / 0.3);
  box-shadow: 0 4px 32px hsl(12 76% 48% / 0.15);
}

.mini-pill-ring {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}
.mini-pill-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.mini-pill-progress {
  transition: stroke-dashoffset 0.3s ease;
}
.mini-pill-cover {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(20 8% 12%);
}

.mini-pill-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.mini-pill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: hsl(0 0% 100% / 0.7);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.mini-pill-btn:hover {
  color: white;
  background: hsl(0 0% 100% / 0.1);
}

/* ─── EXPANDED PANEL ─── */
.mini-panel {
  width: 340px;
  margin-bottom: 0.5rem;
  border-radius: 1rem;
  background: hsl(20 8% 6% / 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsl(0 0% 100% / 0.08);
  box-shadow: 0 8px 40px hsl(0 0% 0% / 0.5);
  overflow: hidden;
}

.mini-panel-section {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(0 0% 100% / 0.06);
}
.mini-panel-section:last-child {
  border-bottom: none;
}

.mini-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mini-panel-playlist {
  max-height: 240px;
  overflow-y: auto;
}

/* ─── VOLUME SLIDER ─── */
.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;
}

/* ─── TRANSITIONS ─── */
.player-slide-enter-active,
.player-slide-leave-active {
  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s var(--ease-out-expo);
}
.player-slide-enter-from,
.player-slide-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

.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;
  transform: translateY(8px);
}
.panel-expand-enter-to,
.panel-expand-leave-from {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
}

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  .mini-player {
    right: 0.75rem;
    left: 0.75rem;
    max-width: none;
    align-items: stretch;
  }
  .mini-panel {
    width: auto;
  }
  .mini-pill-title {
    max-width: none;
    flex: 1;
  }
}
</style>