Added demo controls for gap jumping.

Change-Id: I79bf7cd544b160a1fa64a73139b9b8d4a0d82433
shaka-project · Jul 17, 2017 · 2a28234 · 2a28234
1 parent de16f65
commit 2a28234
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 4 deletions.
diff --git a/demo/asset_section.js b/demo/asset_section.js
@@ -135,7 +135,7 @@ shakaDemo.preparePlayer_ = function(asset) {
   var player = shakaDemo.player_;
 
   var config = /** @type {shakaExtern.PlayerConfiguration} */(
-      { abr: {}, manifest: { dash: {} } });
+      { abr: {}, streaming: {}, manifest: { dash: {} } });
   config.manifest.dash.clockSyncUri =
       '//shaka-player-demo.appspot.com/time.txt';
 
@@ -171,6 +171,11 @@ shakaDemo.preparePlayer_ = function(asset) {
       document.getElementById('preferredTextLanguage').value;
   config.abr.enabled =
       document.getElementById('enableAdaptation').checked;
+  var smallGapLimit = document.getElementById('smallGapLimit').value;
+  if (!isNaN(Number(smallGapLimit)) && smallGapLimit.length > 0)
+    config.streaming.smallGapLimit = Number(smallGapLimit);
+  config.streaming.jumpLargeGaps =
+      document.getElementById('jumpLargeGaps').checked;
 
   player.configure(config);
 

diff --git a/demo/configuration_section.js b/demo/configuration_section.js
@@ -29,10 +29,14 @@ var shakaDemo = shakaDemo || {};
 
 /** @private */
 shakaDemo.setupConfiguration_ = function() {
+  document.getElementById('smallGapLimit').addEventListener(
+      'input', shakaDemo.onGapInput_);
+  document.getElementById('jumpLargeGaps').addEventListener(
+      'change', shakaDemo.onJumpLargeGapsChange_);
   document.getElementById('preferredAudioLanguage').addEventListener(
-      'keyup', shakaDemo.onConfigKeyUp_);
+      'input', shakaDemo.onConfigInput_);
   document.getElementById('preferredTextLanguage').addEventListener(
-      'keyup', shakaDemo.onConfigKeyUp_);
+      'input', shakaDemo.onConfigInput_);
   document.getElementById('showTrickPlay').addEventListener(
       'change', shakaDemo.onTrickPlayChange_);
   document.getElementById('enableAdaptation').addEventListener(
@@ -84,7 +88,37 @@ shakaDemo.onLogLevelChange_ = function(event) {
  * @param {!Event} event
  * @private
  */
-shakaDemo.onConfigKeyUp_ = function(event) {
+shakaDemo.onJumpLargeGapsChange_ = function(event) {
+  shakaDemo.player_.configure(({
+    streaming: { jumpLargeGaps: event.target.checked }
+  }));
+  // Change the hash, to mirror this.
+  shakaDemo.hashShouldChange_();
+};
+
+
+/**
+ * @param {!Event} event
+ * @private
+ */
+shakaDemo.onGapInput_ = function(event) {
+  var smallGapLimit = Number(event.target.value);
+  var useDefault = isNaN(smallGapLimit) || event.target.value.length == 0;
+  shakaDemo.player_.configure(({
+    streaming: {
+      smallGapLimit: useDefault ? undefined : smallGapLimit
+    }
+  }));
+  // Change the hash, to mirror this.
+  shakaDemo.hashShouldChange_();
+};
+
+
+/**
+ * @param {!Event} event
+ * @private
+ */
+shakaDemo.onConfigInput_ = function(event) {
   shakaDemo.player_.configure(/** @type {shakaExtern.PlayerConfiguration} */({
     preferredAudioLanguage:
         document.getElementById('preferredAudioLanguage').value,

diff --git a/demo/index.html b/demo/index.html
@@ -148,6 +148,14 @@ <h1>Shaka Player <span id="version"></span></h1>
           <label for="logToScreen">Log to the screen:</label>
           <input id="logToScreen" type="checkbox">
         </div>
+        <div>
+          <label for="smallGapLimit">Maximum small gap size:</label>
+          <input id="smallGapLimit" class="flex-grow" type="text">
+        </div>
+        <div>
+          <label for="jumpLargeGaps">Jump large gaps:</label>
+          <input id="jumpLargeGaps" type="checkbox">
+        </div>
         <div id="logLevelListDiv" hidden>
           <label for="logLevelList">Log Level:</label>
           <select id="logLevelList" class="flex-grow">

diff --git a/demo/main.js b/demo/main.js
@@ -316,6 +316,29 @@ shakaDemo.postBrowserCheckParams_ = function(params) {
     shakaDemo.updateButtons_(/* canHide */ true);
   }
 
+  var smallGapLimit = document.getElementById('smallGapLimit');
+  smallGapLimit.placeholder =
+      shakaDemo.player_.defaultConfig_().streaming.smallGapLimit;
+  if ('smallGapLimit' in params) {
+    smallGapLimit.value = params['smallGapLimit'];
+    // Call onGapInput_ manually, because setting the value
+    // programatically doesn't fire 'input' event.
+    var fakeEvent = /** @type {!Event} */({target: smallGapLimit});
+    shakaDemo.onGapInput_(fakeEvent);
+  }
+
+  var jumpLargeGaps = document.getElementById('jumpLargeGaps');
+  if ('jumpLargeGaps' in params) {
+    jumpLargeGaps.checked = true;
+    // Call onJumpLargeGapsChange_ manually, because setting checked
+    // programatically doesn't fire a 'change' event.
+    var fakeEvent = /** @type {!Event} */({target: jumpLargeGaps});
+    shakaDemo.onJumpLargeGapsChange_(fakeEvent);
+  } else {
+    jumpLargeGaps.checked =
+        shakaDemo.player_.getConfiguration().streaming.jumpLargeGaps;
+  }
+
   if ('noadaptation' in params) {
     var enableAdaptation = document.getElementById('enableAdaptation');
     enableAdaptation.checked = false;
@@ -413,6 +436,12 @@ shakaDemo.hashShouldChange_ = function() {
   }
 
   // Save config panel state.
+  if (document.getElementById('smallGapLimit').value.length) {
+    params.push('smallGapLimit=' +
+        document.getElementById('smallGapLimit').value);
+  }
+  if (document.getElementById('jumpLargeGaps').checked)
+    params.push('jumpLargeGaps');
   var audioLang = document.getElementById('preferredAudioLanguage').value;
   var textLang = document.getElementById('preferredTextLanguage').value;
   if (textLang != audioLang) {