Player rendered control bar twice when stream error happens

[vanminhquangtri]

Have you read the FAQ and checked for duplicate open issues? Yes

If the problem is related to FairPlay, have you read the tutorial?

Yes

What version of Shaka Player are you using?

4.6.3

Can you reproduce the issue with our latest release version? Please watch the screen recorder because the bug only happen when stream has error so I am not able to reproduce

Can you reproduce the issue with the latest code from main? Please watch the screen recorder because the bug only happen when stream has error so I am not able to reproduce

Are you using the demo app or your own custom app? Custom app

If custom app, can you reproduce the issue using our demo app? Please watch the screen recorder at google drive because the bug only happen when stream has error so I am not able to reproduce. The bug happen at time: 06:14 of recorder. https://drive.google.com/file/d/17dwIuI4F3CRmmothRXKgWUM270C-Trtl/view?usp=sharing

What browser and OS are you using? Both Window and MacOS Safari

For embedded devices (smart TVs, etc.), what model and firmware version are you using? Not use

What are the manifest and license server URIs?

https://vod06-cdn.fptplay.net/POVOD/encoded/2023/11/02/girlinthespiderswebthe-2018-us-1698931499/master.m3u8 This is non-DRM stream

What configuration are you using? What is the output of player.getConfiguration()?

Pleas refer to the attachment config.txt

What did you do?

Load stream as normal. Every thing work perfect at beginning. Then if error happen => player tries to retry play stream. This is okay. This is the error detail:

What did you expect to happen? If the retry is ok, please don't duplicate the UI: controls buttons, text container

What actually happened?

You can see that at begining there only 1 UI control bar rendered by shaka: controls buttons, text,..... But after a retry by shaka, everything is duplicated. The are two element class=shaka-controls-container, shaka-text-containers and other UI elements. This leads to error that there 2 UI same: 2 same volume buttons, 2 text containers,.... I confirm that we don't do anything to render UI so I though this would be a bug by shaka player.

Are you planning send a PR to fix it? I will try if possible.

Thank you.

[vanminhquangtri]

Hello @avelad I have just added manifest URL and configuration. Sorry my missing. Thank you.

[theodab]

I've never seen this error before! Honestly, I can't think of why it would happen.

A shaka.ui.Controls object only makes a single controls container, and a shaka.ui.Overlay object only makes a single shaka.ui.Controls. Those processes are both synchronous, so I wouldn't expect a race condition to be the culprit.

I didn't see any DOM elements marked data-shaka-player-container, data-shaka-player, data-shaka-player-canvas, etc when you were scrolling through your elements browser, so I assume you are setting up the UI programmatically. Does your custom app perhaps create a new shaka.ui.Overlay object when the player errors?

One thing you could do to test is to capture the ui variable on your video element, save it as a global variable, and then check it again after an error. If the ui variable points to a different object after an error, that would suggest a second overlay has been created.

[vanminhquangtri]

Hello @theodab yes sure another overlay is created. And I confirm that the function shaka.ui.Overlay I only call once. When error happen, the function is not called again also.

[theodab]

Well, the only part of Shaka Player that creates a shaka.ui.Overlay object is the UI auto-setup, which you don't look to be using (and which only happens in response to the load event on the window, so it won't be happening multiple times anyway).

[vanminhquangtri]

hello @theodab , is there a way to disable the UI auto set-up after we call load() success? Also there's one thing that, if reload the browser, the bug will gone away.

[theodab]

The UI auto-setup creates overlays when it detects the presence of an HTML element with the tag data-shaka-player-container or data-shaka-player. Looking at your video again, you actually do have those present. I guess I didn't notice them the first time I looked. So you should try removing those tags. They aren't required for Shaka Player to work, they just act as an indicator for the UI system to make an overlay for you.

[vanminhquangtri]

Hello @theodab @avelad, I checked my code the whole project carefully. We really don't manually add the tag data-shaka-player-container to the container div of video. It is generated by the shaka SDK. Is the any configuration to make it disappear? The SDK using is: https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.6.3/shaka-player.ui.min.js

Below is capture of my code:

I also have this idea: for everytime SDK render the UI, can you please check if the DOM already existed, we will not render it again. For example:

const controlsContainer = document.querySelector(".shaka-controls-container")
if (controlsContainer) {
  // do not createElement again....
}

Hope to hear from you soon

[vanminhquangtri]

Hello @avelad @theodab , I have just tried manually remove the attribute data-shaka-player-container/data-shaka-player when happen event loadedmetadata. Mean that there's no DOM with this attribute entire the page. But unfortunately the UI is still duplicate when stream error happen. I noted that the error code for these case is 3015/3016 will lead to duplicated UI. Thank you.

[theodab]

I don't think there's anything else I can do to help you without actually being able to test with your project, I'm afraid. Even then the idea that it was the auto-setup was kind of a stretch, since that only happens once when the page first loads; it wouldn't really explain new elements appearing mid playback.

Would you be able to strip out any proprietary or sensitive information, and provide a minimum reproduction for this issue?

If you want to be private, you can send it to shaka-player-maintainers@googlegroups.com, where it will only be seen by a few Shaka Player maintainers (such as me and Alvaro).

[vanminhquangtri]

Thank you @theodab, I actually can not reproduce the issue. But it seem the issue is my internal code which make the overlay run twice, not related to shaka SDK. I will try to fix on my end. Thank you.