Merge branch 'upstream/master' into feature/v1.0.0

* upstream/master: (37 commits)
  Bump karma from 5.1.0 to 5.1.1
  Bump webpack from 4.43.0 to 4.44.0
  Bump @types/chai from 4.2.11 to 4.2.12
  Bump chromedriver from 84.0.0 to 84.0.1
  Highlight selected demo tab, and auto-select first tab (Playback)
  Improve test logging
  Fix JavaScript functions executed in IE11 by Selenium
  Update Safari version used in functional tests
  Fix demo timeline event buffer reset event handler
  Drop waiting fragment if videoTrackCC has changed since waitingFragment was set and initPTS was not found
  Change "CC" and "continuity counter" to "cc" in log messages for consistency
  Fix stalling on discontinuity with audio track #2913
  Prevent immediate level switch from performing unnecessary pause and seeks as this can interfere with 3rd party application state
  Timeline chart fixes
  Fix av desync by forcing audio demuxing to wait for main initPTS
  Update lastDTS after realigning samples in case firstDTS set to a higher value #2905
  Seek into buffer start when starting a live stream to avoid video rendering bug in IE11 #2498
  Move test-stream with Access-Control-Allow-Headers "Range" errors
  Fix PTS based remuxer time-offset Improve PTS < DTS fix so that it works in Safari Show current and loading level in timeline
  Fix Safari playback by removing Safari workarounds in mp4-remuxer (Only this video buffers/playback back with issues https://playertest.longtailvideo.com/adaptive/captions/playlist.m3u8) Safari 9 may have some issues with gaps and decode errors, but without removing this code video will not buffer at all
  ...

# Conflicts:
#	demo/main.js
#	package-lock.json
#	package.json
#	src/controller/audio-stream-controller.js
#	src/controller/base-stream-controller.js
#	src/controller/level-helper.ts
#	src/controller/stream-controller.js
#	src/demux/demuxer-inline.js
#	src/polyfills/number-isFinite.js
#	src/polyfills/number.js
#	src/polyfills/number.ts
#	src/remux/mp4-remuxer.js
#	tests/functional/auto/setup.js
#	tests/test-streams.js

.travis.yml

@@ -68,7 +68,7 @@ jobs:
     # - stage: testFuncOptional
     #  env:   TRAVIS_MODE=funcTests UA=firefox     OS="OS X 10.11"
     - stage: testFuncOptional
-      env:   TRAVIS_MODE=funcTests UA=safari              OS="OS X 10.11" UA_VERSION="9.0"
+      env:   TRAVIS_MODE=funcTests UA=safari              OS="OS X 10.12" UA_VERSION="10.1"
 addons:
   sauce_connect:
     tunnel_domains: localhost

demo/chart/timeline-chart.ts

@@ -132,13 +132,26 @@ export class TimelineChart {
     this.hidden = true;
   }
 
-  updateLevels (levels: any[]) {
+  updateLevels (levels: any[], levelSwitched) {
     const { labels, datasets } = this.chart.data;
+    const { loadLevel, nextLoadLevel, nextAutoLevel } = self.hls;
+    const currentLevel = levelSwitched !== undefined ? levelSwitched : self.hls.currentLevel;
     levels.forEach((level, i) => {
       labels.push(getLevelName(level, level.level || level.id || i));
+      let borderColor = null;
+      if (currentLevel === i) {
+        borderColor = 'rgba(32, 32, 240, 1.0)';
+      } else if (loadLevel === i) {
+        borderColor = 'rgba(255, 128, 0, 1.0)';
+      } else if (nextLoadLevel === i) {
+        borderColor = 'rgba(200, 200, 64, 1.0)';
+      } else if (nextAutoLevel === i) {
+        borderColor = 'rgba(160, 0, 160, 1.0)';
+      }
       datasets.push(datasetWithDefaults({
         url: Array.isArray(level.url) ? level.url[0] : level.url,
         trackType: 'level',
+        borderColor,
         level: level.level
       }));
       if (level.details) {
@@ -150,11 +163,13 @@ export class TimelineChart {
 
   updateAudioTracks (audioTracks: any[]) {
     const { labels, datasets } = this.chart.data;
+    const { audioTrack } = self.hls;
     audioTracks.forEach((track, i) => {
       labels.push(getAudioTrackName(track, i));
       datasets.push(datasetWithDefaults({
         url: Array.isArray(track.url) ? track.url[0] : track.url,
         trackType: 'audioTrack',
+        borderColor: audioTrack === i ? 'rgba(32, 32, 240, 1.0)' : null,
         audioTrack: i
       }));
       if (track.details) {
@@ -166,11 +181,13 @@ export class TimelineChart {
 
   updateSubtitleTracks (subtitles: any[]) {
     const { labels, datasets } = this.chart.data;
+    const { subtitleTrack } = self.hls;
     subtitles.forEach((track, i) => {
       labels.push(getSubtitlesName(track, i));
       datasets.push(datasetWithDefaults({
         url: Array.isArray(track.url) ? track.url[0] : track.url,
         trackType: 'subtitleTrack',
+        borderColor: subtitleTrack === i ? 'rgba(32, 32, 240, 1.0)' : null,
         subtitleTrack: i
       }));
       if (track.details) {
@@ -332,6 +349,14 @@ export class TimelineChart {
     this.resize(datasets);
   }
 
+  removeSourceBuffers () {
+    const { labels, datasets } = this.chart.data;
+    while ((labels[0] || '').indexOf('buffer') > -1) {
+      labels.shift();
+      datasets.shift();
+    }
+  }
+
   setTextTracks (textTracks) {
     const { labels, datasets } = this.chart.data;
     this.removeType('textTrack');
@@ -346,6 +371,7 @@ export class TimelineChart {
         categoryPercentage: 0.5,
         url: '',
         trackType: 'textTrack',
+        borderColor: textTrack.mode !== 'hidden' === i ? 'rgba(32, 32, 240, 1.0)' : null,
         textTrack: i
       }));
       this.cuesChangeHandler = this.cuesChangeHandler || ((e) => this.updateTextTrackCues(e.currentTarget));

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>
@@ -223,7 +223,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>
@@ -258,15 +258,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>
 

demo/main.js

@@ -12,7 +12,7 @@ const STORAGE_KEYS = {
 };
 
 const testStreams = require('../tests/test-streams');
-const defaultTestStreamUrl = testStreams.bbb.url;
+const defaultTestStreamUrl = testStreams[Object.keys(testStreams)[0]].url;
 const sourceURL = decodeURIComponent(getURLParam('src', defaultTestStreamUrl));
 
 let demoConfig = getURLParam('demoConfig', null);
@@ -138,8 +138,7 @@ $(document).ready(function () {
 
   video.volume = 0.05;
 
-  hideAllTabs();
-  // $('#timelineTab').show();
+  toggleTab($('.demo-tab-btn')[0]);
 
   $('#metricsButtonWindow').toggle(self.windowSliding);
   $('#metricsButtonFixed').toggle(!self.windowSliding);
@@ -1305,13 +1304,35 @@ function addChartEventListeners (hls) {
   hls.on(Hls.Events.BUFFER_CREATED, (eventName, { tracks }) => {
     chart.updateSourceBuffers(tracks, hls.media);
   }, chart);
+  hls.on(Hls.Events.BUFFER_RESET, () => {
+    chart.removeSourceBuffers();
+  }, chart);
   hls.on(Hls.Events.LEVELS_UPDATED, (eventName, { levels }) => {
     chart.removeType('level');
     chart.updateLevels(levels);
   });
-  hls.on(Hls.Events.LEVEL_UPDATED, (eventName, { details, level }) => {
+  hls.on(Hls.Events.LEVEL_SWITCHED, (eventName, { level }) => {
+    // TODO: mutate level datasets
+    // Update currentLevel
+    chart.removeType('level');
+    chart.updateLevels(hls.levels, level);
+  }, chart);
+  hls.on(Hls.Events.LEVEL_LOADING, () => {
+    // TODO: mutate level datasets
+    // Update loadLevel
+    chart.removeType('level');
+    chart.updateLevels(hls.levels);
+  }, chart);
+  hls.on(Hls.Events.FRAG_LOADING, () => {
+    // TODO: mutate level datasets
+    // Update loadLevel
+    chart.removeType('level');
+    chart.updateLevels(hls.levels);
+  }, chart);
+  hls.on(Hls.Events.LEVEL_UPDATED, (eventName, { details }) => {
     chart.updateLevelOrTrack(details);
   }, chart);
+
   hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, (eventName, { audioTracks }) => {
     chart.removeType('audioTrack');
     chart.updateAudioTracks(audioTracks);
@@ -1320,6 +1341,17 @@ function addChartEventListeners (hls) {
     chart.removeType('subtitleTrack');
     chart.updateSubtitleTracks(subtitleTracks);
   }, chart);
+
+  hls.on(Hls.Events.AUDIO_TRACK_SWITCHED, (eventName) => {
+    // TODO: mutate level datasets
+    chart.removeType('audioTrack');
+    chart.updateAudioTracks(hls.audioTracks);
+  }, chart);
+  hls.on(Hls.Events.SUBTITLE_TRACK_SWITCH, (eventName) => {
+    // TODO: mutate level datasets
+    chart.removeType('subtitleTrack');
+    chart.updateSubtitleTracks(hls.subtitleTracks);
+  }, chart);
   hls.on(Hls.Events.AUDIO_TRACK_LOADED, updateLevelOrTrack, chart);
   hls.on(Hls.Events.SUBTITLE_TRACK_LOADED, updateLevelOrTrack, chart);
   hls.on(Hls.Events.LEVEL_PTS_UPDATED, updateLevelOrTrack, chart);
@@ -1366,17 +1398,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();
   self.hideMetrics();
+  const tabElId = $(btn).data('tab');
   $('#' + tabElId).show();
   if (hls) {
     if (tabElId === 'timelineTab') {
@@ -1386,6 +1415,7 @@ function toggleTab (tabElId) {
       chart.hide();
     }
   }
+  $(btn).css('background-color', 'orange');
 }
 
 function appendLog (textElId, message) {

package.json

@@ -66,7 +66,7 @@
     "@itsjamie/esdoc-standard-plugin": "^0.3.0",
     "@itsjamie/esdoc-typescript-plugin": "^0.3.0",
     "@types/chai": "^4.2.11",
-    "@types/mocha": "^7.0.2",
+    "@types/mocha": "^8.0.0",
     "@types/sinon-chai": "^3.2.4",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
@@ -75,7 +75,7 @@
     "chai": "^4.2.0",
     "chart.js": "^2.9.3",
     "chartjs-plugin-zoom": "^0.7.7",
-    "chromedriver": "^83.0.0",
+    "chromedriver": "^84.0.0",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.21.1",