Custom event from Player UI components

Knowledge
,
1

Hi all

I’ve implemented a player UI including some custom buttons. What, if need to trigger any functionality outside of the player context? Is there a way to eg. throw a custom event which may be handled from the application?

Examples

  1. We’re having a button which allows the user to start another stream. Since this streams url needs to be fetched from an API first, i can’t/don’t want to do this call inside the custom button component.

  2. There will be a button, which loads a listing of streams and show it in a sidebar in the application.

export class MyMagicButton extends Button<ButtonConfig> {
  constructor(config: ButtonConfig = {}) {
    super(config);

    const defaultConfig: ButtonConfig = {
      cssClass: 'ui-mymagicbutton',
      text: 'Do Magic',
    };

    this.config = this.mergeConfig(config, defaultConfig, this.config);
  }

  override configure(player: PlayerAPI, uiManager: UIInstanceManager): void {
    super.configure(player, uiManager);

    this.onClick.subscribe(() => {
      // Inform any subscribers outside of the players context
    });
  }
}

Thanks for any hints on that topic.

Best regard,
Marc

2

Hi,
If you instantiate the button within the player UI framework, I don’t think you can easily connect it to external actions. However, if you instantiate it like shown in the following example, you might be able to do so.

Please let us know in case you have any questions.

3

Hi Ludo

Thanks for your reply. I’ve managed to make it work by allowing a callback method to be passed in the config.

export interface CallbackButtonConfig extends ButtonConfig {
  callback: () => void;
}

export class CallbackButton extends Button<CallbackButtonConfig> {
  constructor(config: CallbackButtonConfig) {
    super(config);

    const defaultConfig: CallbackButtonConfig = {
      text: "Run Callback"
    };

    this.config = this.mergeConfig(config, defaultConfig, this.config);
  }

  override configure(player: PlayerAPI, uiManager: UIInstanceManager): void {
    super.configure(player, uiManager);

    this.onClick.subscribe(() => {
      this.config.callback();
    });
  }
}
1 Like