From 34958c81b934bb3d6c9bb4f671be7305430ff9ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <alvaro.velad@mirada.tv>
Date: Tue, 12 Oct 2021 10:00:51 +0200
Subject: [PATCH] feat(ui): Added Loop and PIP to context menu, and Statistics
 to overflow menu (#3578)

---
 docs/tutorials/ui-customization.md | 7 ++++++-
 ui/less/containers.less            | 8 ++++++++
 ui/loop_button.js                  | 4 ++++
 ui/pip_button.js                   | 4 ++++
 ui/statistics_button.js            | 5 +++++
 ui/ui.js                           | 2 ++
 6 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/docs/tutorials/ui-customization.md b/docs/tutorials/ui-customization.md
index 63a909f593..8767edd6ba 100644
--- a/docs/tutorials/ui-customization.md
+++ b/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
diff --git a/ui/less/containers.less b/ui/less/containers.less
index e886b5ad51..53326483fc 100644
--- a/ui/less/containers.less
+++ b/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 {
diff --git a/ui/loop_button.js b/ui/loop_button.js
index f35b144d42..14e64984dc 100644
--- a/ui/loop_button.js
+++ b/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());
diff --git a/ui/pip_button.js b/ui/pip_button.js
index 527267932a..3e3f4cce48 100644
--- a/ui/pip_button.js
+++ b/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());
diff --git a/ui/statistics_button.js b/ui/statistics_button.js
index 1f18085f65..dd98410e1e 100644
--- a/ui/statistics_button.js
+++ b/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());
diff --git a/ui/ui.js b/ui/ui.js
index 32b8a03204..dd24c2b787 100644
--- a/ui/ui.js
+++ b/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],