import{Component}from"@theme/component";import{ThemeEvents,MediaStartedPlayingEvent}from"@theme/events";import{DialogCloseEvent}from"@theme/dialog";class DeferredMedia extends Component{isPlaying=!1;#abortController=new AbortController;connectedCallback(){super.connectedCallback();const signal=this.#abortController.signal;document.addEventListener(ThemeEvents.mediaStartedPlaying,this.pauseMedia.bind(this),{signal}),window.addEventListener(DialogCloseEvent.eventName,this.pauseMedia.bind(this),{signal})}disconnectedCallback(){super.disconnectedCallback(),this.#abortController.abort()}updatePlayPauseHint(isPlaying){const toggleMediaButton=this.refs.toggleMediaButton;if(toggleMediaButton instanceof HTMLElement){toggleMediaButton.classList.remove("hidden");const playIcon=toggleMediaButton.querySelector(".icon-play");playIcon&&playIcon.classList.toggle("hidden",isPlaying);const pauseIcon=toggleMediaButton.querySelector(".icon-pause");pauseIcon&&pauseIcon.classList.toggle("hidden",!isPlaying)}}showDeferredMedia=()=>{this.loadContent(!0),this.isPlaying=!0,this.updatePlayPauseHint(this.isPlaying)};loadContent(focus=!0){if(this.getAttribute("data-media-loaded"))return;this.dispatchEvent(new MediaStartedPlayingEvent(this));const content=this.querySelector("template")?.content.firstElementChild?.cloneNode(!0);content&&(this.setAttribute("data-media-loaded","true"),this.appendChild(content),focus&&content instanceof HTMLElement&&content.focus(),this.refs.deferredMediaPlayButton?.classList.add("deferred-media__playing"),content instanceof HTMLVideoElement&&content.getAttribute("autoplay")&&content.play())}toggleMedia(){this.isPlaying?this.pauseMedia():this.playMedia()}playMedia(){const iframe=this.querySelector("iframe[data-video-type]");iframe?iframe.contentWindow?.postMessage(iframe.dataset.videoType==="youtube"?'{"event":"command","func":"playVideo","args":""}':'{"method":"play"}',"*"):this.querySelector("video")?.play(),this.isPlaying=!0,this.updatePlayPauseHint(this.isPlaying)}pauseMedia(){const iframe=this.querySelector("iframe[data-video-type]");iframe?iframe.contentWindow?.postMessage(iframe.dataset.videoType==="youtube"?'{"event":"command","func":"pauseVideo","args":""}':'{"method":"pause"}',"*"):this.querySelector("video")?.pause(),this.isPlaying=!1,this.getAttribute("data-media-loaded")&&this.updatePlayPauseHint(this.isPlaying)}}customElements.get("deferred-media")||customElements.define("deferred-media",DeferredMedia);class ProductModel extends DeferredMedia{#abortController=new AbortController;loadContent(){super.loadContent(),Shopify.loadFeatures([{name:"model-viewer-ui",version:"1.0",onLoad:this.setupModelViewerUI.bind(this)}])}disconnectedCallback(){super.disconnectedCallback(),this.#abortController.abort()}pauseMedia(){super.pauseMedia(),this.modelViewerUI?.pause()}playMedia(){super.playMedia(),this.modelViewerUI?.play()}async setupModelViewerUI(errors){if(errors||(Shopify.ModelViewerUI||await this.#waitForModelViewerUI(),!Shopify.ModelViewerUI))return;const element=this.querySelector("model-viewer");if(!element)return;const signal=this.#abortController.signal;if(this.modelViewerUI=new Shopify.ModelViewerUI(element),!this.modelViewerUI)return;this.playMedia();let pointerStartX=0,pointerStartY=0;element.addEventListener("pointerdown",event=>{pointerStartX=event.clientX,pointerStartY=event.clientY},{signal}),element.addEventListener("click",event=>{const distanceX=Math.abs(event.clientX-pointerStartX),distanceY=Math.abs(event.clientY-pointerStartY);Math.sqrt(distanceX*distanceX+distanceY*distanceY)<10&&this.pauseMedia()},{signal})}async#waitForModelViewerUI(){for(let i=0;i<10;i++){if(Shopify.ModelViewerUI)return;await new Promise(resolve=>setTimeout(resolve,50))}}}customElements.get("product-model")||customElements.define("product-model",ProductModel);
//# sourceMappingURL=/cdn/shop/t/47/assets/media.js.map?v=37825095869491791421757451905