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
  • Song Name
  • Artist(s)

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}
 */
async play() {
    await 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.

Name and Artist

The Name of the Media can be set via this.setTitle('Hello world!');.

Setting the Artist is the same, this.setArtist('Hello world!');, but if the Media has multiple Artists, you can pass through an Array of names, then we'll handle the rest. For example:

this.setArtist([
    'Name 1',
    'Name 2',
]);

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.

If you want to remove the Album Art, call this.setAlbumImage(null);

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.