Our UI has been designed to operate without maintaining any state, achieving a highly adaptable and dynamic feature set. Interaction with the Player instance occurs through PlayerEvents, which signal a state change, and via Player API interactions when the UI initiates a specific action.

Player Events and Player API

For example, when a user initiates playback through the PlaybackToggleButton to play or pause, the UI does not immediately update the button's appearance. Instead, it calls the corresponding Player API and waits for a specific event before reflecting the changes in the button's icon from pause to play or vice versa. This approach ensures that the UI always accurately represents the current state of the player.

See the following example showcases this behaviour based on the PlaybackToggleButton.

For simplicity, certain code parts were omitted. The full source code can be found in playbacktogglebutton.ts

Backwards compatibility

The UI and Player versions should be seen as independent. The UI has been developed with backward compatibility as a primary consideration. Each UI version is designed to be compatible with every Web Player and Native Player version.

When implementing a newly introduced Player API or PlayerEvents within a UI component, it is essential to consider backward compatibility. This requires verifying the existence of a specific API or Event on the current player instance before implementation.

// DurationChanged event was introduced with player v8.19.0
if (player.exports.PlayerEvent.DurationChanged) {
  player.on(player.exports.PlayerEvent.DurationChanged, ...);
}

private areAdaptationApisAvailable(player: PlayerAPI): boolean {
  const isGetConfigAvailable = Boolean(player.adaptation.getConfig && typeof player.adaptation.getConfig === 'function');
  const isSetConfigAvailable = Boolean(player.adaptation.setConfig && typeof player.adaptation.setConfig === 'function');

  return Boolean(player.adaptation && isGetConfigAvailable && isSetConfigAvailable);
}

📘

Checkout Native SDKs support to learn more about the communication with our native SDKs.