This page allows testing the use of Preset and Custom UI Components for the Web & Smart TV SDK.
The Big Play Button component has been overridden by using the UiManager's overrideDefaultComponent method.
To do this, one must create a custom class that extends any of the default UiManager components.
class CustomBigButton extends BigPlayButtonUiComponent {
...
}
UiManager.overrideDefaultComponent(UiComponentType.BigPlayButton, CustomBigButton);All UI Components extend the UiComponent class, which has an extensive API.
In the example below, the show and hide methods are used to toggle the display of the overriden component.
In order to create a custom component from scratch, create an instance of the BaseUiComponent class.
Then, the component can be added to any prexisting UI Component with the addChild method.
const element = document.createElement('div');
const customComponent = new BaseUiComponent({
name: 'CustomUiComponent',
componentOptions: {
el: element,
},
});
const uiManager = player.getUiManager();
const playerComponent = uiManager.getPlayerContainerUiComponent();
playerComponent.addChild(customComponent);
In the below example, a custom component is added/removed from the control bar.