Player Stock Element #

You can use this Stock Element by extending the exported global: window.casthub.elements.player

The Media Player Element, by default, gives you the following scaffolding:

  • Previous, Play/Pause and Next buttons
  • Album Cover Art

Control Methods #

In order to make the media controls work, you must implement functions for each, all of them returning a Promise. For example, this is from the Spotify Player Module:

/**
 * Called to request to play the Media source.
 *
 * @return {Promise}
 */
play() {
    return this.fetch({
        method: 'PUT',
        url: 'me/player/play',
    });
}

With methods that also run the logic for previous, pause and next all looking the same. These will be called when the User presses the associated button.

Album Image Art #

If Album Art is present, you can set it via the this.setAlbumImage(url); method. This will pre-load the Image before setting it in the UI, preventing any flickering as the image loads.

Disabled State #

Some Media sources, such as Spotify, will not return any data when the Player is not open on the Users end, and none of the controls will function. In times like this, it is beneficial to disable the controls and re-enable them once functionality returns.

This can be achieved by called this.setDisabled(true);, and using false to re-enable the controls.