shaka-player 2.5.1 → 2.5.5

package/demo/input_container.js

@@ -15,6 +15,10 @@
  * limitations under the License.
  */
 
+
+goog.provide('shakaDemo.InputContainer');
+
+
 /**
  * Creates elements for containing inputs. It represents a single "section" of
  * input.
@@ -23,16 +27,16 @@
  * It also has an optional header, which can contain style-dependent
  * functionality.
  */
-class ShakaDemoInputContainer {
+shakaDemo.InputContainer = class {
   /**
    * @param {!Element} parentDiv
    * @param {?string} headerText The text to be displayed by the header. If
    *   null, there will be no header.
-   * @param {!ShakaDemoInputContainer.Style} style
+   * @param {!shakaDemo.InputContainer.Style} style
    * @param {?string} docLink
    */
   constructor(parentDiv, headerText, style, docLink) {
-    /** @private {!ShakaDemoInputContainer.Style} */
+    /** @private {!shakaDemo.InputContainer.Style} */
     this.style_ = style;
 
     /** @private {?Element} */
@@ -57,7 +61,7 @@ class ShakaDemoInputContainer {
       this.createHeader_(parentDiv, headerText);
     }
     this.table_.classList.add(style);
-    if (style == ShakaDemoInputContainer.Style.ACCORDION) {
+    if (style == shakaDemo.InputContainer.Style.ACCORDION) {
       this.table_.classList.add('hidden');
     }
     parentDiv.appendChild(this.table_);
@@ -70,7 +74,7 @@ class ShakaDemoInputContainer {
    * @return {boolean} true if this is an open accordion menu, false otherwise
    */
   getIsOpen() {
-    if (this.style_ == ShakaDemoInputContainer.Style.ACCORDION) {
+    if (this.style_ == shakaDemo.InputContainer.Style.ACCORDION) {
       return this.table_.classList.contains('show');
     }
     return false;
@@ -78,7 +82,7 @@ class ShakaDemoInputContainer {
 
   /** If this is an accordion menu, open it. */
   open() {
-    if (!this.style_ == ShakaDemoInputContainer.Style.ACCORDION) {
+    if (!this.style_ == shakaDemo.InputContainer.Style.ACCORDION) {
       return;
     }
     this.table_.classList.remove('hidden');
@@ -90,7 +94,7 @@ class ShakaDemoInputContainer {
 
   /** If this is an accordion menu, close it. */
   close() {
-    if (this.style_ != ShakaDemoInputContainer.Style.ACCORDION) {
+    if (this.style_ != shakaDemo.InputContainer.Style.ACCORDION) {
       return;
     }
     this.table_.classList.remove('show');
@@ -106,7 +110,7 @@ class ShakaDemoInputContainer {
    * @private
    */
   createHeader_(parentDiv, headerText) {
-    if (this.style_ == ShakaDemoInputContainer.Style.ACCORDION) {
+    if (this.style_ == shakaDemo.InputContainer.Style.ACCORDION) {
       this.header_ = document.createElement('button');
       this.header_.classList.add('mdl-button--raised');
       this.header_.classList.add('mdl-button');
@@ -182,16 +186,16 @@ class ShakaDemoInputContainer {
 
     this.latestTooltip = tooltipString;
     if (tooltipString) {
-      ShakaDemoTooltips.make(this.table_, this.latestRow_, tooltipString);
+      shakaDemo.Tooltips.make(this.latestRow_, tooltipString);
       // Keep the row from being focused.
       this.latestRow_.setAttribute('tabindex', -1);
       this.latestRow_.classList.add('borderless');
     }
   }
-}
+};
 
 /** @enum {string} */
-ShakaDemoInputContainer.Style = {
+shakaDemo.InputContainer.Style = {
   VERTICAL: 'input-container-style-vertical',
   ACCORDION: 'input-container-style-accordion',
   FLEX: 'input-container-style-flex',

package/demo/load.js

@@ -87,40 +87,34 @@ function shakaUncompiledModeSupported() {
   fragments = fragments ? fragments.split(';') : [];
   var combined = fields.concat(fragments);
 
-  var scripts = window['UNCOMPILED_JS'];
   var buildType = 'uncompiled';
   var buildSpecified = false;
 
   if (!shakaUncompiledModeSupported()) {
     // If uncompiled mode is not supported, default to the compiled debug
     // version, which should still work.
-    scripts = window['COMPILED_DEBUG_JS'];
     buildType = 'debug_compiled';
   }
 
   if (!navigator.onLine) {
     // If we're offline, default to the compiled version, which may have been
     // cached by the service worker.
-    scripts = window['COMPILED_JS'];
     buildType = 'compiled';
   }
 
   // Very old browsers do not have Array.prototype.indexOf, so we loop.
   for (var i = 0; i < combined.length; ++i) {
     if (combined[i] == 'build=compiled') {
-      scripts = window['COMPILED_JS'];
       buildType = 'compiled';
       buildSpecified = true;
       break;
     }
     if (combined[i] == 'build=debug_compiled') {
-      scripts = window['COMPILED_DEBUG_JS'];
       buildType = 'debug_compiled';
       buildSpecified = true;
       break;
     }
     if (combined[i] == 'build=uncompiled') {
-      scripts = window['UNCOMPILED_JS'];
       buildType = 'uncompiled';
       buildSpecified = true;
       break;
@@ -131,7 +125,6 @@ function shakaUncompiledModeSupported() {
     // The URL says uncompiled, but we know it won't work.  This URL was
     // probably copied from some other browser, but it won't work in this one.
     // Force the use of the compiled debug build and update the hash.
-    scripts = window['COMPILED_DEBUG_JS'];
     buildType = 'debug_compiled';
 
     // Replace the build type in either the hash or the URL parameters.
@@ -159,6 +152,11 @@ function shakaUncompiledModeSupported() {
 
   // The application must define its list of compiled and uncompiled sources
   // before including this loader.  The URLs should be relative to the page.
+  var scripts = {
+    'compiled': window['COMPILED_JS'],
+    'debug_compiled': window['COMPILED_DEBUG_JS'],
+    'uncompiled': window['UNCOMPILED_JS'],
+  }[buildType];
   for (var j = 0; j < scripts.length; ++j) {
     loadRelativeScript(scripts[j]);
   }

package/demo/main.js

@@ -15,13 +15,17 @@
  * limitations under the License.
  */
 
+
+goog.provide('shakaDemo.Main');
+
+
 /**
  * Shaka Player demo, main section.
  * This controls the header and the footer, and contains all methods that should
  * be shared by multiple page layouts (loading assets, setting/checking
  * configuration, etc).
  */
-class ShakaDemoMain {
+shakaDemo.Main = class {
   constructor() {
     /** @private {HTMLMediaElement} */
     this.video_ = null;
@@ -35,6 +39,12 @@ class ShakaDemoMain {
     /** @type {?ShakaDemoAssetInfo} */
     this.selectedAsset = null;
 
+    /**
+     * The configuration asked for by the user. I.e., not from the asset.
+     * @private {shaka.extern.PlayerConfiguration}
+     */
+    this.desiredConfig_;
+
     /** @private {shaka.extern.PlayerConfiguration} */
     this.defaultConfig_;
 
@@ -55,6 +65,9 @@ class ShakaDemoMain {
 
     /** @private {string} */
     this.uiLocale_ = '';
+
+    /** @private {boolean} */
+    this.noInput_ = false;
   }
 
   /**
@@ -64,13 +77,15 @@ class ShakaDemoMain {
    */
   initCommon_() {
     // Display uncaught exceptions.  Note that this doesn't seem to work in IE.
-    // See ShakaDemoMain.initWrapper for a failsafe that works for init-time
+    // See shakaDemo.Main.initWrapper for a failsafe that works for init-time
     // errors on IE.
     window.addEventListener('error', (event) => {
       // Exception to the exceptions we catch: ChromeVox (screenreader) always
       // throws an error as of Chrome 73.  Screen these out since they are
       // unrelated to our application and we can't control them.
-      if (event.message.includes('cvox.ApiImplementation')) return;
+      if (event.message.includes('cvox.Api')) {
+        return;
+      }
 
       this.onError_(/** @type {!shaka.util.Error} */ (event.error));
     });
@@ -79,8 +94,8 @@ class ShakaDemoMain {
     document.getElementById('error-display-close-button').addEventListener(
         'click', (event) => this.closeError_());
 
-    // Set up version string.
-    this.setUpVersionString_();
+    // Set up version strings in the appropriate divs.
+    this.setUpVersionStrings_();
   }
 
   /**
@@ -127,7 +142,7 @@ class ShakaDemoMain {
 
     this.video_ =
         /** @type {!HTMLVideoElement} */(document.getElementById('video'));
-    this.video_.poster = ShakaDemoMain.mainPoster_;
+    this.video_.poster = shakaDemo.Main.mainPoster_;
 
     this.container_ = /** @type {!HTMLElement} */(
       document.getElementsByClassName('video-container')[0]);
@@ -143,16 +158,40 @@ class ShakaDemoMain {
       }
     }
 
+    // Optionally enter noinput mode. This has to happen before setting up the
+    // player.
+    this.noInput_ = 'noinput' in this.getParams_();
     this.setupPlayer_();
     this.readHash_();
     window.addEventListener('hashchange', () => this.hashChanged_());
 
     await this.setupStorage_();
 
+    if (this.noInput_) {
+      // Set the page to noInput mode, disabling the header and footer.
+      const hideClass = 'should-hide-in-no-input-mode';
+      for (const element of document.getElementsByClassName(hideClass)) {
+        this.hideNode_(element);
+      }
+      const showClass = 'should-show-in-no-input-mode';
+      for (const element of document.getElementsByClassName(showClass)) {
+        this.showNode_(element);
+      }
+      // Also fullscreen the container.
+      this.container_.classList.add('no-input-sized');
+      document.getElementById('video-bar').classList.add('no-input-sized');
+    }
+
     // The main page is loaded. Dispatch an event, so the various
     // configurations will load themselves.
     this.dispatchEventWithName_('shaka-main-loaded');
 
+    // Wait for one interruptor cycle, so that the tabs have time to load.
+    // This ensures that, for example, if there is an asset playing at page
+    // load time, the video will scroll into view second, and the page won't
+    // scroll away from the video.
+    await Promise.resolve();
+
     // Update the componentHandler, to account for any new MDL elements added.
     componentHandler.upgradeDom();
 
@@ -174,13 +213,19 @@ class ShakaDemoMain {
     const ui = video['ui'];
     this.player_ = ui.getControls().getPlayer();
 
-    // Register custom controls to the UI.
-    shaka.ui.Controls.registerElement('close', new CloseButton.Factory());
+    if (!this.noInput_) {
+      // Don't add the close button if in noInput mode; it doesn't make much
+      // sense to stop playing a video if you can't start playing other videos.
 
-    // Configure UI.
-    const uiConfig = ui.getConfiguration();
-    uiConfig.controlPanelElements.push('close');
-    ui.configure(uiConfig);
+      // Register custom controls to the UI.
+      const factory = new shakaDemo.CloseButton.Factory();
+      shaka.ui.Controls.registerElement('close', factory);
+
+      // Configure UI.
+      const uiConfig = ui.getConfiguration();
+      uiConfig.controlPanelElements.push('close');
+      ui.configure(uiConfig);
+    }
 
     // Add application-level default configs here.  These are not the library
     // defaults, but they are the application defaults.  This will affect the
@@ -192,9 +237,10 @@ class ShakaDemoMain {
 
     // Get default config.
     this.defaultConfig_ = this.player_.getConfiguration();
+    this.desiredConfig_ = this.player_.getConfiguration();
     const languages = navigator.languages || ['en-us'];
-    this.player_.configure('preferredAudioLanguage', languages[0]);
-    this.player_.configure('preferredTextLanguage', languages[0]);
+    this.configure('preferredAudioLanguage', languages[0]);
+    this.configure('preferredTextLanguage', languages[0]);
     this.uiLocale_ = languages[0];
     // TODO(#1591): Support multiple language preferences
 
@@ -423,6 +469,11 @@ class ShakaDemoMain {
    * @return {?string} unsupportedReason Null if asset is supported.
    */
   getAssetUnsupportedReason(asset, needOffline) {
+    if (needOffline &&
+        (!shaka.offline.Storage.support() || !this.initialStoredList_)) {
+      return 'Your browser does not support offline storage.';
+    }
+
     if (asset.source == shakaAssets.Source.CUSTOM) {
       // We can't be sure if custom assets are supported or not. Just assume
       // they are.
@@ -438,11 +489,7 @@ class ShakaDemoMain {
       return 'This asset cannot be downloaded.';
     }
 
-    if (needOffline && !shaka.offline.Storage.support()) {
-      return 'Your browser does not support offline storage.';
-    }
-
-    if (!asset.drm.includes(shakaAssets.KeySystem.CLEAR)) {
+    if (!asset.isClear()) {
       const hasSupportedDRM = asset.drm.some((drm) => {
         return this.support_.drm[drm];
       });
@@ -583,7 +630,7 @@ class ShakaDemoMain {
         /* manifestUri= */ manifest,
         /* source= */ shakaAssets.Source.UNKNOWN);
       if ('license' in params) {
-        let drmSystems = ShakaDemoMain.commonDrmSystems;
+        let drmSystems = shakaDemo.Main.commonDrmSystems;
         if ('drmSystem' in params) {
           drmSystems = [params['drmSystem']];
         }
@@ -618,17 +665,17 @@ class ShakaDemoMain {
             value = parseFloat(value);
           }
 
-          this.player_.configure(configName, value);
+          this.configure(configName, value);
         }
       };
       const config = this.player_.getConfiguration();
-      ShakaDemoUtils.runThroughHashParams(readParam, config);
+      shakaDemo.Utils.runThroughHashParams(readParam, config);
     }
     if ('lang' in params) {
       // Load the legacy 'lang' hash value.
       const lang = params['lang'];
-      this.player_.configure('preferredAudioLanguage', lang);
-      this.player_.configure('preferredTextLanguage', lang);
+      this.configure('preferredAudioLanguage', lang);
+      this.configure('preferredTextLanguage', lang);
       this.setUILocale(lang);
     }
     if ('uilang' in params) {
@@ -636,10 +683,10 @@ class ShakaDemoMain {
       // TODO(#1591): Support multiple language preferences
     }
     if ('noadaptation' in params) {
-      this.player_.configure('abr.enabled', false);
+      this.configure('abr.enabled', false);
     }
     if ('jumpLargeGaps' in params) {
-      this.player_.configure('streaming.jumpLargeGaps', true);
+      this.configure('streaming.jumpLargeGaps', true);
     }
 
     // Add compiled/uncompiled links.
@@ -675,7 +722,7 @@ class ShakaDemoMain {
     this.nativeControlsEnabled_ = 'nativecontrols' in params;
 
     // Check if uncompiled mode is supported.
-    if (!ShakaDemoUtils.browserSupportsUncompiledMode()) {
+    if (!shakaDemo.Utils.browserSupportsUncompiledMode()) {
       const uncompiledLink = document.getElementById('uncompiled-link');
       uncompiledLink.setAttribute('disabled', '');
       uncompiledLink.removeAttribute('href');
@@ -751,7 +798,7 @@ class ShakaDemoMain {
    * @return {*}
    */
   getCurrentConfigValue(valueName) {
-    const config = this.player_.getConfiguration();
+    const config = this.desiredConfig_;
     return this.getValueFromGivenConfig_(valueName, config);
   }
 
@@ -767,12 +814,18 @@ class ShakaDemoMain {
    * @param {*=} value
    */
   configure(config, value) {
+    if (arguments.length == 2 && typeof(config) == 'string') {
+      config = shaka.util.ConfigUtils.convertToConfigObject(config, value);
+    }
+    const asObj = /** @type {!Object} */ (config);
+    shaka.util.PlayerConfiguration.mergeConfigObjects(
+        this.desiredConfig_, asObj, this.defaultConfig_);
     this.player_.configure(config, value);
   }
 
   /** @return {!shaka.extern.PlayerConfiguration} */
   getConfiguration() {
-    return this.player_.getConfiguration();
+    return this.desiredConfig_;
   }
 
   /**
@@ -793,13 +846,24 @@ class ShakaDemoMain {
     this.selectedAsset = null;
     const videoBar = document.getElementById('video-bar');
     this.hideNode_(videoBar);
-    this.video_.poster = ShakaDemoMain.mainPoster_;
+    this.video_.poster = shakaDemo.Main.mainPoster_;
 
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    }
+    if (document.pictureInPictureElement) {
+      document.exitPictureInPicture();
+    }
     this.player_.unload();
 
     // The currently-selected asset changed, so update asset cards.
     this.dispatchEventWithName_('shaka-main-selected-asset-changed');
 
+    // Unset media session title, but only if the browser supports that API.
+    if (navigator.mediaSession) {
+      navigator.mediaSession.metadata = null;
+    }
+
     // Remake hash, to change the current asset.
     this.remakeHash();
   }
@@ -821,8 +885,11 @@ class ShakaDemoMain {
     if (storage) {
       storage.configure(assetConfig);
     } else {
-      this.player_.resetConfiguration();
+      // Re-apply the desired config, to remove previous asset configuration
+      // without removing previous user configuration.
+      this.player_.configure(this.desiredConfig_);
       this.player_.configure(assetConfig);
+      // This uses Player.configure so as to not change |this.desiredConfig_|.
     }
 
     const config = storage ?
@@ -868,7 +935,7 @@ class ShakaDemoMain {
     const videoBar = document.getElementById('video-bar');
     this.showNode_(videoBar);
     this.closeError_();
-    this.video_.poster = ShakaDemoMain.mainPoster_;
+    this.video_.poster = shakaDemo.Main.mainPoster_;
 
     // Scroll to the top of the page, so that if the page is scrolled down,
     // the user won't need to manually scroll up to see the video.
@@ -916,7 +983,19 @@ class ShakaDemoMain {
                            null) || asset.manifestUri;
       await this.player_.load(manifestUri);
       if (this.player_.isAudioOnly()) {
-        this.video_.poster = ShakaDemoMain.audioOnlyPoster_;
+        this.video_.poster = shakaDemo.Main.audioOnlyPoster_;
+      }
+
+      // Set media session title, but only if the browser supports that API.
+      if (navigator.mediaSession) {
+        const metadata = {
+          title: asset.name,
+          artwork: [{src: asset.iconUri}],
+        };
+        if (asset.source != shakaAssets.Source.UNKNOWN) {
+          metadata.artist = asset.source;
+        }
+        navigator.mediaSession.metadata = new MediaMetadata(metadata);
       }
     } catch (reason) {
       const error = /** @type {!shaka.util.Error} */ (reason);
@@ -956,7 +1035,7 @@ class ShakaDemoMain {
         }
       };
       const config = this.player_.getConfiguration();
-      ShakaDemoUtils.runThroughHashParams(setParam, config);
+      shakaDemo.Utils.runThroughHashParams(setParam, config);
     }
     if (!this.getCurrentConfigValue('abr.enabled')) {
       params.push('noadaptation');
@@ -973,7 +1052,7 @@ class ShakaDemoMain {
         const uri = this.selectedAsset.licenseServers.values().next().value;
         params.push('license=' + uri);
         for (const drmSystem of this.selectedAsset.licenseServers.keys()) {
-          if (!ShakaDemoMain.commonDrmSystems.includes(drmSystem)) {
+          if (!shakaDemo.Main.commonDrmSystems.includes(drmSystem)) {
             params.push('drmSystem=' + drmSystem);
             break;
           }
@@ -1000,6 +1079,10 @@ class ShakaDemoMain {
       }
     }
 
+    if (this.noInput_) {
+      params.push('noinput');
+    }
+
     if (this.nativeControlsEnabled_) {
       params.push('nativecontrols');
     }
@@ -1136,8 +1219,12 @@ class ShakaDemoMain {
     document.dispatchEvent(event);
   }
 
-  /** @private */
-  setUpVersionString_() {
+  /**
+   * Sets the "version-string" divs to a version string.
+   * For example, "v2.5.4-master (uncompiled)".
+   * @private
+   */
+  setUpVersionStrings_() {
     const version = shaka.Player.version;
     let split = version.split('-');
     let inParen = [];
@@ -1152,10 +1239,12 @@ class ShakaDemoMain {
     }
 
     // Put the version into the version string div.
-    const versionStringDiv = document.getElementById('version-string');
-    versionStringDiv.textContent = split.join('-');
-    if (inParen.length > 0) {
-      versionStringDiv.textContent += ' (' + inParen.join(', ') + ')';
+    const versionStringDivs = document.getElementsByClassName('version-string');
+    for (const div of versionStringDivs) {
+      div.textContent = split.join('-');
+      if (inParen.length > 0) {
+        div.textContent += ' (' + inParen.join(', ') + ')';
+      }
     }
   }
 
@@ -1245,11 +1334,11 @@ class ShakaDemoMain {
       this.showPlayer_();
     }
   }
-}
+};
 
 
 /** @type {!Array.<string>} */
-ShakaDemoMain.commonDrmSystems = [
+shakaDemo.Main.commonDrmSystems = [
   'com.widevine.alpha',
   'com.microsoft.playready',
   'com.apple.fps.1_0',
@@ -1258,14 +1347,14 @@ ShakaDemoMain.commonDrmSystems = [
 ];
 
 
-const shakaDemoMain = new ShakaDemoMain();
+const shakaDemoMain = new shakaDemo.Main();
 
 
 /**
  * @private
  * @const {string}
  */
-ShakaDemoMain.mainPoster_ =
+shakaDemo.Main.mainPoster_ =
     'https://shaka-player-demo.appspot.com/assets/poster.jpg';
 
 
@@ -1273,7 +1362,7 @@ ShakaDemoMain.mainPoster_ =
  * @private
  * @const {string}
  */
-ShakaDemoMain.audioOnlyPoster_ =
+shakaDemo.Main.audioOnlyPoster_ =
     'https://shaka-player-demo.appspot.com/assets/audioOnly.gif';
 
 
@@ -1286,7 +1375,7 @@ ShakaDemoMain.audioOnlyPoster_ =
  * @return {!Promise}
  * @suppress {accessControls}
  */
-ShakaDemoMain.initWrapper = async (initFn) => {
+shakaDemo.Main.initWrapper = async (initFn) => {
   try {
     await initFn();
   } catch (error) {
@@ -1295,8 +1384,8 @@ ShakaDemoMain.initWrapper = async (initFn) => {
   }
 };
 document.addEventListener('shaka-ui-loaded', () => {
-  ShakaDemoMain.initWrapper(() => shakaDemoMain.init());
+  shakaDemo.Main.initWrapper(() => shakaDemoMain.init());
 });
 document.addEventListener('shaka-ui-load-failed', (event) => {
-  ShakaDemoMain.initWrapper(() => shakaDemoMain.initFailed());
+  shakaDemo.Main.initWrapper(() => shakaDemoMain.initFailed());
 });