Code reference detail
TutorialPlayerShell.tsx
site/src/components/TutorialPlayerShell.tsx
| Idea | Status | Tags | Summary | Katz |
|---|---|---|---|---|
| site | the / site folder contains a static Next. js App Router landing page for reqlan. should align with [brand] Copy modules: [copy] Document head: [meta_tags] | 0.040 | ||
| tutorial_location_crumb | done | Tutorial detail chrome shows a compact location trail: catalog → course → lesson → slide. Hierarchy must be obvious without a wide single-line title dump. Layout: each tier is a stacked chip — role ( and optional completion control ) on the top row; title / index value muted underneath. Titles colour up on hover, focus-within, or when the peer menu is open. **Folder navigation: ** each tier acts like a path segment / folder. Hover or focus reveals a peer menu for that level of the tree so the user can jump without using the transport row: - catalog → courses ( enter first lesson of the chosen course, or the catalog index ) - course → peer courses - lesson → peer lessons in the active course - slide → peer slides in the active lesson ( updates the embedded player / `?slide=` ) Current peer is marked; menus stay keyboard-reachable via focus-within. **Sizing: ** the crumb container grows to fit text; wrap before truncating. Ellipsis only as a last resort on very narrow viewports — do not cap chip width so aggressively that titles ellipsize while space remains. Course deep-links also exist at `/tutorials/#course-<series>`; catalog at `/tutorials/`. Slide shows `n/total` and updates live with the embedded player. Completion toggles stay on the role row. The crumb lesson tier always shows the **current** lesson only — it must not share hover / preview state with the transport lesson step dots. Step-dot hover may preview a title near the dots, never in the crumb. | 0.046 | |
| tutorial_player_transport | done | The `<` control must show the previous slide when the player can go back. When the player cannot go back, `<` must open the previous lesson if that lesson exists. Open that lesson on the last slide. The `>` control must show the next slide when the player can go forward. When the player cannot go forward, `>` must open the next lesson if that lesson exists. Open that lesson on the first slide. The Left Arrow key and the Right Arrow key must do the same as `<` and `>`. Shift + Left Arrow and Shift + Right Arrow must open the adjacent lesson from any slide. The `<<` and `>>` controls must continue to open the adjacent lesson. After the current lesson player is ready, the shell must start to load the next lesson player in the background. The shell must prefetch the next lesson page. The shell must ignore state messages from the background player. | 0.046 | |
| tutorials_section | done | The site exposes `/tutorials` and `/tutorials/[slug]/` as statically generated pages. Catalog and deck ids come from authored ["../../presentations/manifest.jsonc"]. Each detail page embeds the Reveal player iframe at `/presentations/player/?deck=<id>` using [assets] / SITE_BASE_PATH-aware `sitePath`. Each detail page hosts a unified transport chrome ( `<<` `<` steps `>` `>>` ) that drives slide nav in the embedded player via postMessage, plus lesson jumps ( [tutorial_player_transport] ). Location hierarchy chrome: [tutorial_location_crumb]. Blurb and try-this live on the catalog and inside the slides, not as page chrome. The player is an App Router page ( [presentation_player_route] ) so it static-exports under `trailingSlash` without colliding with `public/` HTML. Sync ( [sync_presentations] ) converts authored deck / catalog JSONC under ["../../presentations/"] into runtime JSON under `public/presentations/`, and copies assets plus vendored Reveal. js ( player shell excluded ). The catalog links to [certs_reqs.assessment_page] for certification. | 0.046 |
Reference labels
"../../site/src/components/TutorialPlayerShell.tsx", ../../site/src/components/TutorialPlayerShell.tsx