https://tiltbeauty.com/cdn/shop/t/57/assets/shared--404-s--collect…--page-s--password-s--product-s-Ca2Qu1dY.js

1import{B as i,A as r}from"./vendor-CStAXuG0.js";class d extends i{constructor(e){super(e),this.debug=!1,this.refs={video:".js-video",source:".js-source",videoControl:".js-videoControl"},this.dom={$component:e,$video:this.$get(this.refs.video),$source:this.$get(this.refs.source),$videoControl:this.$get(this.refs.videoControl)},this.state={isMobileTablet:null,observer:!1,observerConfig:{rootMargin:"250px",threshold:.01},pausedVideoClass:"is-paused",animationHelper:new r},this.mount()}mount(){const{dom:e,state:t}=this;super.mount(),this.setMobileBreakpoint(),this.observe(),e.$videoControl&&this.setClick(e.$videoControl,this.toggleVideoPlay),window.addEventListener("resize",t.animationHelper.debounce(()=>this.onResize(),200))}onResize(){const{state:e}=this,t=e.isMobileTablet;this.setMobileBreakpoint(),t!==e.isMobileTablet&&this.observe()}setMobileBreakpoint(){const{dom:e,state:t}=this,{customBreakpoint:s}=e.$component.dataset,o=s||1024;t.isMobileTablet=window.matchMedia(`(max-width: ${o}px)`).matches}observe(){const{dom:e,state:t}=this;t.observer=new IntersectionObserver(this.onIntersection.bind(this),t.observerConfig),t.observer.observe(e.$component)}onIntersection(e){const{state:{observer:t}}=this,s=e[0];s.isIntersecting&&(this.load(),t.unobserve(s.target))}load(){const{dom:e}=this,t=this.getSrcKey(),s=e.$source.getAttribute(t)||!1;s&&(e.$source.setAttribute("src",s),this.playVideo())}getSrcKey(){const{dom:e,state:t}=this;return Object.keys(e.$source.dataset).indexOf("mobileSrc")!==-1&&t.isMobileTablet?"data-mobile-src":"data-src"}async playVideo(){const{dom:e}=this;e.$video.load();try{await e.$video.play(),this.dispatchCustomEvent()}catch(t){console.error("Video : playVideo error",t)}}toggleVideoPlay(){const{dom:e,state:t}=this;e.$video.paused?(e.$video.play(),e.$videoControl.classList.remove(t.pausedVideoClass),e.$videoControl.setAttribute("aria-label","Pause video")):(e.$video.pause(),e.$videoControl.classList.add(t.pausedVideoClass),e.$videoControl.setAttribute("aria-label","Play video"))}dispatchCustomEvent(){const{dom:{$component:e}}=this,{customStartEvent:t}=e.dataset;t&&this.dispatch(t)}}export{d as V};