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

135
app/components/book/BookPlayer.vue
View File

@@ -39,12 +39,21 @@
>
<div class="i-lucide-list h-5 w-5" />
</button>
<button
class="reader-bar-btn"
@click="toggleReadingMode"
:aria-label="isScrollMode ? 'Mode paginé' : 'Mode défilement'"
:title="isScrollMode ? 'Mode paginé' : 'Mode défilement'"
>
<div :class="isScrollMode ? 'i-lucide-book-open' : 'i-lucide-scroll-text'" class="h-5 w-5" />
</button>
<div class="reader-bar-title">
<span class="reader-bar-num">{{ chapterIdx + 1 }}.</span>
{{ chapters[chapterIdx].title }}
</div>
<span class="reader-bar-pages">
{{ currentPage + 1 }}<span class="op-40">/</span>{{ totalPages }}
<template v-if="isScrollMode">{{ scrollPercent }}%</template>
<template v-else>{{ currentPage + 1 }}<span class="op-40">/</span>{{ totalPages }}</template>
</span>
</div>
@@ -68,25 +77,31 @@
</Transition>
<!-- Content viewport -->
<div class="reader-viewport" ref="viewportEl">
<div
class="reader-viewport"
:class="{ 'reader-viewport--scroll': isScrollMode }"
ref="viewportEl"
@scroll="onViewportScroll"
>
<div
class="reader-columns prose"
:class="{ 'reader-columns--scroll': isScrollMode }"
ref="contentEl"
:style="contentStyle"
>
<ContentRenderer v-if="activeChapter" :value="activeChapter" />
</div>
<!-- Page turn shadow overlay -->
<div class="reader-shadow" :class="{ visible: isTurning }" />
<!-- Page turn shadow overlay (paginated only) -->
<div v-if="!isScrollMode" class="reader-shadow" :class="{ visible: isTurning }" />
</div>
<!-- Bottom navigation -->
<div class="reader-nav">
<button
class="reader-nav-btn"
:class="{ 'reader-nav-btn--hidden': currentPage <= 0 && chapterIdx <= 0 }"
@click="prevPage"
aria-label="Page précédente"
:class="{ 'reader-nav-btn--hidden': isScrollMode ? chapterIdx <= 0 : (currentPage <= 0 && chapterIdx <= 0) }"
@click="isScrollMode ? prevChapter() : prevPage()"
:aria-label="isScrollMode ? 'Chapitre précédent' : 'Page précédente'"
>
<div class="i-lucide-chevron-left h-5 w-5" />
</button>
@@ -103,9 +118,9 @@
<button
class="reader-nav-btn"
:class="{ 'reader-nav-btn--hidden': currentPage >= totalPages - 1 && chapterIdx >= chapters.length - 1 }"
@click="nextPage"
aria-label="Page suivante"
:class="{ 'reader-nav-btn--hidden': isScrollMode ? chapterIdx >= chapters.length - 1 : (currentPage >= totalPages - 1 && chapterIdx >= chapters.length - 1) }"
@click="isScrollMode ? nextChapter() : nextPage()"
:aria-label="isScrollMode ? 'Chapitre suivant' : 'Page suivante'"
>
<div class="i-lucide-chevron-right h-5 w-5" />
</button>
@@ -114,8 +129,14 @@
<!-- Hint -->
<p class="bp-hint">
<span class="hidden md:inline">{{ bpContent?.reader.hints.desktop }}</span>
<span class="md:hidden">{{ bpContent?.reader.hints.mobile }}</span>
<template v-if="isScrollMode">
<span class="hidden md:inline">{{ bpContent?.reader.hints.desktopScroll ?? '← → chapitres · Défilement libre · Esc fermer' }}</span>
<span class="md:hidden">{{ bpContent?.reader.hints.mobileScroll ?? 'Défilez pour lire' }}</span>
</template>
<template v-else>
<span class="hidden md:inline">{{ bpContent?.reader.hints.desktop }}</span>
<span class="md:hidden">{{ bpContent?.reader.hints.mobile }}</span>
</template>
</p>
</div>
</Transition>
@@ -146,6 +167,31 @@ const colWidth = ref(500)
const showSommaire = ref(false)
const isTurning = ref(false)
// ── Reading mode ──
const readingMode = ref<'paginated' | 'scroll'>('paginated')
const isScrollMode = computed(() => readingMode.value === 'scroll')
const scrollPercent = ref(0)
function toggleReadingMode() {
readingMode.value = readingMode.value === 'paginated' ? 'scroll' : 'paginated'
}
// When switching back to paginated, recalc pages
watch(readingMode, async (mode) => {
if (mode === 'paginated') {
await nextTick()
await nextTick()
setTimeout(recalcPages, 100)
}
})
function onViewportScroll() {
if (!isScrollMode.value || !viewportEl.value) return
const el = viewportEl.value
const max = el.scrollHeight - el.clientHeight
scrollPercent.value = max > 0 ? Math.round((el.scrollTop / max) * 100) : 0
}
const { init: initBookData, getSongs, getPrimarySong, getPlaylistOrder } = useBookData()
const audioPlayer = useAudioPlayer()
const playerStore = usePlayerStore()
@@ -213,13 +259,17 @@ const chapterSong = computed(() => {
})
// ── CSS columns pagination ──
const contentStyle = computed(() => ({
columnWidth: colWidth.value + 'px',
columnGap: COL_GAP + 'px',
transform: `translateX(-${currentPage.value * (colWidth.value + COL_GAP)}px)`,
}))
const contentStyle = computed(() => {
if (isScrollMode.value) return {}
return {
columnWidth: colWidth.value + 'px',
columnGap: COL_GAP + 'px',
transform: `translateX(-${currentPage.value * (colWidth.value + COL_GAP)}px)`,
}
})
function recalcPages() {
if (isScrollMode.value) return
if (!contentEl.value || !viewportEl.value) return
colWidth.value = viewportEl.value.offsetWidth
const sw = contentEl.value.scrollWidth
@@ -256,11 +306,27 @@ function goToChapter(idx: number) {
chapterIdx.value = idx
currentPage.value = 0
showSommaire.value = false
// Scroll to top in scroll mode
if (isScrollMode.value && viewportEl.value) {
viewportEl.value.scrollTop = 0
}
// Play chapter song
const song = getPrimarySong(chapters[idx].slug)
if (song) audioPlayer.loadAndPlay(song)
}
function nextChapter() {
if (chapterIdx.value < chapters.length - 1) {
goToChapter(chapterIdx.value + 1)
}
}
function prevChapter() {
if (chapterIdx.value > 0) {
goToChapter(chapterIdx.value - 1)
}
}
function nextPage() {
if (currentPage.value < totalPages.value - 1) {
triggerTurn()
@@ -306,11 +372,20 @@ function close() {
}
function handleKeydown(e: KeyboardEvent) {
if (e.key === 'ArrowRight') { e.preventDefault(); nextPage() }
else if (e.key === 'ArrowLeft') { e.preventDefault(); prevPage() }
else if (e.key === 'ArrowDown') { e.preventDefault(); if (chapterIdx.value < chapters.length - 1) goToChapter(chapterIdx.value + 1) }
else if (e.key === 'ArrowUp') { e.preventDefault(); if (chapterIdx.value > 0) goToChapter(chapterIdx.value - 1) }
else if (e.key === 'Escape') close()
if (isScrollMode.value) {
// Scroll mode: left/right = chapters, up/down = natural scroll (no preventDefault)
if (e.key === 'ArrowRight') { e.preventDefault(); nextChapter() }
else if (e.key === 'ArrowLeft') { e.preventDefault(); prevChapter() }
else if (e.key === 'Escape') close()
}
else {
// Paginated mode: left/right = pages, up/down = chapters
if (e.key === 'ArrowRight') { e.preventDefault(); nextPage() }
else if (e.key === 'ArrowLeft') { e.preventDefault(); prevPage() }
else if (e.key === 'ArrowDown') { e.preventDefault(); nextChapter() }
else if (e.key === 'ArrowUp') { e.preventDefault(); prevChapter() }
else if (e.key === 'Escape') close()
}
}
// ── Touch / swipe ──
@@ -321,6 +396,8 @@ function onTouchStart(e: TouchEvent) {
}
function onTouchEnd(e: TouchEvent) {
// Disable page-swipe in scroll mode (vertical scroll is native)
if (isScrollMode.value) return
const diff = touchStartX - (e.changedTouches[0]?.screenX ?? 0)
if (Math.abs(diff) > 50) {
if (diff > 0) nextPage()
@@ -389,7 +466,7 @@ onUnmounted(() => {
align-items: center;
outline: none;
overflow: hidden;
padding-bottom: 4.5rem;
padding-bottom: 1rem;
transition: --scene-h1 1.6s ease, --scene-h2 1.6s ease;
}
@@ -492,7 +569,7 @@ onUnmounted(() => {
/* ─── HINT ─── */
.bp-hint {
position: absolute;
bottom: 5rem;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
@@ -678,6 +755,16 @@ onUnmounted(() => {
max-width: none;
}
/* ─── Scroll mode overrides ─── */
.reader-viewport--scroll {
overflow-y: auto;
}
.reader-columns--scroll {
height: auto;
column-fill: unset;
transition: none;
}
/* Tighten prose for column context */
.reader-columns :deep(h1) {
font-size: clamp(1.5rem, 3.5vw, 2rem);