YouTube-like Video Page
Design video playback page with recommendations, comments, and continuity features.
Quick take: Prioritize playback continuity and layout stability.
Production notes: Hydrate comments and recommendations progressively.
TL;DR
Keep the player stable first, then progressively enhance recommendations and comments.
C - Collect
- Need resume position across devices?
- What is acceptable first interaction delay?
C - Component structure
- Player shell, recommendation rail, comments panel.
D - Data modeling
- Viewer state (resume, quality prefs), comment entities, recommendation entities.
A - API design
- Independent APIs for player metadata, comments, and recommendation slices.
O - Optimization
- Lazy load heavy sidebar modules.
- Provide a keyboard navigable chapter and caption controls.
Testing + Accessibility Rubric
| Category | Level | Requirement | Done When |
|---|---|---|---|
| functional | unit | State transitions handle loading, success, empty, and error. | Reducer/state machine tests cover all transitions. |
| functional | integration | Client correctly maps API contracts into UI-ready view models. | Contract fixtures pass with no runtime shape mismatch. |
| a11y | integration | Full keyboard flow works for primary interaction loop. | Tab/Shift+Tab/Enter/Escape scenarios pass for critical controls. |
| a11y | e2e | Dynamic updates expose meaningful live region announcements. | Manual SR checks validate announcement timing and text quality. |