videojs-playlist-ui - npm Package Compare versions

Comparing version 1.0.4 to 2.0.0

dist/videojs-playlist-ui.js

@@ -1,5 +0,13 @@
-/*! videojs-playlist-ui - v1.0.4 - 2015-08-06
+/*! videojs-playlist-ui - v2.0.0 - 2015-11-23
 * Copyright (c) 2015 Brightcove; Licensed Apache-2.0 */
 
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+"use strict";
+
+var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
+
+var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
+
 /*! videojs-playlist-ui - v0.0.0 - 2015-3-12
@@ -10,4 +18,2 @@ * Copyright (c) 2015 Brightcove
 // Array#indexOf analog for IE8
-"use strict";
-
 var indexOf = function indexOf(array, target) {
@@ -76,15 +82,20 @@ for (var i = 0, _length = array.length; i < _length; i++) {
 
-videojs.PlaylistMenuItem = videojs.Component.extend({
-  init: function init(player, playlistItem, settings) {
+var Component = videojs.getComponent("Component");
+
+var PlaylistMenuItem = (function (_Component) {
+  function PlaylistMenuItem(player, playlistItem, settings) {
     var _this = this;
 
+    _classCallCheck(this, PlaylistMenuItem);
+
     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();
@@ -98,43 +109,56 @@
     });
-  },
-  createEl: function createEl(item) {
-    var li = document.createElement("li");
-    li.className = "vjs-playlist-item";
+  }
 
-    // Thumbnail image
-    li.appendChild(createThumbnail(item.thumbnail));
+  _inherits(PlaylistMenuItem, _Component);
 
-    // Duration
-    if (item.duration) {
-      var duration = document.createElement("time");
-      var time = videojs.formatTime(item.duration);
-      duration.className = "vjs-playlist-duration";
-      duration.setAttribute("datetime", "PT0H0M" + item.duration + "S");
-      duration.appendChild(document.createTextNode(time));
-      li.appendChild(duration);
-    }
+  _createClass(PlaylistMenuItem, {
+    createEl: {
+      value: function createEl() {
+        var li = document.createElement("li");
+        var item = this.item;
 
-    // Name and description
-    var name = document.createElement("cite");
-    var nameValue = item.name || this.localize("Untitled Video");
-    name.className = "vjs-playlist-name";
-    name.appendChild(document.createTextNode(nameValue));
-    name.setAttribute("title", nameValue);
-    li.appendChild(name);
+        li.className = "vjs-playlist-item";
 
-    if (item.description) {
-      var description = document.createElement("p");
-      description.className = "vjs-playlist-description";
-      description.appendChild(document.createTextNode(item.description));
-      description.setAttribute("title", item.description);
-      li.appendChild(description);
+        // Thumbnail image
+        li.appendChild(createThumbnail(item.thumbnail));
+
+        // Duration
+        if (item.duration) {
+          var duration = document.createElement("time");
+          var time = videojs.formatTime(item.duration);
+          duration.className = "vjs-playlist-duration";
+          duration.setAttribute("datetime", "PT0H0M" + item.duration + "S");
+          duration.appendChild(document.createTextNode(time));
+          li.appendChild(duration);
+        }
+
+        // Name and description
+        var name = document.createElement("cite");
+        var nameValue = item.name || this.localize("Untitled Video");
+        name.className = "vjs-playlist-name";
+        name.appendChild(document.createTextNode(nameValue));
+        name.setAttribute("title", nameValue);
+        li.appendChild(name);
+
+        if (item.description) {
+          var description = document.createElement("p");
+          description.className = "vjs-playlist-description";
+          description.appendChild(document.createTextNode(item.description));
+          description.setAttribute("title", item.description);
+          li.appendChild(description);
+        }
+        return li;
+      }
     }
-    return li;
-  }
-});
+  });
 
-videojs.PlaylistMenu = videojs.Component.extend({
-  init: function init(player, settings) {
+  return PlaylistMenuItem;
+})(Component);
+
+var PlaylistMenu = (function (_Component2) {
+  function PlaylistMenu(player, settings) {
     var _this = this;
 
+    _classCallCheck(this, PlaylistMenu);
+
     if (!player.playlist) {
@@ -150,4 +174,6 @@ throw new Error("videojs-playlist is required for the playlist component");
 
-    videojs.Component.call(this, player, settings);
+    this.items = [];
 
+    Component.call(this, player, settings);
+
     // If CSS pointer events aren't supported, we have to prevent
@@ -162,3 +188,3 @@ // clicking on playlist items during ads with slightly more
 
-    if (!videojs.TOUCH_ENABLED) {
+    if (!videojs.browser.TOUCH_ENABLED) {
       this.addClass("vjs-mouse");
@@ -179,69 +205,79 @@ }
     });
-  },
-  createPlaylist_: function createPlaylist_() {
-    var playlist = this.player_.playlist() || [];
+  }
 
-    // remove any existing items
-    for (var i = 0; i < this.items.length; i++) {
-      this.removeChild(this.items[i]);
-    }
-    this.items.length = 0;
-    var overlay = this.el_.querySelector(".vjs-playlist-ad-overlay");
-    if (overlay) {
-      overlay.parentNode.removeChild(overlay);
-    }
+  _inherits(PlaylistMenu, _Component2);
 
-    // create new items
-    for (var i = 0; i < playlist.length; i++) {
-      var item = new videojs.PlaylistMenuItem(this.player_, {
-        item: playlist[i]
-      }, this.options());
-      this.items.push(item);
-      this.addChild(item);
-    }
+  _createClass(PlaylistMenu, {
+    createPlaylist_: {
+      value: function createPlaylist_() {
+        var playlist = this.player_.playlist() || [];
 
-    // Inject the ad overlay. IE<11 doesn't support "pointer-events:
-    // none" so we use this element to block clicks during ad
-    // playback.
-    overlay = document.createElement("li");
-    overlay.className = "vjs-playlist-ad-overlay";
-    this.el_.appendChild(overlay);
+        // remove any existing items
+        for (var i = 0; i < this.items.length; i++) {
+          this.removeChild(this.items[i]);
+        }
+        this.items.length = 0;
+        var overlay = this.el_.querySelector(".vjs-playlist-ad-overlay");
+        if (overlay) {
+          overlay.parentNode.removeChild(overlay);
+        }
 
-    // select the current playlist item
-    var selectedIndex = this.player_.playlist.currentItem();
-    if (this.items.length && selectedIndex >= 0) {
-      this.items[selectedIndex].addClass("vjs-selected");
-    }
-  },
-  items: [],
-  update: function update() {
-    // replace the playlist items being displayed, if necessary
-    var playlist = this.player_.playlist();
-    if (this.items.length !== playlist.length) {
-      // if the menu is currently empty or the state is obviously out
-      // of date, rebuild everything.
-      this.createPlaylist_();
-      return;
-    }
-    for (var i = 0; i < this.items.length; i++) {
-      if (this.items[i].item !== playlist[i]) {
-        // if any of the playlist items have changed, rebuild the
-        // entire playlist
-        this.createPlaylist_();
-        return;
+        // create new items
+        for (var i = 0; i < playlist.length; i++) {
+          var item = new PlaylistMenuItem(this.player_, {
+            item: playlist[i]
+          }, this.options_);
+          this.items.push(item);
+          this.addChild(item);
+        }
+
+        // Inject the ad overlay. IE<11 doesn't support "pointer-events:
+        // none" so we use this element to block clicks during ad
+        // playback.
+        overlay = document.createElement("li");
+        overlay.className = "vjs-playlist-ad-overlay";
+        this.el_.appendChild(overlay);
+
+        // select the current playlist item
+        var selectedIndex = this.player_.playlist.currentItem();
+        if (this.items.length && selectedIndex >= 0) {
+          this.items[selectedIndex].addClass("vjs-selected");
+        }
       }
-    }
+    },
+    update: {
+      value: function update() {
+        // replace the playlist items being displayed, if necessary
+        var playlist = this.player_.playlist();
+        if (this.items.length !== playlist.length) {
+          // if the menu is currently empty or the state is obviously out
+          // of date, rebuild everything.
+          this.createPlaylist_();
+          return;
+        }
+        for (var i = 0; i < this.items.length; i++) {
+          if (this.items[i].item !== playlist[i]) {
+            // if any of the playlist items have changed, rebuild the
+            // entire playlist
+            this.createPlaylist_();
+            return;
+          }
+        }
 
-    // the playlist itself is unchanged so just update the selection
-    var currentItem = this.player_.playlist.currentItem();
-    for (var i = 0; i < this.items.length; i++) {
-      if (i === currentItem) {
-        this.items[i].addClass("vjs-selected");
-      } else {
-        this.items[i].removeClass("vjs-selected");
+        // the playlist itself is unchanged so just update the selection
+        var currentItem = this.player_.playlist.currentItem();
+        for (var i = 0; i < this.items.length; i++) {
+          if (i === currentItem) {
+            this.items[i].addClass("vjs-selected");
+          } else {
+            this.items[i].removeClass("vjs-selected");
+          }
+        }
       }
     }
-  }
-});
+  });
 
+  return PlaylistMenu;
+})(Component);
+
 /**
@@ -263,6 +299,6 @@ * Initialize the plugin.
     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);
@@ -273,5 +309,9 @@ }
   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
@@ -278,0 +318,0 @@ videojs.plugin("playlistUi", playlistUi);

dist/videojs-playlist-ui.min.js

@@ -1,3 +0,3 @@
-/*! videojs-playlist-ui - v1.0.4 - 2015-08-06
+/*! videojs-playlist-ui - v2.0.0 - 2015-11-23
 * Copyright (c) 2015 Brightcove; Licensed Apache-2.0 */
-!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(){"use strict";var a=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},b=function(){var a=document.createElement("x");return a.style.cssText="pointer-events:auto","auto"===a.style.pointerEvents}(),c={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:b},d=function(a){if(!a){var b=document.createElement("div");return b.className="vjs-playlist-thumbnail",b}var c=document.createElement("picture");if(c.className="vjs-playlist-thumbnail","string"==typeof a){var d=document.createElement("img");d.src=a,c.appendChild(d)}else{for(var e=0;e<a.length-1;e++){var f=a[e],g=document.createElement("source");for(var h in f)g[h]=f[h];c.appendChild(g)}var i=a[a.length-1],d=document.createElement("img");for(var h in i)d[h]=i[h];c.appendChild(d)}return c};videojs.PlaylistMenuItem=videojs.Component.extend({init:function(b,c,d){var e=this;if(!c.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");c.el=!0,videojs.Component.call(this,b,c),this.el_=this.createEl(c.item),this.item=c.item,this.emitTapEvents(),this.on(["click","tap"],function(){b.playlist.currentItem(a(b.playlist(),e.item)),d.playOnSelect&&b.play()})},createEl:function(a){var b=document.createElement("li");if(b.className="vjs-playlist-item",b.appendChild(d(a.thumbnail)),a.duration){var c=document.createElement("time"),e=videojs.formatTime(a.duration);c.className="vjs-playlist-duration",c.setAttribute("datetime","PT0H0M"+a.duration+"S"),c.appendChild(document.createTextNode(e)),b.appendChild(c)}var f=document.createElement("cite"),g=a.name||this.localize("Untitled Video");if(f.className="vjs-playlist-name",f.appendChild(document.createTextNode(g)),f.setAttribute("title",g),b.appendChild(f),a.description){var h=document.createElement("p");h.className="vjs-playlist-description",h.appendChild(document.createTextNode(a.description)),h.setAttribute("title",a.description),b.appendChild(h)}return b}}),videojs.PlaylistMenu=videojs.Component.extend({init:function(a,b){var c=this;if(!a.playlist)throw new Error("videojs-playlist is required for the playlist component");b.el||(this.el_=document.createElement("ol"),this.el_.className=b.className,b.el=this.el_),videojs.Component.call(this,a,b),b.supportsCssPointerEvents&&this.addClass("vjs-csspointerevents"),this.createPlaylist_(),videojs.TOUCH_ENABLED||this.addClass("vjs-mouse"),a.on(["loadstart","playlistchange"],function(){c.update()}),a.on("adstart",function(){c.addClass("vjs-ad-playing")}),a.on("adend",function(){c.removeClass("vjs-ad-playing")})},createPlaylist_:function(){for(var a=this.player_.playlist()||[],b=0;b<this.items.length;b++)this.removeChild(this.items[b]);this.items.length=0;var c=this.el_.querySelector(".vjs-playlist-ad-overlay");c&&c.parentNode.removeChild(c);for(var b=0;b<a.length;b++){var d=new videojs.PlaylistMenuItem(this.player_,{item:a[b]},this.options());this.items.push(d),this.addChild(d)}c=document.createElement("li"),c.className="vjs-playlist-ad-overlay",this.el_.appendChild(c);var e=this.player_.playlist.currentItem();this.items.length&&e>=0&&this.items[e].addClass("vjs-selected")},items:[],update:function(){var a=this.player_.playlist();if(this.items.length!==a.length)return void this.createPlaylist_();for(var b=0;b<this.items.length;b++)if(this.items[b].item!==a[b])return void this.createPlaylist_();for(var c=this.player_.playlist.currentItem(),b=0;b<this.items.length;b++)b===c?this.items[b].addClass("vjs-selected"):this.items[b].removeClass("vjs-selected")}});var e=function(a){var b=this,d=void 0,e=void 0;if(!b.playlist)throw new Error("videojs-playlist is required for the playlist component");"undefined"!=typeof HTMLElement&&a instanceof HTMLElement||a&&1===a.nodeType?(e=a,d=videojs.util.mergeOptions(c)):(d=videojs.util.mergeOptions(c,a),e=document.querySelector("."+d.className)),d.el=e,b.playlistMenu=new videojs.PlaylistMenu(b,d)};videojs.plugin("playlistUi",e)},{}]},{},[1]);
+!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(){"use strict";var a=function(){function a(a,b){for(var c in b){var d=b[c];d.configurable=!0,d.value&&(d.writable=!0)}Object.defineProperties(a,b)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),b=function(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function, not "+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(a.__proto__=b)},c=function(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")},d=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},e=function(){var a=document.createElement("x");return a.style.cssText="pointer-events:auto","auto"===a.style.pointerEvents}(),f={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:e},g=function(a){if(!a){var b=document.createElement("div");return b.className="vjs-playlist-thumbnail",b}var c=document.createElement("picture");if(c.className="vjs-playlist-thumbnail","string"==typeof a){var d=document.createElement("img");d.src=a,c.appendChild(d)}else{for(var e=0;e<a.length-1;e++){var f=a[e],g=document.createElement("source");for(var h in f)g[h]=f[h];c.appendChild(g)}var i=a[a.length-1],d=document.createElement("img");for(var h in i)d[h]=i[h];c.appendChild(d)}return c},h=videojs.getComponent("Component"),i=function(e){function f(a,b,e){var g=this;if(c(this,f),!b.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");this.item=b.item,h.call(this,a,b),this.emitTapEvents(),this.on(["click","tap"],function(){a.playlist.currentItem(d(a.playlist(),g.item)),e.playOnSelect&&a.play()})}return b(f,e),a(f,{createEl:{value:function(){var a=document.createElement("li"),b=this.item;if(a.className="vjs-playlist-item",a.appendChild(g(b.thumbnail)),b.duration){var c=document.createElement("time"),d=videojs.formatTime(b.duration);c.className="vjs-playlist-duration",c.setAttribute("datetime","PT0H0M"+b.duration+"S"),c.appendChild(document.createTextNode(d)),a.appendChild(c)}var e=document.createElement("cite"),f=b.name||this.localize("Untitled Video");if(e.className="vjs-playlist-name",e.appendChild(document.createTextNode(f)),e.setAttribute("title",f),a.appendChild(e),b.description){var h=document.createElement("p");h.className="vjs-playlist-description",h.appendChild(document.createTextNode(b.description)),h.setAttribute("title",b.description),a.appendChild(h)}return a}}}),f}(h),j=function(d){function e(a,b){var d=this;if(c(this,e),!a.playlist)throw new Error("videojs-playlist is required for the playlist component");b.el||(this.el_=document.createElement("ol"),this.el_.className=b.className,b.el=this.el_),this.items=[],h.call(this,a,b),b.supportsCssPointerEvents&&this.addClass("vjs-csspointerevents"),this.createPlaylist_(),videojs.browser.TOUCH_ENABLED||this.addClass("vjs-mouse"),a.on(["loadstart","playlistchange"],function(){d.update()}),a.on("adstart",function(){d.addClass("vjs-ad-playing")}),a.on("adend",function(){d.removeClass("vjs-ad-playing")})}return b(e,d),a(e,{createPlaylist_:{value:function(){for(var a=this.player_.playlist()||[],b=0;b<this.items.length;b++)this.removeChild(this.items[b]);this.items.length=0;var c=this.el_.querySelector(".vjs-playlist-ad-overlay");c&&c.parentNode.removeChild(c);for(var b=0;b<a.length;b++){var d=new i(this.player_,{item:a[b]},this.options_);this.items.push(d),this.addChild(d)}c=document.createElement("li"),c.className="vjs-playlist-ad-overlay",this.el_.appendChild(c);var e=this.player_.playlist.currentItem();this.items.length&&e>=0&&this.items[e].addClass("vjs-selected")}},update:{value:function(){var a=this.player_.playlist();if(this.items.length!==a.length)return void this.createPlaylist_();for(var b=0;b<this.items.length;b++)if(this.items[b].item!==a[b])return void this.createPlaylist_();for(var c=this.player_.playlist.currentItem(),b=0;b<this.items.length;b++)b===c?this.items[b].addClass("vjs-selected"):this.items[b].removeClass("vjs-selected")}}}),e}(h),k=function(a){var b=this,c=void 0,d=void 0;if(!b.playlist)throw new Error("videojs-playlist is required for the playlist component");"undefined"!=typeof HTMLElement&&a instanceof HTMLElement||a&&1===a.nodeType?(d=a,c=videojs.mergeOptions(f)):(c=videojs.mergeOptions(f,a),d=document.querySelector("."+c.className)),c.el=d,b.playlistMenu=new j(b,c)};videojs.registerComponent("PlaylistMenu",j),videojs.registerComponent("PlaylistMenuItem",i),videojs.plugin("playlistUi",k)},{}]},{},[1]);

lib/videojs-playlist-ui.js

@@ -28,3 +28,2 @@ /*! videojs-playlist-ui - v0.0.0 - 2015-3-12
 
-
 const createThumbnail = function(thumbnail) {
@@ -71,13 +70,17 @@ if (!thumbnail) {
 
-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();
@@ -91,5 +94,8 @@
     });
-  },
-  createEl: function(item) {
+  }
+
+  createEl() {
     let li = document.createElement('li');
+    let item = this.item;
+
     li.className = 'vjs-playlist-item';
@@ -127,6 +133,7 @@
   }
-});
+}
 
-videojs.PlaylistMenu = videojs.Component.extend({
-  init (player, settings) {
+class PlaylistMenu extends Component {
+
+  constructor(player, settings) {
     if (!player.playlist) {
@@ -142,4 +149,6 @@ throw new Error('videojs-playlist is required for the playlist component');
 
-    videojs.Component.call(this, player, settings);
+    this.items = [];
 
+    Component.call(this, player, settings);
+
     // If CSS pointer events aren't supported, we have to prevent
@@ -154,3 +163,3 @@ // clicking on playlist items during ads with slightly more
 
-    if (!videojs.TOUCH_ENABLED) {
+    if (!videojs.browser.TOUCH_ENABLED) {
       this.addClass('vjs-mouse');
@@ -171,3 +180,4 @@ }
     });
-  },
+  }
+
   createPlaylist_() {
@@ -188,5 +198,5 @@ const playlist = this.player_.playlist() || [];
     for (let i = 0; i < playlist.length; i++) {
-      let item = new videojs.PlaylistMenuItem(this.player_, {
+      let item = new PlaylistMenuItem(this.player_, {
         item: playlist[i]
-      }, this.options());
+      }, this.options_);
       this.items.push(item);
@@ -208,4 +218,4 @@ this.addChild(item);
     }
-  },
-  items: [],
+  }
+
   update() {
@@ -239,3 +249,3 @@ // replace the playlist items being displayed, if necessary
   }
-});
+}
 
@@ -259,6 +269,6 @@ /**
     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);
@@ -269,6 +279,10 @@ }
   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

 {
   "name": "videojs-playlist-ui",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "author": "Brightcove",
@@ -25,2 +25,3 @@ "description": "A playlist video picker for video.js",
     "browserify": "^9.0.3",
+    "grunt": "^0.4.0",
     "grunt-browserify": "^3.5.0",
@@ -39,5 +40,5 @@ "grunt-cli": "^0.1.13",
     "qunitjs": "^1.12",
-    "video.js": "^4.5",
+    "video.js": "^5.2.0",
     "videojs-playlist": "^1.0.0"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47558

increased by6.1%

Lines of code

946

increased by3.16%

Worsened metrics

Dev dependency count

19

increased by5.56%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes