Added ability to optionally disable certain frontend elements

[kass-kass]

Problem statement:

The frontend classes (mainly Application and Controls) are set to automatically create elements, such as:

• Full screen button
• Settings button + panel
• Stats button + panel
• Video QP indicator
• XR button

However, for many applications, it might be beneficial to allow disabling certain functionalities. For example, an end-user-facing web page with a stream might be better off allowing for much settings changes, as well as simplifying the experience for the user by not displaying technologically advanced information.

Also, the styling and location of the buttons is pre-defined, and it's not easily possible to use other HTML elements from a custom implementation of the frontend.

Solutions

The changes in this pull request address these limitations by expanding the UIOptions interface used to initialize an Application by including optional parameters to configure:

• Which panels (settings, stats) should (not) be created
• Which buttons should be created, and if they're not created, if they're totally disabled, or instead use an externally provided HTMLButtonElement to trigger the same functionality
• Whether or not the video QP indicator should be created internally, or an external element should be used. The connection to the external element is a callback function which simply provides the qp value, which can be handled in any way necessary.

Compatibility

The changes are made in a way that is fully compatible with the previous API: all the new configuration parameters are optional, and are checked whenever they might be used. If no changes are made to the code interacting with UI library, no visible or functional changes to the behaviour will be present. By default, if no custom config is specified, all elements are created in the same way as before.

Details:

The Application configuration object is updated, and the class also creates a newly-added configuration object for the Controls class, which now checks which buttons it should create.

The FullScreenIcon class is now split into a FullScreenIconBase base class with all fullscreen toggling functionality, which can be triggered by any provided button; a FullScreenIconExternal class, which initializes any given button element to have fullscreen toggle functionality; and FullScreenIcon, which retains the previous functionality it had - creating a button element with svg-based icons and changing its state internally.

[lukehb]

Very nice PR. I have left my comments about what I would like to changed before I can approve. In general, my changes are to bring it in line with coding standards in the rest of the codebase and to make the feature proposed here even more flexible (I hope).

[lukehb]

@hmuurine To review also if you have any free cycles.

[kass-kass]

@lukehb Thank you for the detailed feedback, will make these changes in the coming few days.

[kass-kass]

Hi @lukehb, added the changes that you suggested and resolved most comments. I think I updated everything you mentioend overall, some things I did slightly differently but not in any significant way. See the replies to the comments that I left.

fd46393

[lukehb]

@kass-kass Left one minor request for further changes, everything is looking good otherwise.

[kass-kass]

@lukehb Should all be there, thanks for the explanation.

[lukehb]

Code changes look great. Ready to merge on that front... but...

Sorry to be that guy, but we just recently made a push to add more documentation customizing the frontend, so given this change I was wondering whether your PR could also include a new section on this page explaining the new functionality you have added here.

Specifically if you could document:

• How to turn off the various UI elements this PR enables
• How to provide custom elements

Very much appreciated if you could do this! After that, let's land this... for real this time :)

[kass-kass]

@lukehb Totally reasonable, it's good to have things well described. Will update the documentation.

[kass-kass]

@lukehb Added explanations for these features and code snippets.

Additionally made some small changes to structure of the customization doc, and also made some links in the main readme file to make separate projects directly reachable with a link.

[lukehb]

Amazing work. Merged!