videojs-playlist-ui - npm Package Compare versions

Comparing version 2.3.0 to 3.0.0

dist/videojs-playlist-ui.js

@@ -1,2 +0,2 @@
-/*! videojs-playlist-ui - v2.3.0 - 2016-07-18
+/*! videojs-playlist-ui - v3.0.0 - 2016-09-08
 * Copyright (c) 2016 Brightcove; Licensed Apache-2.0 */
@@ -61,6 +61,13 @@
 
+var upNext = function upNext(el) {
+  el.addClass("vjs-up-next");
+};
+var notUpNext = function notUpNext(el) {
+  el.removeClass("vjs-up-next");
+};
+
 var createThumbnail = function createThumbnail(thumbnail) {
   if (!thumbnail) {
     var placeholder = document.createElement("div");
-    placeholder.className = "vjs-playlist-thumbnail";
+    placeholder.className = "vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder";
     return placeholder;
@@ -122,4 +129,2 @@ }
     this.on("keydown", this.handleKeyDown_);
-    this.on(["focus", "mouseover"], this.addPlayIcon_);
-    this.on(["blur", "mouseout"], this.removePlayIcon_);
   }
@@ -147,20 +152,2 @@
     },
-    addPlayIcon_: {
-      value: function addPlayIcon_() {
-        videojs.addClass(this.thumbnail, "vjs-icon-play");
-        videojs.removeClass(this.thumbnail, "vjs-playlist-now-playing");
-      }
-    },
-    removePlayIcon_: {
-      value: function removePlayIcon_() {
-        if (document.activeElement === this.el()) {
-          return;
-        }
-
-        videojs.removeClass(this.thumbnail, "vjs-icon-play");
-        if (this.hasClass("vjs-selected")) {
-          videojs.addClass(this.thumbnail, "vjs-playlist-now-playing");
-        }
-      }
-    },
     createEl: {
@@ -188,18 +175,31 @@ value: function createEl() {
 
-        // 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);
+        // Now playing
+        var nowPlayingEl = document.createElement("span");
+        var nowPlayingText = this.localize("Now Playing");
+        nowPlayingEl.className = "vjs-playlist-now-playing";
+        nowPlayingEl.appendChild(document.createTextNode(nowPlayingText));
+        nowPlayingEl.setAttribute("title", nowPlayingText);
+        this.thumbnail.appendChild(nowPlayingEl);
 
-        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);
-        }
+        // Title container contains title and "up next"
+        var titleContainerEl = document.createElement("div");
+        titleContainerEl.className = "vjs-playlist-title-container";
+        this.thumbnail.appendChild(titleContainerEl);
 
+        // Up next
+        var upNextEl = document.createElement("span");
+        var upNextText = this.localize("Up Next");
+        upNextEl.className = "vjs-up-next-text";
+        upNextEl.appendChild(document.createTextNode(upNextText));
+        upNextEl.setAttribute("title", upNextText);
+        titleContainerEl.appendChild(upNextEl);
+
+        // Video title
+        var titleEl = document.createElement("cite");
+        var titleText = item.name || this.localize("Untitled Video");
+        titleEl.className = "vjs-playlist-name";
+        titleEl.appendChild(document.createTextNode(titleText));
+        titleEl.setAttribute("title", titleText);
+        titleContainerEl.appendChild(titleEl);
+
         return li;
@@ -281,12 +281,16 @@ }
         var playlist = this.player_.playlist() || [];
+        var list = document.querySelector(".vjs-playlist-item-list");
+        var overlay = this.el_.querySelector(".vjs-playlist-ad-overlay");
 
+        if (!list) {
+          list = document.createElement("ol");
+          list.className = "vjs-playlist-item-list";
+          this.el_.appendChild(list);
+        }
+
         // remove any existing items
         for (var i = 0; i < this.items.length; i++) {
-          this.removeChild(this.items[i]);
+          list.removeChild(this.items[i].el_);
         }
         this.items.length = 0;
-        var overlay = this.el_.querySelector(".vjs-playlist-ad-overlay");
-        if (overlay) {
-          overlay.parentNode.removeChild(overlay);
-        }
 
@@ -299,3 +303,3 @@ // create new items
           this.items.push(item);
-          this.addChild(item);
+          list.appendChild(item.el_);
         }
@@ -306,5 +310,10 @@
         // playback.
-        overlay = document.createElement("li");
-        overlay.className = "vjs-playlist-ad-overlay";
-        this.el_.appendChild(overlay);
+        if (!overlay) {
+          var _overlay = document.createElement("li");
+          _overlay.className = "vjs-playlist-ad-overlay";
+          list.appendChild(_overlay);
+        } else {
+          // Move overlay to end of list
+          list.appendChild(overlay);
+        }
 
@@ -351,4 +360,9 @@ // select the current playlist item
             }
+            notUpNext(item);
+          } else if (i === currentItem + 1) {
+            removeSelectedClass(item);
+            upNext(item);
           } else {
             removeSelectedClass(item);
+            notUpNext(item);
           }
@@ -355,0 +369,0 @@ }

dist/videojs-playlist-ui.min.js

@@ -1,3 +0,3 @@
-/*! videojs-playlist-ui - v2.3.0 - 2016-07-18
+/*! videojs-playlist-ui - v3.0.0 - 2016-09-08
 * Copyright (c) 2016 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(){(function(a){"use strict";var b=function(a){return a&&a.__esModule?a["default"]:a},c=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}}(),d=function r(a,b,c){var d=Object.getOwnPropertyDescriptor(a,b);if(void 0===d){var e=Object.getPrototypeOf(a);return null===e?void 0:r(e,b,c)}if("value"in d&&d.writable)return d.value;var f=d.get;return void 0===f?void 0:f.call(c)},e=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)},f=function(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")},g=b("undefined"!=typeof window?window.videojs:"undefined"!=typeof a?a.videojs:null),h=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},i=function(){var a=document.createElement("x");return a.style.cssText="pointer-events:auto","auto"===a.style.pointerEvents}(),j={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:i},k=function(a){a.addClass("vjs-selected")},l=function(a){a.removeClass("vjs-selected"),a.thumbnail&&g.removeClass(a.thumbnail,"vjs-playlist-now-playing")},m=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},n=g.getComponent("Component"),o=function(a){function b(a,c,e){if(f(this,b),!c.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");d(Object.getPrototypeOf(b.prototype),"constructor",this).call(this,a,c),this.item=c.item,this.playOnSelect=e.playOnSelect,this.emitTapEvents(),this.on(["click","tap"],this.switchPlaylistItem_),this.on("keydown",this.handleKeyDown_),this.on(["focus","mouseover"],this.addPlayIcon_),this.on(["blur","mouseout"],this.removePlayIcon_)}return e(b,a),c(b,{handleKeyDown_:{value:function(a){(13===a.which||32===a.which)&&this.switchPlaylistItem_()}},switchPlaylistItem_:{value:function(){this.player_.playlist.currentItem(h(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()}},addPlayIcon_:{value:function(){g.addClass(this.thumbnail,"vjs-icon-play"),g.removeClass(this.thumbnail,"vjs-playlist-now-playing")}},removePlayIcon_:{value:function(){document.activeElement!==this.el()&&(g.removeClass(this.thumbnail,"vjs-icon-play"),this.hasClass("vjs-selected")&&g.addClass(this.thumbnail,"vjs-playlist-now-playing"))}},createEl:{value:function(){var a=document.createElement("li"),b=this.options_.item;if(a.className="vjs-playlist-item",a.setAttribute("tabIndex",0),this.thumbnail=m(b.thumbnail),a.appendChild(this.thumbnail),b.duration){var c=document.createElement("time"),d=g.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}}}),b}(n),p=function(a){function b(a,c){var e=this;if(f(this,b),!a.playlist)throw new Error("videojs-playlist is required for the playlist component");d(Object.getPrototypeOf(b.prototype),"constructor",this).call(this,a,c),this.items=[],c.supportsCssPointerEvents&&this.addClass("vjs-csspointerevents"),this.createPlaylist_(),g.browser.TOUCH_ENABLED||this.addClass("vjs-mouse"),a.on(["loadstart","playlistchange"],function(){e.update()}),a.on("adstart",function(){e.addClass("vjs-ad-playing")}),a.on("adend",function(){a.ended()?a.one("ended",function(){e.removeClass("vjs-ad-playing")}):e.removeClass("vjs-ad-playing")})}return e(b,a),c(b,{createEl:{value:function(){var a=this.options_;if(a.el)return a.el;var b=document.createElement("ol");return b.className=a.className,a.el=b,b}},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 o(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();if(this.items.length&&e>=0){k(this.items[e]);var f=this.items[e].$(".vjs-playlist-thumbnail");f&&g.addClass(f,"vjs-playlist-now-playing")}}},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++){var d=this.items[b];b===c?(k(d),document.activeElement!==d.el()&&g.addClass(d.thumbnail,"vjs-playlist-now-playing")):l(d)}}}}),b}(n),q=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=g.mergeOptions(j)):(c=g.mergeOptions(j,a),d=document.querySelector("."+c.className)),c.el=d,b.playlistMenu=new p(b,c)};g.registerComponent("PlaylistMenu",p),g.registerComponent("PlaylistMenuItem",o),g.plugin("playlistUi",q)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[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(){(function(a){"use strict";var b=function(a){return a&&a.__esModule?a["default"]:a},c=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}}(),d=function t(a,b,c){var d=Object.getOwnPropertyDescriptor(a,b);if(void 0===d){var e=Object.getPrototypeOf(a);return null===e?void 0:t(e,b,c)}if("value"in d&&d.writable)return d.value;var f=d.get;return void 0===f?void 0:f.call(c)},e=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)},f=function(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")},g=b("undefined"!=typeof window?window.videojs:"undefined"!=typeof a?a.videojs:null),h=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},i=function(){var a=document.createElement("x");return a.style.cssText="pointer-events:auto","auto"===a.style.pointerEvents}(),j={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:i},k=function(a){a.addClass("vjs-selected")},l=function(a){a.removeClass("vjs-selected"),a.thumbnail&&g.removeClass(a.thumbnail,"vjs-playlist-now-playing")},m=function(a){a.addClass("vjs-up-next")},n=function(a){a.removeClass("vjs-up-next")},o=function(a){if(!a){var b=document.createElement("div");return b.className="vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder",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},p=g.getComponent("Component"),q=function(a){function b(a,c,e){if(f(this,b),!c.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");d(Object.getPrototypeOf(b.prototype),"constructor",this).call(this,a,c),this.item=c.item,this.playOnSelect=e.playOnSelect,this.emitTapEvents(),this.on(["click","tap"],this.switchPlaylistItem_),this.on("keydown",this.handleKeyDown_)}return e(b,a),c(b,{handleKeyDown_:{value:function(a){(13===a.which||32===a.which)&&this.switchPlaylistItem_()}},switchPlaylistItem_:{value:function(){this.player_.playlist.currentItem(h(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()}},createEl:{value:function(){var a=document.createElement("li"),b=this.options_.item;if(a.className="vjs-playlist-item",a.setAttribute("tabIndex",0),this.thumbnail=o(b.thumbnail),a.appendChild(this.thumbnail),b.duration){var c=document.createElement("time"),d=g.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("span"),f=this.localize("Now Playing");e.className="vjs-playlist-now-playing",e.appendChild(document.createTextNode(f)),e.setAttribute("title",f),this.thumbnail.appendChild(e);var h=document.createElement("div");h.className="vjs-playlist-title-container",this.thumbnail.appendChild(h);var i=document.createElement("span"),j=this.localize("Up Next");i.className="vjs-up-next-text",i.appendChild(document.createTextNode(j)),i.setAttribute("title",j),h.appendChild(i);var k=document.createElement("cite"),l=b.name||this.localize("Untitled Video");return k.className="vjs-playlist-name",k.appendChild(document.createTextNode(l)),k.setAttribute("title",l),h.appendChild(k),a}}}),b}(p),r=function(a){function b(a,c){var e=this;if(f(this,b),!a.playlist)throw new Error("videojs-playlist is required for the playlist component");d(Object.getPrototypeOf(b.prototype),"constructor",this).call(this,a,c),this.items=[],c.supportsCssPointerEvents&&this.addClass("vjs-csspointerevents"),this.createPlaylist_(),g.browser.TOUCH_ENABLED||this.addClass("vjs-mouse"),a.on(["loadstart","playlistchange"],function(){e.update()}),a.on("adstart",function(){e.addClass("vjs-ad-playing")}),a.on("adend",function(){a.ended()?a.one("ended",function(){e.removeClass("vjs-ad-playing")}):e.removeClass("vjs-ad-playing")})}return e(b,a),c(b,{createEl:{value:function(){var a=this.options_;if(a.el)return a.el;var b=document.createElement("ol");return b.className=a.className,a.el=b,b}},createPlaylist_:{value:function(){var a=this.player_.playlist()||[],b=document.querySelector(".vjs-playlist-item-list"),c=this.el_.querySelector(".vjs-playlist-ad-overlay");b||(b=document.createElement("ol"),b.className="vjs-playlist-item-list",this.el_.appendChild(b));for(var d=0;d<this.items.length;d++)b.removeChild(this.items[d].el_);this.items.length=0;for(var d=0;d<a.length;d++){var e=new q(this.player_,{item:a[d]},this.options_);this.items.push(e),b.appendChild(e.el_)}if(c)b.appendChild(c);else{var f=document.createElement("li");f.className="vjs-playlist-ad-overlay",b.appendChild(f)}var h=this.player_.playlist.currentItem();if(this.items.length&&h>=0){k(this.items[h]);var i=this.items[h].$(".vjs-playlist-thumbnail");i&&g.addClass(i,"vjs-playlist-now-playing")}}},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++){var d=this.items[b];b===c?(k(d),document.activeElement!==d.el()&&g.addClass(d.thumbnail,"vjs-playlist-now-playing"),n(d)):b===c+1?(l(d),m(d)):(l(d),n(d))}}}}),b}(p),s=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=g.mergeOptions(j)):(c=g.mergeOptions(j,a),d=document.querySelector("."+c.className)),c.el=d,b.playlistMenu=new r(b,c)};g.registerComponent("PlaylistMenu",r),g.registerComponent("PlaylistMenuItem",q),g.plugin("playlistUi",s)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1]);

es5/videojs-playlist-ui.js

@@ -58,6 +58,13 @@ /*! videojs-playlist-ui - v0.0.0 - 2015-3-12
 
+var upNext = function upNext(el) {
+  el.addClass('vjs-up-next');
+};
+var notUpNext = function notUpNext(el) {
+  el.removeClass('vjs-up-next');
+};
+
 var createThumbnail = function createThumbnail(thumbnail) {
   if (!thumbnail) {
     var placeholder = document.createElement('div');
-    placeholder.className = 'vjs-playlist-thumbnail';
+    placeholder.className = 'vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder';
     return placeholder;
@@ -121,4 +128,2 @@ }
     this.on('keydown', this.handleKeyDown_);
-    this.on(['focus', 'mouseover'], this.addPlayIcon_);
-    this.on(['blur', 'mouseout'], this.removePlayIcon_);
   }
@@ -144,20 +149,2 @@
   }, {
-    key: 'addPlayIcon_',
-    value: function addPlayIcon_() {
-      _videoJs2['default'].addClass(this.thumbnail, 'vjs-icon-play');
-      _videoJs2['default'].removeClass(this.thumbnail, 'vjs-playlist-now-playing');
-    }
-  }, {
-    key: 'removePlayIcon_',
-    value: function removePlayIcon_() {
-      if (document.activeElement === this.el()) {
-        return;
-      }
-
-      _videoJs2['default'].removeClass(this.thumbnail, 'vjs-icon-play');
-      if (this.hasClass('vjs-selected')) {
-        _videoJs2['default'].addClass(this.thumbnail, 'vjs-playlist-now-playing');
-      }
-    }
-  }, {
     key: 'createEl',
@@ -185,18 +172,31 @@ value: function createEl() {
 
-      // 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);
+      // Now playing
+      var nowPlayingEl = document.createElement('span');
+      var nowPlayingText = this.localize('Now Playing');
+      nowPlayingEl.className = 'vjs-playlist-now-playing';
+      nowPlayingEl.appendChild(document.createTextNode(nowPlayingText));
+      nowPlayingEl.setAttribute('title', nowPlayingText);
+      this.thumbnail.appendChild(nowPlayingEl);
 
-      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);
-      }
+      // Title container contains title and "up next"
+      var titleContainerEl = document.createElement('div');
+      titleContainerEl.className = 'vjs-playlist-title-container';
+      this.thumbnail.appendChild(titleContainerEl);
 
+      // Up next
+      var upNextEl = document.createElement('span');
+      var upNextText = this.localize('Up Next');
+      upNextEl.className = 'vjs-up-next-text';
+      upNextEl.appendChild(document.createTextNode(upNextText));
+      upNextEl.setAttribute('title', upNextText);
+      titleContainerEl.appendChild(upNextEl);
+
+      // Video title
+      var titleEl = document.createElement('cite');
+      var titleText = item.name || this.localize('Untitled Video');
+      titleEl.className = 'vjs-playlist-name';
+      titleEl.appendChild(document.createTextNode(titleText));
+      titleEl.setAttribute('title', titleText);
+      titleContainerEl.appendChild(titleEl);
+
       return li;
@@ -282,12 +282,16 @@ }
       var playlist = this.player_.playlist() || [];
+      var list = document.querySelector('.vjs-playlist-item-list');
+      var overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
 
+      if (!list) {
+        list = document.createElement('ol');
+        list.className = 'vjs-playlist-item-list';
+        this.el_.appendChild(list);
+      }
+
       // remove any existing items
       for (var i = 0; i < this.items.length; i++) {
-        this.removeChild(this.items[i]);
+        list.removeChild(this.items[i].el_);
       }
       this.items.length = 0;
-      var overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
-      if (overlay) {
-        overlay.parentNode.removeChild(overlay);
-      }
 
@@ -300,3 +304,3 @@ // create new items
         this.items.push(item);
-        this.addChild(item);
+        list.appendChild(item.el_);
       }
@@ -307,5 +311,10 @@
       // playback.
-      overlay = document.createElement('li');
-      overlay.className = 'vjs-playlist-ad-overlay';
-      this.el_.appendChild(overlay);
+      if (!overlay) {
+        var _overlay = document.createElement('li');
+        _overlay.className = 'vjs-playlist-ad-overlay';
+        list.appendChild(_overlay);
+      } else {
+        // Move overlay to end of list
+        list.appendChild(overlay);
+      }
 
@@ -352,4 +361,9 @@ // select the current playlist item
           }
+          notUpNext(item);
+        } else if (i === currentItem + 1) {
+          removeSelectedClass(item);
+          upNext(item);
         } else {
           removeSelectedClass(item);
+          notUpNext(item);
         }
@@ -356,0 +370,0 @@ }

lib/videojs-playlist-ui.js

@@ -44,6 +44,13 @@ /*! videojs-playlist-ui - v0.0.0 - 2015-3-12
 
+const upNext = function(el) {
+  el.addClass('vjs-up-next');
+};
+const notUpNext = function(el) {
+  el.removeClass('vjs-up-next');
+};
+
 const createThumbnail = function(thumbnail) {
   if (!thumbnail) {
     let placeholder = document.createElement('div');
-    placeholder.className = 'vjs-playlist-thumbnail';
+    placeholder.className = 'vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder';
     return placeholder;
@@ -104,4 +111,2 @@ }
     this.on('keydown', this.handleKeyDown_);
-    this.on(['focus', 'mouseover'], this.addPlayIcon_);
-    this.on(['blur', 'mouseout'], this.removePlayIcon_);
 
@@ -125,18 +130,2 @@ }
 
-  addPlayIcon_() {
-    videojs.addClass(this.thumbnail, 'vjs-icon-play');
-    videojs.removeClass(this.thumbnail, 'vjs-playlist-now-playing');
-  }
-
-  removePlayIcon_() {
-    if (document.activeElement === this.el()) {
-      return;
-    }
-
-    videojs.removeClass(this.thumbnail, 'vjs-icon-play');
-    if (this.hasClass('vjs-selected')) {
-      videojs.addClass(this.thumbnail, 'vjs-playlist-now-playing');
-    }
-  }
-
   createEl() {
@@ -163,18 +152,31 @@ let li = document.createElement('li');
 
-    // Name and description
-    let name = document.createElement('cite');
-    let nameValue = item.name || this.localize('Untitled Video');
-    name.className = 'vjs-playlist-name';
-    name.appendChild(document.createTextNode(nameValue));
-    name.setAttribute('title', nameValue);
-    li.appendChild(name);
+    // Now playing
+    let nowPlayingEl = document.createElement('span');
+    let nowPlayingText = this.localize('Now Playing');
+    nowPlayingEl.className = 'vjs-playlist-now-playing';
+    nowPlayingEl.appendChild(document.createTextNode(nowPlayingText));
+    nowPlayingEl.setAttribute('title', nowPlayingText);
+    this.thumbnail.appendChild(nowPlayingEl);
 
-    if (item.description) {
-      let description = document.createElement('p');
-      description.className = 'vjs-playlist-description';
-      description.appendChild(document.createTextNode(item.description));
-      description.setAttribute('title', item.description);
-      li.appendChild(description);
-    }
+    // Title container contains title and "up next"
+    let titleContainerEl = document.createElement('div');
+    titleContainerEl.className = 'vjs-playlist-title-container';
+    this.thumbnail.appendChild(titleContainerEl);
 
+    // Up next
+    let upNextEl = document.createElement('span');
+    let upNextText = this.localize('Up Next');
+    upNextEl.className = 'vjs-up-next-text';
+    upNextEl.appendChild(document.createTextNode(upNextText));
+    upNextEl.setAttribute('title', upNextText);
+    titleContainerEl.appendChild(upNextEl);
+
+    // Video title
+    let titleEl = document.createElement('cite');
+    let titleText = item.name || this.localize('Untitled Video');
+    titleEl.className = 'vjs-playlist-name';
+    titleEl.appendChild(document.createTextNode(titleText));
+    titleEl.setAttribute('title', titleText);
+    titleContainerEl.appendChild(titleEl);
+
     return li;
@@ -244,12 +246,16 @@ }
     const playlist = this.player_.playlist() || [];
+    let list = document.querySelector('.vjs-playlist-item-list');
+    let overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
 
+    if (!list) {
+      list = document.createElement('ol');
+      list.className = 'vjs-playlist-item-list';
+      this.el_.appendChild(list);
+    }
+
     // remove any existing items
     for (let i = 0; i < this.items.length; i++) {
-      this.removeChild(this.items[i]);
+      list.removeChild(this.items[i].el_);
     }
     this.items.length = 0;
-    let overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
-    if (overlay) {
-      overlay.parentNode.removeChild(overlay);
-    }
 
@@ -262,3 +268,3 @@ // create new items
       this.items.push(item);
-      this.addChild(item);
+      list.appendChild(item.el_);
     }
@@ -269,5 +275,10 @@
     // playback.
-    overlay = document.createElement('li');
-    overlay.className = 'vjs-playlist-ad-overlay';
-    this.el_.appendChild(overlay);
+    if (!overlay) {
+      let overlay = document.createElement('li');
+      overlay.className = 'vjs-playlist-ad-overlay';
+      list.appendChild(overlay);
+    } else {
+      // Move overlay to end of list
+      list.appendChild(overlay);
+    }
 
@@ -313,4 +324,9 @@ // select the current playlist item
         }
+        notUpNext(item);
+      } else if (i === currentItem + 1) {
+        removeSelectedClass(item);
+        upNext(item);
       } else {
         removeSelectedClass(item);
+        notUpNext(item);
       }
@@ -317,0 +333,0 @@ }

package.json

 {
   "name": "videojs-playlist-ui",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "author": "Brightcove",
@@ -5,0 +5,0 @@ "description": "A playlist video picker for video.js",

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

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

78828

increased by14.16%

Lines of code

1614

increased by14.06%

No dependency changes