shaka-player 2.5.1 → 2.5.5

package/demo/demo.less

@@ -19,18 +19,17 @@
 @import (css, inline) "../node_modules/material-design-lite/dist/material.indigo-blue.min.css";
 @import (css, inline) "../node_modules/dialog-polyfill/dialog-polyfill.css";
 @import (css, inline) "../node_modules/awesomplete/awesomplete.css";
+@import (css, inline) "../node_modules/tippy.js/index.css";
 
 @accent-border-color: #8080ff;
 @error-color: #d84a38;
 @drawer-width: 550px;
 
 @mdl-footer-link-color: #9e9e9e;  /* copied from MDL stylesheet */
-@mdl-button-color: rgb(68,138,255);  /* copied from MDL stylesheet */
+@mdl-button-color: rgb(63,81,181);  /* copied from MDL stylesheet */
 
-/* The default color from MDL is too low-contrast on a white background. */
-.mdl-button--accent.mdl-button--accent {
-  color: darken(@mdl-button-color, 20%);
-}
+@progress-circle-size: 45px;
+@progress-circle-thickness: 5px;
 
 /* This is a less mixin only, rather than a CSS class. MDL has an equivalent
  * class with the same name, which can be used in the application directly. */
@@ -47,11 +46,12 @@
   text-align: center;
 }
 
-.close-button {
+.shaka-controls-button-panel > .close-button {
   /* Move the button to the top-right. */
   position: absolute;
   top: 10px;
   right: 10px;
+
   /* Give the button a round background, meant to look like the play button. */
   border-radius: 50%;
   width: 32px;
@@ -66,11 +66,16 @@ html, body {
 
 /* Give the FAB a drop shadow, that expands a little bit when moused over. */
 .mdl-button--fab {
-  filter: drop-shadow(0 2px 5px #333333);
+  filter: drop-shadow(0 2px 5px #333);
   transition: 0.2s ease-in-out;
 }
+
 .mdl-button--fab:hover {
-  filter: drop-shadow(0 2px 8px #333333);
+  filter: drop-shadow(0 2px 8px #333);
+}
+
+.input-container-label {
+  padding-right: 1em;
 }
 
 /* Remove vertical padding on MDL text fields, but only while they are in
@@ -80,22 +85,27 @@ html, body {
   // The default width of 300px is a bit too wide for us.
   width: 200px;
 }
+
 .hamburger-menu .mdl-textfield__label {
   top: 4px;
 }
+
 .hamburger-menu .mdl-textfield__label:after {
   bottom: 0;
 }
+
 .hamburger-menu .mdl-layout-title {
   /* The line-height style in mdl-layout-title looks weird on narrow displays,
    * so remove it in the hamburger menu. */
   line-height: unset;
 }
+
 .hamburger-menu .input-container-label {
   /* Give the labels for input rows a left margin. This keeps them from directly
    * touching the left side of the screen, for improved readability. */
   margin-left: 1em;
 }
+
 .hamburger-menu .mdl-button--raised {
   /* Left-align the text content of the section header buttons. */
   text-align: left;
@@ -108,11 +118,13 @@ html, body {
   padding: 1em;
   line-height: 2em;
   text-align: center;
-  width: 100%;
 }
 
 #error-display-link {
   color: white;
+  display: inline-block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .input-disabled {
@@ -124,9 +136,10 @@ html, body {
   color: white;
   position: relative;
   padding: 0 0;
-  top: 0em;
-  right: 2em;
+  top: 0;
+  right: 1em;
   float: right;
+  font-size: 24px;
   font-weight: bold;
   text-decoration: none;
   cursor: pointer;
@@ -137,6 +150,7 @@ html, body {
   display: inline-block;
   margin: 1em;
 }
+
 .asset-card-unsupported {
   display: inline-block;
   margin: 1em;
@@ -150,41 +164,53 @@ html, body {
   background-size: contain;
   background-repeat: no-repeat;
   display: inline-block;
+
   /* features */
   &[icon="high_definition"] {
     background-image: data-uri('icons/custom_high_definition.svg');
   }
+
   &[icon="ultra_high_definition"] {
     background-image: data-uri('icons/custom_ultra_high_definition.svg');
   }
+
   &[icon="subtitles"] {
     background-image: data-uri('icons/baseline-subtitles-24px.svg');
   }
+
   &[icon="closed_caption"] {
     background-image: data-uri('icons/baseline-closed_caption-24px.svg');
   }
+
   &[icon="live"] {
     background-image: data-uri('icons/baseline-live_tv-24px.svg');
   }
+
   &[icon="trick_mode"] {
     background-image: data-uri('icons/baseline-fast_forward-24px.svg');
   }
+
   &[icon="surround_sound"] {
     background-image: data-uri('icons/baseline-surround_sound-24px.svg');
   }
+
   &[icon="multiple_languages"] {
     background-image: data-uri('icons/baseline-language-24px.svg');
   }
+
   &[icon="audio_only"] {
     background-image: data-uri('icons/baseline-audiotrack-24px.svg');
   }
+
   /* key systems */
   &[icon="widevine"] {
     background-image: data-uri('icons/custom_widevine.svg');
   }
+
   &[icon="clear_key"] {
     background-image: data-uri('icons/custom_clear_key.svg');
   }
+
   &[icon="playready"] {
     background-image: data-uri('icons/custom_playready.svg');
   }
@@ -205,6 +231,48 @@ html, body {
   right: 5px;
 }
 
+.progress-circle {
+  position: absolute;
+  top: 0;
+  right: 14px;
+  width: @progress-circle-size;
+  height: @progress-circle-size;
+
+  /* This should be unclickable, so that you can click the button beneath. */
+  pointer-events: none;
+}
+
+.progress-circle-svg {
+  /* In rotation, 0 degrees is the right side. That means that the progress
+   * circle "starts at" the right side. Normally, you expect the circle to
+   * "start at" the top, like a clock; this rotates the circle, so it behaves
+   * thusly. */
+  transform: rotate(-90deg);
+}
+
+.progress-circle-circle() {
+  /* Set the position and radius of the circle, so it is in the center of the
+   * svg's canvas. */
+  cx: @progress-circle-size / 2;
+  cy: @progress-circle-size / 2;
+  r: (@progress-circle-size - @progress-circle-thickness) / 2;
+  fill: none;
+  stroke-width: @progress-circle-thickness;
+}
+
+.progress-circle-bar {
+  .progress-circle-circle();
+
+  stroke: @mdl-button-color;
+  stroke-linecap: round;
+}
+
+.progress-circle-back {
+  .progress-circle-circle();
+
+  stroke: #eee;
+}
+
 .asset-card .mdl-card__title {
   /* The maximum width of the title should be narrower than the width of the
    * card itself, so that the title doesn't overlap with the store button. */
@@ -220,9 +288,9 @@ html, body {
 .asset-card img {
   /* Icons are 300px by 210px (10:7 aspect ratio). */
   width: 300px;
+
   /* Constrain to space if necessary. */
   max-width: 100%;
-
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -251,6 +319,7 @@ html, body {
     height: auto;
     flex-wrap: wrap;
   }
+
   /* The spacer should be hidden in this mode, so that the version number is no
    * longer being forced to the right. */
   .app-header .mdl-layout-spacer {
@@ -293,6 +362,7 @@ footer .mdl-mega-footer__link-list {
     /* The default color was low-contrast on this dark background. */
     color: lighten(@mdl-footer-link-color, 20%);
   }
+
   a[disabled] {
     /* Making the disabled version even darker would be even worse in terms of
      * contrast, so use a strikethrough style instead. */
@@ -362,6 +432,7 @@ footer .mdl-mega-footer__link-list {
   /* The video bar fills the horizontal space, but its height depends on the
    * contents. */
   width: 100%;
+
   /* Add a little bit of padding on top, to make the video not look cropped. */
   padding-top: 1em;
 }
@@ -379,6 +450,24 @@ footer .mdl-mega-footer__link-list {
   max-width: 100%;
 }
 
+#video-bar.no-input-sized {
+  /* Add some additional padding so that TV overscan doesn't cut off the version
+   * number or other information we might need. */
+  padding: 2.5em 2em;
+
+  /* Constrain the body to its size minus margin and padding, so that nested
+   * elements can constrain to the body. */
+  width: 100%;
+  width: calc(100% - 4em);
+  height: 100%;
+  height: calc(100% - 5em);
+}
+
+.video-container.no-input-sized {
+  width: 100%;
+  height: 100%;
+}
+
 #video {
   /* Fill whatever space we're given, whether fullscreen or not. */
   width: 100%;
@@ -396,26 +485,28 @@ footer .mdl-mega-footer__link-list {
 .input-container-row {
   display: inline-block;
 }
+
 .input-container-style-flex {
   display: flex;
   flex-wrap: wrap;
 }
+
 .input-container-style-vertical {
   text-align: left;
 }
+
 .input-container-style-accordion {
   text-align: left;
   opacity: 0;
-  max-height: 0px;
+  max-height: 0;
   transition: 0.3s ease-in-out;
 }
+
 .input-container-style-accordion.show {
   opacity: 1;
+
   /* If the max-height is too high (e.g. set to 100%), the "sliding out"
    * animation is too fast to make out with the eye.
    * So give it a fixed maximum instead. */
   max-height: 1000px;
 }
-.input-container-label {
-  padding-right: 1em;
-}

package/demo/demo_uncompiled.js

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+goog.require('shakaDemo.AssetCard');
+goog.require('shakaDemo.CloseButton');
+goog.require('shakaDemo.Config');
+goog.require('shakaDemo.Custom');
+goog.require('shakaDemo.Utils');
+goog.require('shakaDemo.Front');
+goog.require('shakaDemo.BoolInput');
+goog.require('shakaDemo.DatalistInput');
+goog.require('shakaDemo.Input');
+goog.require('shakaDemo.NumberInput');
+goog.require('shakaDemo.SelectInput');
+goog.require('shakaDemo.TextInput');
+goog.require('shakaDemo.InputContainer');
+goog.require('shakaDemo.Main');
+goog.require('shakaDemo.Search');
+goog.require('shakaDemo.Tooltips');

package/demo/demo_utils.js

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 
+goog.provide('shakaDemo.Utils');
 
 /** @namespace */
-let ShakaDemoUtils = {};
+shakaDemo.Utils = {};
 
 /**
  * Goes through the various values in shaka.extern.PlayerConfiguration, and
@@ -32,7 +33,7 @@ let ShakaDemoUtils = {};
  *   checked only to determine the shape and structure of a PlayerConfiguration
  *   object.
  */
-ShakaDemoUtils.runThroughHashParams = (callback, config) => {
+shakaDemo.Utils.runThroughHashParams = (callback, config) => {
   // Override the "natural" name for a config value in the hash.
   // This exists for legacy reasons; the previous demo page had some hash values
   // set to names that did not match the names of their corresponding config
@@ -107,7 +108,7 @@ ShakaDemoUtils.runThroughHashParams = (callback, config) => {
 /**
  * @return {boolean} True if the browser would support the uncompiled build.
  */
-ShakaDemoUtils.browserSupportsUncompiledMode = () => {
+shakaDemo.Utils.browserSupportsUncompiledMode = () => {
   // Check if ES6 arrow function syntax and ES7 async are usable.  Both are
   // needed for uncompiled builds to work.
   try {

package/demo/front.js

@@ -16,25 +16,28 @@
  */
 
 
-/** @type {?ShakaDemoFront} */
+goog.provide('shakaDemo.Front');
+
+
+/** @type {?shakaDemo.Front} */
 let shakaDemoFront;
 
 
 /**
  * Shaka Player demo, front page layout.
  */
-class ShakaDemoFront {
+shakaDemo.Front = class {
   /**
    * Register the page configuration.
    */
   static init() {
     const container = shakaDemoMain.addNavButton('front');
-    shakaDemoFront = new ShakaDemoFront(container);
+    shakaDemoFront = new shakaDemo.Front(container);
   }
 
   /** @param {!Element} container */
   constructor(container) {
-    /** @private {!Array.<!AssetCard>} */
+    /** @private {!Array.<!shakaDemo.AssetCard>} */
     this.assetCards_ = [];
 
     /** @private {!Element} */
@@ -116,11 +119,12 @@ class ShakaDemoFront {
   /**
    * @param {!ShakaDemoAssetInfo} asset
    * @param {!Element} container
-   * @return {!AssetCard}
+   * @return {!shakaDemo.AssetCard}
    * @private
    */
   createAssetCardFor_(asset, container) {
-    return new AssetCard(container, asset, /* isFeatured = */ true, (c) => {
+    const isFeatured = true;
+    return new shakaDemo.AssetCard(container, asset, isFeatured, (c) => {
       const unsupportedReason = shakaDemoMain.getAssetUnsupportedReason(
           asset, /* needOffline= */ false);
       if (unsupportedReason) {
@@ -154,7 +158,7 @@ class ShakaDemoFront {
       card.selectByAsset(shakaDemoMain.selectedAsset);
     }
   }
-}
+};
 
 
-document.addEventListener('shaka-main-loaded', ShakaDemoFront.init);
+document.addEventListener('shaka-main-loaded', shakaDemo.Front.init);

package/demo/index.html

@@ -41,9 +41,13 @@
     <!-- MDL is enabled by including this: -->
     <script defer src="../node_modules/material-design-lite/dist/material.min.js"></script>
     <!-- MDL modal dialogs are enabled by including these: -->
-    <script defer src="../node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+    <script defer src="../node_modules/dialog-polyfill/dist/dialog-polyfill.js"></script>
     <!-- Datalist-like fields are enabled by including these: -->
     <script defer src="../node_modules/awesomplete/awesomplete.min.js"></script>
+    <!-- tippy.js requires popper.js to work properly: -->
+    <script defer src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <!-- Tooltips are made using tippy.js: -->
+    <script defer src="../node_modules/tippy.js/umd/index.min.js"></script>
 
     <script>
 COMPILED_JS = [
@@ -71,17 +75,7 @@ UNCOMPILED_JS = [
   // These are the individual parts of the demo app.
   'common/asset.js',
   'common/assets.js',
-  'demo_utils.js',
-  'asset_card.js',
-  'close_button.js',
-  'input.js',
-  'input_container.js',
-  'tooltip.js',
-  'main.js',
-  'front.js',
-  'search.js',
-  'custom.js',
-  'config.js'
+  'demo_uncompiled.js',
 ];
     </script>
 
@@ -90,18 +84,21 @@ UNCOMPILED_JS = [
   </head>
   <body>
     <div id="main-layout" class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-      <header class="app-header mdl-layout__header">
+      <header class="app-header mdl-layout__header should-hide-in-no-input-mode">
         <header class="mdl-layout__header-row" id="nav-button-container">
           <img alt="Shaka Player Logo" src="shaka_logo_trans.png" class="logo" />
           <button id="nav-button-front" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" defaultselected>HOME</button>
           <button id="nav-button-search" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail">SEARCH</button>
           <button id="nav-button-custom" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail">CUSTOM CONTENT</button>
           <div class="mdl-layout-spacer"></div>
-          <div id="version-block">
-            <span id="version-string"></span>
+          <div class="version-block">
+            <span class="version-string"></span>
           </div>
         </header>
       </header>
+      <div class="version-block hidden should-show-in-no-input-mode">
+        <span class="version-string"></span>
+      </div>
       <div class="mdl-layout__drawer hamburger-menu">
         <div id="hamburger-menu-title" class="mdl-layout-title">
           Shaka Player Demo Config
@@ -121,8 +118,8 @@ UNCOMPILED_JS = [
             <video data-shaka-player autoplay playsinline id="video"></video>
           </div>
         </div>
-        <div id="contents"></div>
-        <footer class="mdl-mega-footer">
+        <div id="contents" class="should-hide-in-no-input-mode"></div>
+        <footer class="mdl-mega-footer should-hide-in-no-input-mode">
           <div class="mdl-mega-footer__middle-section">
 
             <div class="mdl-mega-footer__drop-down-section">

package/demo/input.js

@@ -15,12 +15,19 @@
  * limitations under the License.
  */
 
+goog.provide('shakaDemo.BoolInput');
+goog.provide('shakaDemo.DatalistInput');
+goog.provide('shakaDemo.Input');
+goog.provide('shakaDemo.NumberInput');
+goog.provide('shakaDemo.SelectInput');
+goog.provide('shakaDemo.TextInput');
+
 /**
  * Creates and contains the MDL elements of a type of input.
  */
-class ShakaDemoInput {
+shakaDemo.Input = class {
   /**
-   * @param {!ShakaDemoInputContainer} parentContainer
+   * @param {!shakaDemo.InputContainer} parentContainer
    * @param {string} inputType The element type for the input object.
    * @param {string} containerType The element type for the container containing
    *   the input object.
@@ -36,7 +43,7 @@ class ShakaDemoInput {
     /** @private {!Element} */
     this.input_ = document.createElement(inputType);
     this.input_.onchange = () => { onChange(this.input_); };
-    this.input_.id = ShakaDemoInput.generateNewId_('input');
+    this.input_.id = shakaDemo.Input.generateNewId_('input');
     this.container_.appendChild(this.input_);
 
     if (parentContainer.latestTooltip) {
@@ -46,7 +53,7 @@ class ShakaDemoInput {
       const extraInfo = document.createElement('span');
       extraInfo.textContent = parentContainer.latestTooltip;
       extraInfo.classList.add('hidden');
-      extraInfo.id = ShakaDemoInput.generateNewId_('extra-info');
+      extraInfo.id = shakaDemo.Input.generateNewId_('extra-info');
       this.container_.appendChild(extraInfo);
       this.input_.setAttribute('aria-describedby', extraInfo.id);
     }
@@ -85,23 +92,23 @@ class ShakaDemoInput {
   * @private
   */
  static generateNewId_(prefix) {
-   const idNumber = ShakaDemoInput.lastId_;
-   ShakaDemoInput.lastId_ += 1;
+   const idNumber = shakaDemo.Input.lastId_;
+   shakaDemo.Input.lastId_ += 1;
    return prefix + '-labeled-' + idNumber;
  }
-}
+};
 
 
 /** @private {number} */
-ShakaDemoInput.lastId_ = 0;
+shakaDemo.Input.lastId_ = 0;
 
 
 /**
  * Creates and contains the MDL elements of a select input.
  */
-class ShakaDemoSelectInput extends ShakaDemoInput {
+shakaDemo.SelectInput = class extends shakaDemo.Input {
   /**
-   * @param {!ShakaDemoInputContainer} parentContainer
+   * @param {!shakaDemo.InputContainer} parentContainer
    * @param {string} name
    * @param {function(!Element)} onChange
    * @param {!Object.<string, string>} values
@@ -121,15 +128,15 @@ class ShakaDemoSelectInput extends ShakaDemoInput {
       this.input_.appendChild(option);
     }
   }
-}
+};
 
 
 /**
  * Creates and contains the MDL elements of a bool input.
  */
-class ShakaDemoBoolInput extends ShakaDemoInput {
+shakaDemo.BoolInput = class extends shakaDemo.Input {
   /**
-   * @param {!ShakaDemoInputContainer} parentContainer
+   * @param {!shakaDemo.InputContainer} parentContainer
    * @param {string} name
    * @param {function(!Element)} onChange
    */
@@ -143,15 +150,15 @@ class ShakaDemoBoolInput extends ShakaDemoInput {
     this.input_.classList.add('mdl-switch__input');
     this.extra_.classList.add('mdl-switch__label');
   }
-}
+};
 
 
 /**
  * Creates and contains the MDL elements of a text input.
  */
-class ShakaDemoTextInput extends ShakaDemoInput {
+shakaDemo.TextInput = class extends shakaDemo.Input {
   /**
-   * @param {!ShakaDemoInputContainer} parentContainer
+   * @param {!shakaDemo.InputContainer} parentContainer
    * @param {string} name
    * @param {function(!Element)} onChange
    */
@@ -164,15 +171,15 @@ class ShakaDemoTextInput extends ShakaDemoInput {
     this.extra_.classList.add('mdl-textfield__label');
     this.extra_.setAttribute('for', this.input_.id);
   }
-}
+};
 
 
 /**
  * Creates and contains the MDL elements of a datalist input.
  */
-class ShakaDemoDatalistInput extends ShakaDemoTextInput {
+shakaDemo.DatalistInput = class extends shakaDemo.TextInput {
   /**
-   * @param {!ShakaDemoInputContainer} parentContainer
+   * @param {!shakaDemo.InputContainer} parentContainer
    * @param {string} name
    * @param {function(!Element)} onChange
    * @param {!Array.<string>} values
@@ -193,15 +200,15 @@ class ShakaDemoDatalistInput extends ShakaDemoTextInput {
       awesomplete.evaluate();
     });
   }
-}
+};
 
 
 /**
  * Creates and contains the MDL elements of a number input.
  */
-class ShakaDemoNumberInput extends ShakaDemoTextInput {
+shakaDemo.NumberInput = class extends shakaDemo.TextInput {
   /**
-   * @param {!ShakaDemoInputContainer} parentContainer
+   * @param {!shakaDemo.InputContainer} parentContainer
    * @param {string} name
    * @param {function(!Element)} onChange
    * @param {boolean} canBeDecimal
@@ -235,4 +242,4 @@ class ShakaDemoNumberInput extends ShakaDemoTextInput {
       this.input_.pattern += '?';
     }
   }
-}
+};