fix: race condition preventing qualityLevels from being populating

index.html

@@ -51,6 +51,7 @@
     <li><a href="test/">Run unit tests in browser.</a></li>
     <li><a href="docs/api/">Read generated docs.</a></li>
     <li><a href="examples">Browse Examples</a></li>
+    <li><a href="utils/stats/">Stats</a></li>
   </ul>
 
   <script src="node_modules/video.js/dist/alt/video.core.js"></script>

scripts/netlify.js

@@ -1,12 +1,14 @@
 const path = require('path');
 const sh = require('shelljs');
-const fs = require('fs');
-
-const vjs = 'node_modules/video.js/dist/alt/video.core.js';
-const vjsCss = 'node_modules/video.js/dist/video-js.css';
-const eme = 'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme.js';
 const deployDir = 'deploy';
-const files = [vjs, vjsCss, eme];
+
+const files = [
+  'node_modules/video.js/dist/video-js.css',
+  'node_modules/video.js/dist/alt/video.core.js',
+  'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme.js',
+  'node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.js',
+  'node_modules/d3/d3.min.js'
+];
 
 // cleanup previous deploy
 sh.rm('-rf', deployDir);
@@ -18,7 +20,7 @@ files
 .map((file) => path.dirname(file))
 .forEach((dir) => sh.mkdir('-p', path.join(deployDir, dir)));
 
-// copy over files, dist, and html files
+// copy files/folders to deploy dir
 files
-.concat('dist', 'index.html', 'index.min.html')
+.concat('dist', 'index.html', 'index.min.html', 'utils')
 .forEach((file) => sh.cp('-r', file, path.join(deployDir, file)));

src/rendition-mixin.js

@@ -92,6 +92,9 @@ let renditionSelectionMixin = function(hlsHandler) {
 
   // Add a single API-specific function to the HlsHandler instance
   hlsHandler.representations = () => {
+    if (!playlists || !playlists.master || !playlists.master.playlists) {
+      return [];
+    }
     return playlists
       .master
       .playlists

src/videojs-http-streaming.js

@@ -716,7 +716,7 @@ class HlsHandler extends Component {
       this.tech_.trigger('progress');
     });
 
-    this.tech_.ready(() => this.setupQualityLevels_());
+    this.setupQualityLevels_();
 
     // do nothing if the tech has been disposed already
     // this can occur if someone sets the src in player.ready(), for instance
@@ -737,17 +737,21 @@ class HlsHandler extends Component {
   setupQualityLevels_() {
     let player = videojs.players[this.tech_.options_.playerId];
 
-    if (player && player.qualityLevels) {
-      this.qualityLevels_ = player.qualityLevels();
+    // if there isn't a player or there isn't a qualityLevels plugin
+    // or qualityLevels_ listeners have already been setup, do nothing.
+    if (!player || !player.qualityLevels || this.qualityLevels_) {
+      return;
+    }
 
-      this.masterPlaylistController_.on('selectedinitialmedia', () => {
-        handleHlsLoadedMetadata(this.qualityLevels_, this);
-      });
+    this.qualityLevels_ = player.qualityLevels();
 
-      this.playlists.on('mediachange', () => {
-        handleHlsMediaChange(this.qualityLevels_, this.playlists);
-      });
-    }
+    this.masterPlaylistController_.on('selectedinitialmedia', () => {
+      handleHlsLoadedMetadata(this.qualityLevels_, this);
+    });
+
+    this.playlists.on('mediachange', () => {
+      handleHlsMediaChange(this.qualityLevels_, this.playlists);
+    });
   }
 
   /**

test/videojs-http-streaming.test.js

@@ -3094,8 +3094,7 @@ QUnit.test('passes useCueTags hls option to master playlist controller', functio
   videojs.options.hls = origHlsOptions;
 });
 
-// TODO: This test fails intermittently. Turn on when fixed to always pass.
-QUnit.skip('populates quality levels list when available', function(assert) {
+QUnit.test('populates quality levels list when available', function(assert) {
   this.player.src({
     src: 'manifest/master.m3u8',
     type: 'application/vnd.apple.mpegurl'

utils/stats/index.html

@@ -20,7 +20,7 @@
 
   <!-- player stats visualization -->
   <link href="stats.css" rel="stylesheet">
-  <script src="/node_modules/d3/d3.min.js"></script>
+  <script src="../../node_modules/d3/d3.min.js"></script>
 
   <style>
     body {
@@ -345,25 +345,23 @@ <h3>Timed Metadata</h3>
         videojs.Hls.displayStats(document.querySelector('.switching-stats'), player);
         videojs.Hls.displayCues(document.querySelector('.segment-timeline'), player);
 
-        player.ready(function() {
-          var qualityLevels = player.qualityLevels();
+        var qualityLevels = player.qualityLevels();
 
-          qualityLevels.on('addqualitylevel', function(event) {
-            createQualityButton(event.qualityLevel, qualityButtons);
-          });
+        qualityLevels.on('addqualitylevel', function(event) {
+          createQualityButton(event.qualityLevel, qualityButtons);
+        });
 
-          qualityLevels.on('change', function(event) {
-            for (var i = 0; i < qualityLevels.length; i++) {
-              var level = qualityLevels[i];
-              var button = document.getElementById('quality-level-' + level.id);
+        qualityLevels.on('change', function(event) {
+          for (var i = 0; i < qualityLevels.length; i++) {
+            var level = qualityLevels[i];
+            var button = document.getElementById('quality-level-' + level.id);
 
-              button.classList.remove('selected');
-            }
+            button.classList.remove('selected');
+          }
 
-            var selected = qualityLevels[event.selectedIndex];
-            var button = document.getElementById('quality-level-' + selected.id);
-            button.classList.add('selected');
-          });
+          var selected = qualityLevels[event.selectedIndex];
+          var button = document.getElementById('quality-level-' + selected.id);
+          button.classList.add('selected');
         });
       });
     }