Hi!
I’m trying to render custom UI using ui: false flag in player configuration + initializing new UIManager with my custom UIContainer. However it doesn’t completely work as expected. Default UI is gone indeed, however another UI does not appear on the screen, despite that part of that UI appears in page structure. Would appreciate any advise…
Here’s some samples:
if (!playerRef.current) {
playerRef.current = new Player(playerContainerRef.current, conf);
if (!uiManagerRef.current) {
const uiConfig = {
metadata: {
title: product.title,
description: product.description,
}
}
uiManagerRef.current = new UIManager(
playerRef.current,
playerBitmovinUi({
onForwardClick: () => {
smtpeControllerRef.current?.step(1)
},
onRewindClick: () => {
smtpeControllerRef.current?.step(-1)
}
}),
uiConfig)
console.debug('uiManager', uiManagerRef.current)
}
const playerBitmovinUi = ({
onForwardClick,
onRewindClick
}: PlayerBitmovinUiProps) => {
const buildNavigationButton = (buttonText: string, onClickHandler?: () => void): Button<ButtonConfig> => {
const navigationButton = new Button({ text: UIManager.localize(buttonText) })
navigationButton.onClick.subscribe((event: any) => {
onClickHandler?.()
})
return navigationButton
}
const forwardButton = buildNavigationButton('Next frame', onForwardClick)
const rewindButton = buildNavigationButton('Previous frame', onRewindClick)
const shareFrameButton = buildNavigationButton('Share this frame', () => { toast('Clicked on share frame...') })
const addToFavouritesButton = buildNavigationButton('Add to Favourites', () => { toast('Clicked on Add...') })
const advancedOptionsButton = buildNavigationButton('Advanced Options', () => { toast('Clicked on Options...') })
return new UIContainer({
id: 'ui-root',
components: [
new PlaybackToggleOverlay(),
new ControlBar({
components: [
new Container({
components: [
new SeekBar({
label: new SeekBarLabel(),
enableSeekPreview: false
}),
],
cssClasses: ['controlbar-top'],
}),
],
}),
new ControlBar({
id: 'pause-navigation',
cssClasses: ['controlbar-bottom'],
components: [
new Container({
id: 'container-left',
role: 'button',
ariaLabel: 'previous frame',
components: [
new Component({
id: 'arrow-left',
tag: 'div',
cssClass: 'icon-arrow-left'
}),
rewindButton as Button<ButtonConfig>
]
}),
new Container({
id: 'container-center-button',
components: [
shareFrameButton,
addToFavouritesButton,
advancedOptionsButton
]
}),
new Container({
id: 'container-right',
role: 'button',
ariaLabel: 'next frame',
components: [
forwardButton as Button<ButtonConfig>,
new Component({
tag: 'div',
cssClass: 'icon-arrow-right'
}),
]
}),
]
})
],
hideDelay: 1000
})
}
