@flowplayer/player 3.34.3 → 3.35.0-rc

package/package/plugins/playlist.js

@@ -0,0 +1 @@
+!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";const t="is-interstitial",e="playlist:next",n="playlist:ended",s="playlist:ready",i="playlist:loop",l="playlist:add",o="playlist:remove",a="interstitial/end",r="interstitial/cancel",c="interstitial/next_item";var u=Object.freeze({__proto__:null,PLAYLIST_NEXT:e,PLAYLIST_ENDED:n,PLAYLIST_READY:s,PLAYLIST_PREVIOUS:"playlist:previous",PLAYLIST_SELECTION:"playlist:selection",PLAYLIST_LOOP:i,PLAYLIST_ADD:l,PLAYLIST_REMOVE:o,INTERSTITIAL_END:a,INTERSTITIAL_CANCEL:r,INTERSTITIAL_NEXT_ITEM:c});const p={translation_key:"core.skip-next",name:"fp-skip-next"},d={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 y(t,e){if(!e)throw new Error(t)}function m(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 f(t,e){Pipe.of(t).fmap(m).fmap(y,e)}function h(t){return void 0!==t}function v(t){return"string"==typeof t}function b(t){return"object"==typeof t}function E(t){return t instanceof HTMLElement}function x(t){var e;f("Config must be an Object",h(t)&&b(t)),f("property `playlist` is required",h(t.playlist)),f("property `playlist` was not a String(MediaId)",v(t.playlist)||(e=t.playlist,f("playlist property was not of type PlaylistId|Array(MediaId|PlayConfig)",Array.isArray(e)),f("playlist property cannot be an empty Array",e.length>0),!e.forEach(function(t,e){f("item at playlist["+e+"] was not valid",v(t)||b(t))}))),"loop shuffle".split(" ").forEach(function(e){h(t[e])&&f(e+" must be a boolean value if present","boolean"==typeof t[e])}),h(t.delay)&&f("property `delay` must be a Number (Milliseconds)","number"==typeof t.delay)}function g(t){try{x(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 w=["title","delay","description","poster","src"];class UpNext extends FlowplayerComponent{static get observedAttributes(){return w}constructor(t){super(t),this.classList.add("up-next"),this.addEventListener("animationend",()=>{this.dispatchEvent(new CustomEvent(a))}),this.addEventListener("animationcancel",()=>{this.classList.add("cancelled"),this.dispatchEvent(new CustomEvent(r))}),this.addEventListener(c,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(),s=document.createElement("div");s.classList.add("pane","left");const i=document.createElement("div");i.classList.add("pane","right"),n.append(s,i);const l=document.createElement("div");l.classList.add("poster"),l.style.backgroundImage="url("+this.getPoster()+")",s.append(l),l.addEventListener("click",()=>this.dispatchEvent(new CustomEvent(a)));const o=document.createElement("span");o.classList.add("fp-icon","fp-play"),l.append(o);const r=document.createElement("span");r.classList.add("title"),r.textContent=this.getTitle();const c=document.createElement("span");c.classList.add("description"),c.textContent=this.getDescription();const u=document.createElement("span");u.classList.add("countdown"),this.getDelay()&&(u.style.setProperty("--up-next-delay",this.getDelay()+"s"),u.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",()=>u.classList.remove("go")),i.append(r,c,p,u),this.append(n)}_setUpNext(t){var e,n,s;const i=t.detail.next,l=this.player.opt("playlist.delay",void 0)||10;this.setAttribute("title",null!==(e=i.title)&&void 0!==e?e:""),this.setAttribute("description",null!==(n=i.description)&&void 0!==n?n:""),this.setAttribute("poster",null!==(s=i.poster)&&void 0!==s?s:""),this.setAttribute("delay",l+"")}}const L=(t,e)=>new(((t,e)=>{const n=t.get(e);if(!n)throw new Error(`no flowplayer component with the name ${e} exists`);const s=window.customElements.get(e);if(!s)throw new Error(`no default flowplayer component with the name ${e} exists`);const i=window.customElements.get(n);return"function"!=typeof i?s:i})(t._customElements,e))(t),_=(t,e,n)=>{window.customElements.get(e)||window.customElements.define(e,n),t.customElements.get(e)||t.customElements.set(e,e)};function A(t,e,n){const s=function(t){return Array.isArray(t)?t.slice(0):t.split(".")}(e);for(;s.length;){if(null==t)return n;const e=s.shift();if("string"!=typeof e)return n;t=t[e]}return null==t?n:t}function P(t){const e="number"==typeof t?t:parseInt(t,10);return(e>9?"":"0")+e}const I="flowplayer-playlist-interstitial",q="flowplayer-skip-next-icon",O="flowplayer-skip-previous-icon",N="flowplayer-playlist-controls";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(s,e=>{const n=e.detail.queue;n&&(this.list(n,t),this.classList.toggle("is-empty",!n.members.length))}),t.on(e,()=>{var e;(null===(e=t.playlist)||void 0===e?void 0:e.queue)&&Array.from(this.querySelectorAll("li")).forEach((e,n)=>{var s;const i=n===(null===(s=t.playlist)||void 0===s?void 0:s.queue.idx);e.classList.toggle("is-current",i),e.setAttribute("aria-current",""+i)})}),t.on(l,e=>{var n;const s=null===(n=t.playlist)||void 0===n?void 0:n.queue;if(!e.data||!s)return;e.data.members.forEach(e=>{const n=this.videoRow(e,t);n&&this.playlistWrapper.append(n)})}),t.on(o,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 s=this.itemHeader(t,e),i=this.itemContent(e);return n.append(s,i),n}itemContent(t){var e,n;const s=document.createElement("div");s.className="fp-playlist-controls-item-content";const i=document.createElement("div");i.className="fp-playlist-controls-item-title",i.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)||"",s.append(i,l),s}itemHeader(t,e){var n,s;const i=document.createElement("div");i.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 o=document.createElement("div");o.className="fp-playlist-controls-playing";const a=new(window.customElements.get("flowplayer-play-icon"))(t);a.ariaHidden="true",a.tabIndex=-1;const r=document.createElement("span");r.textContent=t.i18n("playlist.now_playing","Now playing"),o.append(a,r),i.append(l,o);const c=e.duration||(null===(s=e.metadata)||void 0===s?void 0:s.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 s=Math.floor(t/60);return t-=60*s,n>=1?(s-=60*n,e+n+":"+P(s)+":"+P(t)):e+P(s)+":"+P(t)}(c):"",i.append(t)}return i}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 l=document.createElement("label");l.className="fp-playlist-toggle-label",l.tabIndex=0,l.setAttribute("role","button"),l.setAttribute("for","toggle");const o=document.createElement("span");o.className="fp-playlist-toggle-title",o.textContent=t.i18n("playlist.autoplay","Autoplay");const a=document.createElement("div");return a.className="fp-playlist-toggle",a.append(o,i,l),l.addEventListener("click",e=>{e.preventDefault();const n=!i.checked;i.checked=n;const s=t.opts;s.playlist||(s.playlist={}),Object.assign(s.playlist,{advance:n}),l.ariaPressed=n+"",l.ariaLabel=n?t.i18n("playlist.turn_off_autoplay","Turn off autoplay"):t.i18n("playlist.autoplay","Autoplay")}),t.on(s,()=>{var e,s;const o=t.opts,a=null===(e=null==o?void 0:o.playlist)||void 0===e?void 0:e.advance;i.checked=!1!==a,l.ariaPressed=`${!1!==a}`,l.ariaLabel=!1!==a?t.i18n("playlist.turn_off_autoplay","Turn off autoplay"):t.i18n("playlist.autoplay","Autoplay"),n.textContent=(null===(s=o.playlist)||void 0===s?void 0:s.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 s=Array.from(this.querySelectorAll("li")).indexOf(t);-1!==s&&(null===(n=e.playlist)||void 0===n||n.play(s))}}const T="click",C="canplay";var S;function k(t,e){var n,s;const i=e.sort||H,l=null!==(n=e.mode)&&void 0!==n?n:S.FIFO;return t=i(t.slice(0),l),{mode:l,sort:i,members:t,last_idx:t.length-1,plays:null!==(s=e.plays)&&void 0!==s?s:0,idx:-1}}function F(t){return t.idx==t.last_idx}function M(t){const e=t.idx+1;return e>t.last_idx?0:e}function j(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 H(t,e){return(e&S.SHUFFLE)==S.SHUFFLE?t.sort(function(){return Math.random()-Math.random()}):t.slice(0)}function D(t){return k(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"}(S||(S={})),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 R=["touchstart","touchmove"];function U(t,e,n){const s=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(s),t}function Y(t,e,n,s){Array.isArray(e)?e.forEach(e=>W(t,e,n,s)):W(t,e,n,s)}function W(t,e,n,s){if(i=e,!~R.indexOf(i))return t.addEventListener(e,n,s),t;var i;const l=Object.assign(s||{},{passive:!0});return t.addEventListener(e,n,l),t}function B(t,e){const n=t._customElements.get(e);return n&&t.root.querySelector(n)||void 0}function $(t,e,n){return t.setAttribute(e,n),t}function X(t,e,n){return e.split(" ").forEach(e=>t.classList.toggle(e,n)),t}function V(...t){const e=document.createElement("div");return 0==t.length||e.classList.add(...t),e}function z(e,n,s){const i=n.idx+n.plays<0;if(!i&&s.delay)return function(e,n){var s;const i=null===(s=e.playlist)||void 0===s?void 0:s.queue,l=B(e,I);if(!l||!i||!n.delay)return;e.root.classList.add(t);const o=i.members[M(i)];U(l,c,{next:o})}(e,s);G(e,j(n,i,s.start_index),i)}function G(t,n,s){s||(t.preload=n.preload="auto",!t.opts.autoplay&&t.setOpts({autoplay:1})),t.emit("playlist/advance"),"object"==typeof n&&t.setOpts(n),function(t,n){var s;const i=null===(s=t.playlist)||void 0===s?void 0:s.queue;if(!i)return;const l=i.idx,o=i.members[l],a=t.currentSrc;if(o.src&&t.setSrc(o.src),t.emit(e,{next_index:l}),t.opts.autoplay||n)return;const r=n=>{(n.type===C&&a!==t.currentSrc||n.type===e)&&(t.removeEventListener(C,r),t.removeEventListener(e,r),n.type===C&&t.togglePlay(!0))};t.on([C,e],r)}(t,s)}function J(e,n){return{queue:n,events:u,play:function(t){t<0||t>=n.members.length||(this.queue.idx=t,G(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(o,{index:t})):console.warn("there is no playlist item at this index")},push:function(...n){const s=e.root;if(0==this.queue.idx&&s.classList.contains(t))return console.warn("new items cannot be added when playlist has ended.");const i=this.queue.members;i.push(...n),this.queue.last_idx=i.length-1,e.emit(l,{members:n})},clear:function(){this.queue.members=[],this.queue.plays--,function(t,e){t.playlist&&(e=t.playlist.queue=D(e),t.emit(s,{queue:e,should_play:!1}))}(e,this.queue)}}}function K(t){const n=L(t,O);$(n,"role","button"),Y(n,T,function(){t.playlist&&t.playlist.prev()});const s=L(t,q);$(s,"role","button"),Y(s,T,function(){t.playlist&&t.playlist.next()});const i=V("fp-playlist-prev-preview"),a=V("fp-playlist-next-preview"),r=B(t,"flowplayer-control-buttons");return r&&(r.prepend(n),r.append(s),r.append(i),r.append(a)),t.on("reap",function(){t.skip_controls=void 0}),t.on([e,l,o],function(e){const n=A(e,"data.queue",A(t,"playlist.queue"));if(!n||!r||!t.skip_controls)return;X(r,"is-prev-button-disabled",!n.idx),X(r,"is-next-button-disabled",n.idx===n.last_idx);const s=n.idx<n.last_idx?function(t){if(!F(t)||0!==(t.mode&S.LOOP))return t.members[M(t)]}(n):null,l=n.idx>0?function(t){if(0!==t.idx||0!==(t.mode&S.LOOP))return t.members[function(t){const e=t.idx-1;return e<0?t.last_idx:e}(t)]}(n):null;a.style.backgroundImage=["url(",s?s.poster:null,")"].join(""),i.style.backgroundImage=["url(",l?l.poster:null,")"].join("")}),{prevButton:n,nextButton:s,prevPreview:i,nextPreview:a}}function Q(t,e){if(!e)return;!1!==e.skip_controls&&(t.skip_controls=K(t));const n=function(t){let e=null;if(n=t.controls,!v(n)&&!E(n))return;var n;E(t.controls)?e=t.controls:v(t.controls)&&(e=document.querySelector(t.controls));return y("Could not find controls by Selector["+t.controls+"]",E(e)),e}(e);if(!n)return;const s=L(t,N);n.append(s)}function Z(t,e,n){if(Array.isArray(e))return n(function(t,e){let n=e.shuffle?S.SHUFFLE:S.FIFO;return e.loop&&(n|=S.LOOP),k(t,{mode:n,sort:e.sort})}(e,t));throw new Error("config.playlist must be an Array")}function tt(e){var l;e.on(s,function(t){var n,s;const i=e.opt("playlist",{}),l=null===(n=t.detail)||void 0===n?void 0:n.queue,o=null===(s=t.detail)||void 0===s?void 0:s.should_play;l&&i&&(e.playlist=J(e,l),o&&z(e,l,i))}),e.on("ended",(l=()=>{const t=e.opt("playlist");if(e.playlist&&t)return F(e.playlist.queue)?function(t,e){if(t.emit(n),!e.loop)return;if(!t.playlist)return;const l=t.playlist.queue=D(t.playlist.queue);if(t.emit(i),!e.shuffle)return z(t,l,e);t.emit(s,{queue:l,should_play:!0})}(e,t):void(!1!==t.advance&&z(e,e.playlist.queue,t))},t=>{setTimeout(function(){if(!t.defaultPrevented&&!t.prevented)return l(t)},0)})),e.on(["playing","waiting","seeking","src"],function(){if(!e.root.classList.contains(t))return;const n=B(e,I);n&&U(n,r)})}const et=1,nt=.1;const st=(t,e)=>{t.once("health:ready",()=>{var n;if(null==e?void 0:e.controls){const e=null===(n=t.root)||void 0===n?void 0:n.closest("div.fp-playlist-layout");let s;s=e?e.classList.contains("right")?"right":e.classList.contains("left")?"left":"default":"custom",function(t,{feature_name:e,behavior:n,sample_rate:s}){e&&(s||(s=et),t.emit("flowplayer:feature",{feature_name:e,behavior:n,sample_rate:s}))}(t,{behavior:"playlist-ui-enhancement",feature_name:`positioning-${s}`,sample_rate:nt})}})};var it;const lt=(it=class Playlist{constructor(t){_(t,N,FlowplayerPlaylistControls),_(t,I,class extends UpNext{constructor(t){super(t),this.classList.add("fp-interstitial")}}),_(t,q,class extends FlowplayerIcon{constructor(t){super(t,p)}}),_(t,O,class extends FlowplayerIcon{constructor(t){super(t,d)}})}init(e,n,s){const i=e.playlist||{};i.delay="number"==typeof i.delay?i.delay:5,s.setOpts(Object.assign(Object.assign({},e),{playlist:i})),Q(s,e.playlist),function(e){var n;const s=L(e,I);s.addEventListener(r,()=>e.root.classList.remove(t)),s.addEventListener(a,()=>{var n;e.root.classList.remove(t);const s=null===(n=e.playlist)||void 0===n?void 0:n.queue;s&&G(e,j(s,!1))}),null===(n=B(e,"flowplayer-ui"))||void 0===n||n.prepend(s)}(s),tt(s),st(s,e.playlist)}onload(t,e,n,i){Z(t.playlist||{},i.items,function(t){n.setState("is-playlist",!0),n.emit(s,{queue:t,should_play:0===n.currentSrc.length})})}wants(t,e,n){return"flowplayer/playlist"==e.type&&!!e.items&&g(Object.assign(Object.assign({},n),{playlist:e.items}))}},it.pluginName="playlist",it.events=u,it);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,lt)});