videojs-playlist-ui - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0-0

dist/videojs-playlist-ui.js

@@ -1,3 +0,3 @@
-/*! videojs-playlist-ui - v2.0.0 - 2015-11-23
-* Copyright (c) 2015 Brightcove; Licensed Apache-2.0 */
+/*! videojs-playlist-ui - v2.1.0-0 - 2016-01-28
+* Copyright (c) 2016 Brightcove; Licensed Apache-2.0 */
 
@@ -40,2 +40,16 @@ (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){
 
+// we don't add `vjs-playlist-now-playing` in addSelectedClass
+// so it won't conflict with `vjs-icon-play
+// since it'll get added when we mouse out
+var addSelectedClass = function addSelectedClass(el) {
+  el.addClass("vjs-selected");
+};
+var removeSelectedClass = function removeSelectedClass(el) {
+  el.removeClass("vjs-selected");
+
+  if (el.thumbnail) {
+    videojs.removeClass(el.thumbnail, "vjs-playlist-now-playing");
+  }
+};
+
 var createThumbnail = function createThumbnail(thumbnail) {
@@ -86,4 +100,2 @@ if (!thumbnail) {
   function PlaylistMenuItem(player, playlistItem, settings) {
-    var _this = this;
-
     _classCallCheck(this, PlaylistMenuItem);
@@ -101,10 +113,10 @@
 
+    this.playOnSelect = settings.playOnSelect;
+
     this.emitTapEvents();
 
-    this.on(["click", "tap"], function (event) {
-      player.playlist.currentItem(indexOf(player.playlist(), _this.item));
-      if (settings.playOnSelect) {
-        player.play();
-      }
-    });
+    this.on(["click", "tap"], this.switchPlaylistItem_);
+    this.on("keydown", this.handleKeyDown_);
+    this.on(["focus", "mouseover"], this.addPlayIcon_);
+    this.on(["blur", "mouseout"], this.removePlayIcon_);
   }
@@ -115,2 +127,33 @@
   _createClass(PlaylistMenuItem, {
+    handleKeyDown_: {
+      value: function handleKeyDown_(event) {
+        // keycode 13 is <Enter>
+        // keycode 32 is <Space>
+        if (event.which === 13 || event.which === 32) {
+          this.switchPlaylistItem_();
+        }
+      }
+    },
+    switchPlaylistItem_: {
+      value: function switchPlaylistItem_(event) {
+        this.player_.playlist.currentItem(indexOf(this.player_.playlist(), this.item));
+        if (this.playOnSelect) {
+          this.player_.play();
+        }
+      }
+    },
+    addPlayIcon_: {
+      value: function addPlayIcon_() {
+        videojs.addClass(this.thumbnail, "vjs-icon-play");
+        videojs.removeClass(this.thumbnail, "vjs-playlist-now-playing");
+      }
+    },
+    removePlayIcon_: {
+      value: function removePlayIcon_() {
+        videojs.removeClass(this.thumbnail, "vjs-icon-play");
+        if (this.hasClass("vjs-selected")) {
+          videojs.addClass(this.thumbnail, "vjs-playlist-now-playing");
+        }
+      }
+    },
     createEl: {
@@ -122,5 +165,7 @@ value: function createEl() {
         li.className = "vjs-playlist-item";
+        li.setAttribute("tabIndex", 0);
 
         // Thumbnail image
-        li.appendChild(createThumbnail(item.thumbnail));
+        this.thumbnail = createThumbnail(item.thumbnail);
+        li.appendChild(this.thumbnail);
 
@@ -152,2 +197,3 @@ // Duration
         }
+
         return li;
@@ -244,3 +290,8 @@ }
         if (this.items.length && selectedIndex >= 0) {
-          this.items[selectedIndex].addClass("vjs-selected");
+          addSelectedClass(this.items[selectedIndex]);
+
+          var thumbnail = this.items[selectedIndex].$(".vjs-playlist-thumbnail");
+          if (thumbnail) {
+            videojs.addClass(thumbnail, "vjs-playlist-now-playing");
+          }
         }
@@ -272,5 +323,5 @@ }
           if (i === currentItem) {
-            this.items[i].addClass("vjs-selected");
+            addSelectedClass(this.items[i]);
           } else {
-            this.items[i].removeClass("vjs-selected");
+            removeSelectedClass(this.items[i]);
           }
@@ -277,0 +328,0 @@ }

dist/videojs-playlist-ui.min.js

@@ -1,3 +0,3 @@
-/*! 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(){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]);
+/*! videojs-playlist-ui - v2.1.0-0 - 2016-01-28
+* 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(a,b,c){"use strict";var d=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}}(),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=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},h=function(){var a=document.createElement("x");return a.style.cssText="pointer-events:auto","auto"===a.style.pointerEvents}(),i={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:h},j=function(a){a.addClass("vjs-selected")},k=function(a){a.removeClass("vjs-selected"),a.thumbnail&&videojs.removeClass(a.thumbnail,"vjs-playlist-now-playing")},l=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},m=videojs.getComponent("Component"),n=function(a){function b(a,c,d){if(f(this,b),!c.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");this.item=c.item,m.call(this,a,c),this.playOnSelect=d.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),d(b,{handleKeyDown_:{value:function(a){(13===a.which||32===a.which)&&this.switchPlaylistItem_()}},switchPlaylistItem_:{value:function(a){this.player_.playlist.currentItem(g(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()}},addPlayIcon_:{value:function(){videojs.addClass(this.thumbnail,"vjs-icon-play"),videojs.removeClass(this.thumbnail,"vjs-playlist-now-playing")}},removePlayIcon_:{value:function(){videojs.removeClass(this.thumbnail,"vjs-icon-play"),this.hasClass("vjs-selected")&&videojs.addClass(this.thumbnail,"vjs-playlist-now-playing")}},createEl:{value:function(){var a=document.createElement("li"),b=this.item;if(a.className="vjs-playlist-item",a.setAttribute("tabIndex",0),this.thumbnail=l(b.thumbnail),a.appendChild(this.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 g=document.createElement("p");g.className="vjs-playlist-description",g.appendChild(document.createTextNode(b.description)),g.setAttribute("title",b.description),a.appendChild(g)}return a}}}),b}(m),o=function(a){function b(a,c){var d=this;if(f(this,b),!a.playlist)throw new Error("videojs-playlist is required for the playlist component");c.el||(this.el_=document.createElement("ol"),this.el_.className=c.className,c.el=this.el_),this.items=[],m.call(this,a,c),c.supportsCssPointerEvents&&this.addClass("vjs-csspointerevents"),this.createPlaylist_(),videojs.browser.TOUCH_ENABLED||this.addClass("vjs-mouse"),a.on(["loadstart","playlistchange"],function(a){d.update()}),a.on("adstart",function(){d.addClass("vjs-ad-playing")}),a.on("adend",function(){d.removeClass("vjs-ad-playing")})}return e(b,a),d(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 n(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){j(this.items[e]);var f=this.items[e].$(".vjs-playlist-thumbnail");f&&videojs.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++)b===c?j(this.items[b]):k(this.items[b])}}}),b}(m),p=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(i)):(c=videojs.mergeOptions(i,a),d=document.querySelector("."+c.className)),c.el=d,b.playlistMenu=new o(b,c)};videojs.registerComponent("PlaylistMenu",o),videojs.registerComponent("PlaylistMenuItem",n),videojs.plugin("playlistUi",p)},{}]},{},[1]);

lib/videojs-playlist-ui.js

@@ -28,2 +28,16 @@ /*! videojs-playlist-ui - v0.0.0 - 2015-3-12
 
+// we don't add `vjs-playlist-now-playing` in addSelectedClass
+// so it won't conflict with `vjs-icon-play
+// since it'll get added when we mouse out
+const addSelectedClass = function(el) {
+  el.addClass('vjs-selected');
+};
+const removeSelectedClass = function(el) {
+  el.removeClass('vjs-selected');
+
+  if (el.thumbnail) {
+    videojs.removeClass(el.thumbnail, 'vjs-playlist-now-playing');
+  }
+};
+
 const createThumbnail = function(thumbnail) {
@@ -85,12 +99,40 @@ if (!thumbnail) {
 
+    this.playOnSelect = settings.playOnSelect;
+
     this.emitTapEvents();
 
-    this.on(['click', 'tap'], (event) => {
-      player.playlist.currentItem(indexOf(player.playlist(), this.item));
-      if (settings.playOnSelect) {
-        player.play();
-      }
-    });
+    this.on(['click', 'tap'], this.switchPlaylistItem_);
+    this.on('keydown', this.handleKeyDown_);
+    this.on(['focus', 'mouseover'], this.addPlayIcon_);
+    this.on(['blur', 'mouseout'], this.removePlayIcon_);
+
   }
 
+  handleKeyDown_(event) {
+    // keycode 13 is <Enter>
+    // keycode 32 is <Space>
+    if (event.which === 13 || event.which === 32) {
+      this.switchPlaylistItem_();
+    }
+  }
+
+  switchPlaylistItem_(event) {
+    this.player_.playlist.currentItem(indexOf(this.player_.playlist(), this.item));
+    if (this.playOnSelect) {
+      this.player_.play();
+    }
+  }
+
+  addPlayIcon_() {
+    videojs.addClass(this.thumbnail, 'vjs-icon-play');
+    videojs.removeClass(this.thumbnail, 'vjs-playlist-now-playing');
+  }
+
+  removePlayIcon_() {
+    videojs.removeClass(this.thumbnail, 'vjs-icon-play');
+    if (this.hasClass('vjs-selected')) {
+      videojs.addClass(this.thumbnail, 'vjs-playlist-now-playing');
+    }
+  }
+
   createEl() {
@@ -101,5 +143,7 @@ let li = document.createElement('li');
     li.className = 'vjs-playlist-item';
+    li.setAttribute('tabIndex', 0);
 
     // Thumbnail image
-    li.appendChild(createThumbnail(item.thumbnail));
+    this.thumbnail = createThumbnail(item.thumbnail);
+    li.appendChild(this.thumbnail);
 
@@ -131,2 +175,3 @@ // Duration
     }
+
     return li;
@@ -212,3 +257,8 @@ }
     if (this.items.length && selectedIndex >= 0) {
-      this.items[selectedIndex].addClass('vjs-selected');
+      addSelectedClass(this.items[selectedIndex]);
+
+      let thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');
+      if (thumbnail) {
+        videojs.addClass(thumbnail, 'vjs-playlist-now-playing');
+      }
     }
@@ -239,5 +289,5 @@ }
       if (i === currentItem) {
-        this.items[i].addClass('vjs-selected');
+        addSelectedClass(this.items[i]);
       } else {
-        this.items[i].removeClass('vjs-selected');
+        removeSelectedClass(this.items[i]);
       }
@@ -244,0 +294,0 @@ }

package.json

 {
   "name": "videojs-playlist-ui",
-  "version": "2.0.0",
+  "version": "2.1.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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

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

Improved metrics

Total package byte prevSize

51688

increased by8.68%

Lines of code

1033

increased by9.2%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes