feat(ui): Add Quality, Language, Playback, Captions buttons to control panel

[nbcl]

The present pull request aims to provide a solution to #2676 (Add overflowMenuButtons to the UI bar) by making the Quality, Language, Playback and Captions buttons available in the UI control panel.

Preview

Configuration

Initialize the client with a config that includes captions, language, captions and quality on controlPanelElements, as follows.

const config = {
    'controlPanelElements': [... 'playback_rate', 'language', 'captions', 'quality', ...],
};
ui.configure(config);

Changelog

docs/tutorials/ui-customization.md

The new buttons were added to the `controlPanelElements` list in the documentation.

test/ui/ui_unit.js

Additional unit tests were provided to check the submenus functionality.

ui/audio_language_selection.js

Exposes the language button as a control panel option.

ui/controls.js

A click event listener is present to hide settings menus when clicking in the control panel, now that new buttons that open said menus are present in the control panel, this measure must be prevented to avoid an "instant open-close" behavior.

An additional event listener was added to close other submenus when opening one.

ui/enums.js

New `CLOSE` and `CLOSED_CAPTIONS_OFF` icons were added, to be used in `ui/settings_menu.js` and `ui/text_selection.js` respectively.

ui/overflow_menu.less

Previously, the captions button reflected the toggle status with a color change between black and grey. Now that the button is available on the control panel, this styles were removed as the change is signalized with an icon change to maintain the white color present in the other buttons of the panel.

Another possible option would be changing between the "Material Icons Outlined" and "Material Icons Round" fonts which would require importing the former as new font.

ui/overflow_menu.js

Buttons that open submenus are initially built with a "Close" option. When present in the overflow menu, that option is replaced with a "Back" option to return to the main menu.

ui/playback_rate.js

Exposes the `playback_rate` button as a control panel option.

ui/resolution_selection.js

Exposes the `quality` button as a control panel option.

ui/settings_menu.js

Two CSS classes were added,`shaka-overflow-menu-only` (pre-existing) that hides the text label when present in the control panel, and `shaka-overflow-button` (new) which denies the "open-close" behavior described in `ui/controls.js`.

Settings menu are now also built with a close button by default, which is then replaced with a back button, in ui/overflow_menu.js, exclusively if they are part of the overflow menu.

ui/text_selecion.js

Exposes the captions button as a control panel option, and replaces the previously existing color change on-toggle.

[shaka-bot]

Test Failure:

Generating Closure dependencies...
Linting JavaScript...
Linting CSS...
Linting HTML...

Config loaded: /var/lib/jenkins/workspace/Manual PR Test (local-tests)/.htmlhintrc

Config loaded: /var/lib/jenkins/workspace/Manual PR Test (local-tests)/.htmlhintrc

Config loaded: /var/lib/jenkins/workspace/Manual PR Test (local-tests)/.htmlhintrc

Scanned 3 files, no errors found (42 ms).
Checking that the build files are complete...
Checking for common misspellings...
Checking correct usage of eslint-disable...
Checking the tests for type errors...
No changes detected, skipping. Use --force to override.
/var/lib/jenkins/workspace/Manual PR Test (local-tests)/ui/audio_language_selection.js:10:0: ERROR - [JSC_EXTRA_REQUIRE_WARNING] extra require: 'shaka.ui.Constants' is never referenced in this file
10| goog.require('shaka.ui.Constants');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/var/lib/jenkins/workspace/Manual PR Test (local-tests)/ui/playback_rate_selection.js:10:0: ERROR - [JSC_EXTRA_REQUIRE_WARNING] extra require: 'shaka.ui.Constants' is never referenced in this file
10| goog.require('shaka.ui.Constants');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/var/lib/jenkins/workspace/Manual PR Test (local-tests)/ui/resolution_selection.js:11:0: ERROR - [JSC_EXTRA_REQUIRE_WARNING] extra require: 'shaka.ui.Constants' is never referenced in this file
11| goog.require('shaka.ui.Constants');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/var/lib/jenkins/workspace/Manual PR Test (local-tests)/ui/text_selection.js:10:0: ERROR - [JSC_EXTRA_REQUIRE_WARNING] extra require: 'shaka.ui.Constants' is never referenced in this file
10| goog.require('shaka.ui.Constants');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

4 error(s), 0 warning(s), 93.0% typed
Build failed
END-BUILD: FAILURE
Build step 'Execute shell' marked build as failure

[nbcl]

Thank you Shaka Bot, I incorrectly solved conflicts on my last upstream merge - Fixed it on my last commit!

[shaka-bot]

All tests passed!