@cassette/player NPM

@cassette/player

@cassette/player provides a responsive, zero-config-needed React media player component, implemented with @cassette/core. Its control components can also be consumed directly.

Installation

npm install @cassette/player

Player components included:

MediaPlayer - A media player component which plays a provided playlist of media
MediaPlayerControls - The UI component of MediaPlayer, which requires an ancestor PlayerContextProvider (and optional ancestor FullscreenContextProvider) in order to work

Control components included:

BackSkipButton - a button which, when clicked, either skips to the previous track in the playlist or to the beginning of the current playing track, depending upon the currently elapsed time
ForwardSkipButton - a button which, when clicked, skips to the next track in the playlist
FullscreenButton - a button which, when clicked, tells the surrounding FullscreenContextProvider (if present) to toggle fullscreen mode
MediaProgress - an interactive media progress bar which can be adjusted by dragging, along with a text overlay of the current track metadata and the elapsed time
MediaProgressDisplay - a non-interactive version of MediaProgress
MuteButton - a button which, when clicked, toggles whether the media's audio is muted
PlayPauseButton - a button which, when clicked, toggles whether the media is paused
RepeatButton - a button which, when clicked, cycles to the next repeatStrategy (none, playlist or track)
ShuffleButton - a button which, when clicked, toggles whether the playlist is being played in specified order or in shuffle order
Spacer - provides a buffer between control components
VolumeControl - a MuteButton which, when hovered (with a mouse) or initially tapped (on touch screens), displays a bar for adjusting media volume