Shaka Player UI customization

[aXXo-dev]

What version of Shaka Player are you using?
-> 4.9.5

What browser and OS are you using?
-> Edge on Windows 10

Hi,

I have been trying to customize the UI of my shaka player, and following the documentation is just not working. It tells me to query the element and ["ui"], but to no success. I've also seen people doing shaka.ui.Overlay and such things, but this "ui" object is not defined in my shaka object. So now I'm a bit confused as to if the documentation is outdated, and what I'm actually supposed to do to get around customizing the UI.

Thank you!

[theodab]

The "ui" variable of the video element or video container element should contain the UI object, once the UI has been set up. That has not been changed since the tutorial was written.

It's hard to say what the exact problem might be without seeing your code, really. Are you putting the code snippet that configures the UI inside the init function, or just in the global context, perhaps?

[aXXo-dev]

Thanks for your response! I agree that more detail should have been provided. I'm running the project under NextJS and am using React refs in order to retrieve the video element. I tried to retrieve it after initializing shaka, but I am still getting undefined:

// This code runs in a useEffect with the dependency list: []
const player = new shaka.Player(videoPlayer);

console.log(videoPlayer["ui"]);

The player works and plays videos, I'm only struggling with the UI (just to specify). Also again, I am unable to get the shaka.ui.Overlay that I've seen some people use in similar projects.

[theodab]

Oh, I see.

The Shaka Player UI (e.g. shaka.ui.Overlay) is a wrapper class around shaka.Player. If you just create a shaka.Player by itself, it won't have a UI.
The "ui" variable of the video is only applied if you are having the Shaka UI system automatically create the player and UI for you (e.g. by setting the data-shaka-player-container and data-shaka-player tags in your HTML, as described in the tutorial). It's how you can find the UI overlay when it has been created automatically for you.

If you are interested in creating your player through code, and not letting the Shaka UI setup scan the DOM and make the player for you, you should look at the section on "Programmatic UI setup" in the tutorial.
You can just create a shaka.ui.Overlay object using the player you made, and then configure that object, everything should still work that way. The customization tutorials are just written assuming you are using the automatic setup, since that's the "default" method.