Components
Lesson media and responsive header
Keep the selected lesson, course identity and navigation together while the video remains the primary learning surface.
On this page
Purpose and usage
Keep the selected lesson, course identity and navigation together while the video remains the primary learning surface.
Anatomy
| Part | Contract |
|---|---|
| Media | Aspect-video iframe region |
| Lesson identity | Selected title, duration and sequence |
| Instructor | Name and optional avatar |
| Phone selector | Dedicated lesson dropdown state |
| CTA/metadata | Conditional context and owner/admin enrollment display |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| Lesson context | Title, lessons, current index and available progress flags |
| Identity | Course/instructor metadata and optional CTA |
| Navigation | Route lessonId supplies selected lesson context |
State coverage
| State | Implemented behavior |
|---|---|
| Desktop | Source two-area composition |
| Phone | Source mobile header and selector |
| Selector open | aria-expanded / aria-controls on phone control |
| Missing embed | Source fallback treatment rather than a fabricated player |
Interaction and composition
- Keep iframe aspect ratio intact; covers can crop, players should not.
- Use the real embedCode only after the app’s validation boundary.
- Retain selected-lesson context when changing navigation.
- Capture a paused real player; playback/streaming reliability is a separate verification.
Accessibility and readiness
Verify iframe title, keyboard entry/exit, captions and provider controls. The wrapper’s accessible selector attributes do not certify third-party player accessibility. Captures use existing course embeds and GET-only external requests. Provider console warnings are retained in the manifest; paused player appearance is checked, but playback is not certified; the published learner example uses Final Cut Pro for Creators.
Source references
| File | Responsibility |
|---|---|
| src/components/courses-public/logged-in/VideoHeader.tsx | Desktop/mobile lesson and media composition |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1