shaka-player 4.4.3 → 4.6.0

package/ui/controls.js

@@ -643,6 +643,131 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     }
   }
 
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isPiPAllowed() {
+    if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+      return true;
+    }
+    if (document.pictureInPictureEnabled) {
+      const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+      return !video.disablePictureInPicture;
+    }
+    return false;
+  }
+
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isPiPEnabled() {
+    if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+      return !!window.documentPictureInPicture.window;
+    } else {
+      return !!document.pictureInPictureElement;
+    }
+  }
+
+  /** @export */
+  async togglePiP() {
+    try {
+      if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+        await this.toggleDocumentPictureInPicture_();
+      } else if (!document.pictureInPictureElement) {
+        // If you were fullscreen, leave fullscreen first.
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        }
+        const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+        await video.requestPictureInPicture();
+      } else {
+        await document.exitPictureInPicture();
+      }
+    } catch (error) {
+      this.dispatchEvent(new shaka.util.FakeEvent(
+          'error', (new Map()).set('detail', error)));
+    }
+  }
+
+  /**
+   * The Document Picture-in-Picture API makes it possible to open an
+   * always-on-top window that can be populated with arbitrary HTML content.
+   * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
+   * @private
+   */
+  async toggleDocumentPictureInPicture_() {
+    // Close Picture-in-Picture window if any.
+    if (window.documentPictureInPicture.window) {
+      window.documentPictureInPicture.window.close();
+      return;
+    }
+
+    // Open a Picture-in-Picture window.
+    const pipPlayer = this.videoContainer_;
+    const rectPipPlayer = pipPlayer.getBoundingClientRect();
+    const pipWindow = await window.documentPictureInPicture.requestWindow({
+      width: rectPipPlayer.width,
+      height: rectPipPlayer.height,
+    });
+
+    // Copy style sheets to the Picture-in-Picture window.
+    this.copyStyleSheetsToWindow_(pipWindow);
+
+    // Add placeholder for the player.
+    const parentPlayer = pipPlayer.parentNode || document.body;
+    const placeholder = this.videoContainer_.cloneNode(true);
+    placeholder.style.visibility = 'hidden';
+    placeholder.style.height = getComputedStyle(pipPlayer).height;
+    parentPlayer.appendChild(placeholder);
+
+    // Make sure player fits in the Picture-in-Picture window.
+    const styles = document.createElement('style');
+    styles.append(`[data-shaka-player-container] {
+      width: 100% !important; max-height: 100%}`);
+    pipWindow.document.head.append(styles);
+
+    // Move player to the Picture-in-Picture window.
+    pipWindow.document.body.append(pipPlayer);
+
+    // Listen for the PiP closing event to move the player back.
+    this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
+      placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
+    });
+  }
+
+  /** @private */
+  copyStyleSheetsToWindow_(win) {
+    const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
+    const allCSS = [...styleSheets]
+        .map((sheet) => {
+          try {
+            return [...sheet.cssRules].map((rule) => rule.cssText).join('');
+          } catch (e) {
+            const link = /** @type {!HTMLLinkElement} */(
+              document.createElement('link'));
+
+            link.rel = 'stylesheet';
+            link.type = sheet.type;
+            link.media = sheet.media;
+            link.href = sheet.href;
+            win.document.head.appendChild(link);
+          }
+          return '';
+        })
+        .filter(Boolean)
+        .join('\n');
+    const style = document.createElement('style');
+
+    style.textContent = allCSS;
+    win.document.head.appendChild(style);
+  }
+
+
   /** @export */
   showAdUI() {
     shaka.ui.Utils.setDisplay(this.adPanel_, true);

package/ui/externs/ui.js

@@ -21,7 +21,9 @@ shaka.extern = {};
  *   base: string,
  *   buffered: string,
  *   played: string,
- *   adBreaks: string
+ *   adBreaks: string,
+ *   chapterMarks: string,
+ *   chapterLabels: string
  * }}
  *
  * @property {string} base
@@ -36,6 +38,13 @@ shaka.extern = {};
  * @property {string} adBreaks
  *   The CSS background color applied to the portion of the seek bar showing
  *   when the ad breaks are scheduled to occur on the timeline.
+ * @property {string} chapterMarks
+ *   The CSS border color applied to sections of the seek bar showing
+ *   when the chapters start and end on the timeline.
+ *   Defaults to dark grey rgb(27, 27, 27).
+ * @property {string} chapterLabels
+ *   The CSS text color applied to the chapter labels that appear above the
+ *   seek bar on hover. Defaults to white rgb(255, 255, 255).
  * @exportDoc
  */
 shaka.extern.UISeekBarColors;
@@ -87,7 +96,9 @@ shaka.extern.UIVolumeBarColors;
  *   enableTooltips: boolean,
  *   keyboardSeekDistance: number,
  *   keyboardLargeSeekDistance: number,
- *   fullScreenElement: HTMLElement
+ *   fullScreenElement: HTMLElement,
+ *   preferDocumentPictureInPicture: boolean,
+ *   showAudioChannelCountVariants: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -193,6 +204,17 @@ shaka.extern.UIVolumeBarColors;
  * @property {HTMLElement} fullScreenElement
  *   DOM element on which fullscreen will be done.
  *   Defaults to Shaka Player Container.
+ * @property {boolean} preferDocumentPictureInPicture
+ *   Indicates whether the Document Picture in Picture API is preferred or the
+ *   Video Element Picture in Picture API is preferred.
+ *   Changing this property in mid-playback may produce undesired behavior if
+ *   you are already in PiP.
+ *   Defaults to true.
+ * @property {boolean} showAudioChannelCountVariants
+ *   Indicates whether the combination of language and channel count should be
+ *   displayed or if, on the contrary, only the language should be displayed
+ *   regardless of the channel count.
+ *   Defaults to true.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

package/ui/language_utils.js

@@ -26,9 +26,13 @@ shaka.ui.LanguageUtils = class {
    * @param {!HTMLElement} currentSelectionElement
    * @param {shaka.ui.Localization} localization
    * @param {shaka.ui.Overlay.TrackLabelFormat} trackLabelFormat
+   * @param {boolean} showAudioChannelCountVariants
    */
   static updateTracks(tracks, langMenu, onTrackSelected, updateChosen,
-      currentSelectionElement, localization, trackLabelFormat) {
+      currentSelectionElement, localization, trackLabelFormat,
+      showAudioChannelCountVariants) {
+    const LocIds = shaka.ui.Locales.Ids;
+
     // TODO: Do the benefits of having this common code in a method still
     // outweigh the complexity of the parameter list?
     const selectedTrack = tracks.find((track) => {
@@ -55,8 +59,27 @@ shaka.ui.LanguageUtils = class {
       }
     };
 
-    const getCombination = (language, rolesString) => {
-      return language + ': ' + rolesString;
+    const getCombination = (language, rolesString, label, channelsCount) => {
+      const keys = [
+        language,
+        rolesString,
+      ];
+      if (showAudioChannelCountVariants && channelsCount != null) {
+        keys.push(channelsCount);
+      }
+      if (label &&
+          trackLabelFormat == shaka.ui.Overlay.TrackLabelFormat.LABEL) {
+        keys.push(label);
+      }
+      return keys.join(': ');
+    };
+
+    const getChannelsCountName = (channelsCount) => {
+      let name = '';
+      if (channelsCount >= 5) {
+        name = ' ' + localization.resolve(LocIds.SURROUND);
+      }
+      return name;
     };
 
     /** @type {!Map.<string, !Set.<string>>} */
@@ -72,15 +95,18 @@ shaka.ui.LanguageUtils = class {
     /** @type {!Set.<string>} */
     const combinationsMade = new Set();
     const selectedCombination = selectedTrack ? getCombination(
-        selectedTrack.language, getRolesString(selectedTrack)) : '';
+        selectedTrack.language, getRolesString(selectedTrack),
+        selectedTrack.label, selectedTrack.channelsCount) : '';
 
     for (const track of tracks) {
       const language = track.language;
       const forced = track.forced;
-      const LocIds = shaka.ui.Locales.Ids;
       const forcedString = localization.resolve(LocIds.SUBTITLE_FORCED);
       const rolesString = getRolesString(track);
-      const combinationName = getCombination(language, rolesString);
+      const label = track.label;
+      const channelsCount = track.channelsCount;
+      const combinationName =
+          getCombination(language, rolesString, label, channelsCount);
       if (combinationsMade.has(combinationName)) {
         continue;
       }
@@ -98,11 +124,17 @@ shaka.ui.LanguageUtils = class {
           shaka.ui.LanguageUtils.getLanguageName(language, localization);
       switch (trackLabelFormat) {
         case shaka.ui.Overlay.TrackLabelFormat.LANGUAGE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (forced) {
             span.textContent += ' (' + forcedString + ')';
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.ROLE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (!rolesString) {
             // Fallback behavior. This probably shouldn't happen.
             shaka.log.alwaysWarn('Track #' + track.id + ' does not have a ' +
@@ -116,6 +148,9 @@ shaka.ui.LanguageUtils = class {
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.LANGUAGE_ROLE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (rolesString) {
             span.textContent += ': ' + rolesString;
           }
@@ -124,8 +159,8 @@ shaka.ui.LanguageUtils = class {
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.LABEL:
-          if (track.label) {
-            span.textContent = track.label;
+          if (label) {
+            span.textContent = label;
           } else {
             // Fallback behavior. This probably shouldn't happen.
             shaka.log.alwaysWarn('Track #' + track.id + ' does not have a ' +

package/ui/less/range_elements.less

@@ -154,3 +154,36 @@
 .shaka-ad-markers {
   .overlay-child();
 }
+
+#shaka-player-ui-chapters-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  z-index: 0;
+}
+
+.shaka-chapter {
+  height: 100%;
+  position: relative;
+}
+
+.shaka-chapter-label {
+  position: relative;
+  top: -2.5em;
+  width: 100%;
+  text-align: center;
+  text-shadow: 1px 1px gray;
+  line-height: normal;
+}
+
+.shaka-chapter > div:first-child {
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid;
+  position: absolute;
+}
+
+.shaka-chapter:last-child > div:first-child {
+  border-right: none;
+}

package/ui/locales/en.json

@@ -36,6 +36,7 @@
   "SKIP_TO_LIVE": "Skip ahead to live",
   "STATISTICS": "Statistics",
   "SUBTITLE_FORCED": "Forced",
+  "SURROUND": "Surround",
   "UNDETERMINED_LANGUAGE": "Undetermined",
   "UNMUTE": "Unmute",
   "UNRECOGNIZED_LANGUAGE": "Unrecognized",

package/ui/locales/es-419.json

@@ -32,6 +32,7 @@
   "SKIP_AD": "Omitir anuncio",
   "SKIP_TO_LIVE": "Adelantar hasta la transmisión en vivo",
   "SUBTITLE_FORCED": "Forzado",
+  "SURROUND": "Envolvente",
   "UNDETERMINED_LANGUAGE": "Sin especificar",
   "UNMUTE": "Dejar de silenciar",
   "UNRECOGNIZED_LANGUAGE": "No reconocida",

package/ui/locales/es.json

@@ -32,6 +32,7 @@
   "SKIP_AD": "Saltar anuncio",
   "SKIP_TO_LIVE": "Ir al vídeo en directo",
   "SUBTITLE_FORCED": "Forzado",
+  "SURROUND": "Envolvente",
   "UNDETERMINED_LANGUAGE": "Sin especificar",
   "UNMUTE": "Activar sonido",
   "UNRECOGNIZED_LANGUAGE": "No reconocida",

package/ui/locales/source.json

@@ -151,6 +151,10 @@
     "description": "Label used to identify a subtitle track that is forced to be shown.",
     "message": "Forced"
   },
+  "SURROUND": {
+    "description": "Label used to identify a audio track that has surround audio.",
+    "message": "Surround"
+  },
   "UNDETERMINED_LANGUAGE": {
     "description": "Label for a button used to select an audio track whose language is undetermined or unknown.",
     "message": "Undetermined"

package/ui/localization.js

@@ -230,6 +230,16 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
     return '';
   }
 
+  /**
+   * The locales currently used. An empty set means "no preference".
+   *
+   * @return {!Set.<string>}
+   * @export
+   */
+  getCurrentLocales() {
+    return this.currentLocales_;
+  }
+
   /**
    * @private
    */

package/ui/pip_button.js

@@ -16,7 +16,6 @@ goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
-goog.require('shaka.util.FakeEvent');
 goog.requireType('shaka.ui.Controls');
 
 
@@ -73,7 +72,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     // Don't display the button if PiP is not supported or not allowed.
     // TODO: Can this ever change? Is it worth creating the button if the below
     // condition is true?
-    if (!this.isPipAllowed_()) {
+    if (!this.controls.isPiPAllowed()) {
       shaka.ui.Utils.setDisplay(this.pipButton_, false);
     }
 
@@ -88,7 +87,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.pipButton_, 'click', () => {
-      this.onPipClick_();
+      this.controls.togglePiP();
     });
 
     this.eventManager.listen(this.localVideo_, 'enterpictureinpicture', () => {
@@ -106,119 +105,21 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     this.eventManager.listen(this.player, 'trackschanged', () => {
       this.onTracksChanged_();
     });
-  }
-
-
-  /**
-   * @return {boolean}
-   * @private
-   */
-  isPipAllowed_() {
-    return ('documentPictureInPicture' in window) ||
-      (document.pictureInPictureEnabled && !this.video.disablePictureInPicture);
-  }
-
 
-  /**
-   * @return {!Promise}
-   * @private
-   */
-  async onPipClick_() {
-    try {
-      if ('documentPictureInPicture' in window) {
-        await this.toggleDocumentPictureInPicture_();
-        return;
-      }
-      if (!document.pictureInPictureElement) {
-        // If you were fullscreen, leave fullscreen first.
-        if (document.fullscreenElement) {
-          document.exitFullscreen();
-        }
-        await this.video.requestPictureInPicture();
-      } else {
-        await document.exitPictureInPicture();
-      }
-    } catch (error) {
-      this.controls.dispatchEvent(new shaka.util.FakeEvent(
-          'error', (new Map()).set('detail', error)));
+    if ('documentPictureInPicture' in window) {
+      this.eventManager.listen(window.documentPictureInPicture, 'enter',
+          (e) => {
+            this.onEnterPictureInPicture_();
+
+            const event = /** @type {DocumentPictureInPictureEvent} */(e);
+            const pipWindow = event.window;
+            this.eventManager.listenOnce(pipWindow, 'pagehide', () => {
+              this.onLeavePictureInPicture_();
+            });
+          });
     }
   }
 
-  /**
-   * The Document Picture-in-Picture API makes it possible to open an
-   * always-on-top window that can be populated with arbitrary HTML content.
-   * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
-   * @private
-   */
-  async toggleDocumentPictureInPicture_() {
-    // Close Picture-in-Picture window if any.
-    if (window.documentPictureInPicture.window) {
-      window.documentPictureInPicture.window.close();
-      this.onLeavePictureInPicture_();
-      return;
-    }
-
-    // Open a Picture-in-Picture window.
-    const pipPlayer = this.videoContainer_;
-    const rectPipPlayer = pipPlayer.getBoundingClientRect();
-    const pipWindow = await window.documentPictureInPicture.requestWindow({
-      width: rectPipPlayer.width,
-      height: rectPipPlayer.height,
-    });
-
-    // Copy style sheets to the Picture-in-Picture window.
-    this.copyStyleSheetsToWindow_(pipWindow);
-
-    // Add placeholder for the player.
-    const parentPlayer = pipPlayer.parentNode || document.body;
-    const placeholder = this.videoContainer_.cloneNode(true);
-    placeholder.style.visibility = 'hidden';
-    placeholder.style.height = getComputedStyle(pipPlayer).height;
-    parentPlayer.appendChild(placeholder);
-
-    // Make sure player fits in the Picture-in-Picture window.
-    const styles = document.createElement('style');
-    styles.append(`[data-shaka-player-container] {
-      width: 100% !important; max-height: 100%}`);
-    pipWindow.document.head.append(styles);
-
-    // Move player to the Picture-in-Picture window.
-    pipWindow.document.body.append(pipPlayer);
-    this.onEnterPictureInPicture_();
-
-    // Listen for the PiP closing event to move the player back.
-    this.eventManager.listenOnce(pipWindow, 'pagehide', () => {
-      placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
-    });
-  }
-
-  /** @private */
-  copyStyleSheetsToWindow_(win) {
-    const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
-    const allCSS = [...styleSheets]
-        .map((sheet) => {
-          try {
-            return [...sheet.cssRules].map((rule) => rule.cssText).join('');
-          } catch (e) {
-            const link = /** @type {!HTMLLinkElement} */(
-              document.createElement('link'));
-
-            link.rel = 'stylesheet';
-            link.type = sheet.type;
-            link.media = sheet.media;
-            link.href = sheet.href;
-            win.document.head.appendChild(link);
-          }
-          return '';
-        })
-        .filter(Boolean)
-        .join('\n');
-    const style = document.createElement('style');
-
-    style.textContent = allCSS;
-    win.document.head.appendChild(style);
-  }
-
   /** @private */
   onEnterPictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
@@ -250,13 +151,14 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     this.pipNameSpan_.textContent =
       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
 
-    const ariaLabel = document.pictureInPictureElement ?
+    const enabled = this.controls.isPiPEnabled();
+
+    const ariaLabel = enabled ?
         LocIds.EXIT_PICTURE_IN_PICTURE :
         LocIds.ENTER_PICTURE_IN_PICTURE;
     this.pipButton_.ariaLabel = this.localization.resolve(ariaLabel);
 
-    const currentPipState = document.pictureInPictureElement ?
-        LocIds.ON : LocIds.OFF;
+    const currentPipState = enabled ? LocIds.ON : LocIds.OFF;
 
     this.currentPipState_.textContent =
         this.localization.resolve(currentPipState);
@@ -271,11 +173,11 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
 
     if (isCasting) {
       // Picture-in-picture is not applicable if we're casting
-      if (this.isPipAllowed_()) {
+      if (this.controls.isPiPAllowed()) {
         shaka.ui.Utils.setDisplay(this.pipButton_, false);
       }
     } else {
-      if (this.isPipAllowed_()) {
+      if (this.controls.isPiPAllowed()) {
         shaka.ui.Utils.setDisplay(this.pipButton_, true);
       }
     }
@@ -290,12 +192,12 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
    * @private
    */
   async onTracksChanged_() {
-    if (!this.isPipAllowed_()) {
+    if (!this.controls.isPiPAllowed()) {
       shaka.ui.Utils.setDisplay(this.pipButton_, false);
     } else if (this.player && this.player.isAudioOnly()) {
       shaka.ui.Utils.setDisplay(this.pipButton_, false);
-      if (document.pictureInPictureElement) {
-        await document.exitPictureInPicture();
+      if (this.controls.isPiPEnabled()) {
+        await this.controls.togglePiP();
       }
     } else {
       shaka.ui.Utils.setDisplay(this.pipButton_, true);