@flowplayer/player/plugins/endscreen.js

video player for the future

!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";function t(t,e){const n=t._customElements.get(e);return n&&t.root.querySelector(n)||void 0}const e=(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),n=(t,e,n)=>{window.customElements.get(e)||window.customElements.define(e,n),t.customElements.get(e)||t.customElements.set(e,e)};var s=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 i=(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 r=document.createElement("div");r.classList.add("overlay");const o=i("title",null!==(e=t.title)&&void 0!==e?e:""),l=i("description",null!==(n=t.description)&&void 0!==n?n:"");r.append(o,l),s.append(r),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 r=["title","delay","description","poster","src"];class UpNext extends FlowplayerComponent{static get observedAttributes(){return r}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(),s=document.createElement("div");s.classList.add("pane","left");const i=document.createElement("div");i.classList.add("pane","right"),n.append(s,i);const r=document.createElement("div");r.classList.add("poster"),r.style.backgroundImage="url("+this.getPoster()+")",s.append(r),r.addEventListener("click",()=>this.dispatchEvent(new CustomEvent("interstitial/end")));const o=document.createElement("span");o.classList.add("fp-icon","fp-play"),r.append(o);const l=document.createElement("span");l.classList.add("title"),l.textContent=this.getTitle();const d=document.createElement("span");d.classList.add("description"),d.textContent=this.getDescription();const a=document.createElement("span");a.classList.add("countdown"),this.getDelay()&&(a.style.setProperty("--up-next-delay",this.getDelay()+"s"),a.classList.add("go"));const c=document.createElement("span");c.classList.add("cancel"),c.textContent=null!==(e=null===(t=this.player)||void 0===t?void 0:t.i18n("playlist.cancel"))&&void 0!==e?e:"cancel",c.addEventListener("click",()=>a.classList.remove("go")),i.append(l,d,c,a),this.append(n)}_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 o(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 l(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=e(t,"flowplayer-endscreen-up-next"),this.gridEle=e(t,"flowplayer-endscreen-grid"),this.append(this.upNextEle,this.gridEle),this.addEventListener("recommendations:render",this.on_recommendations_render.bind(this)),this.upNextEle.addEventListener("interstitial/cancel",this.on_next_cancel.bind(this)),this.upNextEle.addEventListener("interstitial/end",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"),l(this.upNextEle,"interstitial/next_item",{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 d;const a=((d=class Endscreen{constructor(t,e){this.logger=o("flowplayer/endscreen"),n(t,"flowplayer-endscreen-interstitial",EndscreenInterstitial),n(t,"flowplayer-endscreen-up-next",class extends UpNext{}),n(t,"flowplayer-endscreen-grid",class extends InterstitialGrid{})}init(n,s,i){const r=e(i,"flowplayer-endscreen-interstitial");var o;i.on("mount",()=>{var e;return null===(e=t(i,"flowplayer-ui"))||void 0===e?void 0:e.prepend(r)}),i.on("recommendationsready",t=>{const e=t.detail;this.recommendations=e,this.logger.log(`loaded ${e.playlist.length} recommendations`)}),i.on(["ended","playlist:ended"],(o=t=>{var e;this.recommendations&&(n.loop||(null===(e=null==n?void 0:n.playlist)||void 0===e?void 0:e.loop)||"ended"==t.type&&i.playlist||(l(r,"recommendations:render",{playlist:this.recommendations.playlist.slice(0,12),on_item_selected:this._setSrc.bind(this,i)}),s.classList.add("is-endscreen")))},t=>{setTimeout((function(){if(!t.defaultPrevented&&!t.prevented)return o(t)}),0)})),i.on(["seeking","loadstart","playing"],()=>{i.root.classList.contains("is-endscreen")&&this.hide_recommendations(i)})}_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(e){e.root.classList.remove("is-endscreen","is-grid","is-up-next");const n=t(e,"flowplayer-endscreen-interstitial");n&&l(n,"recommendations:hide")}}).pluginName="endscreen",d.events=s,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,a)}));