shaka-player 2.5.1 → 2.5.5

package/build/test.py

@@ -191,8 +191,8 @@ class Launcher:
         action='store_true')
     running_commands.add_argument(
         '--runs',
-        help='Set the number of times each test should run. This '
-             'defaults to 1.',
+        help='Set the number of times each test should run. (default '
+             '%(default)s) ',
         type=_IntGreaterThanZero,
         default=1,
         dest='runs')
@@ -215,16 +215,16 @@ class Launcher:
     running_commands.add_argument(
         '--capture-timeout',
         help='Kill the browser if it does not capture in the given time [ms]. '
-             'This defaults to one minute.',
+             '(default %(default)s)',
         type=int,
         default=60000)
     running_commands.add_argument(
         '--delay-tests',
-        help='Insert an artifical delay between tests [s]. '
+        help='Insert an artificial delay between tests, in seconds. '
              'This can be helpful when tracking down asynchronous test '
              'pollution, in which an async process belonging to one test may '
              'trigger a failure after other tests have begun. '
-             'If no delay is specified, defaults to 2 seconds.',
+             '(default %(const)s)',
         type=int,
         default=None,
         const=2,
@@ -242,6 +242,12 @@ class Launcher:
         type=str,
         metavar='KEY_SYSTEM_ID=LICENSE_SERVER_URI',
         action=_HandleKeyValuePairs)
+    running_commands.add_argument(
+        '--test-timeout',
+        help='Sets the test timeout value [ms] (default %(default)s)',
+        dest='test_timeout',
+        default=120000,
+        type=int)
 
 
     logging_commands.add_argument(
@@ -267,9 +273,9 @@ class Launcher:
         action='store_true')
     logging_commands.add_argument(
         '--enable-logging',
-        help='Print log messages from tests and limits the type of log messages '
-             'printed. If no value is given "info" will be used. If '
-             '--enable-logging is not used, logging will default to "none".',
+        help='Print log messages from tests and limits the type of log '
+             'messages printed. If --enable-logging is not given, no logs '
+             'will be printed.  (default %(const)s)',
         choices=['none', 'error', 'warning', 'info', 'debug', 'v1', 'v2'],
         default='none',
         const='info',
@@ -348,6 +354,7 @@ class Launcher:
       'delay_tests',
       'test_custom_asset',
       'test_custom_license_server',
+      'test_timeout',
     ]
 
     # Check each value before setting it to avoid passing null values.
@@ -379,6 +386,10 @@ class Launcher:
     if self.parsed_args.exclude_browsers and 'browsers' in self.karma_config:
       all_browsers = set(self.karma_config['browsers'])
       bad_browsers = set(self.parsed_args.exclude_browsers)
+      if bad_browsers - all_browsers:
+        raise RuntimeError('Attempting to exclude unselected browsers: %s' %
+                           ','.join(bad_browsers - all_browsers))
+
       good_browsers = all_browsers - bad_browsers
       self.karma_config['browsers'] = list(good_browsers)
 
@@ -421,7 +432,8 @@ class Launcher:
     # Run the command.
     results = []
     for run in range(self.parsed_args.runs):
-      logging.info('Running test (%d / %d)...', run + 1, self.parsed_args.runs)
+      logging.info('Running test (%d / %d, %d failed so far)...',
+          run + 1, self.parsed_args.runs, len(results) - results.count(0))
       results.append(shakaBuildHelpers.execute_get_code(cmd))
 
     # Print a summary of the results.

package/build/types/core

@@ -63,6 +63,7 @@
 +../../lib/util/ebml_parser.js
 +../../lib/util/error.js
 +../../lib/util/event_manager.js
++../../lib/util/fairplay_utils.js
 +../../lib/util/fake_event.js
 +../../lib/util/fake_event_target.js
 +../../lib/util/functional.js

package/build/types/ui

@@ -3,6 +3,8 @@
 +../../third_party/language-mapping-list/language-mapping-list.js
 +../../ui/audio_language_selection.js
 +../../ui/externs/ui.js
++../../ui/play_button.js
++../../ui/big_play_button.js
 +../../ui/cast_button.js
 +../../ui/controls.js
 +../../ui/constants.js
@@ -15,10 +17,13 @@
 +../../ui/mute_button.js
 +../../ui/overflow_menu.js
 +../../ui/pip_button.js
-+../../ui/play_pause_button.js
++../../ui/small_play_button.js
 +../../ui/presentation_time.js
++../../ui/range_element.js
 +../../ui/resolution_selection.js
 +../../ui/rewind_button.js
++../../ui/seek_bar.js
++../../ui/settings_menu.js
 +../../ui/spacer.js
 +../../ui/text_displayer.js
 +../../ui/text_selection.js

package/demo/asset_card.js

@@ -16,17 +16,20 @@
  */
 
 
+goog.provide('shakaDemo.AssetCard');
+
+
 /**
  * Creates and contains an MDL card that presents info about the given asset.
  * @final
  */
-class AssetCard {
+shakaDemo.AssetCard = class {
   /**
    * @param {!Element} parentDiv
    * @param {!ShakaDemoAssetInfo} asset
    * @param {boolean} isFeatured True if this card should use the "featured"
    *   style, which use the asset's short name and have descriptions.
-   * @param {function(!AssetCard)} remakeButtonsFn
+   * @param {function(!shakaDemo.AssetCard)} remakeButtonsFn
    */
   constructor(parentDiv, asset, isFeatured, remakeButtonsFn) {
     /** @private {!Element} */
@@ -38,8 +41,15 @@ class AssetCard {
     /** @private {!Element} */
     this.featureIconsContainer_ = document.createElement('div');
     /** @private {!Element} */
-    this.progressBar_ = document.createElement('progress');
-    /** @private {function(!AssetCard)} */
+    this.progressCircle_ = document.createElement('div');
+    const svgns = 'http://www.w3.org/2000/svg';
+    /** @private {!Element} */
+    this.progressCircleSvg_ = document.createElementNS(svgns, 'svg');
+    /** @private {!Element} */
+    this.progressCircleBack_ = document.createElementNS(svgns, 'circle');
+    /** @private {!Element} */
+    this.progressCircleBar_ = document.createElementNS(svgns, 'circle');
+    /** @private {function(!shakaDemo.AssetCard)} */
     this.remakeButtonsFn_ = remakeButtonsFn;
 
     // Lay out the card.
@@ -53,7 +63,8 @@ class AssetCard {
     this.card_.appendChild(titleDiv);
     const titleText = document.createElement('h2');
     titleText.classList.add('mdl-card__title-text');
-    titleText.textContent = asset.shortName || asset.name;
+    titleText.textContent =
+        isFeatured ? (asset.shortName || asset.name) : asset.name;
     titleDiv.appendChild(titleText);
 
     if (asset.iconUri) {
@@ -92,12 +103,17 @@ class AssetCard {
     this.actions_.classList.add('mdl-card--border');
     this.card_.appendChild(this.actions_);
 
-    const progressContainer = document.createElement('div');
-    this.progressBar_.classList.add('hidden');
-    this.progressBar_.setAttribute('max', 1);
-    this.progressBar_.setAttribute('value', asset.storedProgress);
-    progressContainer.appendChild(this.progressBar_);
-    this.card_.appendChild(progressContainer);
+    this.progressCircle_.classList.add('hidden');
+    this.progressCircle_.classList.add('progress-circle');
+    this.card_.appendChild(this.progressCircle_);
+    this.progressCircleSvg_.appendChild(this.progressCircleBack_);
+    this.progressCircleSvg_.appendChild(this.progressCircleBar_);
+    this.progressCircle_.appendChild(this.progressCircleSvg_);
+    // You can't use access the classList of an svg on IE, so set the class
+    // attribute instead.
+    this.progressCircleSvg_.setAttribute('class', 'progress-circle-svg');
+    this.progressCircleBack_.setAttribute('class', 'progress-circle-back');
+    this.progressCircleBar_.setAttribute('class', 'progress-circle-bar');
 
     parentDiv.appendChild(this.card_);
     // Remake buttons AFTER appending to parent div, so that any tooltips can
@@ -105,6 +121,23 @@ class AssetCard {
     this.remakeButtons();
   }
 
+  /**
+   * @param {number} progress
+   * @private
+   */
+  styleProgressCircle_(progress) {
+    const svg = this.progressCircleSvg_;
+    const bar = this.progressCircleBar_;
+    const circleSize = 45;
+    const circleThickness = 5;
+    const circleRadius = (circleSize - circleThickness) / 2;
+    const circumference = 2 * Math.PI * circleRadius;
+
+    svg.setAttribute('viewBox', '0 0 ' + circleSize + ' ' + circleSize);
+    bar.setAttribute('stroke-dasharray', circumference);
+    bar.setAttribute('stroke-dashoffset', (circumference * (1 - progress)));
+  }
+
   /**
    * @param {string} icon
    * @param {string} title
@@ -116,7 +149,7 @@ class AssetCard {
     iconDiv.setAttribute('icon', icon);
     this.featureIconsContainer_.appendChild(iconDiv);
 
-    ShakaDemoTooltips.make(this.featureIconsContainer_, iconDiv, title);
+    shakaDemo.Tooltips.make(iconDiv, title);
   }
 
   /**
@@ -162,7 +195,7 @@ class AssetCard {
 
   /**
    * Modify an asset to make it clear that it is unsupported.
-   * @param {?string} unsupportedReason
+   * @param {string} unsupportedReason
    */
   markAsUnsupported(unsupportedReason) {
     this.card_.classList.add('asset-card-unsupported');
@@ -172,7 +205,7 @@ class AssetCard {
   /**
    * Make a button that represents the lack of a working button.
    * @param {string} buttonName
-   * @param {?string} unsupportedReason
+   * @param {string} unsupportedReason
    * @return {!Element}
    * @private
    */
@@ -180,22 +213,17 @@ class AssetCard {
     const button = this.addButton(buttonName, () => {});
     button.setAttribute('disabled', '');
 
-    // Place the tooltip into the parent container of the card, so that the
-    // tooltip won't be clipped by other asset cards.
-    // Also, tooltips don't work on disabled buttons (on some platforms), so
+    // Tooltips don't work on disabled buttons (on some platforms), so
     // the button itself has to be "uprooted" and placed in a synthetic div
     // specifically to attach the tooltip to.
-    const tooltipContainer = this.card_.parentElement;
-    if (tooltipContainer && unsupportedReason) {
-      const attachPoint = document.createElement('div');
-      if (button.parentElement) {
-        button.parentElement.removeChild(button);
-      }
-      attachPoint.classList.add('tooltip-attach-point');
-      attachPoint.appendChild(button);
-      this.actions_.appendChild(attachPoint);
-      ShakaDemoTooltips.make(tooltipContainer, attachPoint, unsupportedReason);
+    const attachPoint = document.createElement('div');
+    if (button.parentElement) {
+      button.parentElement.removeChild(button);
     }
+    attachPoint.classList.add('tooltip-attach-point');
+    attachPoint.appendChild(button);
+    this.actions_.appendChild(attachPoint);
+    shakaDemo.Tooltips.make(attachPoint, unsupportedReason);
 
     return button;
   }
@@ -229,10 +257,12 @@ class AssetCard {
      * Makes the contents of the button into an MDL icon, and moves it into the
      * upper-righthand corner with CSS styles.
      * @param {!Element} button
+     * @param {!Element} attachPoint If there is no attach point, just pass the
+     *  button in here.
      * @param {string} iconText
      */
-    const styleAsDownloadButton = (button, iconText) => {
-      button.classList.add('asset-card-corner-button');
+    const styleAsDownloadButton = (button, attachPoint, iconText) => {
+      attachPoint.classList.add('asset-card-corner-button');
       const icon = document.createElement('i');
       icon.textContent = iconText;
       icon.classList.add('material-icons');
@@ -241,27 +271,85 @@ class AssetCard {
 
     const unsupportedReason = shakaDemoMain.getAssetUnsupportedReason(
         this.asset_, /* needOffline= */ true);
-    if (unsupportedReason || !this.asset_.storeCallback) {
+    if (!unsupportedReason) {
+      goog.asserts.assert(this.asset_.storeCallback,
+          'A storage callback is expected for all supported assets!');
+    }
+    if (unsupportedReason) {
       // This can't be stored.
       const button = this.makeUnsupportedButton_('', unsupportedReason);
-      styleAsDownloadButton(button, 'get_app');
+      // As this is a unsupported button, it is wrapped in an "attach point";
+      // that is the element this has to move with CSS, otherwise the tooltip
+      // will end up coming out of the wrong place.
+      const attachPoint = button.parentElement || button;
+      styleAsDownloadButton(button, attachPoint, 'get_app');
       return;
     }
     if (this.asset_.isStored()) {
-      const deleteButton = this.addButton('', async () => {
-        deleteButton.disabled = true;
-        await this.asset_.unstoreCallback();
-        this.remakeButtons();
+      const deleteButton = this.addButton('', () => {
+        this.makeDeleteDialog_(deleteButton);
       });
-      styleAsDownloadButton(deleteButton, 'delete');
+      styleAsDownloadButton(deleteButton, deleteButton, 'offline_pin');
     } else {
       const downloadButton = this.addButton('', async () => {
         downloadButton.disabled = true;
         await this.asset_.storeCallback();
         this.remakeButtons();
       });
-      styleAsDownloadButton(downloadButton, 'get_app');
+      styleAsDownloadButton(downloadButton, downloadButton, 'get_app');
+    }
+  }
+
+  /**
+   * @param {!Element} deleteButton
+   * @private
+   */
+  makeDeleteDialog_(deleteButton) {
+    const parentDiv = this.card_.parentElement;
+    if (!parentDiv) {
+      return;
+    }
+
+    const dialog = document.createElement('dialog');
+    dialog.classList.add('mdl-dialog');
+    parentDiv.appendChild(dialog);
+    if (!dialog.showModal) {
+      dialogPolyfill.registerDialog(dialog);
     }
+
+    const textElement = document.createElement('h2');
+    textElement.classList.add('mdl-typography--title');
+    // TODO: Localize these messages.
+    textElement.textContent = 'Delete the offline copy?';
+    dialog.appendChild(textElement);
+
+    const buttonsDiv = document.createElement('div');
+    dialog.appendChild(buttonsDiv);
+    const makeButton = (text, fn) => {
+      const button = document.createElement('button');
+      button.textContent = text;
+      button.classList.add('mdl-button');
+      button.classList.add('mdl-button--colored');
+      button.classList.add('mdl-js-button');
+      button.classList.add('mdl-js-ripple-effect');
+      button.addEventListener('click', () => {
+        fn();
+      });
+      buttonsDiv.appendChild(button);
+      button.blur();
+    };
+    // TODO: Localize these messages.
+    makeButton('Yes', async () => {
+      dialog.close();
+      deleteButton.disabled = true;
+      await this.asset_.unstoreCallback();
+      this.remakeButtons();
+    });
+    makeButton('No', () => {
+      dialog.close();
+    });
+
+    dialog.showModal();
   }
 
   /**
@@ -269,17 +357,17 @@ class AssetCard {
    */
   updateProgress() {
     if (this.asset_.storedProgress < 1) {
-      this.progressBar_.classList.remove('hidden');
+      this.progressCircle_.classList.remove('hidden');
       for (const button of this.actions_.childNodes) {
         button.disabled = true;
       }
     } else {
-      this.progressBar_.classList.add('hidden');
+      this.progressCircle_.classList.add('hidden');
       for (const button of this.actions_.childNodes) {
         button.disabled = false;
       }
     }
-    this.progressBar_.setAttribute('value', this.asset_.storedProgress);
+    this.styleProgressCircle_(this.asset_.storedProgress);
   }
 
   /**
@@ -304,4 +392,4 @@ class AssetCard {
     this.actions_.appendChild(button);
     return button;
   }
-}
+};

package/demo/cast_receiver/receiver_app.css

@@ -53,6 +53,14 @@ body {
   display: none;
 }
 
+/* The UI default style for fullscreen is to make the font size relative to the
+ * window height.  That is also appropriate for the cast receiver experience.
+ * Since playback here is not technically in fullscreen mode, we just duplicate
+ * the style. */
+.shaka-text-container {
+  font-size: 4.4vh;
+}
+
 #idle {
   position: absolute;
   top: 0;
@@ -64,7 +72,6 @@ body {
    * they will be visible on top until we decide to hide them and show the
    * player. */
   z-index: 99;
-
   padding-top: 60px;
   padding-left: 0;
   background-color: black;
@@ -97,18 +104,25 @@ body:after {
 }
 
 @keyframes bg-change {
-  0%   { background-image: url('idle1.jpg'); padding-left: 0; }
-  32%  { background-image: url('idle1.jpg'); padding-left: 0; }
-
-  34%  { background-image: url('idle2.jpg'); padding-left: 0; }
-  49%  { background-image: url('idle2.jpg'); padding-left: 0; }
-  50%  { background-image: url('idle2.jpg'); padding-left: 400px; }
-  65%  { background-image: url('idle2.jpg'); padding-left: 400px; }
-
-  67%  { background-image: url('idle3.jpg'); padding-left: 400px; }
-  87%  { background-image: url('idle3.jpg'); padding-left: 400px; }
-  88%  { background-image: url('idle3.jpg'); padding-left: 0; }
-  98%  { background-image: url('idle3.jpg'); padding-left: 0; }
+  0% { background-image: url('idle1.jpg'); padding-left: 0; }
+
+  32% { background-image: url('idle1.jpg'); padding-left: 0; }
+
+  34% { background-image: url('idle2.jpg'); padding-left: 0; }
+
+  49% { background-image: url('idle2.jpg'); padding-left: 0; }
+
+  50% { background-image: url('idle2.jpg'); padding-left: 400px; }
+
+  65% { background-image: url('idle2.jpg'); padding-left: 400px; }
+
+  67% { background-image: url('idle3.jpg'); padding-left: 400px; }
+
+  87% { background-image: url('idle3.jpg'); padding-left: 400px; }
+
+  88% { background-image: url('idle3.jpg'); padding-left: 0; }
+
+  98% { background-image: url('idle3.jpg'); padding-left: 0; }
 
   100% { background-image: url('idle1.jpg'); padding-left: 0; }
 }

package/demo/close_button.js

@@ -16,21 +16,22 @@
  */
 
 
+goog.provide('shakaDemo.CloseButton');
+
+
 /**
  * A custom UI button, to allow users to close the video element.
  * This cannot actually extend shaka.ui.Element, as that class does not exist
  * at load-time when in uncompiled mode.
- * @implements {shaka.extern.IUIElement}
+ * @extends {shaka.ui.Element}
  */
-class CloseButton {
+shakaDemo.CloseButton = class extends shaka.ui.Element {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    /** @protected {!HTMLElement} */
-    this.parent = parent;
-
+    super(parent, controls);
     this.button_ = document.createElement('button');
     this.button_.classList.add('material-icons');
     this.button_.classList.add('close-button');
@@ -38,12 +39,6 @@ class CloseButton {
     this.parent.appendChild(this.button_);
 
     this.button_.addEventListener('click', () => {
-      if (document.fullscreenElement) {
-        document.exitFullscreen();
-      }
-      if (document.pictureInPictureElement) {
-        document.exitPictureInPicture();
-      }
       shakaDemoMain.unload();
     });
 
@@ -55,19 +50,19 @@ class CloseButton {
   destroy() {
     return Promise.resolve();
   }
-}
+};
 
 /**
  * @implements {shaka.extern.IUIElement.Factory}
  * @final
  */
-CloseButton.Factory = class {
+shakaDemo.CloseButton.Factory = class {
   /** @override */
   create(rootElement, controls) {
-    return new CloseButton(rootElement, controls);
+    return new shakaDemo.CloseButton(rootElement, controls);
   }
 };
 
-// This button is registered inside setup in ShakaDemoMain, rather than
+// This button is registered inside setup in shakaDemo.Main, rather than
 // statically here, since shaka.ui.Controls does not exist in this stage of the
 // load process.

package/demo/common/asset.js

@@ -18,8 +18,6 @@
 
 goog.provide('ShakaDemoAssetInfo');
 
-goog.require('goog.asserts');
-
 
 /**
  * An object that contains information about an asset.
@@ -127,9 +125,6 @@ const ShakaDemoAssetInfo = class {
    * @return {!ShakaDemoAssetInfo}
    */
   addFeature(feature) {
-    goog.asserts.assert(feature != shakaAssets.Feature.STORED,
-                        'Assets should not be given the synthetic "STORED" ' +
-                        'property!');
     this.features.push(feature);
     // Sort the features list, so that features are in a predictable order.
     this.features.sort(ShakaDemoAssetInfo.caseLessAlphaComparator_);
@@ -141,7 +136,7 @@ const ShakaDemoAssetInfo = class {
    * @return {!ShakaDemoAssetInfo}
    */
   addKeySystem(keySystem) {
-    if (this.drm.length == 1 && this.drm[0] == shakaAssets.KeySystem.CLEAR) {
+    if (this.isClear()) {
       // Once an asset has an actual key system, it's no longer a CLEAR asset.
       this.drm = [];
     }
@@ -151,6 +146,11 @@ const ShakaDemoAssetInfo = class {
     return this;
   }
 
+  /** @return {boolean} */
+  isClear() {
+    return this.drm.length == 1 && this.drm[0] == shakaAssets.KeySystem.CLEAR;
+  }
+
   /**
    * @param {!Object} extraConfig
    * @return {!ShakaDemoAssetInfo}