@flowplayer/player
Version:
video player for the future
2 lines (1 loc) • 18.4 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).flowplayer=t.flowplayer||{},t.flowplayer.playlist=e())}(this,(function(){"use strict";var t=Object.freeze({__proto__:null,PLAYLIST_NEXT:"playlist:next",PLAYLIST_ENDED:"playlist:ended",PLAYLIST_READY:"playlist:ready",PLAYLIST_PREVIOUS:"playlist:previous",PLAYLIST_SELECTION:"playlist:selection",PLAYLIST_LOOP:"playlist:loop",PLAYLIST_ADD:"playlist:add",PLAYLIST_REMOVE:"playlist:remove",INTERSTITIAL_END:"interstitial/end",INTERSTITIAL_CANCEL:"interstitial/cancel",INTERSTITIAL_NEXT_ITEM:"interstitial/next_item"});const e={translation_key:"core.skip-next",name:"fp-skip-next"},n={translation_key:"core.skip-prev",name:"fp-skip-prev"};class Pipe{static of(t){return new Pipe(t)}static maybe(t,e,...n){return null==t?t:e.apply(t,[t,...n])}constructor(t){this.data=t}tap(t,...e){return t.apply(this,[this.data,...e]),new Pipe(this.data)}fmap(t,...e){const n=t.apply(this,[this.data,...e]);return new Pipe(n)}unwrap(){return this.data}}function i(t,e){if(!e)throw new Error(t)}function s(t){return"invalid playlist configuration\ndetails: "+t+"\n\tmust match Object of shape:\n"+["\t\t{ controls?: Selector|HTMLElement","player: Selector|HTMLElement","playlist: PlaylistId|Array(MediaId|PlayerConfig)","shuffle?: Boolean|false","loop?: Boolean|false","advance?: Boolean|true","delay?: Milliseconds|5000"].join("\n\t\t, ")+"\n\t\t}"}function l(t,e){Pipe.of(t).fmap(s).fmap(i,e)}function a(t){return void 0!==t}function o(t){return"string"==typeof t}function r(t){return"object"==typeof t}function c(t){return t instanceof HTMLElement}function p(t){var e;l("Config must be an Object",a(t)&&r(t)),l("property `playlist` is required",a(t.playlist)),l("property `playlist` was not a String(MediaId)",o(t.playlist)||(e=t.playlist,l("playlist property was not of type PlaylistId|Array(MediaId|PlayConfig)",Array.isArray(e)),l("playlist property cannot be an empty Array",e.length>0),!e.forEach((function(t,e){l("item at playlist["+e+"] was not valid",o(t)||r(t))})))),"loop shuffle".split(" ").forEach((function(e){a(t[e])&&l(e+" must be a boolean value if present","boolean"==typeof t[e])})),a(t.delay)&&l("property `delay` must be a Number (Milliseconds)","number"==typeof t.delay)}function u(t){try{p(t)}catch(t){return!1}return!0}class FlowplayerComponent extends HTMLElement{constructor(t){super(),this.player=t}}class FlowplayerIcon extends FlowplayerComponent{constructor(t,e){super(t),this.classList.add("fp-icon",e.name),e.title&&this.setAttribute("title",e.title),e.title&&this.setAttribute("aria-label",e.title),e.translation_key&&this.setAttribute("aria-label",t.i18n(e.translation_key)),this.setAttribute("tabindex","0"),this.setAttribute("focusable","true")}}const d=["title","delay","description","poster","src"];class UpNext extends FlowplayerComponent{static get observedAttributes(){return d}constructor(t){super(t),this.classList.add("up-next"),this.addEventListener("animationend",()=>{this.dispatchEvent(new CustomEvent("interstitial/end"))}),this.addEventListener("animationcancel",()=>{this.classList.add("cancelled"),this.dispatchEvent(new CustomEvent("interstitial/cancel"))}),this.addEventListener("interstitial/next_item",this._setUpNext.bind(this))}getTitle(){return this.getAttribute("title")||""}getDescription(){return this.getAttribute("description")||""}getPoster(){return this.getAttribute("poster")||""}getDelay(){return this.getAttribute("delay")||""}connectedCallback(){this.isConnected&&this._render()}attributeChangedCallback(){this._render()}_render(){var t,e;this.innerHTML="",this.classList.remove("cancelled");const n=document.createDocumentFragment(),i=document.createElement("div");i.classList.add("pane","left");const s=document.createElement("div");s.classList.add("pane","right"),n.append(i,s);const l=document.createElement("div");l.classList.add("poster"),l.style.backgroundImage="url("+this.getPoster()+")",i.append(l),l.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("interstitial/end")));const a=document.createElement("span");a.classList.add("fp-icon","fp-play"),l.append(a);const o=document.createElement("span");o.classList.add("title"),o.textContent=this.getTitle();const r=document.createElement("span");r.classList.add("description"),r.textContent=this.getDescription();const c=document.createElement("span");c.classList.add("countdown"),this.getDelay()&&(c.style.setProperty("--up-next-delay",this.getDelay()+"s"),c.classList.add("go"));const p=document.createElement("span");p.classList.add("cancel"),p.textContent=null!==(e=null===(t=this.player)||void 0===t?void 0:t.i18n("playlist.cancel"))&&void 0!==e?e:"cancel",p.addEventListener("click",()=>c.classList.remove("go")),s.append(o,r,p,c),this.append(n)}_setUpNext(t){var e,n,i;const s=t.detail.next,l=this.player.opt("playlist.delay",void 0)||10;this.setAttribute("title",null!==(e=s.title)&&void 0!==e?e:""),this.setAttribute("description",null!==(n=s.description)&&void 0!==n?n:""),this.setAttribute("poster",null!==(i=s.poster)&&void 0!==i?i:""),this.setAttribute("delay",l+"")}}const y=(t,e)=>new(((t,e)=>{const n=t.get(e);if(!n)throw new Error(`no flowplayer component with the name ${e} exists`);const i=window.customElements.get(e);if(!i)throw new Error(`no default flowplayer component with the name ${e} exists`);const s=window.customElements.get(n);return"function"!=typeof s?i:s})(t._customElements,e))(t),m=(t,e,n)=>{window.customElements.get(e)||window.customElements.define(e,n),t.customElements.get(e)||t.customElements.set(e,e)};function f(t,e,n){const i=function(t){return Array.isArray(t)?t.slice(0):t.split(".")}(e);for(;i.length;){if(null==t)return n;const e=i.shift();if("string"!=typeof e)return n;t=t[e]}return null==t?n:t}function h(t){const e="number"==typeof t?t:parseInt(t,10);return(e>9?"":"0")+e}class FlowplayerPlaylistControls extends FlowplayerComponent{constructor(t){super(t),this.playlistWrapper=document.createElement("ol"),this.className="fp-playlist-controls is-empty use-play-1",this.header=this.controlsHeader(t),this.append(this.header,this.playlistWrapper),t.on("playlist:ready",e=>{const n=e.detail.queue;n&&(this.list(n,t),this.classList.toggle("is-empty",!n.members.length))}),t.on("playlist:next",()=>{var e;(null===(e=t.playlist)||void 0===e?void 0:e.queue)&&Array.from(this.querySelectorAll("li")).forEach((e,n)=>{var i;const s=n===(null===(i=t.playlist)||void 0===i?void 0:i.queue.idx);e.classList.toggle("is-current",s),e.setAttribute("aria-current",""+s)})}),t.on("playlist:add",e=>{var n;const i=null===(n=t.playlist)||void 0===n?void 0:n.queue;if(!e.data||!i)return;e.data.members.forEach(e=>{const n=this.videoRow(e,t);n&&this.playlistWrapper.append(n)})}),t.on("playlist:remove",t=>{if(!t.data)return;const e=Array.from(this.querySelectorAll("li"))[t.data.index];e&&this.playlistWrapper.removeChild(e)})}list(t,e){this.playlistWrapper.innerHTML="",t.members.forEach(t=>{const n=this.videoRow(t,e);n&&this.playlistWrapper.append(n)})}videoRow(t,e){const n=document.createElement("li");return n.onclick=this.videoRow_onclick.bind(this,n,e),n.setAttribute("tabindex","0"),n.append(this.item(e,t)),n}item(t,e){const n=document.createElement("div");n.className="fp-playlist-controls-item";const i=this.itemHeader(t,e),s=this.itemContent(e);return n.append(i,s),n}itemContent(t){var e,n;const i=document.createElement("div");i.className="fp-playlist-controls-item-content";const s=document.createElement("div");s.className="fp-playlist-controls-item-title",s.textContent=t.title||(null===(e=t.metadata)||void 0===e?void 0:e.title)||"";const l=document.createElement("div");return l.className="fp-playlist-controls-item-desc",l.textContent=t.description||(null===(n=t.metadata)||void 0===n?void 0:n.description)||"",i.append(s,l),i}itemHeader(t,e){var n,i;const s=document.createElement("div");s.className="fp-playlist-controls-item-header";const l=document.createElement("img");l.alt=e.title||(null===(n=e.metadata)||void 0===n?void 0:n.title)||"",l.className="fp-playlist-controls-image",l.src=e.poster||"";const a=document.createElement("div");a.className="fp-playlist-controls-playing";const o=new(window.customElements.get("flowplayer-play-icon"))(t);o.ariaHidden="true",o.tabIndex=-1;const r=document.createElement("span");r.textContent=t.i18n("playlist.now_playing","Now playing"),a.append(o,r),s.append(l,a);const c=e.duration||(null===(i=e.metadata)||void 0===i?void 0:i.duration);if(void 0!==c){const t=document.createElement("span");t.className="fp-playlist-controls-duration",t.textContent=isFinite(c)?function(t){if(isNaN(t)||t>=Number.MAX_SAFE_INTEGER)return"";const e=t<0?"-":"";t=Math.round(Math.abs(t));const n=Math.floor(t/3600);let i=Math.floor(t/60);return t-=60*i,n>=1?(i-=60*n,e+n+":"+h(i)+":"+h(t)):e+h(i)+":"+h(t)}(c):"",s.append(t)}return s}controlsHeader(t){const e=document.createElement("div");e.className="fp-playlist-controls-header";const n=document.createElement("h3");n.id="title",n.className="fp-playlist-title",n.textContent="Playlist";const i=document.createElement("input");i.type="checkbox",i.className="fp-playlist-toggle-input",i.id="toggle";const s=document.createElement("label");s.className="fp-playlist-toggle-label",s.tabIndex=0,s.setAttribute("role","button"),s.setAttribute("for","toggle");const l=document.createElement("span");l.className="fp-playlist-toggle-title",l.textContent=t.i18n("playlist.autoplay","Autoplay");const a=document.createElement("div");return a.className="fp-playlist-toggle",a.append(l,i,s),s.addEventListener("click",e=>{e.preventDefault();const n=!i.checked;i.checked=n;const l=t.opts;l.playlist||(l.playlist={}),Object.assign(l.playlist,{advance:n}),s.ariaPressed=n+"",s.ariaLabel=n?t.i18n("playlist.turn_off_autoplay","Turn off autoplay"):t.i18n("playlist.autoplay","Autoplay")}),t.on("playlist:ready",()=>{var e,l;const a=t.opts,o=null===(e=null==a?void 0:a.playlist)||void 0===e?void 0:e.advance;i.checked=!1!==o,s.ariaPressed=""+(!1!==o),s.ariaLabel=!1!==o?t.i18n("playlist.turn_off_autoplay","Turn off autoplay"):t.i18n("playlist.autoplay","Autoplay"),n.textContent=(null===(l=a.playlist)||void 0===l?void 0:l.playlist_title)||t.i18n("playlist.playlist","Playlist")}),e.append(n,a),e}videoRow_onclick(t,e){var n;if(t.classList.contains("is-current"))return;const i=Array.from(this.querySelectorAll("li")).indexOf(t);-1!==i&&(null===(n=e.playlist)||void 0===n||n.play(i))}}var v;function x(t,e){var n,i;const s=e.sort||g,l=null!==(n=e.mode)&&void 0!==n?n:v.FIFO;return t=s(t.slice(0),l),{mode:l,sort:s,members:t,last_idx:t.length-1,plays:null!==(i=e.plays)&&void 0!==i?i:0,idx:-1}}function b(t){return t.idx==t.last_idx}function E(t){const e=t.idx+1;return e>t.last_idx?0:e}function w(t,e,n){return t.idx=e&&"number"==typeof n&&n>=0&&n<=t.last_idx?n:t.idx+1,t.members[t.idx]}function g(t,e){return(e&v.SHUFFLE)==v.SHUFFLE?t.sort((function(){return Math.random()-Math.random()})):t.slice(0)}function L(t){return x(t.members,{mode:t.mode,plays:t.plays+1,sort:t.sort})}!function(t){t[t.SHUFFLE=1]="SHUFFLE",t[t.FIFO=2]="FIFO",t[t.LOOP=4]="LOOP"}(v||(v={})),function(){let t=!1;try{const e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("testPassive",null,e),window.removeEventListener("testPassive",null,e)}catch(t){}}();const _=["touchstart","touchmove"];function A(t,e,n){const i=function(t,e){const n=new CustomEvent(t,{detail:e,cancelable:!0});return e&&Object.defineProperty(n,"data",{get:()=>e}),n}(e,n);return t.dispatchEvent(i),t}function P(t,e,n,i){Array.isArray(e)?e.forEach(e=>I(t,e,n,i)):I(t,e,n,i)}function I(t,e,n,i){if(s=e,!~_.indexOf(s))return t.addEventListener(e,n,i),t;var s;const l=Object.assign(i||{},{passive:!0});return t.addEventListener(e,n,l),t}function q(t,e){const n=t._customElements.get(e);return n&&t.root.querySelector(n)||void 0}function O(t,e,n){return t.setAttribute(e,n),t}function N(t,e,n){return e.split(" ").forEach(e=>t.classList.toggle(e,n)),t}function T(...t){const e=document.createElement("div");return 0==t.length||e.classList.add(...t),e}function k(t,e,n){const i=e.idx+e.plays<0;if(!i&&n.delay)return function(t,e){var n;const i=null===(n=t.playlist)||void 0===n?void 0:n.queue,s=q(t,"flowplayer-playlist-interstitial");if(!s||!i||!e.delay)return;t.root.classList.add("is-interstitial");const l=i.members[E(i)];A(s,"interstitial/next_item",{next:l})}(t,n);C(t,w(e,i,n.start_index),i)}function C(t,e,n){n||(t.preload=e.preload="auto",!t.opts.autoplay&&t.setOpts({autoplay:1})),t.emit("playlist/advance"),"object"==typeof e&&t.setOpts(e),function(t,e){var n;const i=null===(n=t.playlist)||void 0===n?void 0:n.queue;if(!i)return;const s=i.idx,l=i.members[s],a=t.currentSrc;if(l.src&&t.setSrc(l.src),t.emit("playlist:next",{next_index:s}),t.opts.autoplay||e)return;const o=e=>{("canplay"===e.type&&a!==t.currentSrc||"playlist:next"===e.type)&&(t.removeEventListener("canplay",o),t.removeEventListener("playlist:next",o),"canplay"===e.type&&t.togglePlay(!0))};t.on(["canplay","playlist:next"],o)}(t,n)}function S(e,n){return{queue:n,events:t,play:function(t){t<0||t>=n.members.length||(this.queue.idx=t,C(e,n.members[t]))},next:function(){this.queue.idx!==this.queue.last_idx&&this.play(this.queue.idx+1)},prev:function(){this.queue.idx&&this.play(this.queue.idx-1)},remove:function(t){const n=this.queue;return n.members[t]?n.idx===t?console.warn("operation failed: you cannot remove current playlist item"):(n.members.splice(t,1),n.last_idx=n.members.length-1,t<n.idx&&--n.idx,void e.emit("playlist:remove",{index:t})):console.warn("there is no playlist item at this index")},push:function(...t){const n=e.root;if(0==this.queue.idx&&n.classList.contains("is-interstitial"))return console.warn("new items cannot be added when playlist has ended.");const i=this.queue.members;i.push(...t),this.queue.last_idx=i.length-1,e.emit("playlist:add",{members:t})},clear:function(){this.queue.members=[],this.queue.plays--,function(t,e){t.playlist&&(e=t.playlist.queue=L(e),t.emit("playlist:ready",{queue:e,should_play:!1}))}(e,this.queue)}}}function F(t){const e=y(t,"flowplayer-skip-previous-icon");O(e,"role","button"),P(e,"click",(function(){t.playlist&&t.playlist.prev()}));const n=y(t,"flowplayer-skip-next-icon");O(n,"role","button"),P(n,"click",(function(){t.playlist&&t.playlist.next()}));const i=T("fp-playlist-prev-preview"),s=T("fp-playlist-next-preview"),l=q(t,"flowplayer-control-buttons");return l&&(l.prepend(e),l.append(n),l.append(i),l.append(s)),t.on("reap",(function(){t.skip_controls=void 0})),t.on(["playlist:next","playlist:add","playlist:remove"],(function(e){const n=f(e,"data.queue",f(t,"playlist.queue"));if(!n||!l||!t.skip_controls)return;N(l,"is-prev-button-disabled",!n.idx),N(l,"is-next-button-disabled",n.idx===n.last_idx);const a=n.idx<n.last_idx?function(t){if(!b(t)||0!=(t.mode&v.LOOP))return t.members[E(t)]}(n):null,o=n.idx>0?function(t){if(0!==t.idx||0!=(t.mode&v.LOOP))return t.members[function(t){const e=t.idx-1;return e<0?t.last_idx:e}(t)]}(n):null;s.style.backgroundImage=["url(",a?a.poster:null,")"].join(""),i.style.backgroundImage=["url(",o?o.poster:null,")"].join("")})),{prevButton:e,nextButton:n,prevPreview:i,nextPreview:s}}function M(t,e){if(!e)return;!1!==e.skip_controls&&(t.skip_controls=F(t));const n=function(t){let e=null;if(n=t.controls,!o(n)&&!c(n))return;var n;c(t.controls)?e=t.controls:o(t.controls)&&(e=document.querySelector(t.controls));return i("Could not find controls by Selector["+t.controls+"]",c(e)),e}(e);if(!n)return;const s=y(t,"flowplayer-playlist-controls");n.append(s)}function j(t,e,n){if(Array.isArray(e))return n(function(t,e){let n=e.shuffle?v.SHUFFLE:v.FIFO;return e.loop&&(n|=v.LOOP),x(t,{mode:n,sort:e.sort})}(e,t));throw new Error("config.playlist must be an Array")}function H(t){var e;t.on("playlist:ready",(function(e){var n,i;const s=t.opt("playlist",{}),l=null===(n=e.detail)||void 0===n?void 0:n.queue,a=null===(i=e.detail)||void 0===i?void 0:i.should_play;l&&s&&(t.playlist=S(t,l),a&&k(t,l,s))})),t.on("ended",(e=()=>{const e=t.opt("playlist");if(t.playlist&&e)return b(t.playlist.queue)?function(t,e){if(t.emit("playlist:ended"),!e.loop)return;if(!t.playlist)return;const n=t.playlist.queue=L(t.playlist.queue);if(t.emit("playlist:loop"),!e.shuffle)return k(t,n,e);t.emit("playlist:ready",{queue:n,should_play:!0})}(t,e):void(!1!==e.advance&&k(t,t.playlist.queue,e))},t=>{setTimeout((function(){if(!t.defaultPrevented&&!t.prevented)return e(t)}),0)})),t.on(["playing","waiting","seeking","src"],(function(){if(!t.root.classList.contains("is-interstitial"))return;const e=q(t,"flowplayer-playlist-interstitial");e&&A(e,"interstitial/cancel")}))}var D;const R=((D=class Playlist{constructor(t){m(t,"flowplayer-playlist-controls",FlowplayerPlaylistControls),m(t,"flowplayer-playlist-interstitial",class extends UpNext{constructor(t){super(t),this.classList.add("fp-interstitial")}}),m(t,"flowplayer-skip-next-icon",class extends FlowplayerIcon{constructor(t){super(t,e)}}),m(t,"flowplayer-skip-previous-icon",class extends FlowplayerIcon{constructor(t){super(t,n)}})}init(t,e,n){const i=t.playlist||{};i.delay="number"==typeof i.delay?i.delay:5,n.setOpts(Object.assign(Object.assign({},t),{playlist:i})),M(n,t.playlist),function(t){var e;const n=y(t,"flowplayer-playlist-interstitial");n.addEventListener("interstitial/cancel",()=>t.root.classList.remove("is-interstitial")),n.addEventListener("interstitial/end",()=>{var e;t.root.classList.remove("is-interstitial");const n=null===(e=t.playlist)||void 0===e?void 0:e.queue;n&&C(t,w(n,!1))}),null===(e=q(t,"flowplayer-ui"))||void 0===e||e.prepend(n)}(n),H(n)}onload(t,e,n,i){j(t.playlist||{},i.items,(function(t){n.setState("is-playlist",!0),n.emit("playlist:ready",{queue:t,should_play:0===n.currentSrc.length})}))}wants(t,e,n){return"flowplayer/playlist"==e.type&&!!e.items&&u(Object.assign(Object.assign({},n),{playlist:e.items}))}}).pluginName="playlist",D.events=t,D);return function(t,e){if("object"==typeof exports&&"undefined"!=typeof module)return e;if(null===document.currentScript)return e;"flowplayer"in t||(t.flowplayer={extensions:[]});const n=t.flowplayer;return"function"==typeof n?(n(e),e):(Array.isArray(n.extensions)||(n.extensions=[]),~n.extensions.indexOf(e)||n.extensions.push(e),e)}(window,R)}));