Creating custom elements and adding them to the UI

Good afternoon! Please tell me how you can add your custom buttons? For example, I want to add a button skip. I do everything as in the example

Creating custom elements and adding them to the UI It’s possible to add custom application-specific buttons to the UI. Each element has to have it’s own class that implements the shaka.extern.IUIElement interface and register with shaka.ui.Controls. All our elements use shaka.ui.Element as a base class. Take a look to see if it’s right for your custom buttons.

Let’s say, we want to create a button that allows user to skip the currently playing video and go to the next one.

// skipButton.js

// Use shaka.ui.Element as a base class
myapp.SkipButton = class extends shaka.ui.Element {
  constructor(parent, controls) {
    super(parent, controls);

    // The actual button that will be displayed
    this.button_ = document.createElement('button');
    this.button_.textContent = 'Skip current video';
    this.parent.appendChild(this.button_);

    // Listen for clicks on the button to start the next playback
    this.eventManager.listen(this.button_, 'click', () => {
      let nextManifest = /* Your logic to pick the next video to be played */
        myapp.getNextManifest();

      // shaka.ui.Element gives us access to the player object as member of the class
      this.player.load(nextManifest);
    });
  }
};


// Factory that will create a button at run time.
myapp.SkipButton.Factory = class {
  create(rootElement, controls) {
    return new myapp.SkipButton(rootElement, controls);
  }
};

// Register our factory with the controls, so controls can create button instances.

shaka.ui.Controls.registerElement(
  /* This name will serve as a reference to the button in the UI configuration object */ 'skip',
  new myapp.SkipButton.Factory());

We have our button. Let’s see how we can add it to the layout. Similar to specifying the order of shaka-provided controls, we’ll need to add a line to the init() function in myapp.js

// This will add three buttons to the controls panel (in that order): shaka-provided
// rewind and fast forward button and out custom skip button, referenced by the name
// we used when registering the factory with the controls.
uiConfig['controlPanelElements'] = ['rewind', 'fast_forward', 'skip'];

Where does the variable come from myapp ?

I downloaded part of the code to the repository, there are no problems with connecting from the СDN, all work .

Do I understand correctly that the code from skipButton.js need to transfer to controls.js ? I do not understand how to connect.

UPD

As I understand it, I can create files and enable it when building the shaka player. And can I do this if I already use a hooked player?

[joeyparrish]

You can also dispatch events on other objects. For example:

                        this.eventManager.listen(this.button_, 'click', () => {
                            const event = new Event('nextEpisode');
                            event.detail = {
                              episodeNum: this.currentSelectedEpNum,
                            };
                            someOtherObject.dispatchEvent(event);
                        });

You can even dispatch events on the document or window, so someOtherObject in my example could be document or window if that’s helpful.

And elsewhere, you can listen for the event on that object:

// Could be document or window, too:
someOtherObject.addEventListener('nextEpisode', (event) => {
  console.log('Episode number', event.detail.episodeNum);
});

[ivansteff]

@ismena and @joeyparrish, thanks so much for the detailed answer!