feat(ui): Added Loop and PIP to context menu, and Statistics to overf…

…low menu (#3578)

docs/tutorials/ui-customization.md

@@ -88,6 +88,7 @@ The following buttons can be added to the overflow menu:
 * playback_rate: adds a button that controls the playback rate selection.
 * airplay: adds a button that opens a AirPlay dialog. The button is visible only if the browser
   supports AirPlay.
+* Statistics: adds a button that displays statistics of the video.
 <!-- TODO: If we add more buttons that can be put in the order this way, list them here. -->
 
 Example:
@@ -116,8 +117,12 @@ ui.configure(config);
 
 #### Replacing the default context menu
 
-A custom context menu can be added through the `customContextMenu` boolean. Additionally, the `contextMenuElements` option can be used to add elements to it. Currently only the statistics button is available:
+A custom context menu can be added through the `customContextMenu` boolean. Additionally, the `contextMenuElements` option can be used to add elements to it.
+The following buttons can be added to the context menu:
 * Statistics: adds a button that displays statistics of the video.
+* loop: adds a button that controls if the currently selected video is played in a loop.
+* picture_in_picture: adds a button that enables/disables picture-in-picture mode on browsers
+  that support it. Button is invisible on other browsers.
 
 Example:
 ```js

ui/less/containers.less

@@ -238,6 +238,7 @@
   button {
     padding: 5px 10px;
 
+    width: 100%;
     display: flex;
     align-items: center;
 
@@ -259,6 +260,13 @@
     color: white;
     cursor: pointer;
   }
+
+  .shaka-current-selection-span {
+    align-items: flex-start;
+
+    color: white;
+    cursor: pointer;
+  }
 }
 
 .shaka-scrim-container {

ui/loop_button.js

@@ -7,6 +7,7 @@
 
 goog.provide('shaka.ui.LoopButton');
 
+goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -172,3 +173,6 @@ shaka.ui.OverflowMenu.registerElement(
 
 shaka.ui.Controls.registerElement(
     'loop', new shaka.ui.LoopButton.Factory());
+
+shaka.ui.ContextMenu.registerElement(
+    'loop', new shaka.ui.LoopButton.Factory());

ui/pip_button.js

@@ -7,6 +7,7 @@
 
 goog.provide('shaka.ui.PipButton');
 
+goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -239,3 +240,6 @@ shaka.ui.OverflowMenu.registerElement(
 
 shaka.ui.Controls.registerElement(
     'picture_in_picture', new shaka.ui.PipButton.Factory());
+
+shaka.ui.ContextMenu.registerElement(
+    'picture_in_picture', new shaka.ui.PipButton.Factory());

ui/statistics_button.js

@@ -14,6 +14,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.Timer');
@@ -53,6 +54,7 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
 
     /** @private {!HTMLElement} */
     this.stateSpan_ = shaka.util.Dom.createHTMLElement('span');
+    this.stateSpan_.classList.add('shaka-current-selection-span');
     label.appendChild(this.stateSpan_);
 
     this.button_.appendChild(label);
@@ -244,5 +246,8 @@ shaka.ui.StatisticsButton.Factory = class {
 };
 
 
+shaka.ui.OverflowMenu.registerElement(
+    'statistics', new shaka.ui.StatisticsButton.Factory());
+
 shaka.ui.ContextMenu.registerElement(
     'statistics', new shaka.ui.StatisticsButton.Factory());

ui/ui.js

@@ -207,6 +207,8 @@ shaka.ui.Overlay = class {
         'completionPercent',
       ],
       contextMenuElements: [
+        'loop',
+        'picture_in_picture',
         'statistics',
       ],
       playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],