e6c91fea7d
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Toggle discret pour les afficher au besoin (usage autonome). Gain de place dans le panel déployé. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
484 lines
12 KiB
Vue
484 lines
12 KiB
Vue
<template>
|
|
<Transition name="player-slide">
|
|
<div
|
|
v-if="store.currentSong"
|
|
ref="widgetRef"
|
|
class="mini-player"
|
|
>
|
|
<!-- ═══ EXPANDED PANEL ═══ -->
|
|
<Transition name="panel-expand">
|
|
<div v-if="isExpanded" class="mini-panel">
|
|
<!-- Track info + visualizer -->
|
|
<div class="panel-top">
|
|
<div class="panel-track">
|
|
<p class="panel-title">{{ store.currentSong.title }}</p>
|
|
<p class="panel-artist">{{ store.currentSong.artist }}</p>
|
|
</div>
|
|
<div class="panel-viz">
|
|
<KeepAlive>
|
|
<PlayerVisualizer />
|
|
</KeepAlive>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress -->
|
|
<div class="panel-progress">
|
|
<PlayerProgress />
|
|
<div class="panel-times">
|
|
<span>{{ store.formattedCurrentTime }}</span>
|
|
<span>{{ store.formattedDuration }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="panel-controls">
|
|
<PlayerControls />
|
|
</div>
|
|
|
|
<!-- Volume -->
|
|
<div class="panel-volume-row">
|
|
<button class="panel-vol-btn" @click="toggleMute">
|
|
<div :class="volumeIcon" class="h-3.5 w-3.5" />
|
|
</button>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
:value="store.volume"
|
|
class="volume-slider"
|
|
@input="handleVolumeChange"
|
|
>
|
|
</div>
|
|
|
|
<!-- Lyrics (collapsed by default, available for standalone use) -->
|
|
<div v-if="store.currentSong.lyrics && showLyrics" class="panel-lyrics">
|
|
<pre class="panel-lyrics-text">{{ store.currentSong.lyrics }}</pre>
|
|
</div>
|
|
<button
|
|
v-if="store.currentSong.lyrics"
|
|
class="panel-lyrics-toggle"
|
|
@click="showLyrics = !showLyrics"
|
|
>
|
|
<div :class="showLyrics ? 'i-lucide-chevron-up' : 'i-lucide-text'" class="h-3 w-3" />
|
|
{{ showLyrics ? 'Masquer les paroles' : 'Paroles' }}
|
|
</button>
|
|
|
|
<!-- Playlist -->
|
|
<div class="panel-playlist">
|
|
<PlayerPlaylist />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- ═══ COMPACT PILL ═══ -->
|
|
<div class="mini-pill" @click="toggleExpanded">
|
|
<!-- Progress ring -->
|
|
<div class="pill-ring">
|
|
<svg viewBox="0 0 36 36" class="pill-ring-svg">
|
|
<circle
|
|
cx="18" cy="18" r="16"
|
|
fill="none"
|
|
stroke="hsl(0 0% 100% / 0.06)"
|
|
stroke-width="2"
|
|
/>
|
|
<circle
|
|
cx="18" cy="18" r="16"
|
|
fill="none"
|
|
stroke="hsl(12 76% 48%)"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
:stroke-dasharray="circumference"
|
|
:stroke-dashoffset="circumference - (circumference * store.progress / 100)"
|
|
class="pill-ring-progress"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<span class="pill-title">{{ store.currentSong.title }}</span>
|
|
|
|
<!-- Play/Pause -->
|
|
<button
|
|
class="pill-play"
|
|
: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>
|
|
|
|
<!-- Next -->
|
|
<button class="pill-next" aria-label="Suivant" @click.stop="playNext" :disabled="!store.hasNext">
|
|
<div class="i-lucide-skip-forward h-3.5 w-3.5" />
|
|
</button>
|
|
|
|
<!-- Expand -->
|
|
<button
|
|
class="pill-expand"
|
|
: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, playNext } = useAudioPlayer()
|
|
|
|
useMediaSession()
|
|
useKeyboardShortcuts()
|
|
|
|
const widgetRef = ref<HTMLElement>()
|
|
const isExpanded = ref(false)
|
|
const showLyrics = ref(false)
|
|
let previousVolume = 0.8
|
|
|
|
const circumference = 2 * Math.PI * 16
|
|
|
|
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
|
|
}
|
|
|
|
onClickOutside(widgetRef, () => {
|
|
if (isExpanded.value) isExpanded.value = false
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* ═══════════════════════════════════════
|
|
POSITION
|
|
═══════════════════════════════════════ */
|
|
.mini-player {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
right: max(1rem, calc((100vw - 80rem) / 2));
|
|
z-index: 70;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
PILL
|
|
═══════════════════════════════════════ */
|
|
.mini-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.375rem 0.5rem 0.375rem 0.5rem;
|
|
border-radius: 9999px;
|
|
background: hsl(20 8% 7% / 0.92);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
cursor: pointer;
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
box-shadow: 0 4px 20px hsl(0 0% 0% / 0.35);
|
|
}
|
|
.mini-pill:hover {
|
|
background: hsl(20 8% 9% / 0.96);
|
|
}
|
|
|
|
/* Progress ring */
|
|
.pill-ring {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.pill-ring-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotate(-90deg);
|
|
}
|
|
.pill-ring-progress {
|
|
transition: stroke-dashoffset 0.3s ease;
|
|
}
|
|
|
|
/* Title */
|
|
.pill-title {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: hsl(0 0% 100% / 0.8);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 160px;
|
|
}
|
|
|
|
/* Play/Pause — white circle */
|
|
.pill-play {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
background: white;
|
|
border: none;
|
|
color: hsl(20 8% 6%);
|
|
cursor: pointer;
|
|
transition: transform 0.15s var(--ease-out-expo);
|
|
flex-shrink: 0;
|
|
}
|
|
.pill-play:hover { transform: scale(1.08); }
|
|
.pill-play:active { transform: scale(0.94); }
|
|
|
|
/* Next */
|
|
.pill-next {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
border: none;
|
|
color: hsl(0 0% 100% / 0.6);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
flex-shrink: 0;
|
|
}
|
|
.pill-next:hover { color: white; }
|
|
.pill-next:disabled { opacity: 0.3; cursor: default; }
|
|
|
|
/* Expand chevron */
|
|
.pill-expand {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 50%;
|
|
background: hsl(0 0% 100% / 0.08);
|
|
border: none;
|
|
color: hsl(0 0% 100% / 0.5);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
.pill-expand:hover { color: hsl(0 0% 100% / 0.9); background: hsl(0 0% 100% / 0.15); }
|
|
|
|
/* ═══════════════════════════════════════
|
|
PANEL
|
|
═══════════════════════════════════════ */
|
|
.mini-panel {
|
|
width: 360px;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 1rem;
|
|
background: hsl(20 8% 6% / 0.94);
|
|
backdrop-filter: blur(32px);
|
|
-webkit-backdrop-filter: blur(32px);
|
|
box-shadow: 0 8px 40px hsl(0 0% 0% / 0.4);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ─── Track + visualizer ─── */
|
|
.panel-top {
|
|
padding: 1rem 1.25rem 0.5rem;
|
|
}
|
|
.panel-track {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.panel-title {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: white;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.panel-artist {
|
|
font-size: 0.75rem;
|
|
color: hsl(0 0% 100% / 0.35);
|
|
margin-top: 0.125rem;
|
|
}
|
|
.panel-viz {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ─── Progress ─── */
|
|
.panel-progress {
|
|
padding: 0.5rem 1.25rem 0;
|
|
}
|
|
.panel-times {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 0.25rem;
|
|
font-family: var(--font-mono, monospace);
|
|
font-size: 0.625rem;
|
|
color: hsl(0 0% 100% / 0.25);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ─── Controls ─── */
|
|
.panel-controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0.25rem 1.25rem 0.375rem;
|
|
}
|
|
|
|
/* ─── Volume ─── */
|
|
.panel-volume-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0 1.25rem 0.75rem;
|
|
}
|
|
.panel-vol-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: none;
|
|
color: hsl(0 0% 100% / 0.35);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: color 0.2s;
|
|
}
|
|
.panel-vol-btn:hover { color: hsl(0 0% 100% / 0.7); }
|
|
|
|
.volume-slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
flex: 1;
|
|
height: 3px;
|
|
background: hsl(0 0% 100% / 0.08);
|
|
border-radius: 2px;
|
|
outline: none;
|
|
}
|
|
.volume-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: hsl(0 0% 100% / 0.7);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: transform 0.15s;
|
|
}
|
|
.volume-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
|
|
.volume-slider::-moz-range-thumb {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: hsl(0 0% 100% / 0.7);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ─── Lyrics ─── */
|
|
.panel-lyrics {
|
|
max-height: 160px;
|
|
overflow-y: auto;
|
|
padding: 0.75rem 1.25rem;
|
|
border-top: 1px solid hsl(0 0% 100% / 0.04);
|
|
}
|
|
.panel-lyrics-text {
|
|
font-family: var(--font-sans, sans-serif);
|
|
font-size: 0.75rem;
|
|
line-height: 1.6;
|
|
color: hsl(0 0% 100% / 0.4);
|
|
white-space: pre-wrap;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ─── Lyrics toggle ─── */
|
|
.panel-lyrics-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
width: 100%;
|
|
padding: 0.375rem;
|
|
border: none;
|
|
border-top: 1px solid hsl(0 0% 100% / 0.04);
|
|
background: none;
|
|
color: hsl(0 0% 100% / 0.25);
|
|
font-size: 0.65rem;
|
|
cursor: pointer;
|
|
transition: color 0.15s;
|
|
}
|
|
.panel-lyrics-toggle:hover {
|
|
color: hsl(0 0% 100% / 0.5);
|
|
}
|
|
|
|
/* ─── Playlist ─── */
|
|
.panel-playlist {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
border-top: 1px solid hsl(0 0% 100% / 0.04);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
TRANSITIONS
|
|
═══════════════════════════════════════ */
|
|
.player-slide-enter-active,
|
|
.player-slide-leave-active {
|
|
transition: transform 0.35s var(--ease-out-expo), opacity 0.35s var(--ease-out-expo);
|
|
}
|
|
.player-slide-enter-from,
|
|
.player-slide-leave-to {
|
|
transform: translateY(16px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.panel-expand-enter-active,
|
|
.panel-expand-leave-active {
|
|
transition: all 0.35s 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: 800px;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
MOBILE
|
|
═══════════════════════════════════════ */
|
|
@media (max-width: 768px) {
|
|
.mini-player {
|
|
right: 0.75rem;
|
|
left: 0.75rem;
|
|
align-items: stretch;
|
|
}
|
|
.mini-panel { width: auto; }
|
|
.pill-title { max-width: none; flex: 1; }
|
|
}
|
|
</style>
|