shaka-player 4.7.12 → 4.8.0

package/ui/recenter_vr.js

@@ -0,0 +1,126 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+goog.provide('shaka.ui.RecenterVRButton');
+
+goog.require('shaka.ui.Controls');
+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.requireType('shaka.ui.Controls');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.RecenterVRButton = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {!HTMLButtonElement} */
+    this.recenterVRButton_ = shaka.util.Dom.createButton();
+    this.recenterVRButton_.classList.add('shaka-recenter-vr-button');
+    this.recenterVRButton_.classList.add('shaka-tooltip');
+    this.recenterVRButton_.ariaPressed = 'false';
+
+    /** @private {!HTMLElement} */
+    this.recenterVRIcon_ = shaka.util.Dom.createHTMLElement('i');
+    this.recenterVRIcon_.classList.add('material-icons-round');
+    this.recenterVRIcon_.textContent =
+        shaka.ui.Enums.MaterialDesignIcons.RECENTER_VR;
+    this.recenterVRButton_.appendChild(this.recenterVRIcon_);
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
+    this.recenterVRNameSpan_ = shaka.util.Dom.createHTMLElement('span');
+    label.appendChild(this.recenterVRNameSpan_);
+
+    this.recenterVRCurrentSelectionSpan_ =
+      shaka.util.Dom.createHTMLElement('span');
+    this.recenterVRCurrentSelectionSpan_.classList.add(
+        'shaka-current-selection-span');
+    label.appendChild(this.recenterVRCurrentSelectionSpan_);
+    this.recenterVRButton_.appendChild(label);
+    this.parent.appendChild(this.recenterVRButton_);
+
+    // Setup strings in the correct language
+    this.updateLocalizedStrings_();
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    const vr = this.controls.getVR();
+
+    this.eventManager.listen(this.recenterVRButton_, 'click', () => {
+      vr.reset();
+    });
+
+    this.eventManager.listen(vr, 'vrstatuschanged', () => {
+      this.checkAvailability_();
+    });
+
+    this.checkAvailability_();
+  }
+
+
+  /**
+   * @private
+   */
+  checkAvailability_() {
+    shaka.ui.Utils.setDisplay(this.recenterVRButton_,
+        this.controls.isPlayingVR());
+  }
+
+
+  /**
+   * @private
+   */
+  updateLocalizedStrings_() {
+    const LocIds = shaka.ui.Locales.Ids;
+
+    this.recenterVRButton_.ariaLabel =
+        this.localization.resolve(LocIds.RECENTER_VR);
+    this.recenterVRNameSpan_.textContent =
+        this.localization.resolve(LocIds.RECENTER_VR);
+  }
+};
+
+
+/**
+ * @implements {shaka.extern.IUIElement.Factory}
+ * @final
+ */
+shaka.ui.RecenterVRButton.Factory = class {
+  /** @override */
+  create(rootElement, controls) {
+    return new shaka.ui.RecenterVRButton(rootElement, controls);
+  }
+};
+
+shaka.ui.OverflowMenu.registerElement(
+    'recenter_vr', new shaka.ui.RecenterVRButton.Factory());
+
+shaka.ui.Controls.registerElement(
+    'recenter_vr', new shaka.ui.RecenterVRButton.Factory());

package/ui/resolution_selection.js

@@ -14,6 +14,7 @@ goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.OverflowMenu');
+goog.require('shaka.ui.Overlay.TrackLabelFormat');
 goog.require('shaka.ui.SettingsMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -67,6 +68,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
 
   /** @private */
   updateResolutionSelection_() {
+    const TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat;
     /** @type {!Array.<shaka.extern.Track>} */
     let tracks = [];
     // When played with src=, the variant tracks available from
@@ -80,10 +82,28 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     // available resolutions.
     const selectedTrack = tracks.find((track) => track.active);
     if (selectedTrack) {
-      // Filter by current audio language and channel count.
-      tracks = tracks.filter(
-          (track) => track.language == selectedTrack.language &&
-              track.channelsCount == selectedTrack.channelsCount);
+      tracks = tracks.filter((track) => {
+        if (track.language != selectedTrack.language) {
+          return false;
+        }
+        if (this.controls.getConfig().showAudioChannelCountVariants &&
+            track.channelsCount != selectedTrack.channelsCount) {
+          return false;
+        }
+        const trackLabelFormat = this.controls.getConfig().trackLabelFormat;
+        if ((trackLabelFormat == TrackLabelFormat.ROLE ||
+            trackLabelFormat == TrackLabelFormat.LANGUAGE_ROLE)) {
+          if (JSON.stringify(track.audioRoles) !=
+              JSON.stringify(selectedTrack.audioRoles)) {
+            return false;
+          }
+        }
+        if (trackLabelFormat == TrackLabelFormat.LABEL &&
+            track.label != selectedTrack.label) {
+          return false;
+        }
+        return true;
+      });
     }
 
     // Remove duplicate entries with the same resolution or quality depending
@@ -195,7 +215,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
 
     this.updateLocalizedStrings_();
 
-    shaka.ui.Utils.setDisplay(this.button, tracks.length > 0);
+    shaka.ui.Utils.setDisplay(this.button, tracks.length > 1);
   }
 
 

package/ui/statistics_button.js

@@ -117,6 +117,17 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
       return this.currentStats_[name] + ' (stalls)';
     };
 
+    const parseBytesDownloaded = (name) => {
+      const bytes = parseInt(this.currentStats_[name], 10);
+      if (bytes > 1e6) {
+        return (bytes / 1e6).toFixed(2) + 'MB';
+      } else if (bytes > 1e3) {
+        return (bytes / 1e3).toFixed(2) + 'KB';
+      } else {
+        return bytes + 'B';
+      }
+    };
+
     /** @private {!Object.<string, function(string):string>} */
     this.parseFrom_ = {
       'width': parsePx,
@@ -138,6 +149,7 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
       'droppedFrames': parseFrames,
       'stallsDetected': parseStalls,
       'gapsJumped': parseGaps,
+      'bytesDownloaded': parseBytesDownloaded,
     };
 
     /** @private {shaka.util.Timer} */

package/ui/text_selection.js

@@ -135,7 +135,7 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
         this.player.isTextTrackVisible(),
         this.currentSelection,
         this.localization,
-        this.controls.getConfig().trackLabelFormat,
+        this.controls.getConfig().textTrackLabelFormat,
         this.controls.getConfig().showAudioChannelCountVariants);
 
     // Add the Off button

package/ui/toggle_stereoscopic.js

@@ -0,0 +1,127 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+goog.provide('shaka.ui.ToggleStereoscopicButton');
+
+goog.require('shaka.ui.Controls');
+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.requireType('shaka.ui.Controls');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.ToggleStereoscopicButton = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {!HTMLButtonElement} */
+    this.toggleStereoscopicButton_ = shaka.util.Dom.createButton();
+    this.toggleStereoscopicButton_.classList.add(
+        'shaka-toggle-stereoscopic-button');
+    this.toggleStereoscopicButton_.classList.add('shaka-tooltip');
+    this.toggleStereoscopicButton_.ariaPressed = 'false';
+
+    /** @private {!HTMLElement} */
+    this.toggleStereoscopicIcon_ = shaka.util.Dom.createHTMLElement('i');
+    this.toggleStereoscopicIcon_.classList.add('material-icons-round');
+    this.toggleStereoscopicIcon_.textContent =
+        shaka.ui.Enums.MaterialDesignIcons.TOGGLE_STEREOSCOPIC;
+    this.toggleStereoscopicButton_.appendChild(this.toggleStereoscopicIcon_);
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
+    this.toggleStereoscopicNameSpan_ = shaka.util.Dom.createHTMLElement('span');
+    label.appendChild(this.toggleStereoscopicNameSpan_);
+
+    this.toggleStereoscopicCurrentSelectionSpan_ =
+      shaka.util.Dom.createHTMLElement('span');
+    this.toggleStereoscopicCurrentSelectionSpan_.classList.add(
+        'shaka-current-selection-span');
+    label.appendChild(this.toggleStereoscopicCurrentSelectionSpan_);
+    this.toggleStereoscopicButton_.appendChild(label);
+    this.parent.appendChild(this.toggleStereoscopicButton_);
+
+    // Setup strings in the correct language
+    this.updateLocalizedStrings_();
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    const vr = this.controls.getVR();
+
+    this.eventManager.listen(this.toggleStereoscopicButton_, 'click', () => {
+      vr.toggleStereoscopicMode();
+    });
+
+    this.eventManager.listen(vr, 'vrstatuschanged', () => {
+      this.checkAvailability_();
+    });
+
+    this.checkAvailability_();
+  }
+
+
+  /**
+   * @private
+   */
+  checkAvailability_() {
+    shaka.ui.Utils.setDisplay(this.toggleStereoscopicButton_,
+        this.controls.isPlayingVR());
+  }
+
+
+  /**
+   * @private
+   */
+  updateLocalizedStrings_() {
+    const LocIds = shaka.ui.Locales.Ids;
+
+    this.toggleStereoscopicButton_.ariaLabel =
+        this.localization.resolve(LocIds.TOGGLE_STEREOSCOPIC);
+    this.toggleStereoscopicNameSpan_.textContent =
+        this.localization.resolve(LocIds.TOGGLE_STEREOSCOPIC);
+  }
+};
+
+
+/**
+ * @implements {shaka.extern.IUIElement.Factory}
+ * @final
+ */
+shaka.ui.ToggleStereoscopicButton.Factory = class {
+  /** @override */
+  create(rootElement, controls) {
+    return new shaka.ui.ToggleStereoscopicButton(rootElement, controls);
+  }
+};
+
+shaka.ui.OverflowMenu.registerElement(
+    'toggle_stereoscopic', new shaka.ui.ToggleStereoscopicButton.Factory());
+
+shaka.ui.Controls.registerElement(
+    'toggle_stereoscopic', new shaka.ui.ToggleStereoscopicButton.Factory());

package/ui/ui.js

@@ -29,8 +29,9 @@ shaka.ui.Overlay = class {
    * @param {!shaka.Player} player
    * @param {!HTMLElement} videoContainer
    * @param {!HTMLMediaElement} video
+   * @param {?HTMLCanvasElement=} vrCanvas
    */
-  constructor(player, videoContainer, video) {
+  constructor(player, videoContainer, video, vrCanvas = null) {
     /** @private {shaka.Player} */
     this.player_ = player;
 
@@ -52,7 +53,7 @@ shaka.ui.Overlay = class {
 
     /** @private {shaka.ui.Controls} */
     this.controls_ = new shaka.ui.Controls(
-        player, videoContainer, video, this.config_);
+        player, videoContainer, video, vrCanvas, this.config_);
 
     // Run the initial setup so that no configure() call is required for default
     // settings.
@@ -189,6 +190,8 @@ shaka.ui.Overlay = class {
         'picture_in_picture',
         'cast',
         'playback_rate',
+        'recenter_vr',
+        'toggle_stereoscopic',
       ],
       statisticsList: [
         'width',
@@ -208,6 +211,7 @@ shaka.ui.Overlay = class {
         'pauseTime',
         'playTime',
         'completionPercent',
+        'bytesDownloaded',
       ],
       contextMenuElements: [
         'loop',
@@ -235,6 +239,7 @@ shaka.ui.Overlay = class {
         level: 'rgb(255, 255, 255)',
       },
       trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
+      textTrackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
       fadeDelay: 0,
       doubleClickForFullscreen: true,
       singleClickForPlayAndPause: true,
@@ -249,6 +254,9 @@ shaka.ui.Overlay = class {
       showAudioChannelCountVariants: true,
       seekOnTaps: true,
       tapSeekDistance: 10,
+      refreshTickInSeconds: 0.125,
+      displayInVrMode: false,
+      defaultVrProjectionMode: 'equirectangular',
     };
 
     // eslint-disable-next-line no-restricted-syntax
@@ -307,6 +315,12 @@ shaka.ui.Overlay = class {
     const canvases = document.querySelectorAll(
         '[data-shaka-player-canvas]');
 
+    // Look for elements marked 'data-shaka-player-vr-canvas'
+    // on the page. These will be used to create our default
+    // UI.
+    const vrCanvases = document.querySelectorAll(
+        '[data-shaka-player-vr-canvas]');
+
     if (!videos.length && !containers.length) {
       // No elements have been tagged with shaka attributes.
     } else if (videos.length && !containers.length) {
@@ -324,21 +338,11 @@ shaka.ui.Overlay = class {
         const videoParent = video.parentElement;
         videoParent.replaceChild(container, video);
         container.appendChild(video);
-        let currentCanvas = null;
-        for (const canvas of canvases) {
-          goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
-              'Should be a canvas element!');
-          if (canvas.parentElement == container) {
-            currentCanvas = canvas;
-            break;
-          }
-        }
-        if (!currentCanvas) {
-          currentCanvas = document.createElement('canvas');
-          currentCanvas.classList.add('shaka-canvas-container');
-          container.appendChild(currentCanvas);
-        }
-        shaka.ui.Overlay.setupUIandAutoLoad_(container, video, currentCanvas);
+        const {lcevcCanvas, vrCanvas} =
+            shaka.ui.Overlay.findOrMakeSpecialCanvases_(
+                container, canvases, vrCanvases);
+        shaka.ui.Overlay.setupUIandAutoLoad_(
+            container, video, lcevcCanvas, vrCanvas);
       }
     } else {
       for (const container of containers) {
@@ -365,26 +369,13 @@ shaka.ui.Overlay = class {
           currentVideo.setAttribute('playsinline', '');
           container.appendChild(currentVideo);
         }
-
-        let currentCanvas = null;
-        for (const canvas of canvases) {
-          goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
-              'Should be a canvas element!');
-          if (canvas.parentElement == container) {
-            currentCanvas = canvas;
-            break;
-          }
-        }
-        if (!currentCanvas) {
-          currentCanvas = document.createElement('canvas');
-          currentCanvas.classList.add('shaka-canvas-container');
-          container.appendChild(currentCanvas);
-        }
-
+        const {lcevcCanvas, vrCanvas} =
+            shaka.ui.Overlay.findOrMakeSpecialCanvases_(
+                container, canvases, vrCanvases);
         try {
           // eslint-disable-next-line no-await-in-loop
           await shaka.ui.Overlay.setupUIandAutoLoad_(
-              container, currentVideo, currentCanvas);
+              container, currentVideo, lcevcCanvas, vrCanvas);
         } catch (e) {
           // This can fail if, for example, not every player file has loaded.
           // Ad-block is a likely cause for this sort of failure.
@@ -423,18 +414,20 @@ shaka.ui.Overlay = class {
   /**
    * @param {!Element} container
    * @param {!Element} video
-   * @param {!Element} canvas
+   * @param {!Element} lcevcCanvas
+   * @param {!Element} vrCanvas
    * @private
    */
-  static async setupUIandAutoLoad_(container, video, canvas) {
+  static async setupUIandAutoLoad_(container, video, lcevcCanvas, vrCanvas) {
     // Create the UI
     const player = new shaka.Player();
     const ui = new shaka.ui.Overlay(player,
         shaka.util.Dom.asHTMLElement(container),
-        shaka.util.Dom.asHTMLMediaElement(video));
+        shaka.util.Dom.asHTMLMediaElement(video),
+        shaka.util.Dom.asHTMLCanvasElement(vrCanvas));
 
     // Attach Canvas used for LCEVC Decoding
-    player.attachCanvas(/** @type {HTMLCanvasElement} */(canvas));
+    player.attachCanvas(/** @type {HTMLCanvasElement} */(lcevcCanvas));
 
     // Get and configure cast app id.
     let castAppId = '';
@@ -494,6 +487,49 @@ shaka.ui.Overlay = class {
 
     await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
   }
+
+
+  /**
+   * @param {!Element} container
+   * @param {!NodeList.<!Element>} canvases
+   * @param {!NodeList.<!Element>} vrCanvases
+   * @return {{lcevcCanvas: !Element, vrCanvas: !Element}}
+   * @private
+   */
+  static findOrMakeSpecialCanvases_(container, canvases, vrCanvases) {
+    let lcevcCanvas = null;
+    for (const canvas of canvases) {
+      goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
+          'Should be a canvas element!');
+      if (canvas.parentElement == container) {
+        lcevcCanvas = canvas;
+        break;
+      }
+    }
+    if (!lcevcCanvas) {
+      lcevcCanvas = document.createElement('canvas');
+      lcevcCanvas.classList.add('shaka-canvas-container');
+      container.appendChild(lcevcCanvas);
+    }
+    let vrCanvas = null;
+    for (const canvas of vrCanvases) {
+      goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
+          'Should be a canvas element!');
+      if (canvas.parentElement == container) {
+        vrCanvas = canvas;
+        break;
+      }
+    }
+    if (!vrCanvas) {
+      vrCanvas = document.createElement('canvas');
+      vrCanvas.classList.add('shaka-vr-canvas-container');
+      container.appendChild(vrCanvas);
+    }
+    return {
+      lcevcCanvas,
+      vrCanvas,
+    };
+  }
 };
 
 /**