@flowplayer/player 3.14.1 → 3.15.0-rc.10

package/plugins/endscreen.js

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