@flowplayer/player/plugins/float-on-scroll.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.float_on_scroll=e())}(this,(function(){"use strict";const t="float:pop:in";var e=Object.freeze({__proto__:null,POP_IN:t,POP_OUT:"float:pop:out",EXT_BTN_CLICK:"float:exit"});const n=(t,e)=>new(((t,e)=>{const n=t.get(e);if(!n)throw new Error(`no flowplayer component with the name ${e} exists`);const o=window.customElements.get(e);if(!o)throw new Error(`no default flowplayer component with the name ${e} exists`);const l=window.customElements.get(n);return"function"!=typeof l?o:l})(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)};function l(t){return function(t){const e=t.getBoundingClientRect(),n=window.innerHeight,o=e.y;return o>n||o+e.height<0?0:e.y<0?(e.height+o)/e.height:n-e.y>e.height?1:Math.abs((n-e.y)/e.height)}(t)>.8}function i(t,e){0==e.reaper||e.floating||a(e,t,"float:pop:out")}function s(e,n){0!=n.reaper&&n.floating&&a(n,e,t)}function r(t,e,o){const l=document.createElement("div");return l.classList.add("fp-exit-float"),l.append(Object.assign(n(t,"flowplayer-close-icon"),{role:"button"})),l.addEventListener("click",()=>{if(o.was_user_toggled=!0,!t.opts.float_default)return t.emit("float:exit");t.togglePlay(!1),s(e,t)}),l}function a(e,n,o){o&&e.emit(o),setTimeout((function(){const l=n.querySelector(".fp-float-wrapper"),i=n.clientWidth/n.clientHeight;if(!l)return;l.style.height=o===t?"auto":l.clientWidth/i+"px";const s=l.querySelector(".fp-ad-container > div");s&&(s.style.position=o==t?"absolute":"static"),e.emit("resize",{contentRect:{height:o===t?n.clientHeight:l.clientHeight,width:l.clientWidth}})}))}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 c={translation_key:"core.mute",name:"fp-mute"},u={translation_key:"core.mute",name:"fp-unmute"},f={translation_key:"core.close",name:"fp-close"};var p;const d=((p=class FloatOnScroll{constructor(t){this.flowplayer=t,o(this.flowplayer,"flowplayer-mute-icon",class extends FlowplayerIcon{constructor(t){super(t,c)}}),o(this.flowplayer,"flowplayer-unmute-icon",class extends FlowplayerIcon{constructor(t){super(t,u)}}),o(this.flowplayer,"flowplayer-close-icon",class extends FlowplayerIcon{constructor(t){super(t,f)}})}init(e,o,c){if(!1===e.float_on_scroll)return;if(function(){try{return window.self!==window.top}catch(t){return!0}}())return console.warn("iframe detected - floating player not supported in iframe");void 0===e.float_default&&(e.float_default=!0);if(this.flowplayer.instances.find(t=>t.root.classList.contains(p.SINGLETON_CLASS)))return e.float_on_scroll=!1,console.warn("disabling float on scroll for player index=%s as it is a singleton behavior\n\tto disable this warning manually configure float_on_scroll: false",this.flowplayer.instances.indexOf(c));o.classList.add(p.SINGLETON_CLASS),e.autopause&&c.setOpts({autopause:!1});const u={pop_out_container:void 0,was_user_toggled:!1};c.popIn=s.bind(this,o,c),c.popOut=i.bind(this,o,c);const f=window.scrollY;c.on("mount",(function(){u.pop_out_container=function(t,e){const n=document.createElement("div");return n.classList.add("fp-float-wrapper"),t.appendChild(n),Array.from(t.childNodes).forEach((function(t){t instanceof Element&&(t===n||t.classList.contains("fp-ratio"))||n.appendChild(t)})),e.getFullsceenTarget=()=>n,n}(o,c)})),c.on("renderplugin",(function(t){var e;t.preventDefault(),t.detail&&(null===(e=u.pop_out_container)||void 0===e||e.append(t.detail));const n=t.detail.querySelector("flowplayer-ad-controls");n&&n.append(r(c,o,u))}));const d=function(t,e){const n=t._customElements.get(e);return n&&t.root.querySelector(n)||void 0}(c,"flowplayer-header");d&&function(t,e,o,l){const i=document.createElement("div");i.classList.add("fp-mute-float"),i.append(...Object.assign([n(l,"flowplayer-mute-icon"),n(l,"flowplayer-unmute-icon")],{role:"button"})),i.addEventListener("click",(function(){l.toggleMute()})),t.append(r(l,o,e),i)}(d,u,o,c);const w=function(t,e){const n=t||60,o=Math.ceil(1e3/n);let l=Date.now(),i=-1;return function(...t){return i>-1||Date.now()<l||(i=requestAnimationFrame((function(){i=-1,e(),l=Date.now()+o}))),i}}(0,(function(){var t;if(l(o)){if(c.hasState("is-fullscreen"))return;null===(t=c.popIn)||void 0===t||t.call(c)}})),m=function(){a(c,o)};c.on("viewleave",t=>{var n;e.float_default&&window.scrollY!==f&&!u.was_user_toggled&&function(t){return!(Array.from(document.querySelectorAll(".fp-engine")).find(t=>t.hasState("is-popped-out"))||t.paused&&(!t.ads||!t.ads.adPlaying))}(c)&&(t.preventDefault(),null===(n=c.popOut)||void 0===n||n.call(c))}),c.on("viewenter",(function(){u.was_user_toggled=!1})),c.on("float:pop:out",(function(){c.floating=!0,c.setState("is-popped-out",!0),e.float_default&&(window.addEventListener("scroll",w),window.addEventListener("resize",m))})),c.on(t,(function(){c.floating=!1,c.setState("is-popped-out",!1),e.float_default&&(window.removeEventListener("scroll",w),window.removeEventListener("resize",m))}))}}).pluginName="float-on-scroll",p.events=e,p.SINGLETON_CLASS="float-on-scroll-enabled",p);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,d)}));