@flowplayer/player 3.35.0-rc → 3.35.0

package/package/plugins/endscreen.js

@@ -1 +0,0 @@
-!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.endscreen=e())}(this,function(){"use strict";const t="interstitial/end",e="interstitial/cancel",s="interstitial/next_item";function n(t,e){const s=t._customElements.get(e);return s&&t.root.querySelector(s)||void 0}const i=(t,e)=>new(((t,e)=>{const s=t.get(e);if(!s)throw new Error(`no flowplayer component with the name ${e} exists`);const n=window.customElements.get(e);if(!n)throw new Error(`no default flowplayer component with the name ${e} exists`);const i=window.customElements.get(s);return"function"!=typeof i?n:i})(t._customElements,e))(t),r=(t,e,s)=>{window.customElements.get(e)||window.customElements.define(e,s),t.customElements.get(e)||t.customElements.set(e,e)},o="flowplayer-endscreen-interstitial",l="flowplayer-endscreen-up-next",a="flowplayer-endscreen-grid",d="ended",c="recommendations:render",p="recommendations:hide",u="recommendationsready";var h=Object.freeze({__proto__:null,RECOMMENDATIONS_RENDER:c,RECOMMENDATIONS_HIDE:p,RECOMMENDATIONS_READY:u});class FlowplayerComponent extends HTMLElement{constructor(t){super(),this.player=t}}const m=(t,e)=>{const s=document.createElement("span");return s.classList.add(t),s.textContent=e,s};class InterstitialGrid extends FlowplayerComponent{constructor(t){super(t),this.classList.add("interstitial-grid"),this.addEventListener(InterstitialGrid.events.RENDER,e=>{this.prepare_endscreen(e.detail,t)}),t.on("resize",()=>{t.root.classList.contains("is-grid")&&this.items&&this.prepare_endscreen(this.items,t)}),this.previousButton=document.createElement("div"),this.previousButton.classList.add("fp-previous"),this.nextButton=document.createElement("div"),this.nextButton.classList.add("fp-next"),this.previousButton.addEventListener("click",this.navigation_buttons_listener.bind(this,!0)),this.nextButton.addEventListener("click",this.navigation_buttons_listener.bind(this,!1))}calculate_max_cells_number(t,e){const s=this.parentElement;if(!s)return;const n=window.getComputedStyle(s).padding,i=e.clientWidth-2*parseFloat(n),r=e.clientHeight-2*parseFloat(n);let o=t,l=0,a=0,d=0,c=0;t:for(;o>0;o-=1){if(1===o){l=i,a=Math.min(r,Math.max(l/1.5,l/1.8)),d=c=1;break}let t=1;for(;t<=o;t++){const e=Number.isInteger(o/t)?o/t:parseInt((o/t).toString())+1,s=i/t;let n=1.5;for(;n<=1.8;n+=.1){const i=s/n;if(i>=64&&i*e<=r&&s>=115){l=s,a=i,d=t,c=e;break t}}}}return this.style.setProperty("grid-template-columns",`repeat(${d}, ${l}px)`),this.style.setProperty("grid-template-rows",`repeat(${c}, ${a}px)`),o}prepare_endscreen(t,e){this.items=t,this.rendered_items=this.items.slice(0,this.calculate_max_cells_number(this.items.length,e)),this.populate_cells(this.rendered_items),this.hide_navigation_buttons(this.items.every((t,e)=>{var s;return t===(null===(s=this.rendered_items)||void 0===s?void 0:s[e])}))}populate_cells(t){this.innerHTML="",t.forEach(t=>{var e,s;const n=document.createElement("div");n.classList.add("grid-item"),t.poster&&(n.style.backgroundImage=`url(${t.poster})`);const i=document.createElement("div");i.classList.add("overlay");const r=m("title",null!==(e=t.title)&&void 0!==e?e:""),o=m("description",null!==(s=t.description)&&void 0!==s?s:"");i.append(r,o),n.append(i),n.addEventListener("click",()=>{const e=new CustomEvent(InterstitialGrid.events.SELECTION,{detail:t});this.dispatchEvent(e)}),this.append(n)})}hide_navigation_buttons(t){[this.previousButton,this.nextButton].forEach(e=>e.style.setProperty("display",t?"none":"block"))}connectedCallback(){var t;this.isConnected&&(null===(t=this.parentElement)||void 0===t||t.append(this.previousButton,this.nextButton))}navigation_buttons_listener(t){if(!this.rendered_items)return;const e=[];this.rendered_items.forEach(s=>{if(!this.items)return;const n=this.items.indexOf(s);if(void 0===n||-1===n)return;const i=this.calculate_index(t,n);void 0!==i&&e.push(this.items[i])}),this.rendered_items=e,this.populate_cells(this.rendered_items)}calculate_index(t,e){if(!this.items||!this.rendered_items)return;const s=this.items.length,n=this.rendered_items.length;let i=t?e-n:e+n;return i<0&&t&&(i=s+i),i>s-1&&!t&&(i-=s),i}}InterstitialGrid.events={SELECTION:"interstitial/grid/selection",RENDER:"interstitial/grid/render"};const v=["title","delay","description","poster","src"];class UpNext extends FlowplayerComponent{static get observedAttributes(){return v}constructor(n){super(n),this.classList.add("up-next"),this.addEventListener("animationend",()=>{this.dispatchEvent(new CustomEvent(t))}),this.addEventListener("animationcancel",()=>{this.classList.add("cancelled"),this.dispatchEvent(new CustomEvent(e))}),this.addEventListener(s,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 e,s;this.innerHTML="",this.classList.remove("cancelled");const n=document.createDocumentFragment(),i=document.createElement("div");i.classList.add("pane","left");const r=document.createElement("div");r.classList.add("pane","right"),n.append(i,r);const o=document.createElement("div");o.classList.add("poster"),o.style.backgroundImage="url("+this.getPoster()+")",i.append(o),o.addEventListener("click",()=>this.dispatchEvent(new CustomEvent(t)));const l=document.createElement("span");l.classList.add("fp-icon","fp-play"),o.append(l);const a=document.createElement("span");a.classList.add("title"),a.textContent=this.getTitle();const d=document.createElement("span");d.classList.add("description"),d.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!==(s=null===(e=this.player)||void 0===e?void 0:e.i18n("playlist.cancel"))&&void 0!==s?s:"cancel",p.addEventListener("click",()=>c.classList.remove("go")),r.append(a,d,p,c),this.append(n)}_setUpNext(t){var e,s,n;const i=t.detail.next,r=this.player.opt("playlist.delay",void 0)||10;this.setAttribute("title",null!==(e=i.title)&&void 0!==e?e:""),this.setAttribute("description",null!==(s=i.description)&&void 0!==s?s:""),this.setAttribute("poster",null!==(n=i.poster)&&void 0!==n?n:""),this.setAttribute("delay",r+"")}}const E="is-endscreen",y="is-up-next",_="is-grid";function g(t,e){const s=function(){try{return localStorage.getItem("flowplayer/debug")}catch(t){return""}}(),n=(n,...i)=>{try{const r=(null==e?void 0:e.debug)||s;r&&t.match(r)&&console.log(`flowplayer/${t} -- ${n}`,...i)}catch(t){console.warn(t)}};return n.log=n,n}function f(t,e,s){const n=function(t,e){const s=new CustomEvent(t,{detail:e,cancelable:!0});return e&&Object.defineProperty(s,"data",{get:()=>e}),s}(e,s);return t.dispatchEvent(n),t}!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){}}();class EndscreenInterstitial extends FlowplayerComponent{constructor(s){super(s),this.className="fp-endscreen",this.upNextEle=i(s,l),this.gridEle=i(s,a),this.append(this.upNextEle,this.gridEle),this.addEventListener(c,this.on_recommendations_render.bind(this)),this.upNextEle.addEventListener(e,this.on_next_cancel.bind(this)),this.upNextEle.addEventListener(t,this.on_next_end.bind(this)),this.gridEle.addEventListener(InterstitialGrid.events.SELECTION,this.on_grid_selection.bind(this))}on_recommendations_render(t){const e=t.detail;if(this.playlist=e.playlist,this.on_item_selected=e.on_item_selected,this.player.playlist||!1===this.player.opt("endscreen.auto_advance"))return this.gridEle.dispatchEvent(new CustomEvent(InterstitialGrid.events.RENDER,{detail:this.playlist})),this.player.root.classList.add(_);this.gridEle.hide_navigation_buttons(!0),this.player.root.classList.add(y),f(this.upNextEle,s,{next:this._nextVideo(this.playlist)})}on_next_cancel(){this.player.root.classList.contains(E)&&this.playlist&&(this.gridEle.dispatchEvent(new CustomEvent(InterstitialGrid.events.RENDER,{detail:this.playlist})),this.player.root.classList.remove(y),this.player.root.classList.add(_))}on_next_end(){if(!this.playlist||!this.on_item_selected)return;const t=this.current_video=this._nextVideo(this.playlist);this.on_item_selected(t)}on_grid_selection(t){this.on_item_selected&&this.on_item_selected(t.detail),this.current_video=t.detail,this.gridEle.hide_navigation_buttons(!0)}_nextVideo(t){if(!this.current_video)return t[0];const e=t.indexOf(this.current_video);return[-1,t.length-1].includes(e)?t[0]:t[e+1]}}var x;const w=((x=class Endscreen{constructor(t,e){this.logger=g("flowplayer/endscreen"),r(t,o,EndscreenInterstitial),r(t,l,class extends UpNext{}),r(t,a,class extends InterstitialGrid{})}init(t,e,s){const r=i(s,o);var l;s.on("mount",()=>{var t;return null===(t=n(s,"flowplayer-ui"))||void 0===t?void 0:t.prepend(r)}),s.on(u,t=>{const e=t.detail;this.recommendations=e,this.logger.log(`loaded ${e.playlist.length} recommendations`)}),s.on([d,"playlist:ended"],(l=n=>{var i;this.recommendations&&(t.loop||(null===(i=null==t?void 0:t.playlist)||void 0===i?void 0:i.loop)||n.type==d&&s.playlist||(f(r,c,{playlist:this.recommendations.playlist.slice(0,12),on_item_selected:this._setSrc.bind(this,s)}),e.classList.add(E)))},t=>{setTimeout(function(){if(!t.defaultPrevented&&!t.prevented)return l(t)},0)})),s.on(["seeking","loadstart","playing"],()=>{s.root.classList.contains(E)&&this.hide_recommendations(s)})}_setSrc(t,e){var s;if(this.hide_recommendations(t),!t.opts.autoplay&&t.setOpts({autoplay:1}),t.playlist)return t.playlist.push(e),null===(s=t.playlist)||void 0===s?void 0:s.next();t.setSrc(e.src),t.setOpts(e),t.once("canplay",()=>t.togglePlay(!0))}hide_recommendations(t){t.root.classList.remove(E,_,y);const e=n(t,o);e&&f(e,p)}}).pluginName="endscreen",x.events=h,x);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 s=t.flowplayer;return"function"==typeof s?(s(e),e):(Array.isArray(s.extensions)||(s.extensions=[]),~s.extensions.indexOf(e)||s.extensions.push(e),e)}(window,w)});