videojs-playlist-ui - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1

CHANGELOG.md

@@ -0,1 +1,12 @@
+<a name="4.1.1"></a>
+## [4.1.1](https://github.com/brightcove/videojs-playlist-ui/compare/v4.0.1...v4.1.1) (2023-03-20)
+
+### Features
+
+* Set lazy loading on images ([#143](https://github.com/brightcove/videojs-playlist-ui/issues/143)) ([b62182f](https://github.com/brightcove/videojs-playlist-ui/commit/b62182f))
+
+### Code Refactoring
+
+* populate playlist thumbnail's alt tag with video title ([#146](https://github.com/brightcove/videojs-playlist-ui/issues/146)) ([b008a8e](https://github.com/brightcove/videojs-playlist-ui/commit/b008a8e))
+
 <a name="4.1.0"></a>
@@ -2,0 +13,0 @@ # [4.1.0](https://github.com/brightcove/videojs-playlist-ui/compare/v4.0.1...v4.1.0) (2022-08-05)

dist/videojs-playlist-ui.cjs.js

@@ -1,2 +0,2 @@
-/*! @name videojs-playlist-ui @version 4.1.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 4.1.1 @license Apache-2.0 */
 'use strict';
@@ -12,3 +12,3 @@
 
-var version = "4.1.0";
+var version = "4.1.1";
 
@@ -185,4 +185,6 @@ const dom = videojs__default["default"].dom || videojs__default["default"];
     titleEl.setAttribute('title', titleText);
-    titleContainerEl.appendChild(titleEl); // We add thumbnail video description only if specified in playlist options
+    titleContainerEl.appendChild(titleEl); // Populate thumbnails alt with the video title
 
+    this.thumbnail.getElementsByTagName('img').alt = titleText; // We add thumbnail video description only if specified in playlist options
+
     if (showDescription) {
@@ -189,0 +191,0 @@ const descriptionEl = document__default["default"].createElement('div');

dist/videojs-playlist-ui.es.js

@@ -1,6 +0,6 @@
-/*! @name videojs-playlist-ui @version 4.1.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 4.1.1 @license Apache-2.0 */
 import document from 'global/document';
 import videojs from 'video.js';
 
-var version = "4.1.0";
+var version = "4.1.1";
 
@@ -177,4 +177,6 @@ const dom = videojs.dom || videojs;
     titleEl.setAttribute('title', titleText);
-    titleContainerEl.appendChild(titleEl); // We add thumbnail video description only if specified in playlist options
+    titleContainerEl.appendChild(titleEl); // Populate thumbnails alt with the video title
 
+    this.thumbnail.getElementsByTagName('img').alt = titleText; // We add thumbnail video description only if specified in playlist options
+
     if (showDescription) {
@@ -181,0 +183,0 @@ const descriptionEl = document.createElement('div');

dist/videojs-playlist-ui.js

@@ -1,2 +0,2 @@
-/*! @name videojs-playlist-ui @version 4.1.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 4.1.1 @license Apache-2.0 */
 (function (global, factory) {
@@ -12,3 +12,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
 
-  var version = "4.1.0";
+  var version = "4.1.1";
 
@@ -185,4 +185,6 @@ const dom = videojs__default["default"].dom || videojs__default["default"];
       titleEl.setAttribute('title', titleText);
-      titleContainerEl.appendChild(titleEl); // We add thumbnail video description only if specified in playlist options
+      titleContainerEl.appendChild(titleEl); // Populate thumbnails alt with the video title
 
+      this.thumbnail.getElementsByTagName('img').alt = titleText; // We add thumbnail video description only if specified in playlist options
+
       if (showDescription) {
@@ -189,0 +191,0 @@ const descriptionEl = document.createElement('div');

dist/videojs-playlist-ui.min.js

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

package.json

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

src/plugin.js

@@ -196,2 +196,5 @@ import document from 'global/document';
 
+    // Populate thumbnails alt with the video title
+    this.thumbnail.getElementsByTagName('img').alt = titleText;
+
     // We add thumbnail video description only if specified in playlist options
@@ -198,0 +201,0 @@ if (showDescription) {

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

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

393279

increased by0.36%

Lines of code

8460

increased by0.21%

No dependency changes