shaka-player 2.5.4 → 2.5.5

package/ui/controls.js

@@ -149,8 +149,6 @@ shaka.ui.Controls = function(player, videoContainer, video, config) {
   // Configure and create the layout of the controls
   this.configure(this.config_);
 
-  this.updateLocalizedStrings_();
-
   this.addEventListeners_();
 
   /**
@@ -358,8 +356,18 @@ shaka.ui.Controls.prototype.configure = function(config) {
 
   this.castProxy_.changeReceiverId(config.castReceiverAppId);
 
+  // Deconstruct the old layout if applicable
+  if (this.seekBar_) {
+    this.seekBar_.destroy();
+    this.seekBar_ = null;
+  }
+
+  if (this.playButton_) {
+    this.playButton_.destroy();
+    this.playButton_ = null;
+  }
+
   if (this.controlsContainer_) {
-    // Deconstruct the old layout if applicable
     shaka.util.Dom.removeAllChildren(this.controlsContainer_);
     this.videoContainer_.removeChild(this.spinnerContainer_);
   } else {
@@ -369,9 +377,31 @@ shaka.ui.Controls.prototype.configure = function(config) {
   // Create the new layout
   this.createDOM_();
 
-  this.addEventListeners_();
-};
+  // Init the play state
+  this.onPlayStateChange_();
 
+  // Elements that should not propagate clicks (controls panel, menus)
+  const noPropagationElements = this.videoContainer_.getElementsByClassName(
+      'shaka-no-propagation');
+  for (const element of noPropagationElements) {
+    const cb = (event) => event.stopPropagation();
+    this.eventManager_.listen(element, 'click', cb);
+    this.eventManager_.listen(element, 'dblclick', cb);
+  }
+
+  // Keep showing controls if one of those elements is hovered
+  const showControlsElements = this.videoContainer_.getElementsByClassName(
+      'shaka-show-controls-on-mouse-over');
+  for (const element of showControlsElements) {
+    this.eventManager_.listen(element, 'mouseover', () => {
+      this.overrideCssShowControls_ = true;
+    });
+
+    this.eventManager_.listen(element, 'mouseleave', () => {
+      this.overrideCssShowControls_ = false;
+    });
+  }
+};
 
 /**
  * Enable or disable the custom controls. Enabling disables native
@@ -405,6 +435,15 @@ shaka.ui.Controls.prototype.setEnabledShakaControls = function(enabled) {
 };
 
 
+/**
+ * @param {boolean} seeking
+ * @export
+ */
+shaka.ui.Controls.prototype.setSeeking = function(seeking) {
+  this.isSeeking_ = seeking;
+};
+
+
 /**
  * Enable or disable native browser controls. Enabling disables shaka
  * controls.
@@ -443,6 +482,24 @@ shaka.ui.Controls.prototype.getLocalization = function() {
   return this.localization_;
 };
 
+/** @export */
+shaka.ui.Controls.prototype.toggleFullScreen = async function() {
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  } else {
+    // If we are in PiP mode, leave PiP mode first.
+    try {
+      if (document.pictureInPictureElement) {
+        await document.exitPictureInPicture();
+      }
+    } catch (error) {
+      this.dispatchEvent(new shaka.util.FakeEvent('error', {
+        detail: error,
+      }));
+    }
+    await this.videoContainer_.requestFullscreen();
+  }
+};
 
 /**
  * @return {!HTMLElement}
@@ -576,33 +633,16 @@ shaka.ui.Controls.prototype.hideSettingsMenus = function() {
 };
 
 
-/**
- * @private
- */
-shaka.ui.Controls.prototype.updateLocalizedStrings_ = function() {
-  const LocIds = shaka.ui.Locales.Ids;
-
-  // Localize state-dependant labels
-  const makePlayNotPause = this.video_.paused && !this.isSeeking_;
-  const playButtonAriaLabelId = makePlayNotPause ? LocIds.PLAY : LocIds.PAUSE;
-  this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-      this.localization_.resolve(playButtonAriaLabelId));
-};
-
-
 /**
  * @private
  */
 shaka.ui.Controls.prototype.createDOM_ = function() {
-  if (this.seekBar_) {
-    this.seekBar_.destroy();
-    this.seekBar_ = null;
-  }
-
   this.videoContainer_.classList.add('shaka-video-container');
   this.video_.classList.add('shaka-video');
 
-  this.addPlayButton_();
+  if (this.config_.addBigPlayButton) {
+    this.addPlayButton_();
+  }
 
   this.addBufferingSpinner_();
 
@@ -645,16 +685,13 @@ shaka.ui.Controls.prototype.addControlsContainer_ = function() {
  * @private
  */
 shaka.ui.Controls.prototype.addPlayButton_ = function() {
-  /** @private {!HTMLElement} */
-  this.playButtonContainer_ = shaka.util.Dom.createHTMLElement('div');
-  this.playButtonContainer_.classList.add('shaka-play-button-container');
-  this.controlsContainer_.appendChild(this.playButtonContainer_);
+  const playButtonContainer = shaka.util.Dom.createHTMLElement('div');
+  playButtonContainer.classList.add('shaka-play-button-container');
+  this.controlsContainer_.appendChild(playButtonContainer);
 
-  /** @private {!HTMLElement} */
-  this.playButton_ = shaka.util.Dom.createHTMLElement('button');
-  this.playButton_.classList.add('shaka-play-button');
-  this.playButtonContainer_.appendChild(this.playButton_);
-  this.onPlayStateChange_();
+  /** @private {shaka.ui.BigPlayButton} */
+  this.playButton_ =
+      new shaka.ui.BigPlayButton(playButtonContainer, this);
 };
 
 
@@ -712,6 +749,14 @@ shaka.ui.Controls.prototype.addControlsButtonPanel_ = function() {
   this.controlsButtonPanel_.classList.add('shaka-show-controls-on-mouse-over');
   this.bottomControls_.appendChild(this.controlsButtonPanel_);
 
+  // Overflow menus are supposed to hide once you click elsewhere
+  // on the video element. The code in onContainerClick_ ensures that.
+  // However, clicks on controls panel don't propagate to the container,
+  // so we have to explicitly hide the menus onclick here.
+  this.eventManager_.listen(this.controlsButtonPanel_, 'click', () => {
+    this.hideSettingsMenus();
+  });
+
   // Create the elements specified by controlPanelElements
   for (let i = 0; i < this.config_.controlPanelElements.length; i++) {
     const name = this.config_.controlPanelElements[i];
@@ -727,6 +772,30 @@ shaka.ui.Controls.prototype.addControlsButtonPanel_ = function() {
 
 
 /**
+ * When a mobile device is rotated to landscape layout, and the video is
+ * loaded, make the demo app go into fullscreen.
+ * Similarly, exit fullscreen when the device is rotated to portrait layout.
+ * @private
+ */
+shaka.ui.Controls.prototype.onScreenRotation_ = function() {
+  if (!this.video_ ||
+      this.video_.readyState == 0 ||
+      this.castProxy_.isCasting()) { return; }
+
+  if (screen.orientation.type.includes('landscape') &&
+      !document.fullscreenElement) {
+    this.videoContainer_.requestFullscreen();
+  } else if (screen.orientation.type.includes('portrait') &&
+      document.fullscreenElement) {
+    document.exitFullscreen();
+  }
+};
+
+
+/**
+ * Adds static event listeners.  This should only add event listeners to
+ * things that don't change (e.g. Player).  Dynamic elements (e.g. controls)
+ * should have their event listeners added when they are created.
  * @private
  */
 shaka.ui.Controls.prototype.addEventListeners_ = function() {
@@ -742,6 +811,9 @@ shaka.ui.Controls.prototype.addEventListeners_ = function() {
   // for focused elements.
   this.eventManager_.listen(window, 'keydown', this.onKeyDown_.bind(this));
 
+  this.eventManager_.listen(
+      this.controlsContainer_, 'dblclick', () => this.toggleFullScreen());
+
   this.eventManager_.listen(this.video_,
       'play', this.onPlayStateChange_.bind(this));
   this.eventManager_.listen(this.video_,
@@ -752,32 +824,6 @@ shaka.ui.Controls.prototype.addEventListeners_ = function() {
   this.eventManager_.listen(this.video_,
       'ended', this.onPlayStateChange_.bind(this));
 
-
-  // Elements that should not propagate clicks (controls panel, menus)
-  const noPropagationElements = this.videoContainer_.getElementsByClassName(
-      'shaka-no-propagation');
-  for (let i = 0; i < noPropagationElements.length; i++) {
-    let element = noPropagationElements[i];
-    this.eventManager_.listen(element,
-      'click', function(event) { event.stopPropagation(); });
-  }
-
-  // Keep showing controls if one of those elements is hovered
-  let showControlsElements = this.videoContainer_.getElementsByClassName(
-      'shaka-show-controls-on-mouse-over');
-  for (let i = 0; i < showControlsElements.length; i++) {
-    let element = showControlsElements[i];
-    this.eventManager_.listen(element,
-      'mouseover', () => {
-        this.overrideCssShowControls_ = true;
-      });
-
-    this.eventManager_.listen(element,
-      'mouseleave', () => {
-       this.overrideCssShowControls_ = false;
-      });
-  }
-
   this.eventManager_.listen(this.videoContainer_,
       'mousemove', this.onMouseMove_.bind(this));
   this.eventManager_.listen(this.videoContainer_,
@@ -787,14 +833,6 @@ shaka.ui.Controls.prototype.addEventListeners_ = function() {
   this.eventManager_.listen(this.videoContainer_,
       'mouseleave', this.onMouseLeave_.bind(this));
 
-  // Overflow menus are supposed to hide once you click elsewhere
-  // on the video element. The code in onContainerClick_ ensures that.
-  // However, clicks on controls panel don't propagate to the container,
-  // so we have to explicitly hide the menus onclick here.
-  this.eventManager_.listen(this.controlsButtonPanel_, 'click', () => {
-    this.hideSettingsMenusTimer_.tickNow();
-  });
-
   this.eventManager_.listen(this.castProxy_,
       'caststatuschanged', (e) => {
         this.onCastStatusChange_(e);
@@ -803,13 +841,11 @@ shaka.ui.Controls.prototype.addEventListeners_ = function() {
   this.eventManager_.listen(this.videoContainer_,
       'keyup', this.onKeyUp_.bind(this));
 
-  this.eventManager_.listen(this.localization_,
-      shaka.ui.Localization.LOCALE_UPDATED,
-      (e) => this.updateLocalizedStrings_());
-
-  this.eventManager_.listen(this.localization_,
-      shaka.ui.Localization.LOCALE_CHANGED,
-      (e) => this.updateLocalizedStrings_());
+  if (screen.orientation) {
+    this.eventManager_.listen(screen.orientation, 'change', () => {
+      this.onScreenRotation_();
+    });
+  }
 };
 
 
@@ -988,17 +1024,6 @@ shaka.ui.Controls.prototype.onPlayStateChange_ = function() {
   if (this.video_.ended && !this.video_.paused) {
     this.video_.pause();
   }
-
-  // Video is paused during seek, so don't show the play arrow while seeking:
-  if (this.enabled_ && this.video_.paused && !this.isSeeking_) {
-    this.playButton_.setAttribute('icon', 'play');
-    this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-      this.localization_.resolve(shaka.ui.Locales.Ids.PLAY));
-  } else {
-    this.playButton_.setAttribute('icon', 'pause');
-    this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-      this.localization_.resolve(shaka.ui.Locales.Ids.PAUSE));
-  }
 };
 
 

package/ui/controls.less

@@ -22,7 +22,6 @@
 @import "less/spinner.less";
 @import "less/other_elements.less";
 @import "less/overflow_menu.less";
-
 @import (css, inline) "https://fonts.googleapis.com/css?family=Roboto";
 @import (css, inline) "https://fonts.googleapis.com/icon?family=Material+Icons";
 
@@ -35,6 +34,7 @@
   font-size: 150%;
   padding: 5px;
 
+  /* dimensions */
   bottom: 50px;
   left: 0;
   right: 0;
@@ -53,12 +53,10 @@ to make them override display setting previously set in
 .overflowMenu button.
 See https://goo.gl/egXAJY for explanation of
 how CSS cascade rules work. */
-button.shaka-hidden,
-.shaka-hidden {
+button.shaka-hidden, .shaka-hidden {
   .hidden();
 }
 
-button.shaka-displayed,
-.shaka-displayed {
+button.shaka-displayed, .shaka-displayed {
   display: flex;
 }

package/ui/externs/ui.js

@@ -34,7 +34,9 @@ shaka.extern = {};
  *   controlPanelElements: !Array.<string>,
  *   overflowMenuButtons: !Array.<string>,
  *   addSeekBar: boolean,
- *   castReceiverAppId: string
+ *   addBigPlayButton: boolean,
+ *   castReceiverAppId: string,
+ *   clearBufferOnQualityChange: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -43,9 +45,19 @@ shaka.extern = {};
  *   The ordered list of the overflow menu buttons.
  * @property {boolean} addSeekBar
  *   Whether or not a seek bar should be part of the UI.
+ * @property {boolean} addBigPlayButton
+ *   Whether or not a big play button in the center of the video
+ *   should be part of the UI.
  * @property {string} castReceiverAppId
  *   Receiver app id to use for the Chromecast support.
- * @exportDoc
+ * @property {boolean} clearBufferOnQualityChange
+ *   Only applicable if the resolution selection is part of the UI.
+ *   Whether buffer should be cleared when changing resolution
+ *   via UI. Clearing buffer would result in immidiate change of quality,
+ *   but playback may flicker/stall for a sec as the content in new
+ *   resolution is being buffered. Not clearing the buffer will mean
+ *   we play the content in the previously selected resolution that we
+ *   already have buffered before switching to the new resolution.
  */
 shaka.extern.UIConfiguration;
 

package/ui/fullscreen_button.js

@@ -51,9 +51,6 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
-    /** @private {!HTMLElement} */
-    this.videoContainer_ = this.controls.getVideoContainer();
-
     this.eventManager.listen(
       this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
         this.updateAriaLabel_();
@@ -65,14 +62,8 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
       });
 
     this.eventManager.listen(this.button_, 'click', () => {
-        this.toggleFullScreen_();
-      });
-
-    if (screen.orientation) {
-      this.eventManager.listen(screen.orientation, 'change', () => {
-        this.onScreenRotation_();
-      });
-    }
+      this.controls.toggleFullScreen();
+    });
 
     this.eventManager.listen(document, 'fullscreenchange', () => {
         this.updateIcon_();
@@ -101,47 +92,6 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
       shaka.ui.Enums.MaterialDesignIcons.EXIT_FULLSCREEN :
       shaka.ui.Enums.MaterialDesignIcons.FULLSCREEN;
   }
-
-  /**
-   * @private
-   */
-  async toggleFullScreen_() {
-    if (document.fullscreenElement) {
-      document.exitFullscreen();
-    } else {
-      // If you are in PiP mode, leave PiP mode first.
-      try {
-        if (document.pictureInPictureElement) {
-          await document.exitPictureInPicture();
-        }
-      } catch (error) {
-        this.controls.dispatchEvent(new shaka.util.FakeEvent('error', {
-          detail: error,
-        }));
-      }
-      await this.videoContainer_.requestFullscreen();
-    }
-  }
-
-  /**
-   * When a mobile device is rotated to landscape layout, and the video is
-   * loaded, make the demo app go into fullscreen.
-   * Similarly, exit fullscreen when the device is rotated to portrait layout.
-   * @private
-   */
-  onScreenRotation_() {
-    if (!this.video ||
-        this.video.readyState == 0 ||
-        this.controls.getCastProxy().isCasting()) return;
-
-    if (screen.orientation.type.includes('landscape') &&
-        !document.fullscreenElement) {
-      this.videoContainer_.requestFullscreen();
-    } else if (screen.orientation.type.includes('portrait') &&
-        document.fullscreenElement) {
-      document.exitFullscreen();
-    }
-  }
 };
 
 

package/ui/less/buttons.less

@@ -41,7 +41,7 @@
   border-radius: 50%;
 
   /* A small drop shadow below the button. */
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;
 
   /* No border. */
   border: none;
@@ -52,8 +52,9 @@
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: center center;
+
   /* A background color behind the play arrow. */
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, 0.9);
 
   /* Actual icon images for the two states this could be in.
    * These will be inlined as data URIs when compiled, and so do not need to be
@@ -62,6 +63,7 @@
   &[icon="play"] {
     background-image: data-uri('images/play_arrow.svg');
   }
+
   &[icon="pause"] {
     background-image: data-uri('images/pause.svg');
   }
@@ -91,11 +93,11 @@
 
 /* Use a consistent outline focus style across browsers. */
 .shaka-controls-container {
-  button:focus,
-  input:focus {
+  button:focus, input:focus {
     /* Most browsers will fall back to "Highlight" (system setting) color for
      * the focus outline. */
     outline: 1px solid Highlight;
+
     /* WebKit-based and Blink-based browsers have this as their default outline
      * color. */
     outline: 1px solid -webkit-focus-ring-color;
@@ -103,8 +105,7 @@
 
   /* Disable this Mozilla-specific focus ring, since we have an outline defined
    * for focus. */
-  button::-moz-focus-inner,
-  input::-moz-focus-outer {
+  button:-moz-focus-inner, input:-moz-focus-outer {
     outline: none;
     border: 0;
   }
@@ -114,8 +115,7 @@
  * it doesn't look great. This removes the outline for
  * mouse users while leaving it for keyboard users. */
 .shaka-controls-container:not(.shaka-keyboard-navigation) {
-  button:focus,
-  input:focus {
+  button:focus, input:focus {
     outline: none;
     border: 0;
   }

package/ui/less/containers.less

@@ -17,6 +17,8 @@
 
 /* All of the top-level containers into which various visible features go. */
 
+@transparent: rgba(0, 0, 0, 0);
+
 /* A container for the entire video + controls combo.  This is the auto-setup
  * div which we populate. */
 .shaka-video-container {
@@ -31,6 +33,7 @@
   .material-icons {
     font-family: 'Material Icons';
   }
+
   * {
     font-family: Roboto-Regular, Roboto, sans-serif;
   }
@@ -44,12 +47,14 @@
  * pseudo-class they don't support. */
 .fullscreen-container() {
   .fill-container();
+
   background-color: black;
 
   .shaka-text-container {
     /* In fullscreen mode, the text displayer's font size should be relative to
-     * the window height instead of a fixed size. */
-    font-size: 4.4vh;
+     * the either window height or width (whichever is smaller), instead of a
+     * fixed size. */
+    font-size: 4.4vmin;
   }
 }
 .shaka-video-container:fullscreen { .fullscreen-container(); }
@@ -77,18 +82,18 @@
 
   /* A flex container, to make layout of children easier to reason about. */
   display: flex;
+
   /* Defines in which direction the children should flow. */
   flex-direction: column;
+
   /* Pushes the children toward the bottom of the container. */
   justify-content: flex-end;
+
   /* Centers children horizontally. */
   align-items: center;
 
   /* A black gradient at the bottom, behind the controls, but only so high. */
-  background: linear-gradient(
-      to top,
-      rgba(0, 0, 0, 1) 0,
-      rgba(0, 0, 0, 0) 92px);
+  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0, @transparent 92px);
 
   /* By default, do not allow any of our controls to shrink.
    * Specific controls can use .shrinkable() to override. */
@@ -98,7 +103,7 @@
   opacity: 0;
 
   /* When we show/hide this, do it gradually using cubic-bezier timing. */
-  transition: opacity cubic-bezier(0.4, 0.0, 0.6, 1) 600ms;
+  transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 600ms;
 
   /* Position the controls container in front of the text container, so that
    * the text container doesn't interfere with the control buttons. */
@@ -119,7 +124,6 @@
   }
 }
 
-
 /* Container for controls positioned at the bottom of the video container:
  * controls button panel and the seek bar. */
 .shaka-bottom-controls {
@@ -148,8 +152,10 @@
   /* This is itself a flex container, with children layed out horizontally. */
   display: flex;
   flex-direction: row;
+
   /* Push children to the right. */
   justify-content: flex-end;
+
   /* Center children vertically. */
   align-items: center;
 
@@ -196,24 +202,21 @@
   margin: 0;
   .fill-container();
   .shrinkable();
+  .absolute-position();
 
   /* Keep the play button in the middle of this container. */
   display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
-  /* Specify left and top for IE's sake.  Otherwise, the container ends up below
-   * and to the right of where it should be. */
-  top: 0;
-  left: 0;
 }
 
 .shaka-text-container {
+  .absolute-position();
+
   bottom: 15%;
-  top: 0;
-  left: 0;
   width: 100%;
   min-width: 48px;
+  text-align: center;
 
   /* Set the captions in the middle horizontally by default. */
   display: flex;
@@ -226,9 +229,6 @@
    * overflow content. */
   overflow: hidden;
 
-  text-align: center;
-  position: absolute;
-
   /* These are defaults which are overridden by JS or cue styles. */
   font-size: 20px;
   line-height: 1.4;  // relative to font size.
@@ -242,10 +242,9 @@
   }
 }
 
-
 /* The buffering spinner. */
 .shaka-spinner-container {
-  position: absolute;
+  .absolute-position();
   .fill-container();
 
   flex-shrink: 1;
@@ -262,8 +261,9 @@
   for the detailed explanation. */
 
   /* For the padding thing to work, spinner div needs to be an
-  overlay-parent and spinner svg - an overlay child.*/
+  overlay-parent and spinner svg - an overlay child. */
   .overlay-parent();
+
   margin: 0;
   box-sizing: border-box;
   padding: @spinner-size-percentage / 2;

package/ui/less/general.less

@@ -77,6 +77,17 @@
   .fill-container();
 }
 
+.absolute-position() {
+  /* When setting "position: absolute" it uses the left,right,top,bottom
+   * properties to determine the positioning.  We should set all these
+   * properties to ensure it is positioned properly on all platforms. */
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
 /* For things that should not shrink inside a flex container.
  * This will be used for all controls by default. */
 .unshrinkable() {

package/ui/less/other_elements.less

@@ -29,6 +29,7 @@
   /* Make the element grow to take up the remaining space. */
   flex-grow: 1;
 
-  /* Margins don't shrink. Remove margins in order to be more flexible when shrinking. */
+  /* Margins don't shrink. Remove margins in order to be more flexible when
+   * shrinking. */
   margin: 0;
 }