videojs-playlist-ui - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+<a name="3.8.0"></a>
+# [3.8.0](https://github.com/brightcove/videojs-playlist-ui/compare/v3.7.0...v3.8.0) (2020-05-06)
+
+### Features
+
+* Enabling option to display video descriptions in playlist thumb… ([#129](https://github.com/brightcove/videojs-playlist-ui/issues/129)) ([b3fbc84](https://github.com/brightcove/videojs-playlist-ui/commit/b3fbc84))
+
 <a name="3.7.0"></a>
@@ -2,0 +9,0 @@ # [3.7.0](https://github.com/brightcove/videojs-playlist-ui/compare/v3.6.0...v3.7.0) (2020-02-08)

dist/videojs-playlist-ui.cjs.js

@@ -1,2 +0,2 @@
-/*! @name videojs-playlist-ui @version 3.7.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 3.8.0 @license Apache-2.0 */
 'use strict';
@@ -15,3 +15,3 @@
 
-var version = "3.7.0";
+var version = "3.8.0";
 
@@ -128,2 +128,3 @@ var dom = videojs.dom || videojs;
 
+    playlistItem.showDescription = settings.showDescription;
     _this = _Component.call(this, player, playlistItem) || this;
@@ -163,2 +164,3 @@ _this.item = playlistItem.item;
     var item = this.options_.item;
+    var showDescription = this.options_.showDescription;
 
@@ -212,3 +214,13 @@ if (typeof item.data === 'object') {
     titleEl.setAttribute('title', titleText);
-    titleContainerEl.appendChild(titleEl);
+    titleContainerEl.appendChild(titleEl); // We add thumbnail video description only if specified in playlist options
+
+    if (showDescription) {
+      var descriptionEl = document.createElement('div');
+      var descriptionText = item.description || '';
+      descriptionEl.className = 'vjs-playlist-description';
+      descriptionEl.appendChild(document.createTextNode(descriptionText));
+      descriptionEl.setAttribute('title', descriptionText);
+      titleContainerEl.appendChild(descriptionEl);
+    }
+
     return li;
@@ -215,0 +227,0 @@ };

dist/videojs-playlist-ui.es.js

@@ -1,2 +0,2 @@
-/*! @name videojs-playlist-ui @version 3.7.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 3.8.0 @license Apache-2.0 */
 import document from 'global/document';
@@ -11,3 +11,3 @@ import videojs from 'video.js';
 
-var version = "3.7.0";
+var version = "3.8.0";
 
@@ -124,2 +124,3 @@ var dom = videojs.dom || videojs;
 
+    playlistItem.showDescription = settings.showDescription;
     _this = _Component.call(this, player, playlistItem) || this;
@@ -159,2 +160,3 @@ _this.item = playlistItem.item;
     var item = this.options_.item;
+    var showDescription = this.options_.showDescription;
 
@@ -208,3 +210,13 @@ if (typeof item.data === 'object') {
     titleEl.setAttribute('title', titleText);
-    titleContainerEl.appendChild(titleEl);
+    titleContainerEl.appendChild(titleEl); // We add thumbnail video description only if specified in playlist options
+
+    if (showDescription) {
+      var descriptionEl = document.createElement('div');
+      var descriptionText = item.description || '';
+      descriptionEl.className = 'vjs-playlist-description';
+      descriptionEl.appendChild(document.createTextNode(descriptionText));
+      descriptionEl.setAttribute('title', descriptionText);
+      titleContainerEl.appendChild(descriptionEl);
+    }
+
     return li;
@@ -211,0 +223,0 @@ };

dist/videojs-playlist-ui.js

@@ -1,2 +0,2 @@
-/*! @name videojs-playlist-ui @version 3.7.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 3.8.0 @license Apache-2.0 */
 (function (global, factory) {
@@ -17,3 +17,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('global/document'), require('video.js')) :
 
-  var version = "3.7.0";
+  var version = "3.8.0";
 
@@ -130,2 +130,3 @@ var dom = videojs.dom || videojs;
 
+      playlistItem.showDescription = settings.showDescription;
       _this = _Component.call(this, player, playlistItem) || this;
@@ -165,2 +166,3 @@ _this.item = playlistItem.item;
       var item = this.options_.item;
+      var showDescription = this.options_.showDescription;
 
@@ -214,3 +216,13 @@ if (typeof item.data === 'object') {
       titleEl.setAttribute('title', titleText);
-      titleContainerEl.appendChild(titleEl);
+      titleContainerEl.appendChild(titleEl); // We add thumbnail video description only if specified in playlist options
+
+      if (showDescription) {
+        var descriptionEl = document.createElement('div');
+        var descriptionText = item.description || '';
+        descriptionEl.className = 'vjs-playlist-description';
+        descriptionEl.appendChild(document.createTextNode(descriptionText));
+        descriptionEl.setAttribute('title', descriptionText);
+        titleContainerEl.appendChild(descriptionEl);
+      }
+
       return li;
@@ -217,0 +229,0 @@ };

dist/videojs-playlist-ui.min.js

@@ -1,2 +0,2 @@
-/*! @name videojs-playlist-ui @version 3.7.0 @license Apache-2.0 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("global/document"),require("video.js")):"function"==typeof define&&define.amd?define(["global/document","video.js"],e):t.videojsPlaylistUi=e(t.document,t.videojs)}(this,function(c,u){"use strict";function i(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}c=c&&c.hasOwnProperty("default")?c.default:c;function r(t){t.addClass("vjs-selected")}function a(t){t.removeClass("vjs-selected"),t.thumbnail&&p.removeClass(t.thumbnail,"vjs-playlist-now-playing")}function n(t){t.removeClass("vjs-up-next")}function o(t){for(var e=0;e<t.childNodes.length;e++)if(p.isEl(t.childNodes[e]))return 1}function t(t){var e=this;if(!e.playlist)throw new Error("videojs-playlist plugin is required by the videojs-playlist-ui plugin");if(p.isEl(t)&&(u.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!'),t={el:t}),t=u.mergeOptions(d,t),e.playlistMenu){var i=e.playlistMenu.el();if(i){var l=i.parentNode,s=i.nextSibling;e.playlistMenu.dispose(),p.emptyEl(i),s?l.insertBefore(i,s):l.appendChild(i),t.el=i}}p.isEl(t.el)||(t.el=function(t){for(var e,i=c.querySelectorAll("."+t),l=0;l<i.length;l++)if(!o(i[l])){e=i[l];break}return e}(t.className)),e.playlistMenu=new m(e,t)}var e,p=(u=u&&u.hasOwnProperty("default")?u.default:u).dom||u,l=u.registerPlugin||u.plugin,d={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:((e=c.createElement("x")).style.cssText="pointer-events:auto","auto"===e.style.pointerEvents)},s=u.getComponent("Component"),h=function(s){function t(t,e,i){var l;if(!e.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");return(l=s.call(this,t,e)||this).item=e.item,l.playOnSelect=i.playOnSelect,l.emitTapEvents(),l.on(["click","tap"],l.switchPlaylistItem_),l.on("keydown",l.handleKeyDown_),l}i(t,s);var e=t.prototype;return e.handleKeyDown_=function(t){13!==t.which&&32!==t.which||this.switchPlaylistItem_()},e.switchPlaylistItem_=function(){this.player_.playlist.currentItem(function(t,e){for(var i=0,l=t.length;i<l;i++)if(t[i]===e)return i;return-1}(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()},e.createEl=function(){var i=c.createElement("li"),l=this.options_.item;"object"==typeof l.data&&Object.keys(l.data).forEach(function(t){var e=l.data[t];i.dataset[t]=e});if(i.className="vjs-playlist-item",i.setAttribute("tabIndex",0),this.thumbnail=function(t){if(!t){var e=c.createElement("div");return e.className="vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder",e}var i=c.createElement("picture");if(i.className="vjs-playlist-thumbnail","string"==typeof t){var l=c.createElement("img");l.src=t,l.alt="",i.appendChild(l)}else{for(var s=0;s<t.length-1;s++){var a=t[s],n=c.createElement("source");for(var r in a)n[r]=a[r];i.appendChild(n)}var o=t[t.length-1],p=c.createElement("img");for(var d in p.alt="",o)p[d]=o[d];i.appendChild(p)}return i}(l.thumbnail),i.appendChild(this.thumbnail),l.duration){var t=c.createElement("time"),e=u.formatTime(l.duration);t.className="vjs-playlist-duration",t.setAttribute("datetime","PT0H0M"+l.duration+"S"),t.appendChild(c.createTextNode(e)),i.appendChild(t)}var s=c.createElement("span"),a=this.localize("Now Playing");s.className="vjs-playlist-now-playing-text",s.appendChild(c.createTextNode(a)),s.setAttribute("title",a),this.thumbnail.appendChild(s);var n=c.createElement("div");n.className="vjs-playlist-title-container",this.thumbnail.appendChild(n);var r=c.createElement("span"),o=this.localize("Up Next");r.className="vjs-up-next-text",r.appendChild(c.createTextNode(o)),r.setAttribute("title",o),n.appendChild(r);var p=c.createElement("cite"),d=l.name||this.localize("Untitled Video");return p.className="vjs-playlist-name",p.appendChild(c.createTextNode(d)),p.setAttribute("title",d),n.appendChild(p),i},t}(s),m=function(l){function t(t,e){var i;if(!t.playlist)throw new Error("videojs-playlist is required for the playlist component");return(i=l.call(this,t,e)||this).items=[],e.horizontal?i.addClass("vjs-playlist-horizontal"):i.addClass("vjs-playlist-vertical"),e.supportsCssPointerEvents&&i.addClass("vjs-csspointerevents"),i.createPlaylist_(),u.browser.TOUCH_ENABLED||i.addClass("vjs-mouse"),i.on(t,["loadstart","playlistchange","playlistsorted"],function(t){i.update()}),i.on(t,"adstart",function(){i.addClass("vjs-ad-playing")}),i.on(t,"adend",function(){i.removeClass("vjs-ad-playing")}),i.on("dispose",function(){i.empty_(),t.playlistMenu=null}),i.on(t,"dispose",function(){i.dispose()}),i}i(t,l);var e=t.prototype;return e.createEl=function(){return p.createEl("div",{className:this.options_.className})},e.empty_=function(){this.items&&this.items.length&&(this.items.forEach(function(t){return t.dispose()}),this.items.length=0)},e.createPlaylist_=function(){var t=this.player_.playlist()||[],e=this.el_.querySelector(".vjs-playlist-item-list"),i=this.el_.querySelector(".vjs-playlist-ad-overlay");e||((e=c.createElement("ol")).className="vjs-playlist-item-list",this.el_.appendChild(e)),this.empty_();for(var l=0;l<t.length;l++){var s=new h(this.player_,{item:t[l]},this.options_);this.items.push(s),e.appendChild(s.el_)}i||((i=c.createElement("li")).className="vjs-playlist-ad-overlay"),e.appendChild(i);var a=this.player_.playlist.currentItem();if(this.items.length&&0<=a){r(this.items[a]);var n=this.items[a].$(".vjs-playlist-thumbnail");n&&p.addClass(n,"vjs-playlist-now-playing")}},e.update=function(){var t=this.player_.playlist();if(this.items.length===t.length){for(var e=0;e<this.items.length;e++)if(this.items[e].item!==t[e])return void this.createPlaylist_();for(var i=this.player_.playlist.currentItem(),l=0;l<this.items.length;l++){var s=this.items[l];l===i?(r(s),c.activeElement!==s.el()&&p.addClass(s.thumbnail,"vjs-playlist-now-playing"),n(s)):l===i+1?(a(s),s.addClass("vjs-up-next")):(a(s),n(s))}}else this.createPlaylist_()},t}(s);return u.registerComponent("PlaylistMenu",m),u.registerComponent("PlaylistMenuItem",h),l("playlistUi",t),t.VERSION="3.7.0",t});
+/*! @name videojs-playlist-ui @version 3.8.0 @license Apache-2.0 */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("global/document"),require("video.js")):"function"==typeof define&&define.amd?define(["global/document","video.js"],e):t.videojsPlaylistUi=e(t.document,t.videojs)}(this,function(m,y){"use strict";function i(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}m=m&&m.hasOwnProperty("default")?m.default:m;function r(t){t.addClass("vjs-selected")}function a(t){t.removeClass("vjs-selected"),t.thumbnail&&p.removeClass(t.thumbnail,"vjs-playlist-now-playing")}function n(t){t.removeClass("vjs-up-next")}function o(t){for(var e=0;e<t.childNodes.length;e++)if(p.isEl(t.childNodes[e]))return 1}function t(t){var e=this;if(!e.playlist)throw new Error("videojs-playlist plugin is required by the videojs-playlist-ui plugin");if(p.isEl(t)&&(y.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!'),t={el:t}),t=y.mergeOptions(d,t),e.playlistMenu){var i=e.playlistMenu.el();if(i){var l=i.parentNode,s=i.nextSibling;e.playlistMenu.dispose(),p.emptyEl(i),s?l.insertBefore(i,s):l.appendChild(i),t.el=i}}p.isEl(t.el)||(t.el=function(t){for(var e,i=m.querySelectorAll("."+t),l=0;l<i.length;l++)if(!o(i[l])){e=i[l];break}return e}(t.className)),e.playlistMenu=new h(e,t)}var e,p=(y=y&&y.hasOwnProperty("default")?y.default:y).dom||y,l=y.registerPlugin||y.plugin,d={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:((e=m.createElement("x")).style.cssText="pointer-events:auto","auto"===e.style.pointerEvents)},s=y.getComponent("Component"),c=function(s){function t(t,e,i){var l;if(!e.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");return e.showDescription=i.showDescription,(l=s.call(this,t,e)||this).item=e.item,l.playOnSelect=i.playOnSelect,l.emitTapEvents(),l.on(["click","tap"],l.switchPlaylistItem_),l.on("keydown",l.handleKeyDown_),l}i(t,s);var e=t.prototype;return e.handleKeyDown_=function(t){13!==t.which&&32!==t.which||this.switchPlaylistItem_()},e.switchPlaylistItem_=function(){this.player_.playlist.currentItem(function(t,e){for(var i=0,l=t.length;i<l;i++)if(t[i]===e)return i;return-1}(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()},e.createEl=function(){var i=m.createElement("li"),l=this.options_.item,t=this.options_.showDescription;"object"==typeof l.data&&Object.keys(l.data).forEach(function(t){var e=l.data[t];i.dataset[t]=e});if(i.className="vjs-playlist-item",i.setAttribute("tabIndex",0),this.thumbnail=function(t){if(!t){var e=m.createElement("div");return e.className="vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder",e}var i=m.createElement("picture");if(i.className="vjs-playlist-thumbnail","string"==typeof t){var l=m.createElement("img");l.src=t,l.alt="",i.appendChild(l)}else{for(var s=0;s<t.length-1;s++){var a=t[s],n=m.createElement("source");for(var r in a)n[r]=a[r];i.appendChild(n)}var o=t[t.length-1],p=m.createElement("img");for(var d in p.alt="",o)p[d]=o[d];i.appendChild(p)}return i}(l.thumbnail),i.appendChild(this.thumbnail),l.duration){var e=m.createElement("time"),s=y.formatTime(l.duration);e.className="vjs-playlist-duration",e.setAttribute("datetime","PT0H0M"+l.duration+"S"),e.appendChild(m.createTextNode(s)),i.appendChild(e)}var a=m.createElement("span"),n=this.localize("Now Playing");a.className="vjs-playlist-now-playing-text",a.appendChild(m.createTextNode(n)),a.setAttribute("title",n),this.thumbnail.appendChild(a);var r=m.createElement("div");r.className="vjs-playlist-title-container",this.thumbnail.appendChild(r);var o=m.createElement("span"),p=this.localize("Up Next");o.className="vjs-up-next-text",o.appendChild(m.createTextNode(p)),o.setAttribute("title",p),r.appendChild(o);var d=m.createElement("cite"),c=l.name||this.localize("Untitled Video");if(d.className="vjs-playlist-name",d.appendChild(m.createTextNode(c)),d.setAttribute("title",c),r.appendChild(d),t){var h=m.createElement("div"),u=l.description||"";h.className="vjs-playlist-description",h.appendChild(m.createTextNode(u)),h.setAttribute("title",u),r.appendChild(h)}return i},t}(s),h=function(l){function t(t,e){var i;if(!t.playlist)throw new Error("videojs-playlist is required for the playlist component");return(i=l.call(this,t,e)||this).items=[],e.horizontal?i.addClass("vjs-playlist-horizontal"):i.addClass("vjs-playlist-vertical"),e.supportsCssPointerEvents&&i.addClass("vjs-csspointerevents"),i.createPlaylist_(),y.browser.TOUCH_ENABLED||i.addClass("vjs-mouse"),i.on(t,["loadstart","playlistchange","playlistsorted"],function(t){i.update()}),i.on(t,"adstart",function(){i.addClass("vjs-ad-playing")}),i.on(t,"adend",function(){i.removeClass("vjs-ad-playing")}),i.on("dispose",function(){i.empty_(),t.playlistMenu=null}),i.on(t,"dispose",function(){i.dispose()}),i}i(t,l);var e=t.prototype;return e.createEl=function(){return p.createEl("div",{className:this.options_.className})},e.empty_=function(){this.items&&this.items.length&&(this.items.forEach(function(t){return t.dispose()}),this.items.length=0)},e.createPlaylist_=function(){var t=this.player_.playlist()||[],e=this.el_.querySelector(".vjs-playlist-item-list"),i=this.el_.querySelector(".vjs-playlist-ad-overlay");e||((e=m.createElement("ol")).className="vjs-playlist-item-list",this.el_.appendChild(e)),this.empty_();for(var l=0;l<t.length;l++){var s=new c(this.player_,{item:t[l]},this.options_);this.items.push(s),e.appendChild(s.el_)}i||((i=m.createElement("li")).className="vjs-playlist-ad-overlay"),e.appendChild(i);var a=this.player_.playlist.currentItem();if(this.items.length&&0<=a){r(this.items[a]);var n=this.items[a].$(".vjs-playlist-thumbnail");n&&p.addClass(n,"vjs-playlist-now-playing")}},e.update=function(){var t=this.player_.playlist();if(this.items.length===t.length){for(var e=0;e<this.items.length;e++)if(this.items[e].item!==t[e])return void this.createPlaylist_();for(var i=this.player_.playlist.currentItem(),l=0;l<this.items.length;l++){var s=this.items[l];l===i?(r(s),m.activeElement!==s.el()&&p.addClass(s.thumbnail,"vjs-playlist-now-playing"),n(s)):l===i+1?(a(s),s.addClass("vjs-up-next")):(a(s),n(s))}}else this.createPlaylist_()},t}(s);return y.registerComponent("PlaylistMenu",h),y.registerComponent("PlaylistMenuItem",c),l("playlistUi",t),t.VERSION="3.8.0",t});

package.json

 {
   "name": "videojs-playlist-ui",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "author": "Brightcove, Inc.",
@@ -5,0 +5,0 @@ "description": "A user interface for the videojs-playlist API",

src/plugin.js

@@ -110,2 +110,3 @@ import document from 'global/document';
 
+    playlistItem.showDescription = settings.showDescription;
     super(player, playlistItem);
@@ -141,2 +142,3 @@ this.item = playlistItem.item;
     const item = this.options_.item;
+    const showDescription = this.options_.showDescription;
 
@@ -204,2 +206,13 @@ if (typeof item.data === 'object') {
 
+    // We add thumbnail video description only if specified in playlist options
+    if (showDescription) {
+      const descriptionEl = document.createElement('div');
+      const descriptionText = item.description || '';
+
+      descriptionEl.className = 'vjs-playlist-description';
+      descriptionEl.appendChild(document.createTextNode(descriptionText));
+      descriptionEl.setAttribute('title', descriptionText);
+      titleContainerEl.appendChild(descriptionEl);
+    }
+
     return li;
@@ -206,0 +219,0 @@ }

test/plugin.test.js

@@ -218,2 +218,28 @@ /* eslint-disable no-console */
 
+QUnit.test('includes the video description if user specifies it', function(assert) {
+  this.player.playlist(playlist);
+  this.player.playlistUi({showDescription: true});
+
+  const items = this.fixture.querySelectorAll('.vjs-playlist-item');
+
+  assert.strictEqual(
+    items[0].querySelector('.vjs-playlist-description').textContent,
+    playlist[0].description,
+    'description is displayed'
+  );
+});
+
+QUnit.test('hides video description by default', function(assert) {
+  this.player.playlist(playlist);
+  this.player.playlistUi();
+
+  const items = this.fixture.querySelectorAll('.vjs-playlist-item');
+
+  assert.strictEqual(
+    items[0].querySelector('.vjs-playlist-description'),
+    null,
+    'description is not displayed'
+  );
+});
+
 QUnit.test('includes custom data attribute if provided', function(assert) {
@@ -220,0 +246,0 @@ this.player.playlist(playlist);

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

391152

increased by2.24%

Lines of code

8526

increased by3.21%

No dependency changes