Architecture

The Shelby Media Player is built on top of two powerful underlying dependencies: media-chrome for state management and Shaka Player for adaptive streaming and DRM support.

Core Dependencies

media-chrome

media-chrome is a powerful media player framework that provides:

• Media Store: A centralized state management system for media playback
• React Hooks: useMediaSelector, useMediaDispatch, useMediaRef, etc.

The Shelby Media Player uses the React bindings provided by media-chrome/react/media-store:

• Manage playback state (play/pause, current time, duration, etc.)
• Handle user interactions (play/pause, seeking, volume control)
• Provide hooks for accessing media state in custom components

---

Shaka Player

Shaka Player is a JavaScript library for adaptive media streaming that provides:

• HLS Support: Full support for HTTP Live Streaming (HLS) manifests
• DASH Support: Dynamic Adaptive Streaming over HTTP (DASH) support
• DRM Support: Widevine, PlayReady, FairPlay, and Clear Key DRM
• Adaptive Bitrate: Automatic quality selection based on network conditions

The Shelby Media Player uses Shaka Player via shaka-video-element, which provides a custom element wrapper that integrates Shaka Player with HTML5 video elements.