From a966ee2a23b8ebdc2fce54a95564b1b7a6d444ba Mon Sep 17 00:00:00 2001
From: Natalie Harris <natalieharris@google.com>
Date: Mon, 15 Jun 2015 17:08:55 -0700
Subject: [PATCH] Use checkboxes for test app cycle buttons.

Closes #46.

Change-Id: Ic325d2a816995f49d6083f7ef2da04766ca0d941
---
 app.js     | 122 +++++++++++++++++++++++++++++++++++------------------
 index.html |   4 +-
 2 files changed, 83 insertions(+), 43 deletions(-)

diff --git a/app.js b/app.js
index 0563ce2e9d..7191fe8ad3 100644
--- a/app.js
+++ b/app.js
@@ -95,6 +95,27 @@ app.polyfillsInstalled_ = false;
 app.offlineStreams_ = [];
 
 
+/**
+ * @type {boolean} The state of adaptation before video cycling was started.
+ * @private
+ */
+app.originalAdaptationEnabled_ = true;
+
+
+/**
+ * @type {?number} The lastest audio cycle interval set.
+ * @private
+ */
+app.audioCycleInterval_ = null;
+
+
+/**
+ * @type {?number} The lastest video cycle interval set.
+ * @private
+ */
+app.videoCycleInterval_ = null;
+
+
 /**
  * Initializes the application.
  */
@@ -193,11 +214,17 @@ app.init = function() {
   app.onStreamTypeChange();
 
   if ('cycleVideo' in params) {
+    document.getElementById('cycleVideo').checked = true;
     app.cycleVideo();
   }
   if ('cycleAudio' in params) {
+    document.getElementById('cycleAudio').checked = true;
     app.cycleAudio();
   }
+  app.video_.addEventListener('ended', function() {
+    app.resetCycleState_('videoTracks', 'cycleVideo', true);
+    app.resetCycleState_('audioTracks', 'cycleAudio', false);
+  });
 };
 
 
@@ -323,7 +350,7 @@ app.onTextChange = function() {
 app.cycleAudio = function() {
   app.cycleTracks_('cycleAudio', 'audioTracks', 3, function() {
     app.onAudioChange();
-  }, function() {});
+  }, false);
 };
 
 
@@ -331,63 +358,76 @@ app.cycleAudio = function() {
  * A demo function to cycle through video tracks.
  */
 app.cycleVideo = function() {
-  // Disable adaptation.
-  var adaptationEnabled = document.getElementById('adaptationEnabled');
-  var originalAdaptationEnabled = adaptationEnabled.checked;
-  adaptationEnabled.checked = false;
-  adaptationEnabled.disabled = true;
-  app.onAdaptationChange();
+  if (document.getElementById('cycleVideo').checked) {
+    // Disable adaptation.
+    var adaptationEnabled = document.getElementById('adaptationEnabled');
+    app.originalAdaptationEnabled_ = adaptationEnabled.checked;
+    adaptationEnabled.checked = false;
+    adaptationEnabled.disabled = true;
+    app.onAdaptationChange();
+  }
 
   app.cycleTracks_('cycleVideo', 'videoTracks', 6, function() {
     // Select video track with immediate == false.  This switches in the same
     // smooth way as the AbrManager.
     app.onVideoChange(false);
-  }, function() {
-    // Re-enable adaptation.
-    adaptationEnabled.disabled = false;
-    adaptationEnabled.checked = originalAdaptationEnabled;
-    app.onAdaptationChange();
-  });
+  }, true);
 };
 
 
 /**
  * Common functionality for cycling through tracks.
- * @param {string} cycleButtonId
+ * @param {string} checkboxId
  * @param {string} tracksId
  * @param {number} seconds
  * @param {function()} onSelect
- * @param {function()} onComplete
+ * @param {boolean} isVideo
  * @private
  */
-app.cycleTracks_ =
-    function(cycleButtonId, tracksId, seconds, onSelect, onComplete) {
-  // Indicate that we are busy cycling.
-  var cycleButton = document.getElementById(cycleButtonId);
-  var originalCycleText = cycleButton.textContent;
-  cycleButton.textContent = 'Cycling...';
-  cycleButton.disabled = true;
-  // Prevent the user from changing the settings while we are cycling.
+app.cycleTracks_ = function(checkboxId, tracksId, seconds, onSelect, isVideo) {
   var tracks = document.getElementById(tracksId);
-  tracks.disabled = true;
-
-  var intervalId = window.setInterval(function() {
-    // On EOF, the video goes into a paused state.
-    if (app.video_.paused) {
-      window.clearInterval(intervalId);
-      // Allow the user to change the settings again.
-      tracks.disabled = false;
-      cycleButton.disabled = false;
-      cycleButton.textContent = originalCycleText;
-      onComplete();
-      return;
-    }
+  if (document.getElementById(checkboxId).checked) {
+    // Prevent the user from changing the settings while we are cycling.
+    tracks.disabled = true;
+
+    var intervalId = window.setInterval(function() {
+      var option = tracks.selectedOptions[0];
+      if (option) {
+        option = option.nextElementSibling || tracks.firstElementChild;
+        tracks.value = option.value;
+        onSelect();
+      } else {
+        app.resetCycleState_(tracksId, checkboxId, isVideo);
+      }
+    }, seconds * 1000);
+
+    isVideo ? app.videoCycleInterval_ = intervalId :
+        app.audioCycleInterval_ = intervalId;
+  } else {
+    app.resetCycleState_(tracksId, checkboxId, isVideo);
+  }
+};
 
-    var option = tracks.selectedOptions[0];
-    option = option.nextElementSibling || tracks.firstElementChild;
-    tracks.value = option.value;
-    onSelect();
-  }, seconds * 1000);
+
+/**
+ * Resets the state of a cycle checkbox.
+ * @param {string} tracksId
+ * @param {string} checkboxId
+ * @param {boolean} isVideo
+ * @private
+ */
+app.resetCycleState_ = function(tracksId, checkboxId, isVideo) {
+  var intervalId = isVideo ? app.videoCycleInterval_ : app.audioCycleInterval_;
+  window.clearInterval(intervalId);
+  document.getElementById(tracksId).disabled = false;
+  document.getElementById(checkboxId).checked = false;
+  if (isVideo) {
+    // Re-enable adaptation.
+    var adaptationEnabled = document.getElementById('adaptationEnabled');
+    adaptationEnabled.disabled = false;
+    adaptationEnabled.checked = app.originalAdaptationEnabled_;
+    app.onAdaptationChange();
+  }
 };
 
 
diff --git a/index.html b/index.html
index 56e6dcf210..84820303ed 100644
--- a/index.html
+++ b/index.html
@@ -149,12 +149,12 @@
       <tr>
         <td>Available video tracks:</td>
         <td><select id="videoTracks" onchange="app.onVideoChange()"></select></td>
-        <td><button id="cycleVideo" onclick="app.cycleVideo()">Cycle video tracks</button></td>
+        <td><input type ="checkbox" id="cycleVideo" onchange="app.cycleVideo()">Cycle video tracks</button></td>
       </tr>
       <tr>
         <td>Available audio tracks:</td>
         <td><select id="audioTracks" onchange="app.onAudioChange()"></select></td>
-        <td><button id="cycleAudio" onclick="app.cycleAudio()">Cycle audio tracks</button></td>
+        <td><input type ="checkbox" id="cycleAudio" onchange="app.cycleAudio()">Cycle audio tracks</button></td>
       </tr>
       <tr>
         <td>Available text tracks:</td>