This is a set of modular, tested and hopefully useful React components for composing media players. This library does not deal with actual media in any way, only the UI.

Check out the components in action on the examples page.

A note on styles: This library does not yet ship with any component styles. However, this is on the way. Meanwhile, you can check out the styles from the examples page to get a kick start or just some inspiration in styling your player.

Installation

npm i react-player-controls

Usage

// Import the components you need as ES2015 modules
import { PlayButton, PauseButton } from 'react-player-controls'

Components

Playback and song changes

// Play and pause
<PlayButton isEnabled={true} onClick={playHandler} />
<PauseButton onClick={pauseHandler} />

// Prev and next
<PrevButton onClick={prevHandler} isEnabled={currentSong > 0} />
<NextButton onClick={nextHandler} isEnabled={currentSong < numSongs.length - 1} />

// Wrapper for play, pause, prev and next
<PlaybackControls
  isPlayable={true}
  isPlaying={false}
  onPlaybackChange={setPlayback}
  showPrevious={true}
  hasPrevious={currentSong > 0}
  onPrevious={prevHandler}
  showNext={true}
  hasNext={currentSong < numSongs.length - 1}
  onNext={nextHandler}
/>

Progress and time

// Simple time formatter
// Will render "3:24"
<FormattedTime numSeconds={204} />

// Progress bar and seek control
<ProgressBar
  totalTime={song.duration}
  currentTime={audioEl.currentTime}
  isSeekable={true}
  onSeek={seekTime => { /* f.i. update the time marker */}}
  onSeekStart={seekTime => { /* perhaps freeze a video frame? */ }}
  onSeekEnd={seekTime => { /* perform seek: */ audioEl.currentTime = seekTime }}
  onIntent={seekTime => { /* f.i. update intended time marker */}}
/>

// <TimeMarker /> composite component

<TimeMarker
  totalTime={190}
  currentTime={65}
  markerSeparator=" / "
/>
// -> "1:05 / 3:10" (without wrapping <span /> elements)

<TimeMarker
  totalTime={190}
  currentTime={65}
  markerSeparator=" | "
  firstMarkerType={TimeMarkerType.ELAPSED}
  secondMarkerType={TimeMarkerType.LEFT_NEGATIVE}
/>
// -> "1:05 | -2:05" (without wrapping <span /> elements)

Volume controls

// Buttons for sound on/off states
<SoundOnButton onClick={mute} />
<SoundOffButton onClick={unmute} />

// A composite mute toggle wrapper
<MuteToggleButton
  isMuted={isMuted}
  onMuteChange={handleMuteChange}
  isEnabled={somePredicate}
/>

// Volume slider
<VolumeSlider
  volume={volumeBetweenZeroAndOne}
  onVolumeChange={handleVolumeChange}
  isEnabled={somePredicate}
/>

Contribute

Contributors are welcome! Please make sure that tests pass locally before opening a PR.

Dev

npm run dev

Build

npm run build

Tests

npm run test