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

1. 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.
2. Performance for large lists
   • Avoid rendering heavy <video> elements for offscreen items.
   • Efficiently handle thousands of items.
3. State management
   • Manage selected/active video and play-all mode clearly.
   • Consider Context and reducer patterns.
4. Component structure
   • Propose a split into components to improve maintainability and extensibility (e.g., swapping players, adding features later).