if(!customElements.get("video-component")){class Video extends HTMLElement{constructor(){super(),this.autoplay=this.dataset.autoplay==="true",this.background=this.dataset.background==="true",this.naturalWidth=this.dataset.naturalWidth==="true"}connectedCallback(){this.init()}init(){const url=this.dataset.videoUrl;url?url.includes("youtu.be")||url.includes("youtube.com")?(url.includes("v=")?this.videoId=url.split("v=").pop().split("&")[0]:this.videoId=url.split("?")[0].split("/").pop(),this.type="youtube",this.initYouTube()):url.includes("vimeo.com")&&(this.videoId=url.split("?")[0].split("/").pop(),this.type="vimeo",this.initVimeo()):(this.type="tag",this.initVideoTag()),this.background&&this.closest(".video-section").addEventListener("click",this.play.bind(this))}loadScript(src){if(document.querySelector(`script[src="${src}"]`))return;const s=document.createElement("script");s.src=src,s.onerror=err=>console.warn(`Unable to load script ${src}`,err),this.type==="vimeo"?s.onload=()=>document.dispatchEvent(new CustomEvent("on:vimeo-api:loaded")):this.type==="youtube"&&(window.onYouTubeIframeAPIReady=()=>document.dispatchEvent(new CustomEvent("on:youtube-api:loaded"))),document.body.appendChild(s)}initYouTube(){const initYTPlayer=()=>{YT.ready(()=>{this.player=new YT.Player(this.querySelector("div"),{videoId:this.videoId,width:"1280",height:"720",playerVars:{controls:this.background?0:1,disablekb:this.background?1:0,iv_load_policy:3,modestbranding:1,playsinline:1,rel:0},events:{onReady:this.handleYTReady.bind(this),onStateChange:this.handleYTStateChange.bind(this)}})})};window.YT?initYTPlayer():(document.addEventListener("on:youtube-api:loaded",initYTPlayer.bind(this)),this.loadScript("//www.youtube.com/iframe_api"))}initVimeo(){const initVimeoPlayer=async()=>{this.player=new Vimeo.Player(this,{id:this.videoId,width:"1280",height:"720",autoplay:this.autoplay,background:this.background,keyboard:!this.background,muted:this.autoplay}),await this.player.ready(),this.setupIframe("js-vimeo"),this.player.on("pause",()=>{this.inViewport&&(this.pausedByUser=!0)}),this.player.on("play",()=>{this.closest(".video-section").classList.add("video-section--played")}),this.play()};window.Vimeo?initVimeoPlayer():(document.addEventListener("on:vimeo-api:loaded",initVimeoPlayer.bind(this)),this.loadScript("//player.vimeo.com/api/player.js"))}initVideoTag(){if(this.player=this.querySelector("video"),this.player.addEventListener("pause",()=>{this.inViewport&&(this.pausedByUser=!0)}),this.player.currentTime>0&&!this.player.paused&&!this.player.ended&&this.player.readyState>2)this.closest(".video-section").classList.add("video-section--played");else{this.player.addEventListener("play",()=>{this.closest(".video-section").classList.add("video-section--played")}),this.addObserver(this.player);const deferredMedia=this.closest("deferred-media");(!deferredMedia||deferredMedia.loadTrigger!=="click")&&(this.player.muted=!0),this.play()}}handleYTReady(){this.setupIframe("js-youtube"),this.autoplay&&this.player.mute(),this.play()}handleYTStateChange(e){e.data===YT.PlayerState.PAUSED?this.inViewport&&(this.pausedByUser=!0):e.data===YT.PlayerState.ENDED?this.background&&this.player.playVideo():e.data===YT.PlayerState.PLAYING&&this.closest(".video-section").classList.add("video-section--played")}setupIframe(jsClass){this.autoplay&&!this.naturalWidth&&(this.style.width=`${this.clientHeight*1.7778}px`,window.addEventListener("resize",window.debounce(()=>{this.style.width=`${this.clientHeight*1.7778}px`},200))),this.iframe=this.querySelector("iframe"),this.iframe.title=this.dataset.description,this.iframe.classList.add(jsClass),this.addObserver(this.iframe)}play(){!this.player||this.pausedByUser||(this.type==="youtube"?this.player.playVideo():this.player.play())}pause(){this.player&&(this.type==="youtube"?this.player.getPlayerState()!==2&&(this.player.pauseVideo(),this.pausedByUser=!1):this.type==="vimeo"?this.player.getPaused().then(paused=>{paused||(this.player.pause(),this.pausedByUser=!1)}):this.player.paused||(this.player.pause(),this.pausedByUser=!1))}addObserver(el){if(!("IntersectionObserver"in window))return;new IntersectionObserver(entries=>{entries.forEach(entry=>{entry.isIntersecting?(this.inViewport=!0,this.play()):(this.inViewport=!1,this.pause())},{rootMargin:"0px 0px 200px 0px"})}).observe(el)}}customElements.define("video-component",Video)}
//# sourceMappingURL=/cdn/shop/t/10/assets/video.js.map?v=61948905393951104701716915740