videojs-playlist-ui
Version:
A playlist video picker for video.js
7 lines • 6.43 kB
JavaScript
/**
* videojs-playlist-ui
* @version 3.0.5
* @copyright 2017 Brightcove, Inc.
* @license Apache-2.0
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):t(e.videojs)}(this,function(e){"use strict";e="default"in e?e["default"]:e;var t,i="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n={},l=(Object.freeze||Object)({"default":n}),a=l&&n||l,s=void 0!==i?i:"undefined"!=typeof window?window:{};"undefined"!=typeof document?t=document:(t=s["__GLOBAL_DOCUMENT_CACHE@4"])||(t=s["__GLOBAL_DOCUMENT_CACHE@4"]=a);var r,o=t,p=r="undefined"!=typeof window?window:void 0!==i?i:"undefined"!=typeof self?self:{},d=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},u=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},h=e.dom||e,m=e.registerPlugin||e.plugin,y=function(e,t){for(var i=0,n=e.length;i<n;i++)if(e[i]===t)return i;return-1},f={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:function(){var e=o.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}()},v=function(e){e.addClass("vjs-selected")},C=function(e){e.removeClass("vjs-selected"),e.thumbnail&&h.removeClass(e.thumbnail,"vjs-playlist-now-playing")},w=function(e){e.addClass("vjs-up-next")},j=function(e){e.removeClass("vjs-up-next")},_=function(e){if(!e){var t=o.createElement("div");return t.className="vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder",t}var i=o.createElement("picture");if(i.className="vjs-playlist-thumbnail","string"==typeof e){var n=o.createElement("img");n.src=e,n.alt="",i.appendChild(n)}else{for(var l=0;l<e.length-1;l++){var a=e[l],s=o.createElement("source");for(var r in a)s[r]=a[r];i.appendChild(s)}var p=e[e.length-1],d=o.createElement("img");d.alt="";for(var c in p)d[c]=p[c];i.appendChild(d)}return i},E=e.getComponent("Component"),b=function(t){function i(e,n,l){if(d(this,i),!n.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");var a=u(this,t.call(this,e,n));return a.item=n.item,a.playOnSelect=l.playOnSelect,a.emitTapEvents(),a.on(["click","tap"],a.switchPlaylistItem_),a.on("keydown",a.handleKeyDown_),a}return c(i,t),i.prototype.handleKeyDown_=function(e){13!==e.which&&32!==e.which||this.switchPlaylistItem_()},i.prototype.switchPlaylistItem_=function(e){this.player_.playlist.currentItem(y(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()},i.prototype.createEl=function(){var t=o.createElement("li"),i=this.options_.item;if(t.className="vjs-playlist-item",t.setAttribute("tabIndex",0),this.thumbnail=_(i.thumbnail),t.appendChild(this.thumbnail),i.duration){var n=o.createElement("time"),l=e.formatTime(i.duration);n.className="vjs-playlist-duration",n.setAttribute("datetime","PT0H0M"+i.duration+"S"),n.appendChild(o.createTextNode(l)),t.appendChild(n)}var a=o.createElement("span"),s=this.localize("Now Playing");a.className="vjs-playlist-now-playing-text",a.appendChild(o.createTextNode(s)),a.setAttribute("title",s),this.thumbnail.appendChild(a);var r=o.createElement("div");r.className="vjs-playlist-title-container",this.thumbnail.appendChild(r);var p=o.createElement("span"),d=this.localize("Up Next");p.className="vjs-up-next-text",p.appendChild(o.createTextNode(d)),p.setAttribute("title",d),r.appendChild(p);var c=o.createElement("cite"),u=i.name||this.localize("Untitled Video");return c.className="vjs-playlist-name",c.appendChild(o.createTextNode(u)),c.setAttribute("title",u),r.appendChild(c),t},i}(E),g=function(t){function i(n,l){if(d(this,i),!n.playlist)throw new Error("videojs-playlist is required for the playlist component");var a=u(this,t.call(this,n,l));return a.items=[],l.supportsCssPointerEvents&&a.addClass("vjs-csspointerevents"),a.createPlaylist_(),e.browser.TOUCH_ENABLED||a.addClass("vjs-mouse"),n.on(["loadstart","playlistchange"],function(e){a.update()}),n.on("adstart",function(){a.addClass("vjs-ad-playing")}),n.on("adend",function(){n.ended()?n.one("ended",function(){a.removeClass("vjs-ad-playing")}):a.removeClass("vjs-ad-playing")}),a}return c(i,t),i.prototype.createEl=function(){var e=this.options_;if(e.el)return e.el;var t=o.createElement("ol");return t.className=e.className,e.el=t,t},i.prototype.createPlaylist_=function(){var e=this.player_.playlist()||[],t=this.el_.querySelector(".vjs-playlist-item-list"),i=this.el_.querySelector(".vjs-playlist-ad-overlay");t||((t=o.createElement("ol")).className="vjs-playlist-item-list",this.el_.appendChild(t));for(var n=0;n<this.items.length;n++)t.removeChild(this.items[n].el_);this.items.length=0;for(var l=0;l<e.length;l++){var a=new b(this.player_,{item:e[l]},this.options_);this.items.push(a),t.appendChild(a.el_)}i?t.appendChild(i):((i=o.createElement("li")).className="vjs-playlist-ad-overlay",t.appendChild(i));var s=this.player_.playlist.currentItem();if(this.items.length&&s>=0){v(this.items[s]);var r=this.items[s].$(".vjs-playlist-thumbnail");r&&h.addClass(r,"vjs-playlist-now-playing")}},i.prototype.update=function(){var e=this.player_.playlist();if(this.items.length!==e.length)return void this.createPlaylist_();for(var t=0;t<this.items.length;t++)if(this.items[t].item!==e[t])return void this.createPlaylist_();for(var i=this.player_.playlist.currentItem(),n=0;n<this.items.length;n++){var l=this.items[n];n===i?(v(l),o.activeElement!==l.el()&&h.addClass(l.thumbnail,"vjs-playlist-now-playing"),j(l)):n===i+1?(C(l),w(l)):(C(l),j(l))}},i}(E),N=function(t){var i=this,n=void 0,l=void 0;if(!i.playlist)throw new Error("videojs-playlist is required for the playlist component");"undefined"!=typeof p.HTMLElement&&t instanceof p.HTMLElement||t&&1===t.nodeType?(l=t,n=e.mergeOptions(f)):(n=e.mergeOptions(f,t),l=o.querySelector("."+n.className)),n.el=l,i.playlistMenu=new g(i,n)};e.registerComponent("PlaylistMenu",g),e.registerComponent("PlaylistMenuItem",b),m("playlistUi",N)});