youtube-background-experimental.min.js

/* youtube-background v1.1.8 | https://github.com/stamat/youtube-background | MIT License */
(()=>{var a=class{constructor(t,e){this.lock=!1,t&&(this.element=t,!this.element.hasAttribute("data-target-uid")&&(this.progressElem=this.element.querySelector(".js-seek-bar-progress"),this.inputElem=this.element.querySelector(".js-seek-bar"),this.targetSelector=this.element.getAttribute("data-target"),this.targetSelector&&(this.targetElem=document.querySelector(this.targetSelector)),!this.targetSelector&&e&&(this.targetElem=e.element),this.targetElem&&(e&&this.setVBGInstance(e),this.targetElem.addEventListener("video-background-time-update",this.onTimeUpdate.bind(this)),this.targetElem.addEventListener("video-background-play",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-ready",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-destroyed",this.onDestroyed.bind(this)),this.inputElem.addEventListener("input",this.onInput.bind(this)),this.inputElem.addEventListener("change",this.onChange.bind(this)))))}setVBGInstance(t){this.vbgInstance||(this.vbgInstance=t,this.element.setAttribute("data-target-uid",t.uid))}onReady(t){this.setVBGInstance(t.detail)}onTimeUpdate(t){this.setVBGInstance(t.detail),this.lock||requestAnimationFrame(()=>this.setProgress(this.vbgInstance.percentComplete))}onDestroyed(t){this.vbgInstance=null,requestAnimationFrame(()=>this.setProgress(0))}onInput(t){this.lock=!0,requestAnimationFrame(()=>this.setProgress(t.target.value))}onChange(t){this.lock=!1,requestAnimationFrame(()=>this.setProgress(t.target.value)),this.vbgInstance&&(this.vbgInstance.seek(t.target.value),this.vbgInstance.playerElement&&this.vbgInstance.playerElement.style.opacity===0&&(this.vbgInstance.playerElement.style.opacity=1))}setProgress(t){this.progressElem&&(this.progressElem.value=t),this.inputElem&&(this.inputElem.value=t)}},r=class{constructor(t,e,s){if(this.element=t,typeof this.element=="string"&&(this.element=document.querySelector(t)),!!this.element&&(this.elements=this.element.querySelectorAll(e||"[data-vbg]"),!!this.elements.length)){this.videoBackgroundFactoryInstance=s,this.stack=[],this.map=new Map,this.current=0,this.currentElement=null,this.currentInstance=null,this.playing=!1,this.muted=!0;for(let i=0;i<this.elements.length;i++){const n=this.elements[i];!n.hasAttribute("data-vbg-uid")&&this.videoBackgroundFactoryInstance&&this.videoBackgroundFactoryInstance.add(n),this.stack.push(n),this.map.set(n,i),i===0&&(this.current=0,this.currentElement=n,this.videoBackgroundFactoryInstance&&(this.currentInstance=this.videoBackgroundFactoryInstance.get(n))),n.addEventListener("video-background-ended",this.onVideoEnded.bind(this)),n.addEventListener("video-background-seeked",this.onVideoSeeked.bind(this)),n.addEventListener("video-background-pause",this.onVideoPause.bind(this)),n.addEventListener("video-background-ready",this.onVideoReady.bind(this)),n.addEventListener("video-background-state-change",this.setVideoBackgroundFactoryInstance.bind(this),{once:!0}),n.addEventListener("video-background-time-update",this.setVideoBackgroundFactoryInstance.bind(this),{once:!0})}}}setVideoBackgroundFactoryInstance(t){this.videoBackgroundFactoryInstance||(this.videoBackgroundFactoryInstance=t.detail.factoryInstance,this.currentInstance||(this.currentInstance=this.videoBackgroundFactoryInstance.get(this.currentElement)))}onVideoReady(t){if(this.stack[this.current]!==t.detail.element)return;this.setVideoBackgroundFactoryInstance(t);const e=t.detail;e.params.muted&&(this.muted=!0),e.isIntersecting&&e.params.autoplay&&(this.playing=!0,e.currentState!=="playing"&&e.softPlay())}onVideoPause(t){this.setVideoBackgroundFactoryInstance(t),this.map.get(t.detail.element),this.current}levelSeekBars(){for(let t=0;t<this.stack.length;t++){if(t===this.current)continue;const e=this.getSeekBar(this.videoBackgroundFactoryInstance.get(this.stack[t]));e&&(t<this.current?this.setProgress(e,100):this.setProgress(e,0))}}getSeekBar(t){if(!t)return;const e=t.uid,s=document.querySelector(`.js-seek-bar-wrap[data-target-uid="${e}"]`);if(s)return s}setProgress(t,e){if(!t)return;const s=t.querySelector(".js-seek-bar-progress"),i=t.querySelector(".js-seek-bar");s&&(s.value=e),i&&(i.value=e)}onVideoSeeked(t){const e=this.map.get(t.detail.element);this.current!==e&&this.setCurrent(e,!0)}setCurrent(t,e){const s=this.current;t>=this.stack.length&&(t=0),t<0&&(t=this.stack.length-1);const i=this.videoBackgroundFactoryInstance.get(this.stack[s]);if(this.current=t,this.currentInstance=this.videoBackgroundFactoryInstance.get(this.stack[this.current]),this.currentElement=this.stack[this.current],this.stack[s].style.display="none",this.currentElement.style.display="block",!e){const n=this.getSeekBar(this.currentInstance);n&&this.setProgress(n,0),this.currentInstance.seek(0)}setTimeout(()=>{this.currentInstance.currentState!=="playing"&&this.currentInstance.play()},100),i&&i.currentState!=="paused"&&i.pause(),setTimeout(this.levelSeekBars.bind(this),100),t>=this.stack.length&&this.dispatchEvent("video-background-group-forward-rewind"),t<0&&this.dispatchEvent("video-background-group-backward-rewind")}dispatchEvent(t){this.element.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:this}))}onVideoEnded(t){t.detail.element===this.currentElement&&this.next()}next(){this.setCurrent(this.current+1),this.dispatchEvent("video-background-group-next")}prev(){this.setCurrent(this.current-1),this.dispatchEvent("video-background-group-previous")}unmute(){for(let t=0;t<this.stack.length;t++){const e=this.videoBackgroundFactoryInstance.get(this.stack[t]);e&&e.unmute()}this.muted=!1,this.dispatchEvent("video-background-group-umnute")}mute(){for(let t=0;t<this.stack.length;t++){const e=this.videoBackgroundFactoryInstance.get(this.stack[t]);e&&e.mute()}this.muted=!0,this.dispatchEvent("video-background-group-mute")}pause(){this.currentInstance.pause(),this.playing=!1,this.dispatchEvent("video-background-group-pause")}play(){this.currentInstance.play(),this.playing=!0,this.dispatchEvent("video-background-group-play")}destroy(){for(let t=0;t<this.elements.length;t++){const e=this.elements[t];e.removeEventListener("video-background-ended",this.onVideoEnded.bind(this)),e.removeEventListener("video-background-seeked",this.onVideoSeeked.bind(this)),e.removeEventListener("video-background-pause",this.onVideoPause.bind(this)),e.removeEventListener("video-background-ready",this.onVideoReady.bind(this)),e.removeEventListener("video-background-state-change",this.setVideoBackgroundFactoryInstance.bind(this)),e.removeEventListener("video-background-time-update",this.setVideoBackgroundFactoryInstance.bind(this))}}},o=class{constructor(t,e){t&&(this.element=t,this.targetSelector=this.element.getAttribute("data-target"),this.targetSelector&&(this.active=!1,this.element.hasAttribute("aria-pressed")?this.active=this.element.getAttribute("aria-pressed")==="true":this.element.setAttribute("aria-pressed",this.active),this.element.setAttribute("role","switch"),this.targetElem=document.querySelector(this.targetSelector),this.targetElem&&(e&&(this.vbgInstance=e),this.targetElem.addEventListener("video-background-ready",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-state-change",this.onStateChange.bind(this)),this.targetElem.addEventListener("video-background-play",this.onPlay.bind(this)),this.targetElem.addEventListener("video-background-pause",this.onPause.bind(this)),this.targetElem.addEventListener("video-background-destroyed",this.onDestroyed.bind(this)),this.element.addEventListener("click",this.onClick.bind(this)))))}onReady(t){this.vbgInstance=t.detail}onStateChange(t){this.vbgInstance||(this.vbgInstance=t.detail),this.active=this.vbgInstance.currentState==="playing"||this.vbgInstance.currentState==="buffering",this.element.setAttribute("aria-pressed",this.active)}onPlay(t){this.vbgInstance||(this.vbgInstance=t.detail),this.active=!0,this.element.setAttribute("aria-pressed",this.active)}onPause(t){this.vbgInstance||(this.vbgInstance=t.detail),this.active=!1,this.element.setAttribute("aria-pressed",this.active)}onDestroyed(t){this.vbgInstance=null,this.active=!1,this.element.setAttribute("aria-pressed",this.active)}onClick(t){this.vbgInstance&&(this.active?this.vbgInstance.pause():this.vbgInstance.play())}},h=class{constructor(t,e){t&&(this.element=t,this.targetSelector=this.element.getAttribute("data-target"),this.targetSelector&&(this.active=!1,this.element.hasAttribute("aria-pressed")?this.active=this.element.getAttribute("aria-pressed")==="true":this.element.setAttribute("aria-pressed",this.active),this.element.setAttribute("role","switch"),this.targetElem=document.querySelector(this.targetSelector),this.targetElem&&(e&&(this.vbgInstance=e),this.targetElem.addEventListener("video-background-ready",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-mute",this.onMute.bind(this)),this.targetElem.addEventListener("video-background-unmute",this.onUnmute.bind(this)),this.targetElem.addEventListener("video-background-destroyed",this.onDestroyed.bind(this)),this.element.addEventListener("click",this.onClick.bind(this)))))}onReady(t){this.vbgInstance=t.detail,this.vbgInstance.params.muted&&(this.active=!0,this.element.setAttribute("aria-pressed",this.active))}onMute(t){this.vbgInstance||(this.vbgInstance=t.detail),this.active=!0,this.element.setAttribute("aria-pressed",this.active)}onUnmute(t){this.vbgInstance||(this.vbgInstance=t.detail),this.active=!1,this.element.setAttribute("aria-pressed",this.active)}onDestroyed(t){this.vbgInstance=null,this.active=!1,this.element.setAttribute("aria-pressed",this.active)}onClick(t){this.vbgInstance&&(this.active?this.vbgInstance.unmute():this.vbgInstance.mute())}},c=class{constructor(t,e,s="data-uid"){if(this.instances={},this.selector=t,this.elements=[],this.callback=e,this.uidAttribute=s,!(!e||typeof e!="function")){typeof this.selector=="string"&&(this.elements=document.querySelectorAll(this.selector)),this.selector instanceof Element&&(this.elements=[this.selector]),this.selector instanceof NodeList&&(this.elements=this.selector);for(let i=0;i<this.elements.length;i++)this.add(this.elements[i])}}basicUID(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}generateUID(){let t=this.basicUID();return this.instances.hasOwnProperty(t)?this.generateUID():t}add(t){let e=t.getAttribute("id");(!e||this.instances.hasOwnProperty(e))&&(e=t.getAttribute(this.uidAttribute),(!e||this.instances.hasOwnProperty(e))&&(e=this.generateUID(),t.setAttribute(this.uidAttribute,e))),this.callback&&typeof this.callback=="function"&&(this.instances[e]=this.callback(t,e,this))}getID(t){if(!t)return;if(typeof t=="string")return t;const e=t.getAttribute("id");if(e&&this.instances.hasOwnProperty(e))return e;const s=t.getAttribute(this.uidAttribute);if(s&&this.instances.hasOwnProperty(s))return s}get(t){if(!t)return;const e=this.getID(t);if(e)return this.instances[e]}destroy(t){if(!t)return;const e=this.getID(t);if(!e)return;const s=this.instances[e];s.hasOwnProperty("destroy")&&typeof s.destroy=="function"&&this.instances[e].destroy(),delete this.instances[e]}destroyAll(){for(const t in this.instances){const e=this.instances[t];e.hasOwnProperty("destroy")&&typeof e.destroy=="function"&&e.destroy(),delete this.instances[t]}}},d=class extends c{constructor(t=".js-vbg-group",e,s){super(t,(i,n,u)=>new r(i,e,s))}};window.SeekBar=a,window.PlayToggle=o,window.MuteToggle=h,window.VideoBackgroundGroup=r,window.VideoBackgroundGroups=d})();