Add Audio Playback to Source Bible in Drafting View

[chadw-eten]

Fluent's drafting view shows the source Bible passage a translator is working from, but oral-primary and low-literacy translators need to hear that passage, not just read it. Real recorded audio from DBL should be used when available; when it isn't, TTS fills the gap. This ticket covers the play controls for the source Bible passage in both verse-level and pericope-level display modes, and the client-side behavior for triggering and sequencing playback. TTS generation, caching, and the DBL-availability check are handled by a separate backend ticket.

Functional Requirements

Icon Reference

• Active: li:play inside a non-filled (outline) circle, shown in the primary blue color.
• Disabled: li:play-off inside a non-filled (outline) circle, shown in the disabled color.
• Playing: toggles to li:square (stop icon), same circle and color treatment as the active state.
• Restart: li:rotate-ccw, grayed out and disabled while playback is at the beginning, enabled once playback has progressed; used by both the verse-level control and the pericope player.
• Loading: li:loader-circle, animated/spinning, shown in place of the play icon in the same circle position and primary blue color while TTS generates on a first-time request.
• All states below (Verse-Level Play Control, Pericope "Play All" Player) use this same icon set.

Verse-Level Play Control

• In verse-level display, add a hover-revealed circular play control overlapping the verse text; the control appears only on hover/interaction, not inline by default.
• Include play/pause and restart; no scrub bar, since a single verse is short enough that a full seek isn't needed.
• Tapping the control plays that verse's audio in isolation; the icon toggles to the Playing state while its audio plays, per the Icon Reference above.
• Note: The mockup shows both the AI and non-AI generated versions. Normally two players would not be visible simultaneously.

Pericope "Play All" Player

• In pericope-level display, do not show per-verse play icons; verses render as continuous paragraph flow with no per-verse row to anchor a button to.
• Add player to each pericope to the right of the verse reference.
• The player should span the width of the source side of the edit panel and not go into the target side at all.
• Include play/pause, restart, and a scrub bar with a time indicator.
• Tapping play sequences through every verse in the pericope in order, using each verse's own cached audio segment; the icon toggles to the Playing state while active, per the Icon Reference above.

Playback States

• Show the play button in an active state when its audio is ready and the device is online.
• Show a loading state on the button while TTS is generating for a first-time request.
• Disable the button when offline; do not hide it.

Audio Provenance Indicator

• Overlay a small sparkle badge on the play control when the audio is AI-generated (TTS); show no badge when the audio is real recorded audio.
• Render the sparkle badge in the same primary blue used for the active play state.

Bible Version Switching

• When the translator switches which Bible version is displayed in the source pane, update play controls to reflect that version's own audio, applying the same DBL-first, TTS-fallback logic per version.

Offline Behavior

• Disable all source Bible playback controls (verse-level and pericope-level) when the device is offline.
• Do not hide playback controls when offline; the translator should see that audio exists but is unavailable.

Note: TTS generation is triggered at the pericope level (one generation call covers every verse in that pericope), but audio is cached and served as individually-addressable verse segments. This means per-verse playback and the pericope "play all" control both draw from the same cache without ever regenerating — see the resolved Open Question in the TTS and Audio Playback requirements doc.

Note 2: Audio-only source Bibles (no text counterpart) are not supported by this ticket; build in a way that does not block adding them later.

Note 3: Some DBL source Bibles are copyrighted. By default, no TTS generation is permitted on copyrighted source Bible text; TTS fallback applies only to open-license source Bibles until this is clarified with DBL/legal.

Demo