Player v2.1.0

The 2.1.0 version of the player NPM package extends the API with the needed methods and events to build your own custom UI. Some of the new notable events are:

• play
• pause
• playing
• waiting
• error

To build your own custom play/pause button you now do the following:

// Create the player
const player = ...;
// Create the button
const button = document.getElementById('playPauseButton');

// Set the current state
let paused = true;
button.text = 'paused';

// Set action based on current state
button.on('click', () => {
  if (paused) {
    player.play();
  } else {
    player.pause();
  }
});

// Listen to events to update UI
player.addEventListener('play', () => {
	paused = false;
  button.text = 'not paused';
});

player.addEventListener('pause', () => {
	paused = true;
  button.text = 'paused';
})

The playing and waiting events indicate whether or not playback is progressing when the player is not in a paused state. You could use these events to show a spinner to show a stall to the end user. The error event indicates a fatal error from which the player cannot recover. You can use this event to show an error message to the end user or to fallback to a different channel. However for that use case, we recommend setting a fallback channel when configuring your channel.