videojs-playlist-ui/dist/videojs-playlist-ui.min.js

A user interface for the videojs-playlist API

/*! @name videojs-playlist-ui @version 5.0.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.getComponent("Component");class l extends i{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.time.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"),c=e.name||this.localize("Untitled Video");if(r.className="vjs-playlist-name",r.appendChild(document.createTextNode(c)),r.setAttribute("title",c),a.appendChild(r),this.thumbnail.getElementsByTagName("img").alt=c,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}}s.default.registerComponent("PlaylistMenuItem",l);const n=function(t){t.addClass("vjs-selected")},a=function(t){t.removeClass("vjs-selected"),t.thumbnail&&s.default.dom.removeClass(t.thumbnail,"vjs-playlist-now-playing")},o=function(t){t.removeClass("vjs-up-next")},d=s.default.getComponent("Component");class r extends d{constructor(t,e){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=>{"playlistchange"===t.type&&["add","remove"].includes(t.action)||this.update()})),this.on(t,["playlistadd"],(t=>this.addItems_(t.index,t.count))),this.on(t,["playlistremove"],(t=>this.removeItems_(t.index,t.count))),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 s.default.dom.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"),i=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 l(this.player_,{item:t[s]},this.options_);this.items.push(i),e.appendChild(i.el_)}i||(i=document.createElement("li"),i.className="vjs-playlist-ad-overlay"),e.appendChild(i);const a=this.player_.playlist.currentItem();if(this.items.length&&a>=0){n(this.items[a]);const t=this.items[a].$(".vjs-playlist-thumbnail");t&&s.default.dom.addClass(t,"vjs-playlist-now-playing")}}addItems_(t,e){const s=this.player_.playlist().slice(t,e+t);if(!s.length)return;const i=this.el_.querySelector(".vjs-playlist-item-list"),n=this.el_.querySelectorAll(".vjs-playlist-item")[t]||null,a=s.map((t=>{const e=new l(this.player_,{item:t},this.options_);return i.insertBefore(e.el_,n),e}));this.items.splice(t,0,...a)}removeItems_(t,e){const s=this.items.slice(t,e+t);s.length&&(s.forEach((t=>t.dispose())),this.items.splice(t,e))}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 i=this.items[t];t===e?(n(i),document.activeElement!==i.el()&&s.default.dom.addClass(i.thumbnail,"vjs-playlist-now-playing"),o(i)):t===e+1?(a(i),i.addClass("vjs-up-next")):(a(i),o(i))}}}s.default.registerComponent("PlaylistMenu",r);const c={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:(()=>{const t=document.createElement("x");return t.style.cssText="pointer-events:auto","auto"===t.style.pointerEvents})()},p=s.default.getPlugin("plugin");class h extends p{constructor(t,e){super(t,e),t.usingPlugin("playlist")?(e=this.options_=s.default.obj.merge(c,e),s.default.dom.isEl(e.el)||(e.el=this.findRoot_(e.className)),this.playlistMenu=t.playlistMenu=new r(t,e)):t.log.error("videojs-playlist plugin is required by the videojs-playlist-ui plugin")}dispose(){super.dispose(),this.playlistMenu.dispose()}hasChildEls_(t){for(let e=0;e<t.childNodes.length;e++)if(s.default.dom.isEl(t.childNodes[e]))return!0;return!1}findRoot_(t){const e=document.querySelectorAll("."+t);for(let t=0;t<e.length;t++)if(!this.hasChildEls_(e[t]))return e[t]}}return s.default.registerPlugin("playlistUi",h),h.VERSION="5.0.0",h}));