Google Summer of Code - Shaka Player UI

Sprint Overview Shaka Player UI

Google’s Shaka Player is an JavaScript library that allows users to play adaptive media such as DASH and HLS inside a browser without the use of external plugins or flash.

While building software with Shaka, developers can import Player’s own user interface to receive bundled component classes that help them achieve a high-quality, accessible and localized experience.

Natively, the library includes several configuration options, allowing applications to reach an ideal fit between the interactive aspects of the display and the intended content.

This project aims to introduce enhancements for the options available in the user interface plugin, through the refactoring of existing components and the addition of new scalable interfaces, delivering a highly customizable experience for developers.

Feature I Adding single buttons to the control panel

Overview

Loop, Picture-in-picture, Chromecast and AirPlay buttons were only available to be placed in the overflow menu section of the UI, the purpose of this feature was to implement them as a configurable option in the control panel.

google/shaka-player

Lines 1 to 4 in app/demo/app.js

1 const config = {

2 'controlPanelButtons' : [‘loop’, ‘picture_in_picture’, ‘cast’, ‘airplay’]

3 };

4 ui.configure(config);

Approach

The main difference in the structure of buttons when inside the overflow menu is the presence of additional information in the form of a name and status. Removing these elements via CSS when the button is not present inside an overflow submenu with the use of a parent class makes them available to register in the control panel factory as regular control panel elements.

Source Code

google/shaka-player#3255 (https://github.com/google/shaka-player/pull/3255)

Feature II Adding buttons that have submenus to the control panel

Overview

Quality, Language, Playback and Captions buttons were only available to be placed in the overflow menu section of the UI. The objective of this feature was to implement them as a configurable option in the control panel while still providing their native submenu options.

google/shaka-player

Lines 1 to 4 in app/demo/app.js

1 const config = {

2 'controlPanelButtons' : [‘quality’, ‘language’, ‘playback_rate’, ‘captions’]

3 };

4 ui.configure(config);

Approach

The original overflow menu had listeners to make all other submenus to disappear when any other element in the control panel was clicked, which conflicted with the purpose of making “submenu-opening” buttons available in the control panel. This feature included an event manager that checks for “overflow” buttons by detecting their CSS class with the use of the closest() method in the Element API, which avoids hiding settings menu when present in the control panel. After that, the flow that created the submenu of the buttons was moved from the control panel to the shaka.ui.SettingsMenu class so that it could be granularly adjusted to display a “back” arrow (if present on the overflow menu, used to return to the main menu) or a “close” symbol (if present on the control panel, to close the submenu) depending on its location in the player. With that being solved, buttons were finally registered to shaka.ui.Controls, making them available for the control panel.

Source Code

google/shaka-player#3465 (https://github.com/google/shaka-player/pull/3465)

Feature III: Adding a right-click menu and statistics button

Overview

Previously, developers could only programmatically access the Player API to receive the current statistics of the playing content, while end-users were usually not able to access them at all. This feature introduced a live-updated statistics container and a custom “right-click” context menu that can be updated in the future to contain additional buttons.

google/shaka-player

Lines 1 to 6 in app/demo/app.js

1 const config = {

2 'customContextMenu' : true,

3 'contextMenuEelements' : [‘statistics’],

4 'statisticsList' : [‘playTime’, ‘pauseTime’, ‘width’, ‘height’]

5 };

6 ui.configure(config);

Approach

A statistics button was created to display and update a new container while internally calling the getStats() method, parsing it to readable content depending on the input unit, and only ticking if it was necessarily displayed.

The right-click menu was introduced by preventing the default behaviour of a ‘contextmenu’ event anywhere inside the player and replacing it with a new container that is positioned relative to the location of the cursor.

Source Code

google/shaka-player#3548 (https://github.com/google/shaka-player/pull/3548)

Feature IV: Adding tooltips to buttons in the control panel

Overview

Buttons like quality and playback, amongst others, depended on a label to display the current status to the user. Once they were made available in the control panel, there was no other way to access their current selection than to open the submenu. Adding tooltips provides information of the functionality and status of a button on hover.

google/shaka-player

Lines 1 to 4 in your-app/demo/app.js

1 const config = {

2 'enableTooltips' : true,

3 };

4 ui.configure(config);

Approach

This feature utilizes a licensed approach that builds tooltips through the use of the :after pseudo element by receiving the currently existing aria-label of the button as content.

Additionally, a new shaka-status attribute was added to receive the current status of the button each time it is updated, adding it to the content of the tooltip in parenthesis.

Source Code

google/shaka-player#3572 (https://github.com/google/shaka-player/pull/3572)

Feature V: Adding configurable rates to playback, rewind and fast forward states

Overview

Rewind, fast forward and playback selection buttons used to only offer a set list of rates that the user would be able to choose from.

google/shaka-player

Lines 1 to 7 in your-app/demo/app.js

1 const config = {

2 'controlPanelElements' : [‘playback_rate’, ‘fast_forward’, ‘rewind’],

3 'playbackRates' : [0.5, 1, 1.5, 2, 4],

4 'fastForwardRates' : [2, 4, 8, 1],

5 'rewindRates' : [-1, -2, -4, -8]

6 };

7 ui.configure(config);

Approach

Optional rate lists are now available to set through the ui configuration and are later used as reference to update the rewind, fast forward and playback rates when selected.

Source Code

google/shaka-player#3579 (https://github.com/google/shaka-player/pull/3579)