shaka-player 2.5.1 → 2.5.5

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/element.js

@@ -32,22 +32,40 @@ shaka.ui.Element = class {
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    /** @protected {HTMLElement} */
+    /**
+     * @protected {HTMLElement}
+     * @exportInterface
+     */
     this.parent = parent;
 
-    /** @protected {shaka.ui.Controls} */
+    /**
+     * @protected {shaka.ui.Controls}
+     * @exportInterface
+     */
     this.controls = controls;
 
-    /** @protected {shaka.util.EventManager} */
+    /**
+     * @protected {shaka.util.EventManager}
+     * @exportInterface
+     */
     this.eventManager = new shaka.util.EventManager();
 
-    /** @protected {shaka.ui.Localization} */
+    /**
+     * @protected {shaka.ui.Localization}
+     * @exportInterface
+     */
     this.localization = this.controls.getLocalization();
 
-    /** @protected {shaka.Player} */
+    /**
+     * @protected {shaka.Player}
+     * @exportInterface
+     */
     this.player = this.controls.getPlayer();
 
-    /** @protected {HTMLMediaElement} */
+    /**
+     * @protected {HTMLMediaElement}
+     * @exportInterface
+     */
     this.video = this.controls.getVideo();
   }
 

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;
 
@@ -57,7 +69,54 @@ shaka.extern.UIConfiguration;
  * @interface
  * @exportDoc
  */
-shaka.extern.IUIElement = class {};
+shaka.extern.IUIElement = class {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    /**
+     * @protected {HTMLElement}
+     * @exportDoc
+     */
+    this.parent;
+
+    /**
+     * @protected {shaka.ui.Controls}
+     * @exportDoc
+     */
+    this.controls;
+
+    /**
+     * @protected {shaka.util.EventManager}
+     * @exportDoc
+     */
+    this.eventManager;
+
+    /**
+     * @protected {shaka.ui.Localization}
+     * @exportDoc
+     */
+    this.localization;
+
+    /**
+     * @protected {shaka.Player}
+     * @exportDoc
+     */
+    this.player;
+
+    /**
+     * @protected {HTMLMediaElement}
+     * @exportDoc
+     */
+    this.video;
+  }
+
+  /**
+   * @override
+   */
+  destroy() {}
+};
 
 
 /**
@@ -74,9 +133,3 @@ shaka.extern.IUIElement.Factory = class {
    */
   create(rootElement, controls) {}
 };
-
-
-/**
- * @exportDoc
- */
-shaka.extern.IUIElement.prototype.destroy = function() {};

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

@@ -19,8 +19,7 @@
 
 @play-button-size-percentage: 15%;
 
-/* The giant play button, which sits inside .shaka-player-button-container and
- * contains the buffering spinner. */
+/* The giant play button, which sits inside .shaka-player-button-container. */
 .shaka-play-button {
   /* Set width & height in a round-about way.  By using padding, we can keep
    * a 1:1 aspect ratio and size the button relative to the container width.
@@ -34,11 +33,6 @@
   width: 0;
   height: 0;
 
-  /* The width/height hack above requires this to behave as an overlay
-   * container, and the spinner to behave as an overlay child.  Otherwise, the
-   * spinner constrains to the content area size (0x0). */
-  .overlay-parent();
-
   /* To be properly positioned in the center, this should have no margin.
    * This might have been set for buttons generally by the app or user-agent. */
   margin: 0;
@@ -47,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;
@@ -58,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
@@ -68,6 +63,7 @@
   &[icon="play"] {
     background-image: data-uri('images/play_arrow.svg');
   }
+
   &[icon="pause"] {
     background-image: data-uri('images/pause.svg');
   }
@@ -78,7 +74,7 @@
  * edge. Otherwise, the button is disabled.
  */
 .shaka-current-time {
-  font-size: 16px;
+  font-size: 14px;
   color: rgb(255, 255, 255);
 
   /* Make the time element the right size for the text, instead of defaulting
@@ -97,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;
@@ -109,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;
   }
@@ -120,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;
   }
@@ -43,9 +46,16 @@
  * single delcaration.  Browsers ignore the rest of the list once they hit one
  * pseudo-class they don't support. */
 .fullscreen-container() {
-  width: 100%;
-  height: 100%;
+  .fill-container();
+
   background-color: black;
+
+  .shaka-text-container {
+    /* In fullscreen mode, the text displayer's font size should be relative to
+     * the either window height or width (whichever is smaller), instead of a
+     * fixed size. */
+    font-size: 4.4vmin;
+  }
 }
 .shaka-video-container:fullscreen { .fullscreen-container(); }
 .shaka-video-container:-webkit-full-screen { .fullscreen-container(); }
@@ -67,28 +77,23 @@
 .shaka-controls-container {
   .overlay-child();
 
-  /* The padding defines a region around the video in which controls cannot
-   * exist.  The two-value settings are shorthand for vertical followed by
-   * horizontal. */
-  padding: 12px 5px;
-
   /* Without this, the controls container overflows the video container. */
   box-sizing: border-box;
 
   /* 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,6 +124,22 @@
   }
 }
 
+/* Container for controls positioned at the bottom of the video container:
+ * controls button panel and the seek bar. */
+.shaka-bottom-controls {
+  width: 98%;
+  padding: 0;
+  padding-left: 2%;
+  padding-bottom: 2.5%;
+
+  /* Position the bottom panel in front of other controls (play button and
+   * spinner containers).
+   * TODO: A different layout arrangement might be a better solution for this.
+   * Need to experiment.
+   */
+  z-index: 1;
+}
+
 /* This is the container for the horizontal row of controls above the seek bar.
  * It sits above (Y axis) the seek bar, and below (Y axis) the giant play button
  * in the middle. */
@@ -131,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;
 
@@ -177,9 +200,9 @@
   /* Take up as much space as possible, but shrink (vertically) to accomodate
    * the controls at the bottom. */
   margin: 0;
-  width: 100%;
-  height: 100%;
+  .fill-container();
   .shrinkable();
+  .absolute-position();
 
   /* Keep the play button in the middle of this container. */
   display: flex;
@@ -188,11 +211,12 @@
 }
 
 .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;
@@ -205,13 +229,44 @@
    * 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.
 
   span {
-    font-size: 18px;
+    /* These are defaults which are overridden by JS or cue styles. */
+    background-color: rgba(0, 0, 0, 0.8);
     color: rgb(255, 255, 255);
     display: block;
-    max-width:95%;
+    max-width: 95%;
   }
 }
+
+/* The buffering spinner. */
+.shaka-spinner-container {
+  .absolute-position();
+  .fill-container();
+
+  flex-shrink: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@spinner-size-percentage: 15.6%;
+
+.shaka-spinner {
+  /* This uses the same trickery as the big play button define
+  the spinner's width and height. See .shaka-play-button
+  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();
+
+  margin: 0;
+  box-sizing: border-box;
+  padding: @spinner-size-percentage / 2;
+  width: 0;
+  height: 0;
+}

package/ui/less/general.less

@@ -30,6 +30,11 @@
   display: none;
 }
 
+.fill-container() {
+  width: 100%;
+  height: 100%;
+}
+
 /* For containers which host elements overlaying other things. */
 .overlay-parent() {
   /* For a detailed explanation of how this achieves an overlay, please refer
@@ -66,10 +71,21 @@
   left: 0;
   right: 0;
   bottom: 0;
-  width: 100%;
-  height: 100%;
   margin: 0;
   padding: 0;
+
+  .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.

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;
 }

package/ui/less/overflow_menu.less

@@ -29,7 +29,7 @@
 
   /* Styles for the menu itself. */
   background: white;
-  box-shadow: 0 1px 9px 0 rgba(0,0,0,0.40);
+  box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.4);
   border-radius: 2px;
   max-height: 250px;
   min-width: 180px;
@@ -64,20 +64,21 @@
     &:hover {
       background: rgb(224, 224, 224);
     }
+
     .shaka-keyboard-navigation &:focus {
       background: rgb(224, 224, 224);
     }
   }
 
-  /* These are the elements which contain the material design icons. */
-  /* TODO: Pull MD icon details out of JS. */
+  /* These are the elements which contain the material design icons.
+   * TODO: Pull MD icon details out of JS. */
   i {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     padding-left: 10px;
   }
 
-  /* If the seekbar is missing, this is positioned lower. */
-  /* TODO: Solve with flex layout instead? */
+  /* If the seekbar is missing, this is positioned lower.
+   * TODO: Solve with flex layout instead? */
   &.shaka-low-position {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     bottom: 15px;
@@ -93,6 +94,7 @@
 .shaka-overflow-menu span {
   text-align: left;
   position: relative;
+
   /* TODO(b/116651454): eliminate hard-coded offsets */
   left: 13px;
 }
@@ -101,6 +103,7 @@
  * right of MD icons. */
 .shaka-overflow-button-label {
   position: relative;
+
   /* This is a flex container, whose children flow vertically. */
   display: flex;
   flex-direction: column;
@@ -114,12 +117,10 @@
   color: rgba(0, 0, 0, 0.54);
 }
 
-/* These three submenus have somewhat different margins inside them. */
-/* TODO: This is all submenus, but not the top-level menu.  Is there a better
+/* These three submenus have somewhat different margins inside them.
+ * TODO: This is all submenus, but not the top-level menu.  Is there a better
  * way to express this? */
-.shaka-resolutions,
-.shaka-audio-languages,
-.shaka-text-languages {
+.shaka-resolutions, .shaka-audio-languages, .shaka-text-languages {
   span {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     margin-left: 54px;