Adding text overlay on video when toggled from info button in controlbar

[faisalkaramat26]

Hi,

I have a requirement to add text as an overlay on the video when toggled using an info button in control bar, I have brokendown this requirement to 2 diff task

1. to add info button on the controlbar, I created a html element and tried to append it to videoPlayer.controlBar and then override the handleClick to toggle the text overlay

const infoButton = player.controlBar.addChild( 'button', {}, 18 ); const infoButtonDom = infoButton.el(); infoButtonDom.innerHTML = ReactDOMServer.renderToString( <Info sx={{ width: '20px', height: '20px' }} /> );

            `infoButtonDom.handleClick = function () {
                alert('toggle text overlay');
            };`

2. create a text overlay that goes on the video

code is still WIP
let div = document.createElement('div'); player.el().appendChild(div); div.innerHTML = ReactDOMServer.renderToString( <div style={{ display: deviceType === 'desktop' ? 'flex' : 'none', justifyContent: 'center', alignItems: 'center', gap: SpaceXxs, bottom: '5%', position: 'absolute', textAlign: 'center', padding: 0 ${SpaceMd}}} ><p style={{ padding:${SpaceXxs} var(--xs, 0.5rem), alignSelf: 'stretch', color: ColorWhite, background: 'red', fontSize: '0.75rem' }} > Text overlay </p> </div> );

is this the right way to approach or is there an already built solution that I can use? I looked into making use of textTrackDisplay but it is dealing with certain kinds of text only