Adding custom UI element - is adding content to Overlay the right way?

[Yaksinikos]

Component your question relates to

• Signalling server
• Frontend library
• Frontend UI library
• Matchmaker
• SFU
• This repo
• Other

Background

I'm creating a HTML/TS Frontend for my Pixel Streaming 2 Game, that is supposed to use mainly Web UI.

Question

I see that creating custom HTML inside the player.html is great and works well, besides the fact that it will not show in full-screen mode.
Therefor I use Overlays that I am trying to edit and to adjust it for my needs, so that my UI depends on the pixel-stream parent-element.
Sadly I can not find any explanation how the Overlay system is supposed to work. I see there is a constructor constructing a single content element for each layer and adding it to the overlay's root element, but how should this system work with two or more elements?
I technically can implement a simple workaround, by adding my elements to one sub-element of the overlay's child, but this seems not properly to me. So maybe there is a function "add content element to overlay" needed, that should be called inside the constructor or somewhere else?

Additional context

Add any other context or screenshots that are relevant for your question.

[lukehb]

Overlays are more meant for displaying small pieces of text to the user. I would not extend them if you are creating custom UI.

If you are creating custom UI, I would add the custom UI as a child of stream.videoElementParent, which should be exposed in the public API of Application:

PixelStreamingInfrastructure/Frontend/ui-library/src/Application/Application.ts

Line 78 in 2c86578

stream: PixelStreaming;