Highlight selected demo tab, and auto-select first tab (Playback)

video-dev · Jul 27, 2020 · c4445b1 · c4445b1
1 parent 8a29da3
commit c4445b1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -121,15 +121,15 @@ <h3>
       <pre id="errorOut" class="center" style="white-space: pre-wrap;"></pre>
 
       <div class="center" style="text-align: center;" id="toggleButtons">
-        <button type="button" class="btn btn-sm" onclick="toggleTab('timelineTab');">Timeline</button>
-        <button type="button" class="btn btn-sm" onclick="toggleTab('playbackControlTab');">Playback</button>
-        <button type="button" class="btn btn-sm" onclick="toggleTab('qualityLevelControlTab');">Quality-levels</button>
-        <button type="button" class="btn btn-sm" onclick="toggleTab('audioTrackControlTab');">Audio-tracks</button>
-        <button type="button" class="btn btn-sm" onclick="toggleTab('statsDisplayTab');">Buffer &amp; Statistics</button>
-        <button type="button" class="btn btn-sm" onclick="toggleTab('metricsDisplayTab'); showMetrics();">Real-time metrics</button>
+        <button type="button" class="btn btn-sm demo-tab-btn" data-tab="playbackControlTab" onclick="toggleTab(this);">Playback</button>
+        <button type="button" class="btn btn-sm demo-tab-btn" data-tab="qualityLevelControlTab" onclick="toggleTab(this);">Quality-levels</button>
+        <button type="button" class="btn btn-sm demo-tab-btn" data-tab="audioTrackControlTab" onclick="toggleTab(this);">Audio-tracks</button>
+        <button type="button" class="btn btn-sm demo-tab-btn" data-tab="timelineTab" onclick="toggleTab(this);">Timeline</button>
+        <button type="button" class="btn btn-sm demo-tab-btn" data-tab="statsDisplayTab" onclick="toggleTab(this);">Buffer &amp; Statistics</button>
+        <button type="button" class="btn btn-sm demo-tab-btn" data-tab="metricsDisplayTab" onclick="toggleTab(this); showMetrics();">Real-time metrics</button>
       </div>
 
-      <div class="center" id='playbackControlTab'>
+      <div class="center demo-tab" id='playbackControlTab'>
         <h4>Playback</h4>
         <center>
             <p>
@@ -169,7 +169,7 @@ <h4>Playback</h4>
 
       </div>
 
-      <div class="center" id='qualityLevelControlTab'>
+      <div class="center demo-tab" id='qualityLevelControlTab'>
         <h4>Quality-levels</h4>
         <center>
             <table>
@@ -209,7 +209,7 @@ <h4>Quality-levels</h4>
         </center>
       </div>
 
-      <div class="center" id='audioTrackControlTab'>
+      <div class="center demo-tab" id='audioTrackControlTab'>
         <h4>Audio-tracks</h4>
         <table>
           <tr>
@@ -220,7 +220,7 @@ <h4>Audio-tracks</h4>
         </table>
       </div>
 
-      <div class="center" id='metricsDisplayTab'>
+      <div class="center demo-tab" id='metricsDisplayTab'>
         <h4>Real-time metrics</h4>
         <div id="metricsButton">
           <button type="button" class="btn btn-xs btn-info" onclick="$('#metricsButtonWindow').toggle();$('#metricsButtonFixed').toggle();windowSliding=!windowSliding; refreshCanvas()">toggle sliding/fixed window</button><br>
@@ -255,15 +255,15 @@ <h4>Real-time metrics</h4>
         </div>
       </div>
 
-      <div class="center" id='statsDisplayTab'>
+      <div class="center demo-tab" id='statsDisplayTab'>
         <h4>Buffer &amp; Statistics</h4>
         <label>Buffer state:</label>
         <pre id="bufferedOut"></pre>
         <label>General stats:</label>
         <pre id='statisticsOut'></pre>
       </div>
 
-      <div class="center demo-timeline-chart-container" id='timelineTab'>
+      <div class="center demo-tab demo-timeline-chart-container" id='timelineTab'>
         <canvas id="timeline-chart"></canvas>
       </div>
 

diff --git a/demo/main.js b/demo/main.js
@@ -138,8 +138,7 @@ $(document).ready(function () {
 
   video.volume = 0.05;
 
-  hideAllTabs();
-  // $('#timelineTab').show();
+  toggleTab($('.demo-tab-btn')[0]);
 
   $('#metricsButtonWindow').toggle(window.windowSliding);
   $('#metricsButtonFixed').toggle(!window.windowSliding);
@@ -1405,17 +1404,14 @@ function arrayConcat (inputArray) {
 }
 
 function hideAllTabs () {
-  $('#timelineTab').hide();
-  $('#playbackControlTab').hide();
-  $('#qualityLevelControlTab').hide();
-  $('#audioTrackControlTab').hide();
-  $('#metricsDisplayTab').hide();
-  $('#statsDisplayTab').hide();
+  $('.demo-tab-btn').css('background-color', '');
+  $('.demo-tab').hide();
 }
 
-function toggleTab (tabElId) {
+function toggleTab (btn) {
   hideAllTabs();
   window.hideMetrics();
+  const tabElId = $(btn).data('tab');
   $('#' + tabElId).show();
   if (hls) {
     if (tabElId === 'timelineTab') {
@@ -1425,6 +1421,7 @@ function toggleTab (tabElId) {
       chart.hide();
     }
   }
+  $(btn).css('background-color', 'orange');
 }
 
 function appendLog (textElId, message) {