shaka-player 4.7.12 → 4.8.0

package/ui/controls.js

@@ -22,6 +22,7 @@ goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.SeekBar');
 goog.require('shaka.ui.Utils');
+goog.require('shaka.ui.VRManager');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.EventManager');
 goog.require('shaka.util.FakeEvent');
@@ -42,9 +43,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    * @param {!shaka.Player} player
    * @param {!HTMLElement} videoContainer
    * @param {!HTMLMediaElement} video
+   * @param {?HTMLCanvasElement} vrCanvas
    * @param {shaka.extern.UIConfiguration} config
    */
-  constructor(player, videoContainer, video, config) {
+  constructor(player, videoContainer, video, vrCanvas, config) {
     super();
 
     /** @private {boolean} */
@@ -76,6 +78,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     /** @private {!HTMLElement} */
     this.videoContainer_ = videoContainer;
 
+    /** @private {?HTMLCanvasElement} */
+    this.vrCanvas_ = vrCanvas;
+
     /** @private {shaka.extern.IAdManager} */
     this.adManager_ = this.player_.getAdManager();
 
@@ -169,6 +174,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     /** @private {shaka.util.EventManager} */
     this.eventManager_ = new shaka.util.EventManager();
 
+    /** @private {?shaka.ui.VRManager} */
+    this.vr_ = null;
+
     // Configure and create the layout of the controls
     this.configure(this.config_);
     this.addEventListeners_();
@@ -187,7 +195,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.onCastStatusChange_();
 
     // Start this timer after we are finished initializing everything,
-    this.timeAndSeekRangeTimer_.tickEvery(/* seconds= */ 0.125);
+    this.timeAndSeekRangeTimer_.tickEvery(this.config_.refreshTickInSeconds);
 
     this.eventManager_.listen(this.localization_,
         shaka.ui.Localization.LOCALE_CHANGED, (e) => {
@@ -230,6 +238,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.timeAndSeekRangeTimer_ = null;
     }
 
+    if (this.vr_) {
+      this.vr_.release();
+      this.vr_ = null;
+    }
+
     // Important!  Release all child elements before destroying the cast proxy
     // or player.  This makes sure those destructions will not trigger event
     // listeners in the UI which would then invoke the cast proxy or player.
@@ -334,6 +347,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.contextMenu_ = null;
     }
 
+    if (this.vr_) {
+      this.vr_.configure(config);
+    }
+
     if (this.controlsContainer_) {
       shaka.util.Dom.removeAllChildren(this.controlsContainer_);
       this.releaseChildElements_();
@@ -343,6 +360,13 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       // re-created or uprooted in the DOM, even when the DOM is re-created,
       // since that seemingly breaks the IMA SDK.
       this.addClientAdContainer_();
+
+      goog.asserts.assert(
+          this.controlsContainer_, 'Should have a controlsContainer_!');
+      goog.asserts.assert(this.localVideo_, 'Should have a localVideo_!');
+      goog.asserts.assert(this.player_, 'Should have a player_!');
+      this.vr_ = new shaka.ui.VRManager(this.controlsContainer_, this.vrCanvas_,
+          this.localVideo_, this.player_, this.config_);
     }
 
     // Create the new layout
@@ -1172,6 +1196,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.onCastStatusChange_();
     });
 
+    this.eventManager_.listen(this.vr_, 'vrstatuschanged', () => {
+      this.dispatchEvent(new shaka.util.FakeEvent('vrstatuschanged'));
+    });
+
     this.eventManager_.listen(this.videoContainer_, 'keydown', (e) => {
       this.onControlsKeyDown_(/** @type {!KeyboardEvent} */(e));
     });
@@ -1384,7 +1412,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
   /** @private */
   onContainerClick_() {
-    if (!this.enabled_) {
+    if (!this.enabled_ || this.isPlayingVR()) {
       return;
     }
 
@@ -1449,7 +1477,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       case 'ArrowLeft':
         // If it's not focused on the volume bar, move the seek time backward
         // for a few sec. Otherwise, the volume will be adjusted automatically.
-        if (this.seekBar_ && !isVolumeBar && keyboardSeekDistance > 0) {
+        if (this.seekBar_ && isSeekBar && !isVolumeBar &&
+            keyboardSeekDistance > 0) {
           event.preventDefault();
           this.seek_(this.seekBar_.getValue() - keyboardSeekDistance);
         }
@@ -1457,7 +1486,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       case 'ArrowRight':
         // If it's not focused on the volume bar, move the seek time forward
         // for a few sec. Otherwise, the volume will be adjusted automatically.
-        if (this.seekBar_ && !isVolumeBar && keyboardSeekDistance > 0) {
+        if (this.seekBar_ && isSeekBar && !isVolumeBar &&
+            keyboardSeekDistance > 0) {
           event.preventDefault();
           this.seek_(this.seekBar_.getValue() + keyboardSeekDistance);
         }
@@ -1700,6 +1730,149 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.eventManager_.unlisten(window, 'mousedown');
   }
 
+  /**
+   * @export
+   */
+  showUI() {
+    const event = new Event('mousemove', {bubbles: false, cancelable: false});
+    this.onMouseMove_(event);
+  }
+
+  /**
+   * @export
+   */
+  hideUI() {
+    this.onMouseLeave_();
+  }
+
+  /**
+   * @return {shaka.ui.VRManager}
+   */
+  getVR() {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    return this.vr_;
+  }
+
+  /**
+   * Returns if a VR is capable.
+   *
+   * @return {boolean}
+   * @export
+   */
+  canPlayVR() {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    return this.vr_.canPlayVR();
+  }
+
+  /**
+   * Returns if a VR is supported.
+   *
+   * @return {boolean}
+   * @export
+   */
+  isPlayingVR() {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    return this.vr_.isPlayingVR();
+  }
+
+  /**
+   * Reset VR view.
+   */
+  resetVR() {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    this.vr_.reset();
+  }
+
+  /**
+   * Get the angle of the north.
+   *
+   * @return {?number}
+   * @export
+   */
+  getVRNorth() {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    return this.vr_.getNorth();
+  }
+
+  /**
+   * Returns the angle of the current field of view displayed in degrees.
+   *
+   * @return {?number}
+   * @export
+   */
+  getVRFieldOfView() {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    return this.vr_.getFieldOfView();
+  }
+
+  /**
+   * Changing the field of view increases or decreases the portion of the video
+   * that is viewed at one time. If the field of view is decreased, a small
+   * part of the video will be seen, but with more detail. If the field of view
+   * is increased, a larger part of the video will be seen, but with less
+   * detail.
+   *
+   * @param {number} fieldOfView In degrees
+   * @export
+   */
+  setVRFieldOfView(fieldOfView) {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    this.vr_.setFieldOfView(fieldOfView);
+  }
+
+  /**
+   * Toggle stereoscopic mode.
+   *
+   * @export
+   */
+  toggleStereoscopicMode() {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    this.vr_.toggleStereoscopicMode();
+  }
+
+  /**
+   * Returns true if stereoscopic mode is enabled.
+   *
+   * @return {boolean}
+   */
+  isStereoscopicModeEnabled() {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    return this.vr_.isStereoscopicModeEnabled();
+  }
+
+  /**
+   * Increment the yaw in X angle in degrees.
+   *
+   * @param {number} angle In degrees
+   * @export
+   */
+  incrementYaw(angle) {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    this.vr_.incrementYaw(angle);
+  }
+
+  /**
+   * Increment the pitch in X angle in degrees.
+   *
+   * @param {number} angle In degrees
+   * @export
+   */
+  incrementPitch(angle) {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    this.vr_.incrementPitch(angle);
+  }
+
+  /**
+   * Increment the roll in X angle in degrees.
+   *
+   * @param {number} angle In degrees
+   * @export
+   */
+  incrementRoll(angle) {
+    goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
+    this.vr_.incrementRoll(angle);
+  }
+
   /**
    * Create a localization instance already pre-loaded with all the locales that
    * we support.
@@ -1734,6 +1907,15 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
  */
 
 
+/**
+ * @event shaka.ui.Controls#VRStatusChangedEvent
+ * @description Fired when VR status change
+ * @property {string} type
+ *   'vrstatuschanged'
+ * @exportDoc
+ */
+
+
 /**
  * @event shaka.ui.Controls#SubMenuOpenEvent
  * @description Fired when one of the overflow submenus is opened

package/ui/enums.js

@@ -44,4 +44,6 @@ shaka.ui.Enums.MaterialDesignIcons = {
   'REPLAY': 'replay',
   'STATISTICS_ON': 'insert_chart_outlined',
   'STATISTICS_OFF': 'insert_chart',
+  'RECENTER_VR': 'control_camera',
+  'TOGGLE_STEREOSCOPIC': '3d_rotation',
 };

package/ui/externs/ui.js

@@ -78,6 +78,7 @@ shaka.extern.UIVolumeBarColors;
  *   seekBarColors: shaka.extern.UISeekBarColors,
  *   volumeBarColors: shaka.extern.UIVolumeBarColors,
  *   trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat,
+ *   textTrackLabelFormat: shaka.ui.Overlay.TrackLabelFormat,
  *   fadeDelay: number,
  *   doubleClickForFullscreen: boolean,
  *   singleClickForPlayAndPause: boolean,
@@ -91,7 +92,10 @@ shaka.extern.UIVolumeBarColors;
  *   preferDocumentPictureInPicture: boolean,
  *   showAudioChannelCountVariants: boolean,
  *   seekOnTaps: boolean,
- *   tapSeekDistance: number
+ *   tapSeekDistance: number,
+ *   refreshTickInSeconds: number,
+ *   displayInVrMode: boolean,
+ *   defaultVrProjectionMode: string
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -147,8 +151,18 @@ shaka.extern.UIVolumeBarColors;
  *   colors used in the linear gradient constructed in JavaScript, since you
  *   cannot do this in pure CSS.
  * @property {shaka.ui.Overlay.TrackLabelFormat} trackLabelFormat
- *   An enum that determines what is shown in the labels for text track and
- *   audio variant selection.
+ *   An enum that determines what is shown in the labels for audio variant
+ *   selection.
+ *   LANGUAGE means that only the language of the item is shown.
+ *   ROLE means that only the role of the item is shown.
+ *   LANGUAGE_ROLE means both language and role are shown, or just language if
+ *   there is no role.
+ *   LABEL means the non-standard DASH "label" attribute or the standard DASH
+ *   "Label" element or the HLS "NAME" attribute are shown.
+ *   Defaults to LANGUAGE.
+ * @property {shaka.ui.Overlay.TrackLabelFormat} textTrackLabelFormat
+ *   An enum that determines what is shown in the labels for text track
+ *   selection.
  *   LANGUAGE means that only the language of the item is shown.
  *   ROLE means that only the role of the item is shown.
  *   LANGUAGE_ROLE means both language and role are shown, or just language if
@@ -167,6 +181,7 @@ shaka.extern.UIVolumeBarColors;
  *   Defaults to true.
  * @property {boolean} singleClickForPlayAndPause
  *   Whether or not clicking on the video should cause it to play or pause.
+ *   It does not work in VR mode.
  *   Defaults to true.
  * @property {boolean} enableKeyboardPlaybackControls
  *   Whether or not playback controls via keyboard is enabled, such as seek
@@ -217,6 +232,18 @@ shaka.extern.UIVolumeBarColors;
  *   right part of the video. If less than or equal to 0,
  *   no seeking will occur.
  *   Defaults to 10 seconds.
+ * @property {number} refreshTickInSeconds
+ *   The time interval, in seconds, to update the seek bar.
+ *   Defaults to 0.125 seconds.
+ * @property {boolean} displayInVrMode
+ *   If true, the content will be treated as VR.
+ *   If false, it will only be treated as VR if we automatically detect it as
+ *   such. (See the Enabling VR section in docs/tutorials/ui.md)
+ *   Defaults to false.
+ * @property {string} defaultVrProjectionMode
+ *   Indicate the default VR projection mode.
+ *   Possible values: <code>'equirectangular'</code> or <code>'cubemap'</code>.
+ *   Defaults to <code>'equirectangular'</code>.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;