EHV/librodrome
18
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add BookPlayer scroll reading mode and floating mini-player widget

Browse Source 
Replace paginated-only reading with a toggle between paginated (CSS columns)
and continuous vertical scroll modes. Replace the full-width fixed footer
player bar with a compact floating pill in the bottom-right corner,
expandable to show full controls, visualizer, and playlist.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-02-22 02:40:46 +01:00
parent 554602ad52
commit 837b5394fe
7 changed files with 391 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
app/components/player/PlayerPersistent.vue
View File

@@ -2,81 +2,129 @@
<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"
ref="widgetRef"
class="mini-player"
>
<!-- Expanded panel -->
<!-- Expanded panel (above the pill) -->
<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 />
<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>
<!-- 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"
<!-- 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>
<!-- 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>
<!-- 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">
const store = usePlayerStore()
const { setVolume } = useAudioPlayer()
import { onClickOutside } from '@vueuse/core'
const store = usePlayerStore()
const { setVolume, togglePlayPause } = useAudioPlayer()
// Initialize media session
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'
@@ -98,37 +146,145 @@ function toggleMute() {
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>
.player-slide-enter-active,
.player-slide-leave-active {
transition: transform 0.3s var(--ease-out-expo);
/* ═══════════════════════════════════════
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;
}
.player-slide-enter-from,
.player-slide-leave-to {
transform: translateY(100%);
}
.panel-expand-enter-active,
.panel-expand-leave-active {
/* ─── 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;
}
.panel-expand-enter-from,
.panel-expand-leave-to {
max-height: 0;
opacity: 0;
.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;
}
.panel-expand-enter-to,
.panel-expand-leave-from {
max-height: 400px;
opacity: 1;
.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;
@@ -137,7 +293,6 @@ function toggleMute() {
border-radius: 2px;
outline: none;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
@@ -147,7 +302,6 @@ function toggleMute() {
border-radius: 50%;
cursor: pointer;
}
.volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
@@ -156,4 +310,50 @@ function toggleMute() {
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>