Updates for VideoJS 5.0

example.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Video.js Playlist Ui</title>
 
-  <link href="node_modules/video.js/dist/video-js/video-js.css" rel="stylesheet">
+  <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
   <link href="dist/videojs-playlist-ui.vertical.css" rel="stylesheet">
 
   <style>
@@ -42,12 +42,12 @@
     <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
   </video>
   <ol class="vjs-playlist">
-    <!-- 
+    <!--
          The contents of this element will be filled based on the
-         currently loaded playlist 
+         currently loaded playlist
       -->
   </ol>
-  <script src="node_modules/video.js/dist/video-js/video.dev.js"></script>
+  <script src="node_modules/video.js/dist/video.js"></script>
   <script src="node_modules/videojs-playlist/dist/global.js"></script>
   <script src="dist/videojs-playlist-ui.js"></script>
   <script>

lib/videojs-playlist-ui.js

@@ -21,10 +21,10 @@ const supportsCssPointerEvents = (() => {
 
 const defaults = {
   className: 'vjs-playlist',
+  playOnSelect: false,
   supportsCssPointerEvents
 };
 
-
 const createThumbnail = function(thumbnail) {
   if (!thumbnail) {
     let placeholder = document.createElement('div');
@@ -66,17 +66,21 @@ const createThumbnail = function(thumbnail) {
   return picture;
 };
 
-videojs.PlaylistMenuItem = videojs.Component.extend({
-  init: function(player, playlistItem, settings) {
+const Component = videojs.getComponent('Component');
+
+class PlaylistMenuItem extends Component {
+
+  constructor(player, playlistItem, settings) {
     if (!playlistItem.item) {
       throw new Error('Cannot construct a PlaylistMenuItem without an item option');
     }
-    // stub out the element so Component doesn't construct one
-    playlistItem.el = true;
-    videojs.Component.call(this, player, playlistItem);
-    this.el_ = this.createEl(playlistItem.item);
 
+    // This allows the `createEl` method to properly set up the element,
+    // which happens implicitly in the `Component` constructor call.
     this.item = playlistItem.item;
+
+    Component.call(this, player, playlistItem);
+
     this.emitTapEvents();
 
     this.on(['click', 'tap'], (event) => {
@@ -85,9 +89,12 @@ videojs.PlaylistMenuItem = videojs.Component.extend({
         player.play();
       }
     });
-  },
-  createEl: function(item) {
+  }
+
+  createEl() {
     let li = document.createElement('li');
+    let item = this.item;
+
     li.className = 'vjs-playlist-item';
 
     // Thumbnail image
@@ -120,10 +127,11 @@ videojs.PlaylistMenuItem = videojs.Component.extend({
     }
     return li;
   }
-});
+}
 
-videojs.PlaylistMenu = videojs.Component.extend({
-  init (player, settings) {
+class PlaylistMenu extends Component {
+
+  constructor(player, settings) {
     if (!player.playlist) {
       throw new Error('videojs-playlist is required for the playlist component');
     }
@@ -134,7 +142,9 @@ videojs.PlaylistMenu = videojs.Component.extend({
       settings.el = this.el_;
     }
 
-    videojs.Component.call(this, player, settings);
+    this.items = [];
+
+    Component.call(this, player, settings);
 
     // If CSS pointer events aren't supported, we have to prevent
     // clicking on playlist items during ads with slightly more
@@ -143,9 +153,9 @@ videojs.PlaylistMenu = videojs.Component.extend({
       this.addClass('vjs-csspointerevents');
     }
 
-    this.createPlaylist_(settings);
+    this.createPlaylist_();
 
-    if (!videojs.TOUCH_ENABLED) {
+    if (!videojs.browser.TOUCH_ENABLED) {
       this.addClass('vjs-mouse');
     }
 
@@ -161,8 +171,9 @@ videojs.PlaylistMenu = videojs.Component.extend({
     player.on('adend', () => {
       this.removeClass('vjs-ad-playing');
     });
-  },
-  createPlaylist_(settings) {
+  }
+
+  createPlaylist_() {
     const playlist = this.player_.playlist() || [];
 
     // remove any existing items
@@ -177,9 +188,9 @@ videojs.PlaylistMenu = videojs.Component.extend({
 
     // create new items
     for (let i = 0; i < playlist.length; i++) {
-      let item = new videojs.PlaylistMenuItem(this.player_, {
+      let item = new PlaylistMenuItem(this.player_, {
         item: playlist[i]
-      }, settings);
+      }, this.options_);
       this.items.push(item);
       this.addChild(item);
     }
@@ -196,8 +207,8 @@ videojs.PlaylistMenu = videojs.Component.extend({
     if (this.items.length && selectedIndex >= 0) {
       this.items[selectedIndex].addClass('vjs-selected');
     }
-  },
-  items: [],
+  }
+
   update() {
     // replace the playlist items being displayed, if necessary
     const playlist = this.player_.playlist();
@@ -226,7 +237,7 @@ videojs.PlaylistMenu = videojs.Component.extend({
       }
     }
   }
-});
+}
 
 /**
  * Initialize the plugin.
@@ -245,17 +256,21 @@ const playlistUi = function(options) {
       // IE8 does not define HTMLElement so use a hackier type check
       (options && options.nodeType === 1)) {
     elem = options;
-    settings = videojs.util.mergeOptions(defaults);
+    settings = videojs.mergeOptions(defaults);
   } else {
     // lookup the elements to use by class name
-    settings = videojs.util.mergeOptions(defaults, options);
+    settings = videojs.mergeOptions(defaults, options);
     elem = document.querySelector('.' + settings.className);
   }
 
   // build the playlist menu
   settings.el = elem;
-  player.playlistMenu = new videojs.PlaylistMenu(player, settings);
+  player.playlistMenu = new PlaylistMenu(player, settings);
 };
 
+// register components
+videojs.registerComponent('PlaylistMenu', PlaylistMenu);
+videojs.registerComponent('PlaylistMenuItem', PlaylistMenuItem);
+
 // register the plugin
 videojs.plugin('playlistUi', playlistUi);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "videojs-playlist-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "author": "Brightcove",
   "description": "A playlist video picker for video.js",
   "license": "Apache-2.0",
@@ -22,6 +22,7 @@
     "autoprefixer-core": "^5.1.8",
     "babelify": "^5.0.4",
     "browserify": "^9.0.3",
+    "grunt": "^0.4.0",
     "grunt-browserify": "^3.5.0",
     "grunt-cli": "^0.1.13",
     "grunt-contrib-clean": "^0.4",
@@ -35,7 +36,7 @@
     "load-grunt-tasks": "^3.1.0",
     "postcss-pseudoelements": "^2.1.1",
     "qunitjs": "^1.12",
-    "video.js": "^4.5",
+    "video.js": "^5.2.0",
     "videojs-playlist": "^1.0.0"
   }
 }

test/index.html

@@ -9,7 +9,7 @@
   <div id="qunit"></div>
   <div id="qunit-fixture"></div>
   <script src="../node_modules/qunitjs/qunit/qunit.js"></script>
-  <script src="../node_modules/video.js/dist/video-js/video.dev.js"></script>
+  <script src="../node_modules/video.js/dist/video.js"></script>
   <script src="../node_modules/videojs-playlist/dist/bundle.js"></script>
   <script src="../dist/videojs-playlist-ui.js"></script>
   <script src="../dist/videojs-playlist-ui.test.js"></script>

test/videojs-playlist-ui.test.js

@@ -44,34 +44,37 @@ const resolveUrl = url => {
   return a.href;
 };
 
+const Html5 = videojs.getComponent('Html5');
 
 test('the environment is sane', function() {
   ok(true, 'everything is swell');
 });
 
 const setup = function() {
+  let fixture = document.querySelector('#qunit-fixture');
+
   // force HTML support so the tests run in a reasonable
   // environment under phantomjs
-  realIsHtmlSupported = videojs.Html5.isSupported;
-  videojs.Html5.isSupported = function() {
+  realIsHtmlSupported = Html5.isSupported;
+  Html5.isSupported = function() {
     return true;
   };
 
   // create a video element
   var video = document.createElement('video');
-  document.querySelector('#qunit-fixture').appendChild(video);
+  fixture.appendChild(video);
 
   // create a video.js player
   player = videojs(video);
 
   // create a default playlist element
   let elem = document.createElement('ol');
   elem.className = 'vjs-playlist';
-  document.querySelector('#qunit-fixture').appendChild(elem);
+  fixture.appendChild(elem);
 };
 
 const teardown = function() {
-  videojs.Html5.isSupported = realIsHtmlSupported;
+  Html5.isSupported = realIsHtmlSupported;
   player.dispose();
   player = null;
 };
@@ -141,15 +144,15 @@ test('can auto-setup elements with a custom class', function() {
 });
 
 test('specializes the class name if touch input is absent', function() {
-  const touchEnabled = videojs.TOUCH_ENABLED;
-  videojs.TOUCH_ENABLED = false;
+  const touchEnabled = videojs.browser.TOUCH_ENABLED;
+  videojs.browser.TOUCH_ENABLED = videojs.TOUCH_ENABLED = false;
 
   player.playlist(playlist);
   player.playlistUi();
 
   ok(player.playlistMenu.hasClass('vjs-mouse'), 'marked the playlist menu');
 
-  videojs.TOUCH_ENABLED = touchEnabled;
+  videojs.browser.TOUCH_ENABLED = videojs.TOUCH_ENABLED = touchEnabled;
 });
 
 QUnit.module('Playlist Component', {
@@ -166,6 +169,7 @@ test('includes the video name if provided', function() {
   player.playlistUi();
 
   let items = document.querySelectorAll('.vjs-playlist-item');
+
   equal(items[0].querySelector('.vjs-playlist-name').textContent,
         playlist[0].name,
         'wrote the name');
@@ -313,7 +317,7 @@ test('updates on "playlistchange", different lengths', function() {
   equal(items.length, playlist.length, 'updated with the new items');
 });
 
-test('updates on "playliastchange", equal lengths', function() {
+test('updates on "playlistchange", equal lengths', function() {
   player.playlist([{sources:[]},{sources:[]}]);
   player.playlistUi();
 
@@ -328,7 +332,7 @@ test('updates on "playliastchange", equal lengths', function() {
   equal(player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
 });
 
-test('updates on "playliastchange", update selection', function() {
+test('updates on "playlistchange", update selection', function() {
   player.playlist(playlist);
   player.currentSrc = function() {
     return playlist[0].sources[0].src;