chore: various demo page fixes and enhancements (#1186)

* Adds back in the run tests link (which is removed on netlify).
* Correctly disposes of stats on player dispose.
* Defaults to the new liveui 
* Saves the state of `player.muted()` to the test page state so that muting/unmuting the player is saved across reloads.
* Moves the preloaded source dropdown to the top of the form

index.html

@@ -69,6 +69,23 @@
   <div class="tab-content container-fluid">
 
     <div class="tab-pane active" id="sources" role="tabpanel">
+      <div class="input-group mb-2">
+        <span class="input-group-text"><label for=load-source>Preloaded Sources</label></span>
+        <select id=load-source class="form-select">
+          <optgroup label="hls">
+          </optgroup>
+          <optgroup label="dash">
+          </optgroup>
+          <optgroup label="drm">
+          </optgroup>
+          <optgroup label="live">
+          </optgroup>
+          <optgroup label="low latency live">
+          </optgroup>
+          <optgroup label="json manifest object">
+          </optgroup>
+        </select>
+      </div>
 
       <label for=url class="form-label">Source URL</label>
       <div class="input-group">
@@ -90,23 +107,6 @@
 
       <button id=load-url type=button class="btn btn-primary my-2">Load</button>
 
-      <div class="input-group">
-        <span class="input-group-text"><label for=load-source>Preloaded Sources</label></span>
-        <select id=load-source class="form-select">
-          <optgroup label="hls">
-          </optgroup>
-          <optgroup label="dash">
-          </optgroup>
-          <optgroup label="drm">
-          </optgroup>
-          <optgroup label="live">
-          </optgroup>
-          <optgroup label="low latency live">
-          </optgroup>
-          <optgroup label="json manifest object">
-          </optgroup>
-        </select>
-      </div>
     </div>
 
     <div class="tab-pane" id="options" role="tabpanel">
@@ -122,7 +122,7 @@
         </div>
 
         <div class="form-check">
-          <input id=liveui type="checkbox" class="form-check-input">
+          <input id=liveui type="checkbox" class="form-check-input" checked>
           <label class="form-check-label" for="liveui">Enable the live UI (reloads player)</label>
         </div>
 
@@ -221,9 +221,20 @@
         <ul id="segment-metadata" class="col-8"></ul>
       </div>
     </div>
-
   </div>
 
+  <footer class="text-center p-3" id=unit-test-link>
+    <a href="test/debug.html">Run unit tests</a>
+  </footer>
+
+  <script>
+    var unitTestLink = document.getElementById('unit-test-link');
+
+    // removal test run link on netlify, as we cannot run tests there.
+    if ((/netlify.app/).test(window.location.host)) {
+      unitTestLink.remove();
+    }
+  </script>
   <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
   <script src="scripts/index.js"></script>
   <script>

scripts/index.js

@@ -338,6 +338,12 @@
   };
 
   var setupPlayerStats = function(player) {
+    player.on('dispose', () => {
+      if (window.statsTimer) {
+        window.clearInterval(window.statsTimer);
+        window.statsTimer = null;
+      }
+    });
     var currentTimeStat = document.querySelector('.current-time-stat');
     var bufferedStat = document.querySelector('.buffered-stat');
     var videoBufferedStat = document.querySelector('.video-buffered-stat');
@@ -545,11 +551,6 @@
 
         var mirrorSource = getInputValue(stateEls['mirror-source']);
 
-        if (window.statsTimer) {
-          window.statsTimer = null;
-          clearInterval(window.statsTimer);
-        }
-
         player = window.player = window.videojs(videoEl, {
           plugins: {
             httpSourceSelector: {
@@ -572,6 +573,14 @@
         setupPlayerStats(player);
         setupSegmentMetadata(player);
 
+        // save player muted state interation
+        player.on('volumechange', function() {
+          if (stateEls.muted.checked !== player.muted()) {
+            stateEls.muted.checked = player.muted();
+            saveState();
+          }
+        });
+
         player.on('sourceset', function() {
           var source = player.currentSource();
 

scripts/netlify.js

@@ -21,7 +21,8 @@ const files = [
   'scripts/index.js',
   'scripts/old-index.js',
   'scripts/dash-manifest-object.json',
-  'scripts/hls-manifest-object.json'
+  'scripts/hls-manifest-object.json',
+  'test/dist/bundle.js'
 ];
 
 // cleanup previous deploy