Design a React video playlist
Overview
This question evaluates React component architecture, frontend state management (including Context and reducer patterns), performance optimization for large lists, and interactive media UI behavior such as single-active playback and sequential "Play All" flow, mapping to the System Design and frontend engineering domain and testing practical implementation with architectural considerations. It is commonly asked to assess a candidate's ability to design maintainable, extensible UI systems that manage shared state and resource-heavy elements while reasoning about trade-offs between rendering performance and feature complexity, requiring both practical coding knowledge and high-level design thinking.
React Video Playlist Component — Design and Implementation
Context
You are asked to design and implement a React video playlist component that:
- Renders many video items with thumbnails.
- Plays the selected video and ensures all others are stopped.
- Provides a "Play All" mode to sequentially play videos.
- Scales to large lists efficiently.
- Uses clear, maintainable state management (e.g., Context + reducer).
- Is structured with a sensible component hierarchy for extensibility.
Assume the input is an array of videos, each with at least: id, title, thumbnailUrl, src.
Requirements
-
UI/Behavior
- Show a scrollable list/grid of video thumbnails.
- Clicking a thumbnail selects and plays that video; all others must pause/stop.
- A global "Play All" button plays videos sequentially (auto-advance on end).
- Support basic controls (play/pause/mute) and show progress for the active video.
-
Performance for large lists
-
Avoid rendering heavy
<video>elements for offscreen items. - Efficiently handle thousands of items.
-
Avoid rendering heavy
-
State management
- Manage selected/active video and play-all mode clearly.
- Consider Context and reducer patterns.
-
Component structure
- Propose a split into components to improve maintainability and extensibility (e.g., swapping players, adding features later).
Solution
Login required