feat(ui): Add Loop, PIP, Cast, AirPlay buttons to control panel (shaka-project#3255)

These menu items are now available to be placed in the control panel of the UI.

Issue shaka-project#2676

Author: nbcl

docs/tutorials/ui-customization.md

@@ -60,6 +60,13 @@ The following elements can be added to the UI bar using this configuration value
 * fast_forward: adds a button that fast forwards the presentation on click; that is, it
   starts playing the presentation at an increased speed
 * spacer: adds a chunk of empty space between the adjacent elements.
+* picture_in_picture: adds a button that enables/disables picture-in-picture mode on browsers
+  that support it. Button is invisible on other browsers.
+* loop: adds a button that controls if the currently selected video is played in a loop.
+* airplay: adds a button that opens a AirPlay dialog. The button is visible only if the browser
+  supports AirPlay.
+* cast: adds a button that opens a Chromecast dialog. The button is visible only if there is
+  at least one Chromecast device on the same network available for casting.
 <!-- TODO: If we add more buttons that can be put in the order this way, list them here. -->
 
 Similarly, the 'overflowMenuButtons' configuration option can be used to control

ui/airplay_button.js

@@ -10,6 +10,7 @@ goog.provide('shaka.ui.AirPlayButton');
 goog.require('goog.asserts');
 goog.require('shaka.Player');
 goog.require('shaka.ui.Constants');
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
@@ -46,6 +47,7 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element {
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
     this.airplayNameSpan_ = shaka.util.Dom.createHTMLElement('span');
     label.appendChild(this.airplayNameSpan_);
 
@@ -157,3 +159,6 @@ shaka.ui.AirPlayButton.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'airplay', new shaka.ui.AirPlayButton.Factory());
+
+shaka.ui.Controls.registerElement(
+    'airplay', new shaka.ui.AirPlayButton.Factory());

ui/cast_button.js

@@ -9,6 +9,7 @@ goog.provide('shaka.ui.CastButton');
 
 goog.require('shaka.cast.CastProxy');
 goog.require('shaka.ui.Constants');
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
@@ -51,6 +52,7 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
     this.castNameSpan_ = shaka.util.Dom.createHTMLElement('span');
     label.appendChild(this.castNameSpan_);
 
@@ -179,3 +181,6 @@ shaka.ui.CastButton.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'cast', new shaka.ui.CastButton.Factory());
+
+shaka.ui.Controls.registerElement(
+    'cast', new shaka.ui.CastButton.Factory());

ui/enums.js

@@ -36,7 +36,8 @@ shaka.ui.Enums.MaterialDesignIcons = {
   'PLAY': 'play_arrow',
   'PLAYBACK_RATE': 'slow_motion_video',
   'PAUSE': 'pause',
-  'LOOP': 'loop',
+  'LOOP': 'repeat',
+  'UNLOOP': 'repeat_on',
   'AIRPLAY': 'airplay',
   'REPLAY': 'replay',
 };

ui/less/containers.less

@@ -170,6 +170,11 @@
   }
 }
 
+/* Buttons hide certain items if they are found inside the control panel */
+.shaka-controls-button-panel .shaka-overflow-menu-only {
+  display: none;
+}
+
 /* The container for the giant play button.  Sits above (Y axis) the
  * other video controls and seek bar, in the middle of the video frame, on top
  * of (Z axis) the video. */

ui/loop_button.js

@@ -8,6 +8,7 @@
 goog.provide('shaka.ui.LoopButton');
 
 goog.require('shaka.ui.Constants');
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
@@ -44,6 +45,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
     this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
     this.nameSpan_.textContent = this.localization.resolve(LocIds.LOOP);
     label.appendChild(this.nameSpan_);
@@ -133,6 +135,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
    */
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
+    const Icons = shaka.ui.Enums.MaterialDesignIcons;
 
     this.nameSpan_.textContent =
         this.localization.resolve(LocIds.LOOP);
@@ -141,6 +144,10 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
 
     this.currentState_.textContent = this.localization.resolve(labelText);
 
+    const icon = this.video.loop ? Icons.UNLOOP : Icons.LOOP;
+
+    this.icon_.textContent = icon;
+
     const ariaText = this.video.loop ?
         LocIds.EXIT_LOOP_MODE : LocIds.ENTER_LOOP_MODE;
 
@@ -163,3 +170,6 @@ shaka.ui.LoopButton.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'loop', new shaka.ui.LoopButton.Factory());
+
+shaka.ui.Controls.registerElement(
+    'loop', new shaka.ui.LoopButton.Factory());

ui/pip_button.js

@@ -8,6 +8,7 @@
 goog.provide('shaka.ui.PipButton');
 
 goog.require('shaka.ui.Constants');
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
@@ -48,6 +49,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
     this.pipNameSpan_ = shaka.util.Dom.createHTMLElement('span');
     this.pipNameSpan_.textContent =
       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
@@ -235,3 +237,6 @@ shaka.ui.PipButton.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'picture_in_picture', new shaka.ui.PipButton.Factory());
+
+shaka.ui.Controls.registerElement(
+    'picture_in_picture', new shaka.ui.PipButton.Factory());