Merge remote-tracking branch 'upstream/master' into fix-build

mangowi · May 5, 2018 · 175589a · 175589a
2 parents f03c1a4 + a27ed40
commit 175589a
Show file tree

Hide file tree

Showing 40 changed files with 6,829 additions and 4,489 deletions.
diff --git a/README.md b/README.md
@@ -53,9 +53,11 @@ hls.js is written in [ECMAScript6], and transpiled in ECMAScript5 using [Babel].
  // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
  // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
  // This is using the built-in support of the plain video element, without using hls.js.
+ // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
+ // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
   else if (video.canPlayType('application/vnd.apple.mpegurl')) {
     video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
-    video.addEventListener('canplay',function() {
+    video.addEventListener('loadedmetadata',function() {
       video.play();
     });
   }

diff --git a/demo/demo-utils.js b/demo/demo-utils.js
@@ -0,0 +1,31 @@
+export function sortObject(obj) {
+  if(typeof obj !== 'object') {
+    return obj;
+  }
+  let temp = {};
+  let keys = [];
+  for(let key in obj) {
+    keys.push(key);
+  }
+  keys.sort();
+  for(let index in keys) {
+    temp[keys[index]] = sortObject(obj[keys[index]]);
+  }
+  return temp;
+}
+
+export function copyTextToClipboard(text) {
+  let textArea = document.createElement('textarea');
+  textArea.value = text;
+  document.body.appendChild(textArea);
+  textArea.select();
+  try {
+    let successful = document.execCommand('copy');
+    let msg = successful ? 'successful' : 'unsuccessful';
+    console.log('Copying text command was ' + msg);
+  } catch (err) {
+    console.log('Oops, unable to copy');
+  }
+  document.body.removeChild(textArea);
+}
+
diff --git a/demo/index.html b/demo/index.html
@@ -126,23 +126,26 @@ <h3>
 
       <br>
 
-      <canvas id="buffered_c" height="15" class="videoCentered" onclick="onClickBufferedRange(event);"></canvas>
+      <canvas id="bufferedCanvas" height="15" class="videoCentered" onclick="onClickBufferedRange(event);"></canvas>
 
       <br><br>
 
-      <pre id="HlsStatus" class="center" style="white-space: pre-wrap;"></pre>
+      <label class="center">Status:</label>
+      <pre id="statusOut" class="center" style="white-space: pre-wrap;"></pre>
 
+      <label class="center">Error:</label>
+      <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="$('#PlaybackControl').toggle();">Playback controls</button>
-        <button type="button" class="btn btn-sm" onclick="$('#QualityLevelControl').toggle();">Quality-level controls</button>
-        <button type="button" class="btn btn-sm" onclick="$('#AudioTrackControl').toggle();">Audio-track controls</button>
-        <button type="button" class="btn btn-sm" onclick="$('#MetricsDisplay').toggle();toggleMetricsDisplay();">Metrics-display</button>
-        <button type="button" class="btn btn-sm" onclick="$('#StatsDisplay').toggle();">Stats-display</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>
       </div>
 
-      <div class="center" id='PlaybackControl'>
-        <h4>Playback controls</h4>
-
+      <div class="center" id='playbackControlTab'>
+        <h4>Playback</h4>
         <center>
             <p>
               <button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].play()">Play</button>
@@ -155,7 +158,7 @@ <h4>Playback controls</h4>
             </p>
 
             <p>
-              <button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].currentTime=$('#seek_pos').val()">seek to </button>
+              <button type="button" class="btn btn-sm btn-info" onclick="$('#video')[0].currentTime=$('#seek_pos').val()">Seek to </button>
               <input type="text" id='seek_pos' size="8" onkeydown="if(window.event.keyCode=='13'){$('#video')[0].currentTime=$('#seek_pos').val();}">
             </p>
 
@@ -181,37 +184,37 @@ <h4>Playback controls</h4>
 
       </div>
 
-      <div class="center" id='QualityLevelControl'>
-        <h4>Quality-level controls</h4>
+      <div class="center" id='qualityLevelControlTab'>
+        <h4>Quality-levels</h4>
         <center>
             <table>
                 <tr>
                   <td>
-                    <p>Currently played level</p>
+                    <p>Currently played level:</p>
                   </td>
                   <td>
                     <div id="currentLevelControl" style="display: inline;"></div>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    <p>Next level loaded</p>
+                    <p>Next level loaded:</p>
                   </td>
                   <td>
                     <div id="nextLevelControl" style="display: inline;"></div>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    <p>Currently loaded level</p>
+                    <p>Currently loaded level:</p>
                   </td>
                   <td>
                     <div id="loadLevelControl" style="display: inline;"></div>
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    <p>Cap-limit level (maximum)</p>
+                    <p>Cap-limit level (maximum):</p>
                   </td>
                   <td>
                     <div id="levelCappingControl" style="display: inline;"></div>
@@ -221,18 +224,18 @@ <h4>Quality-level controls</h4>
         </center>
       </div>
 
-      <div class="center" id='AudioTrackControl'>
-        <h4>Audio-track controls</h4>
+      <div class="center" id='audioTrackControlTab'>
+        <h4>Audio-tracks</h4>
         <table>
           <tr>
-            <td>Current audio-track</td>
-            <td width=10px></td>
+            <td>Current audio-track:</td>
+            <td width=10px>None selected</td>
             <td> <div id="audioTrackControl" style="display: inline;"></div> </td>
           </tr>
         </table>
       </div>
 
-      <div class="center" id='MetricsDisplay'>
+      <div class="center" 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>
@@ -267,10 +270,12 @@ <h4>Real-time metrics</h4>
         </div>
       </div>
 
-      <div class="center" id='StatsDisplay'>
-        <h4>Stats</h4>
-        <pre id='HlsStats'></pre>
-        <div id="buffered_log"></div>
+      <div class="center" 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>