Refonte mini-player flottant, nettoyage GrateWizard, corrections UI
- PlayerPersistent: widget compact pill + panneau extensible, aligné au contenu - BookPlayer: ajustements scroll mode, suppression bordures boutons - UnoCSS: ajout border-none au shortcut btn-ghost - GrateWizard: suppression composants, services et utils obsolètes - Ajout du PDF source des paroles (media/) - Mises à jour config et dépendances Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -5,106 +5,107 @@
|
||||
ref="widgetRef"
|
||||
class="mini-player"
|
||||
>
|
||||
<!-- Expanded panel (above the pill) -->
|
||||
<!-- ═══ EXPANDED PANEL ═══ -->
|
||||
<Transition name="panel-expand">
|
||||
<div v-if="isExpanded" class="mini-panel">
|
||||
<!-- Visualizer -->
|
||||
<div class="mini-panel-section">
|
||||
<KeepAlive>
|
||||
<PlayerVisualizer />
|
||||
</KeepAlive>
|
||||
<!-- 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 bar + controls -->
|
||||
<div class="mini-panel-section">
|
||||
<!-- Progress -->
|
||||
<div class="panel-progress">
|
||||
<PlayerProgress />
|
||||
<div class="mt-3 flex items-center justify-center">
|
||||
<PlayerControls />
|
||||
<div class="panel-times">
|
||||
<span>{{ store.formattedCurrentTime }}</span>
|
||||
<span>{{ store.formattedDuration }}</span>
|
||||
</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>
|
||||
<!-- 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 (if available) -->
|
||||
<div v-if="store.currentSong.lyrics" class="panel-lyrics">
|
||||
<pre class="panel-lyrics-text">{{ store.currentSong.lyrics }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- Playlist -->
|
||||
<div class="mini-panel-playlist">
|
||||
<div class="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">
|
||||
<!-- ═══ 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="20" cy="20" r="18"
|
||||
cx="18" cy="18" r="16"
|
||||
fill="none"
|
||||
stroke="hsl(0 0% 100% / 0.1)"
|
||||
stroke-width="2.5"
|
||||
stroke="hsl(0 0% 100% / 0.06)"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
cx="20" cy="20" r="18"
|
||||
cx="18" cy="18" r="16"
|
||||
fill="none"
|
||||
stroke="hsl(12 76% 48%)"
|
||||
stroke-width="2.5"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
:stroke-dasharray="circumference"
|
||||
:stroke-dashoffset="circumference - (circumference * store.progress / 100)"
|
||||
class="mini-pill-progress"
|
||||
class="pill-ring-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>
|
||||
<span class="pill-title">{{ store.currentSong.title }}</span>
|
||||
|
||||
<!-- Play/Pause -->
|
||||
<button
|
||||
class="mini-pill-btn"
|
||||
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>
|
||||
|
||||
<!-- Expand chevron -->
|
||||
<!-- Expand -->
|
||||
<button
|
||||
class="mini-pill-btn"
|
||||
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" />
|
||||
<div :class="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,7 +124,7 @@ const widgetRef = ref<HTMLElement>()
|
||||
const isExpanded = ref(false)
|
||||
let previousVolume = 0.8
|
||||
|
||||
const circumference = 2 * Math.PI * 18 // r=18
|
||||
const circumference = 2 * Math.PI * 16
|
||||
|
||||
const volumeIcon = computed(() => {
|
||||
if (store.volume === 0) return 'i-lucide-volume-x'
|
||||
@@ -151,11 +152,6 @@ 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
|
||||
})
|
||||
@@ -163,168 +159,247 @@ onClickOutside(widgetRef, () => {
|
||||
|
||||
<style scoped>
|
||||
/* ═══════════════════════════════════════
|
||||
MINI-PLAYER FLOATING WIDGET
|
||||
POSITION
|
||||
═══════════════════════════════════════ */
|
||||
.mini-player {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
right: max(1rem, calc((100vw - 80rem) / 2));
|
||||
z-index: 70;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
/* ─── COMPACT PILL ─── */
|
||||
/* ═══════════════════════════════════════
|
||||
PILL
|
||||
═══════════════════════════════════════ */
|
||||
.mini-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.625rem 0.375rem 0.375rem;
|
||||
gap: 0.625rem;
|
||||
padding: 0.375rem 0.5rem 0.375rem 0.5rem;
|
||||
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);
|
||||
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 24px hsl(0 0% 0% / 0.4);
|
||||
box-shadow: 0 4px 20px hsl(0 0% 0% / 0.35);
|
||||
}
|
||||
.mini-pill:hover {
|
||||
border-color: hsl(12 76% 48% / 0.3);
|
||||
box-shadow: 0 4px 32px hsl(12 76% 48% / 0.15);
|
||||
background: hsl(20 8% 9% / 0.96);
|
||||
}
|
||||
|
||||
.mini-pill-ring {
|
||||
position: relative;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
/* Progress ring */
|
||||
.pill-ring {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mini-pill-svg {
|
||||
.pill-ring-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.mini-pill-progress {
|
||||
.pill-ring-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 {
|
||||
/* Title */
|
||||
.pill-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
color: hsl(0 0% 100% / 0.8);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 140px;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.mini-pill-btn {
|
||||
/* Play/Pause — white circle */
|
||||
.pill-play {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
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); }
|
||||
|
||||
/* Expand chevron */
|
||||
.pill-expand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: hsl(0 0% 100% / 0.7);
|
||||
color: hsl(0 0% 100% / 0.3);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: color 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mini-pill-btn:hover {
|
||||
color: white;
|
||||
background: hsl(0 0% 100% / 0.1);
|
||||
}
|
||||
.pill-expand:hover { color: hsl(0 0% 100% / 0.7); }
|
||||
|
||||
/* ─── EXPANDED PANEL ─── */
|
||||
/* ═══════════════════════════════════════
|
||||
PANEL
|
||||
═══════════════════════════════════════ */
|
||||
.mini-panel {
|
||||
width: 340px;
|
||||
width: 360px;
|
||||
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);
|
||||
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;
|
||||
}
|
||||
|
||||
.mini-panel-section {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid hsl(0 0% 100% / 0.06);
|
||||
/* ─── Track + visualizer ─── */
|
||||
.panel-top {
|
||||
padding: 1rem 1.25rem 0.5rem;
|
||||
}
|
||||
.mini-panel-section:last-child {
|
||||
border-bottom: none;
|
||||
.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;
|
||||
}
|
||||
|
||||
.mini-panel-row {
|
||||
/* ─── 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;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0 1.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.mini-panel-playlist {
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
.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 ─── */
|
||||
.volume-slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
background: hsl(0 0% 100% / 0.15);
|
||||
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: 12px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
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: 12px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: hsl(0 0% 100% / 0.7);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ─── TRANSITIONS ─── */
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
/* ─── 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.3s var(--ease-out-expo), opacity 0.3s var(--ease-out-expo);
|
||||
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(20px);
|
||||
transform: translateY(16px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.panel-expand-enter-active,
|
||||
.panel-expand-leave-active {
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
transition: all 0.35s var(--ease-out-expo);
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-expand-enter-from,
|
||||
@@ -335,25 +410,21 @@ onClickOutside(widgetRef, () => {
|
||||
}
|
||||
.panel-expand-enter-to,
|
||||
.panel-expand-leave-from {
|
||||
max-height: 600px;
|
||||
max-height: 800px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ─── MOBILE ─── */
|
||||
/* ═══════════════════════════════════════
|
||||
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;
|
||||
}
|
||||
.mini-panel { width: auto; }
|
||||
.pill-title { max-width: none; flex: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user