@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 ofMediaPlayer
, which requires an ancestorPlayerContextProvider
(and optional ancestorFullscreenContextProvider
) 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 surroundingFullscreenContextProvider
(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 ofMediaProgress
-
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 nextrepeatStrategy
(none
,playlist
ortrack
) -
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
- aMuteButton
which, when hovered (with a mouse) or initially tapped (on touch screens), displays a bar for adjusting media volume