Made changes to the demo page update the hash.

Now every UI element that changes a value that corresponds to a demo page
argument will also cause the hash to automatically update.
Note that this does not handle changes in the UI state based on console
input; for example, changing the debug level via console commands won't
update the selector or the hash.
Also adds an "autoplay" option to the configuration section.

Closes #709

Change-Id: I03aba29a50938848d12e0ffab32188ab96fec3b6

demo/asset_section.js

@@ -83,11 +83,14 @@ shakaDemo.setupAssets_ = function() {
   option.textContent = '(custom asset)';
   assetList.appendChild(option);
 
-  // Show/hide the custom asset fields based on the selection.
   assetList.addEventListener('change', function() {
+    // Show/hide the custom asset fields based on the selection.
     var asset = assetList.options[assetList.selectedIndex].asset;
     var customAsset = document.getElementById('customAsset');
     customAsset.style.display = asset ? 'none' : 'block';
+
+    // Update the hash to reflect this change.
+    shakaDemo.hashShouldChange_();
   });
 
   document.getElementById('loadButton').addEventListener(
@@ -104,6 +107,8 @@ shakaDemo.setupAssets_ = function() {
  * @private
  */
 shakaDemo.onAssetKeyUp_ = function(event) {
+  // Mirror the users input as they type.
+  shakaDemo.hashShouldChange_();
   // Load the asset if the user presses enter.
   if (event.keyCode != 13) return;
   shakaDemo.load();

demo/configuration_section.js

@@ -39,6 +39,15 @@ shakaDemo.setupConfiguration_ = function() {
       'change', shakaDemo.onAdaptationChange_);
   document.getElementById('logLevelList').addEventListener(
       'change', shakaDemo.onLogLevelChange_);
+  document.getElementById('enableAutoplay').addEventListener(
+      'change', shakaDemo.onAutoplayChange_);
+};
+
+
+/** @private */
+shakaDemo.onAutoplayChange_ = function() {
+  // Change the hash, to mirror this.
+  shakaDemo.hashShouldChange_();
 };
 
 
@@ -65,6 +74,8 @@ shakaDemo.onLogLevelChange_ = function(event) {
         shaka.log.setLevel(shaka.log.Level.V1);
         break;
     }
+    // Change the hash, to mirror this.
+    shakaDemo.hashShouldChange_();
   }
 };
 
@@ -74,15 +85,14 @@ shakaDemo.onLogLevelChange_ = function(event) {
  * @private
  */
 shakaDemo.onConfigKeyUp_ = function(event) {
-  // Update the configuration if the user presses enter.
-  if (event.keyCode != 13) return;
-
   shakaDemo.player_.configure(/** @type {shakaExtern.PlayerConfiguration} */({
     preferredAudioLanguage:
         document.getElementById('preferredAudioLanguage').value,
     preferredTextLanguage:
         document.getElementById('preferredTextLanguage').value
   }));
+  // Change the hash, to mirror this.
+  shakaDemo.hashShouldChange_();
 };
 
 
@@ -95,6 +105,8 @@ shakaDemo.onAdaptationChange_ = function(event) {
   shakaDemo.player_.configure(/** @type {shakaExtern.PlayerConfiguration} */({
     abr: { enabled: event.target.checked }
   }));
+  // Change the hash, to mirror this.
+  shakaDemo.hashShouldChange_();
 };
 
 
@@ -105,4 +117,6 @@ shakaDemo.onAdaptationChange_ = function(event) {
 shakaDemo.onTrickPlayChange_ = function(event) {
   // Show/hide trick play controls.
   shakaDemo.controls_.showTrickPlay(event.target.checked);
+  // Change the hash, to mirror this.
+  shakaDemo.hashShouldChange_();
 };

demo/index.html

@@ -143,6 +143,10 @@ <h1>Shaka Player <span id="version"></span></h1>
           <label for="enableAdaptation">Enable adaptation:</label>
           <input id="enableAdaptation" type="checkbox" checked>
         </div>
+        <div>
+          <label for="enableAutoplay">Autoplay:</label>
+          <input id="enableAutoplay" type="checkbox">
+        </div>
         <div>
           <label for="logToScreen">Log to the screen:</label>
           <input id="logToScreen" type="checkbox">

demo/log_section.js

@@ -98,6 +98,8 @@ shakaDemo.onLogChange_ = function() {
   }
   // Re-initialize Shaka library logging to the freshly-patched console methods.
   shaka.log.setLevel(shaka.log.currentLevel);
+  // Change the hash, to mirror this.
+  shakaDemo.hashShouldChange_();
 };
 
 

demo/main.js

@@ -55,6 +55,10 @@ shakaDemo.controls_ = null;
 shakaDemo.lastMousePressTime_ = null;
 
 
+/** @private {boolean} */
+shakaDemo.hashCanChange_ = false;
+
+
 /**
  * The registered ID of the v2.1 Chromecast receiver demo.
  * @const {string}
@@ -216,6 +220,9 @@ shakaDemo.preBrowserCheckParams_ = function(params) {
     document.getElementById('container').className = 'noinput';
     document.body.className = 'noinput';
   }
+  if ('play' in params) {
+    document.getElementById('enableAutoplay').checked = true;
+  }
   // shaka.log is not set if logging isn't enabled.
   // I.E. if using the compiled version of shaka.
   if (shaka.log) {
@@ -248,29 +255,50 @@ shakaDemo.preBrowserCheckParams_ = function(params) {
 };
 
 
-/**
-  * @param {!Object.<string, string>} params
-  * @private
-  */
-shakaDemo.postBrowserCheckParams_ = function(params) {
+/** @private */
+shakaDemo.postOfflineLoadOperation_ = function() {
+  var params = shakaDemo.getParams_();
+
   // If a custom asset was given in the URL, select it now.
   if ('asset' in params) {
     var assetList = document.getElementById('assetList');
-    var customAsset = document.getElementById('customAsset');
-    assetList.selectedIndex = assetList.options.length - 1;
-    customAsset.style.display = 'block';
-  }
-  if ('defaultasset' in params) {
-    var assetList = document.getElementById('assetList');
-    var assetUri = params['defaultasset'];
-    for (var index = 0; index < assetList.length; index++) {
+    var assetUri = params['asset'];
+    var isDefault = false;
+    // Check all options except the last, which is 'custom asset'.
+    for (var index = 0; index < assetList.options.length - 1; index++) {
       if (assetList[index].asset.manifestUri == assetUri) {
         assetList.selectedIndex = index;
+        isDefault = true;
         break;
       }
     }
+    if (isDefault) {
+      // Clear the custom fields.
+      document.getElementById('manifestInput').value = '';
+      document.getElementById('licenseServerInput').value = '';
+    } else {
+      // It was a custom asset, so put it into the custom field.
+      assetList.selectedIndex = assetList.options.length - 1;
+      var customAsset = document.getElementById('customAsset');
+      customAsset.style.display = 'block';
+    }
   }
 
+  if ('play' in params) {
+    shakaDemo.load();
+  }
+
+  // Allow the hash to be changed, and give it an initial change.
+  shakaDemo.hashCanChange_ = true;
+  shakaDemo.hashShouldChange_();
+};
+
+
+/**
+  * @param {!Object.<string, string>} params
+  * @private
+  */
+shakaDemo.postBrowserCheckParams_ = function(params) {
   if ('noadaptation' in params) {
     var enableAdaptation = document.getElementById('enableAdaptation');
     enableAdaptation.checked = false;
@@ -288,10 +316,94 @@ shakaDemo.postBrowserCheckParams_ = function(params) {
     var fakeEvent = /** @type {!Event} */({target: showTrickPlay});
     shakaDemo.onTrickPlayChange_(fakeEvent);
   }
+};
 
-  if ('play' in params) {
-    shakaDemo.load();
+
+/** @private */
+shakaDemo.hashShouldChange_ = function() {
+  if (!shakaDemo.hashCanChange_)
+    return;
+
+  var params = [];
+
+  // Save the current asset.
+  var assetUri;
+  var licenseServerUri;
+  if (shakaDemo.player_) {
+    assetUri = shakaDemo.player_.getManifestUri();
+    var drmInfo = shakaDemo.player_.drmInfo();
+    if (drmInfo)
+      licenseServerUri = drmInfo.licenseServerUri;
+  }
+  var assetList = document.getElementById('assetList');
+  if (assetUri) {
+    // Store the currently playing asset URI.
+    params.push('asset=' + assetUri);
+
+    // Is the asset a default asset?
+    var isDefault = false;
+    // Check all options except the last, which is 'custom asset'.
+    for (var index = 0; index < assetList.options.length - 1; index++) {
+      if (assetList[index].asset.manifestUri == assetUri) {
+        isDefault = true;
+        break;
+      }
+    }
+
+    // If it's a custom asset we should store whatever the license
+    // server URI is.
+    if (!isDefault && licenseServerUri) {
+      params.push('license=' + licenseServerUri);
+    }
+  } else {
+    if (assetList.selectedIndex == assetList.length - 1) {
+      // It's a custom asset.
+      if (document.getElementById('manifestInput').value) {
+        params.push('asset=' + document.getElementById('manifestInput').value);
+      }
+      if (document.getElementById('licenseServerInput').value) {
+        params.push('license=' +
+            document.getElementById('licenseServerInput').value);
+      }
+    } else {
+      // It's a default asset.
+      params.push('asset=' +
+          assetList[assetList.selectedIndex].asset.manifestUri);
+    }
+  }
+
+  // Save config panel state.
+  var audioLang = document.getElementById('preferredAudioLanguage').value;
+  var textLang = document.getElementById('preferredTextLanguage').value;
+  if (textLang != audioLang) {
+    params.push('audiolang=' + audioLang);
+    params.push('textlang=' + textLang);
+  } else {
+    params.push('lang=' + audioLang);
+  }
+  if (document.getElementById('logToScreen').checked) {
+    params.push('logtoscreen');
+  }
+  if (!document.getElementById('enableAdaptation').checked) {
+    params.push('noadaptation');
   }
+  if (document.getElementById('showTrickPlay').checked) {
+    params.push('trickplay');
+  }
+  if (shaka.log) {
+    var logLevelList = document.getElementById('logLevelList');
+    var logLevel = logLevelList[logLevelList.selectedIndex].value;
+    if (logLevel != 'info') {
+      params.push(logLevel);
+    }
+  }
+
+  if (document.getElementById('enableAutoplay').checked) {
+    params.push('play');
+  }
+
+  location.hash = '#' + params.join(';');
+  location.search = '';
 };
 
 

demo/offline_section.js

@@ -134,6 +134,8 @@ shakaDemo.setupOfflineAssets_ = function() {
 
     shakaDemo.updateButtons_(true);
     return db.destroy();
+  }).then(function() {
+    shakaDemo.postOfflineLoadOperation_();
   });
 };