How to get the subtitle to get on top of the play control bar when it is shown?

[MarianoFacundoArch]

I see this when loading subtitles with the latest shaka version (4.8.5).

I am trying to look at what might be causing this, but I do not have any clues about how to get the appropriate behavior, as I am doing nothing strange other than adding the text tracks and loading the Shaka player UI.

Could you please guide me on where I should be observing the expected behavior of the subtitles?
Any help would be greatly appreciated!
Thanks

[MarianoFacundoArch]

Doing further research and comparing, for some reason in my setup the shaka-text-container is not even being created.

[MarianoFacundoArch]

I am using:

    this._shakaPlayerInstance = new shaka.Player();
    await this._shakaPlayerInstance.attach(this._videoPlayerElement);

    this._shakaPlayerInstance.setVideoContainer(
      this._videoPlayerElement.parentElement
    );

      await this._shakaPlayerInstance.load(
        contenthere
      );

But the text container is not created.

[MarianoFacundoArch]

Good and bad news. First the good, I fixed the problem on the text container not being created appropriately; documentation is not OK I guess @avelad

To make it work, you must set the videoContainer before calling the attach method.

    this._shakaPlayerInstance = new shaka.Player();

    this._shakaPlayerInstance.setVideoContainer(
      this._videoPlayerElement.parentElement
    );
    await this._shakaPlayerInstance.attach(this._videoPlayerElement);

The documentation states to do the setVideoContainer before the load, but it has to be done before the attach.

However, the problem now is that it doesn't go up when the controls are shown.
Compared with another code that works, it applies the following css class:

But it does not in the player i have with the fixed I quoted.

[MarianoFacundoArch]

Finally found the whole problem - I think we need to work on how to fix this.

As the only way to get the text container created appropriately is before the attach method, at that time the UI does not exist. So the shaka-text-container is added, as you can see in the image at the very top of the div DOM.
After that, we add and configure the UI, so the UI element is put after the shaka-text-container DOM. Because the styling is applied based on the shown condition of the shaka-controls-container, it does not apply unless the shaka-controls-container is before the shaka-text-container .

I am not really sure what approach we should work on, @avelad @joeyparrish , if we should fix the setVideoContainer method so that it would work if we call it before the load() in order to have the UI set up appropriately before, or if we should keep as it is now, update the documentation and tutorials to make it clear that it has to be called before the attach method and then fix the UI so that it is added before the text-container.

I hope we can benefit from your broad expertise here.

Mariano.

[avelad]

@MarianoFacundoArch I updated the documentation about attach process

[shaka-bot]

@MarianoFacundoArch Does this answer all your questions? If so, would you please close the issue?