screencastgen

Reader Page

Full-screen browser reader for completed highlight/lip-sync jobs with synchronized playback, word highlighting, and optional presenter video.

Source: web/frontend/src/pages/Reader.tsx Route: /jobs/:id/read

Manifest-driven rendering — Loads a ReaderManifest and renders page-grouped chunks with per-word timings
Word-level sync — Highlights the active word based on audio playback time
Clickable seeking — Clicking a word seeks the audio to that word and starts playback if needed
Comfort-band auto-scroll — Keeps the active word within roughly the 25% to 65% vertical band before scrolling again
Page image preview — Shows the active PDF page image in a sticky side panel when page assets exist
Presenter PiP — Lip-sync reader jobs use presenter.mp4 as the playback clock in a draggable, edge-resizable picture-in-picture frame
Offline reader download — The primary lip-sync job artifact is a standalone ZIP containing the local viewer and all required assets
On-demand EPUB export — Completed lip-sync reader jobs can trigger and download a text-and-narration EPUB; presenter video is omitted and reading-system support varies
Playback dock — Bottom control bar with play/pause, scrubber, duration, playback speed, and auto-scroll toggle
Deferred control hiding — Playback controls stay visible before first play, then auto-hide after inactivity near the bottom edge
Graceful fallback — Shows a reader-unavailable message and a back link when the manifest is missing

State	Type	Description
`manifest`	`ReaderManifest \\| null`	Reader metadata and timed chunks
`error`	`string \\| null`	Reader load failure message
`loading`	`boolean`	Initial manifest fetch state
`activeIdx`	`number`	Active flattened word index
`playing`	`boolean`	Current audio playback state
`rate`	`number`	Playback speed
`currentTime`	`number`	Current audio time in seconds
`autoScroll`	`boolean`	Whether reader follows the active word
`controlsVisible`	`boolean`	Visibility of the bottom playback dock
`hasStartedPlaying`	`boolean`	Tracks whether autoplay-style control hiding should activate
`theme`	`"night" \\| "pdf"`	Persisted reader color theme
`pipWidth`	`number`	Persisted presenter PiP width
`pipPos`	`{x, y}`	Persisted presenter PiP position
`epubStatus`	`EpubExportStatus`	On-demand EPUB export state
`epubError`	`string \\| null`	EPUB export failure detail

getReaderManifest(id) from Reader API — initial manifest fetch
getReaderAudioUrl(id) from Reader API — <audio> source URL
getReaderPresenterUrl(id) from Reader API — <video> presenter source URL
getReaderPageUrl(id, filename) from Reader API — sticky page-preview image URL
getDownloadUrl(id) from Jobs API — standalone offline-reader ZIP
requestEpubExport(id), getEpubExportStatus(id), getEpubExportDownloadUrl(id) from Jobs API — text-and-narration EPUB export

Fetch the manifest for the job-specific reader route
Flatten chunk words into a searchable timeline for binary-search lookup
Update activeIdx from audio timeupdate events
Smooth-scroll only when the active word leaves the comfort band
For lip-sync jobs, use the presenter video as the media element; for highlight jobs, use audio
Let users drag the presenter and resize it from the right/bottom edges or bottom-right corner
Cancel automatic scrolling when the user manually scrolls or swipes
Hide the playback dock only after playback has started and the pointer is idle away from the bottom edge