Transcript Nav
LiveReact 19 · TypeScript · Vite · Python
Find a moment in an hour-long recording without dragging the scrubber around. The transcript is the navigation: search for a phrase, click the line, the video jumps there. Matches are highlighted, results are counted, and it works on a phone.
- A Python ingestion step reassembles the raw caption feed — 3–6 word display fragments, chopped wherever the text hit the edge of the screen — into 400+ sentence-sized chunks. Straight from the API a search phrase can straddle two lines and match neither.
- Transcripts are pre-seeded at build time, not fetched per request: the upstream endpoints block datacenter IPs, which is exactly where this deploys. Fetching live would mean the demo breaks at random while someone is looking at it.
-
The player is driven through
postMessagerather than the official IFrame API, whose async script load and global ready callback fight React's component lifecycle. - Bundling the transcript instead of fetching it costs 84 kB gzipped, about 40% of it the data itself. It buys a page with no loading state, no error state, and no network round-trip. At one transcript that's the right trade; at ten it wouldn't be.
- The timestamp formatter is unit-tested with Vitest, boundaries included. Every design call and the reasoning behind it is written up in the repo's README.