Skip to content

Captions under the episode page's player, with speakers; notes cropped to the Ready card - #19

Merged
dben merged 4 commits into
mainfrom
claude/episode-player-streaming-captions-l029po
Oct 23, 2026
Merged

dben merged 4 commits into
mainfrom
claude/episode-player-streaming-captions-l029po

Conversation

@dben

@dben dben commented Oct 22, 2026

Copy link
Copy Markdown
Owner

Captions under the player

An episode with a timed transcript (its feed's, or captions from the whisper container) now shows it under the episode page's player as it plays: the line being said, and the one before it, dimmed.

  • GET /episodes/{id}/captions.vtt: the transcript as WebVTT, moved to fit the cut. SRT and JSON transcripts are converted (chapters.captions()).
  • Browsers draw nothing for an audio element's track, so app.js reads the cues and fills a fixed-height box under the player. It shows once playback starts and clears on a seek.
  • A Captions button hides the box. The choice is kept in localStorage.
  • Without JavaScript, the box and the button stay hidden.

Speakers

  • Cues that name a speaker (<v Host> in WebVTT, speaker in JSON) show Host: before the words.
  • For whisper captions with saved speaker turns, each cue gets the voice heard most during it. Voices are lettered A:, B:, C: by how much each talks, so A is usually the host. The letters are added as the captions are served, so episodes already captioned get them too. The private feeds' captions are unchanged.

Show notes

  • On screens wider than 900px, the notes beside a ready episode's card take that card's height (CSS size containment) and fade out where they're cut off.
  • More now shows whenever the notes are cropped, measured in the browser. Before, it showed only for notes over 600 characters.
  • Stacked on narrow screens, the notes keep their 12-line limit.

Testing

  • Full suite passes (203). New tests cover the SRT and JSON conversion, the voice lettering, the route (including the 404 and 401 cases) and the page markup. ruff is clean.
  • Checked in headless Chromium on a stand-in page with the real CSS and scripts: captions roll during playback, speaker labels show, the off setting survives a reload, and the notes match the Ready card at 1200px and stack at 800px.

Generated by Claude Code

An episode with a timed transcript, its feed's or one made by the
transcription service, now gives the page's player a captions track
(/episodes/{id}/captions.vtt: the transcript as WebVTT, moved to fit the
cut, with SRT and JSON ones turned into WebVTT). Browsers draw nothing for
an audio element's track, so app.js reads its cues and shows them in a box
under the player: the line being said, and the one before it, dimmed. A
Captions button hides them, and the browser remembers that.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01HtVgTsLHo5Gsz45gz4ceJ7
A cue with a voice (WebVTT's <v Name>, which JSON transcripts' speakers
become) now shows the name before its words.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01HtVgTsLHo5Gsz45gz4ceJ7
Captions made by the transcription service come with the speaker turns
it found. The page's captions now give each cue the voice heard most
during it, lettered by how much each voice talks (A most, often the
host), and the box shows names as "A:". The private feeds' captions are
unchanged, and episodes captioned before this get letters too, since
they're added as the captions are served.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01HtVgTsLHo5Gsz45gz4ceJ7
When the notes sit beside a ready episode's card, they take its height,
fading out where they're cut off. More now shows whenever the notes are
cropped, measured in the browser, rather than for notes over 600
characters; stacked on narrow screens they keep their 12-line clamp.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01HtVgTsLHo5Gsz45gz4ceJ7
@dben
dben merged commit a54b5df into main Oct 23, 2026
5 checks passed
@dben
dben deleted the claude/episode-player-streaming-captions-l029po branch October 23, 2026 10:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants