Viewer PDF.js mode livre avec signets, fix hydratation SSR
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed

- Viewer PDF.js mode livre : double page côte à côte, navigation prev/next visuelle et clavier
- Panneau signets (outline) avec tout déplier/replier, highlight du spread courant
- Page 1 = couverture seule, puis paires 2-3, 4-5, etc.
- Navigation clavier : flèches, espace, Home/End
- Redimensionnement auto des canvas au resize
- Fix hydratation SSR : bookData.init() sans await dans ChapterHeader et SongBadges
- BookPdfReader : iframe vers /pdfjs/viewer.html au lieu du viewer natif
- Script postinstall pour copier pdf.min.mjs depuis node_modules

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-02-28 17:46:38 +01:00
parent 9525ed3953
commit 7ea19e2247
10 changed files with 874 additions and 13 deletions

View File

@@ -15,8 +15,9 @@
{{ description }}
</p>
<!-- Songs + PDF actions row -->
<div class="mt-4 flex flex-wrap items-center gap-2">
<!-- Associated songs badges -->
<div v-if="songs.length > 0" class="mt-4 flex flex-wrap gap-2">
<button
v-for="song in songs"
:key="song.id"
@@ -26,18 +27,16 @@
<div class="i-lucide-music h-3 w-3" />
{{ song.title }}
</button>
</div>
<!-- PDF button -->
<div v-if="pdfPage" class="mt-3">
<button class="pdf-btn" @click="showPdf = true">
<button v-if="pdfPage" class="pdf-btn" @click="showPdf = true">
<div class="i-lucide-book-open h-3.5 w-3.5" />
<span>Lire dans le PDF</span>
<span class="pdf-page-badge">p.{{ pdfPage }}</span>
</button>
</div>
<BookPdfReader v-model="showPdf" :page="pdfPage" />
<LazyBookPdfReader v-if="showPdf" v-model="showPdf" :page="pdfPage" />
</header>
</template>
@@ -55,7 +54,7 @@ const props = defineProps<{
const bookData = useBookData()
const { loadAndPlay } = useAudioPlayer()
await bookData.init()
bookData.init()
const songs = computed(() => bookData.getChapterSongs(props.chapterSlug))
const pdfPage = computed(() => bookData.getChapterPage(props.chapterSlug))