Public/Live_RC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a video-guide recorder for the UI (Settings tabs, Event Manager tabs, Schedule panel)

Browse Source 
CDP screencast -> ffmpeg -> MKV, driven against the same isolated server/browser pattern
the test suite already uses. Recorded three short clips demonstrating this session's tab
and schedule features; output goes to the gitignored video-guides/ folder rather than the
repo since these are sizeable binaries.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
larssand
2026-09-11 16:56:00 +02:00
parent 05f0291ee9
commit 4967299b04
6 changed files with 275 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ROADMAP.md
View File

@@ -433,6 +433,16 @@ Requested 2026-09-11 by the user in response to "what's left in the tests, and w
Verified 2026-09-11: `npm run test:browser` passes all 34 scenarios (11 new across the 3 new files, plus the pre-existing 23) against a real, isolated server and headless browser; `npm test` passes all 205 unit tests unchanged.
## Recorded MKV video guide clips for new users
Suggested 2026-09-11 by the user, alongside the permanent-tests entry above: while writing the "real" tests, also produce an MKV video usable as a new-user video guide showing how to use the features. Confirmed scope with the user first: just the 3 UIs from that same entry (not a full onboarding walkthrough), as several short clips rather than one long video.
- [x] Validated the recording approach with a throwaway proof of concept before building anything permanent: Chrome DevTools Protocol's `Page.startScreencast` (JPEG frames over the existing CDP WebSocket connection the test harness already uses, each frame acknowledged via `Page.screencastFrameAck` or the stream stalls) piped through `ffmpeg` into H.264 MKV. Confirmed with `ffprobe` and a visual frame check that this produces a real, correctly-sized, playable video before investing further.
- [x] `scripts/record-video-guides.mjs` (new, permanent): a small reusable recorder built on the same isolated-server-plus-headless-Chrome pattern as `tests/browser_smoke.js` (own temp SQLite dir, own browser profile - never touches real installation data), with a per-clip `seedState`/`record` definition. Three clips recorded: `settings-tabs`, `event-manager-tabs` (including the quick-jump Open Grid button switching to the Live tab), and `event-schedule` (filling in a start time/gap, saving, and showing the resulting cascaded table). Output goes to the gitignored `video-guides/` folder, not committed - these are sizeable binaries and the user hadn't asked for them checked into the repo.
- [x] First recording pass of the Event Manager and Schedule clips came out visually useless - the manage tabs and the Schedule panel both sit well below the fold on the Race Setup page, and a synthetic `element.click()` doesn't scroll anything into view the way a real user's click would, so the whole clip just sat on a static, unchanging top-of-page frame. Fixed by adding explicit `scrollIntoView` calls before each tab switch and before/after the schedule form actions, so the recording actually shows what it's demonstrating.
Verified 2026-09-11: extracted and visually inspected sample frames from all three clips after the scroll fix - Settings clip clearly shows each tab's own panel switching, Event Manager clip shows the tab bar plus the Open Grid button jumping to the Live tab, and the Schedule clip shows the filled-in form followed by the real cascaded table (Practice 1 12:30-12:40, Qualifying 1 12:43-12:48 with the 3-minute gap applied) - all legible, no garbled or blank frames. `ffprobe` confirmed all three are valid 1600x900 H.264 MKV files (10-13s each, under 750KB).
## Documentation maintenance
- [ ] Update the architecture's module/dependency inventory as modules change.