feat(ui): Add right-click context menu, statistics button

[nbcl]

The present pull request aims to provide a solution to #2607 (Add stats for nerds to UI (in the same way as youtube)) by adding a right-click context menu and the statistics button to the UI.

Example

How to preview

Initialize the client with a config that that assigns true to the customContextMenu option, contains statistics in the contextMenuElements array and sets an statisticsList array with the desired statistics.

const config = {
    'customContextMenu': true,
    'contextMenuElements': ['statistics']
    'statisticsList': [... 'playTime', 'pauseTime', 'width', 'height', ...]
};
ui.configure(config);

Changelog

build/types/ui

Adds the statistics_button.js and context_menu.js paths to the UI types file.

docs/tutorials/ui-customization.md

A description of the statistics and customContextMenu configuration options is provided together with an example on how to include them in ui.configure().

shaka-player.uncompiled.js

Adds the require for StatisticsButton and ContextMenu for the uncompiled version of the library.

test/ui/ui_unit.js

Adds tests for both components.

On the second test for the statistics context menu, although there is a delay of 0.2, only a buffering time of 0.1 is expected (expect(bufferingTime).toBeGreaterThanOrEqual(0.1);), this is due to the shaka.util.Timer on the button only ticking every 0.1. The equality margin could be needed in some cases (Shaka Bot on Chrome 91.0.4472.114 (Linux x86_64)) and is explained in #3494.

ui/context_menu.js

A new context menu element is added to the UI. The structure to build the context menu is exactly the same as the currently existing overflow menu, replicating the use of the existing registerElement(), createChildren_() and release() functionalities for factories, children and release handling.

ui/controls.js

Following the same structure of other boolean UI elements (like addBigPlayButton or addBigPlayButton), the context menu
is added in the controls when customContextMenu is true.

ui/enums.js

Adds two additional Material Design Icons to be used in the statistics button.

ui/externs/ui.js

The new statisticsList property is added, giving the option to select specific statistics for the button.

The new contextMenuElements property is added, giving the option to select elements to appear inside the context menu. Currently, this array can only contain 'statistics', as there are no other elements for the menu.

The new customContextMenu boolean is added, giving the option to display a custom context menu.

ui/less/container.less

A new .shaka-context-menu class is created to declare the styles of the context menu.

A new .shaka-statistics-container class is created to declare the styles of the container that displays the statistics.

ui/locales/en.json

The statistics button name is added only in en.json as an example.

ui/locales/source.json

The statistics button name and description are added to the locales source.

ui/statistics_button.js

Using shaka.util.Timer, player.get_stats() is called repeatedly when the statistics container is displayed.

Statistics recovered from the Stats extern are assigned a specific unit category on parseFrom_, which connects to a function defined in parseTo_ that parses the current value to an easily readable output.

generateComponent_(name) receives the name of the statistic and creates a div with the name and parsed current value (i.e: width: 1080px) that is added to the statistics container on onTimerTick_().

All of the value spans are stored in this.displayedElements_ and are later updated directly to avoid performance loss.

ui/ui.js

The default configuration of statisticsList is added, displaying almost all of the available statistics, with the exception of stateHistory and switchHistory. Additionally, they are displayed in an order that when later parsed in the container, visually groups together the statistics of the same unit category.

The default contextMenuElements configuration includes statistics only, as it is the only button available in the context menu.

The customContextMenu boolean is false by default to avoid affecting existing applications.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code
• I have made the corresponding changes to the documentation
• My changes generate no new warnings
• I have run ./build/all.py and the build passes
• I have run ./build/test.py and all tests pass

[theodab]

Besides these minor quibbles, I think your current code looks good to me!

[shaka-bot]

All tests passed!

[hiren3897]

Hello everyone!
When this feature is going to be released?