vlitejs/dist/plugins/sticky.js

vLitejs is a fast and lightweight Javascript library for customizing video and audio player in Javascript with a minimalist theme (HTML5, Youtube, Vimeo, Dailymotion)

/*!
 * @license MIT
 * @name vlitejs
 * @version 7.4.0
 * @copyright 2025 Yoriiis
 */
class t{constructor({player:t,options:e={}}){var i,s,n,o;this.providers=["html5","youtube","dailymotion","vimeo"],this.types=["video"],this.player=t,this.mode=null!==(i=e.mode)&&void 0!==i?i:"on",this.width=null!==(s=e.width)&&void 0!==s?s:400,this.offset=null!==(n=e.offset)&&void 0!==n?n:20,this.ratio=null!==(o=e.ratio)&&void 0!==o?o:16/9,this.windowSizes={clientWidth:document.documentElement.clientWidth,innerHeight:window.innerHeight},this.isSticky=!1,this.stickyIsClosed=!1,this.isOutViewport=null,this.isPlayerSeen=!1,this.onClickOnCloseStickyButton=this.onClickOnCloseStickyButton.bind(this),this.onScroll=this.onScroll.bind(this),this.onResize=this.onResize.bind(this)}init(){this.render(),this.closeStickyButton=this.player.elements.container.querySelector(".v-closeStickyButton"),this.addEvents()}render(){this.player.elements.container.insertAdjacentHTML("beforeend",'<button class="v-closeStickyButton"><svg xmlns="http://www.w3.org/2000/svg" viewBox="5.5 5.5 13 13"><path d="M18.207 5.793a1 1 0 0 0-1.414 0L12 10.586 7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0 0-1.414Z"/></svg></button>')}addEvents(){this.observer=new window.IntersectionObserver(this.callbackOnIntersection.bind(this),{rootMargin:"0px",threshold:0}),this.observer.observe(this.player.elements.outerContainer),this.closeStickyButton.addEventListener("click",this.onClickOnCloseStickyButton),window.addEventListener("scroll",this.onScroll,{passive:!0}),window.addEventListener("resize",this.onResize)}onScroll(){this.updateSticky()}updateSticky({resize:t=!1}={}){this.isStickyGranted()?this.isSticky&&!t||this.setStickyOn():this.isSticky&&this.setStickyOff()}onResize(){this.windowSizes.clientWidth=document.documentElement.clientWidth,this.windowSizes.innerHeight=window.innerHeight,clearTimeout(this.resizeTimer),this.resizeTimer=window.setTimeout((()=>this.updateSticky({resize:!0})),0)}callbackOnIntersection(t){t.forEach((t=>{t.isIntersecting?this.inViewport():this.outViewport()}))}inViewport(){this.isPlayerSeen=!0,this.isOutViewport=!1,this.isStickyGranted()&&this.setStickyOff()}outViewport(){this.isOutViewport=!0,this.isStickyGranted()&&this.setStickyOn()}isStickyGranted(){return!this.stickyIsClosed&&this.isOutViewport&&("instant"===this.mode||this.isPlayerSeen)}setStickyOn(){this.player.dispatchEvent("entersticky"),this.isSticky=!0,this.player.elements.outerContainer.classList.add("v-sticky");const t=this.width/this.ratio,e=this.windowSizes.clientWidth-this.width-this.offset,i=this.windowSizes.innerHeight-t-this.offset;this.player.elements.container.style.width=`${this.width}px`,this.player.elements.container.style.height=`${t}px`,this.player.elements.container.style.transform=`translate3d(${e}px, ${i}px, 0)`}setStickyOff(){this.player.dispatchEvent("leavesticky"),this.isSticky=!1,this.player.elements.outerContainer.classList.remove("v-sticky"),this.player.elements.container.style.removeProperty("width"),this.player.elements.container.style.removeProperty("height"),this.player.elements.container.style.removeProperty("transform")}onClickOnCloseStickyButton(t){t.preventDefault(),this.stickyIsClosed=!0,this.setStickyOff()}destroy(){this.closeStickyButton.removeEventListener("click",this.onClickOnCloseStickyButton),window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),this.observer.unobserve(this.player.elements.outerContainer)}}export{t as default};