https://www.theteaspot.com/cdn/shop/t/472/assets/component-deferred-media.js?v=73854649479037296041789735874

1(()=>{const getYouTubeAPI=(()=>{let promise;return()=>promise||(promise=new Promise((resolve,reject)=>{if(window.YT&&window.YT.Player){resolve(window.YT);return}window.onYouTubeIframeAPIReady=()=>resolve(window.YT);const tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api",tag.onerror=reject,document.head.appendChild(tag)}),promise)})();class DeferredMedia extends HTMLElement{constructor(){super(),this.sectionId=this.getAttribute("data-section-id"),this.activeMediaClass=this.getAttribute("data-active-media-class"),this.mediaPlayButton=this.querySelector("[data-media-play-button]"),this.mediaId=this.getAttribute("data-media-id"),this.autoPlayEnabled=this.getAttribute("data-auto-play")==="true",this.mediaLayout=this.getAttribute("data-media-layout"),this.controlsEnabled=this.getAttribute("data-show-controls")==="true",this.mediaCount=this.getAttribute("data-media-count"),this.isProductMedia=this.getAttribute("data-is-product-media")==="true",this.clickToPlay=this.getAttribute("data-click-to-play")==="true",this.useJsApi=this.getAttribute("data-use-js-api")==="true",this.isBackgroundMedia=this.getAttribute("data-is-background-media")==="true",this.isModalTrigger=this.getAttribute("data-is-modal-trigger")==="true",this.bindEventHandlers()}connectedCallback(){this.isModalTrigger||(this.verifyInitialSetup(),this.registerEventListeners())}disconnectedCallback(){this.unregisterEventListeners()}bindEventHandlers(){this.handleMediaClick=this.handleMediaClick.bind(this),this.handleMediaLoad=this.handleMediaLoad.bind(this),this.pauseAllMedia=this.pauseAllMedia.bind(this),this.handlePauseMedia=this.handlePauseMedia.bind(this),this.handleAutoPlay=this.handleAutoPlay.bind(this),this.playMedia=this.playMedia.bind(this),this.handleGlobalMediaPlay=this.handleGlobalMediaPlay.bind(this),this.handleGlobalMediaPause=this.handleGlobalMediaPause.bind(this)}verifyInitialSetup(){!this.mediaPlayButton&&!this.isBackgroundMedia&&console.error("DeferredMedia: Play button not found!"),this.mediaId||console.error("DeferredMedia: Media ID not found!"),!this.isProductMedia&&this.autoPlayEnabled&&this.handleMediaClick()}registerEventListeners(){eventBus.on("load:media",this.handleMediaLoad),eventBus.on("pause:media",this.handlePauseMedia),eventBus.on("play:media",this.playMedia),eventBus.on("slider:media:ready",this.handleAutoPlay),eventBus.on("media:play:global",this.handleGlobalMediaPlay),eventBus.on("media:pause:all",this.handleGlobalMediaPause),this.mediaPlayButton?.addEventListener("click",this.handleMediaClick),this.clickToPlay&&this.addEventListener("click",this.handleMediaClick)}unregisterEventListeners(){this.mediaPlayButton?.removeEventListener("click",this.handleMediaClick),this.clickToPlay&&this.removeEventListener("click",this.handleMediaClick),eventBus.off("load:media",this.handleMediaLoad),eventBus.off("pause:media",this.handlePauseMedia),eventBus.off("play:media",this.playMedia),eventBus.off("slider:media:ready",this.handleAutoPlay),eventBus.off("media:play:global",this.handleGlobalMediaPlay),eventBus.off("media:pause:all",this.handleGlobalMediaPause)}handleMediaLoad(event){event.mediaId===this.mediaId&&event.sectionId===this.sectionId&&this.loadMedia()}handleMediaClick(){this.loadMedia()}hideLoadingIcon(){this.loadingIcon?.classList.add("hidden")}handleAutoPlay(event){if(!(!event.sectionId||event.sectionId!==this.sectionId)&&!this.getAttribute("data-media-loaded")){if(!(getComputedStyle(this).display!=="none")&&!this.closest(".swiper-slide-active")||this.isProductMedia&&!this.closest(".swiper-slide-active"))return;this.autoPlayEnabled&&this.mediaPlayButton?.click()}}handlePauseMedia(){this.pauseAllMedia().then(()=>{this.removeAutoplayFromLoadedMedia()}).catch(console.error)}playMedia(event){const{sectionId,mediaEl}=event;mediaEl?.dataset?.mediaIsPlaying==="true"||this.sectionId!==sectionId||!mediaEl||!this.autoPlayEnabled||!this.getAttribute("data-media-loaded")||this.pauseAllMedia().then(()=>{const mediaType=mediaEl.tagName;if(mediaType==="VIDEO")mediaEl.play();else if(mediaType==="IFRAME")try{mediaEl.contentWindow.postMessage(this.messageFn("play",mediaEl.src),"*"),mediaEl.dataset.mediaIsPlaying="true"}catch(error){console.error("Error playing iframe media:",error)}})}handleGlobalMediaPlay(event){const{activeMediaId,activeDeferredMediaElement}=event;if(!(this===activeDeferredMediaElement||this.isModalTrigger||this.isBackgroun

1dMedia)&&this.getAttribute("data-media-loaded")){const mediaEl=this.querySelector("video, iframe");mediaEl&&this.pauseSingleMedia(mediaEl)}}handleGlobalMediaPause(event){const{initiator}=event;if(!(this===initiator||this.isModalTrigger||this.isBackgroundMedia)&&this.getAttribute("data-media-loaded")){const mediaEl=this.querySelector("video, iframe");mediaEl&&this.pauseSingleMedia(mediaEl)}}pauseSingleMedia(mediaEl){if(mediaEl.tagName==="VIDEO"&&!mediaEl.paused)mediaEl.pause();else if(mediaEl.tagName==="IFRAME")try{mediaEl.contentWindow.postMessage(this.messageFn("pause",mediaEl.src),"*"),mediaEl.dataset.mediaIsPlaying="false"}catch(error){console.error("Error pausing iframe media:",error)}}loadMedia(){!this.mediaId||this.getAttribute("data-media-loaded")||this.pauseAllMedia().then(()=>{const template=this.querySelector("template"),mediaElement=template?.content?.querySelector("[data-media-wrapper]");if(!mediaElement||this.isProductMedia&&this.mediaLayout!=="grid"&&this.mediaCount>1&&!this.closest(".swiper-slide-active"))return;const media=mediaElement.cloneNode(!0);this.appendChild(media),this.setAttribute("data-media-loaded",!0),media.classList.add(this.activeMediaClass),this.mediaPlayButton&&(this.mediaPlayButton.style.display="none"),template.remove();const mediaEl=media.querySelector("video, iframe, model-viewer");mediaEl&&mediaEl.tagName==="VIDEO"&&(this.loadingIcon=this.querySelector("[data-media-loading-icon]"),this.loadingIcon&&this.loadingIcon.classList.remove("hidden")),this.postProcessMedia(mediaEl)})}loadJsApi(){return this.querySelector("iframe")?.src?.includes("vimeo")?window.Vimeo?Promise.resolve(window.Vimeo):new Promise((resolve,reject)=>{const script=document.createElement("script");script.src="https://player.vimeo.com/api/player.js",script.onload=()=>resolve(window.Vimeo),script.onerror=reject,document.head.appendChild(script)}):getYouTubeAPI()}initializeJsApi(type){type==="youtube"&&this.loadJsApi().then(YT=>{const iframe=this.querySelector("iframe");if(iframe){if(!/enablejsapi=1/.test(iframe.src)){const hasQuery=/\?/.test(iframe.src);

1iframe.src+=(hasQuery?"&":"?")+"enablejsapi=1&origin="+encodeURIComponent(location.origin)}this.player=this.player||new YT.Player(iframe,{events:{onStateChange:evt=>{switch(evt.data){case YT.PlayerState.PLAYING:eventBus.emit("video:started",{details:{sectionId:this.sectionId,player:this.player,el:iframe}}),eventBus.emit("media:play:global",{activeMediaId:this.mediaId,activeDeferredMediaElement:this});break;case YT.PlayerState.ENDED:eventBus.emit("video:ended",{details:{sectionId:this.sectionId,player:this.player,el:iframe}});break;case YT.PlayerState.PAUSED:eventBus.emit("video:paused",{details:{sectionId:this.sectionId,player:this.player,el:iframe}});break}}}})}}).catch(console.error),type==="vimeo"&&this.loadJsApi().then(Vimeo=>{const iframe=this.querySelector("iframe");if(!iframe)return;const player=new Vimeo.Player(iframe);player.on("play",()=>{eventBus.emit("video:started",{details:{sectionId:this.sectionId,player,el:iframe}}),eventBus.emit("media:play:global",{activeMediaId:this.mediaId,activeDeferredMediaElement:this})}),player.on("ended",()=>eventBus.emit("video:ended",{details:{sectionId:this.sectionId,player,el:iframe}})),player.on("pause",()=>eventBus.emit("video:paused",{details:{sectionId:this.sectionId,player,el:iframe}}))}).catch(console.error)}postProcessMedia(mediaEl){mediaEl&&(mediaEl.style.pointerEvents="auto",this.loadSpecificMediaFeatures(mediaEl))}loadSpecificMediaFeatures(mediaEl){switch(mediaEl.tagName){case"MODEL-VIEWER":this.loadModelFeatures(mediaEl);break;case"VIDEO":mediaEl.play().catch(console.error),this.hideLoadingIcon(),this.controlsEnabled||this.setupVideoToggle(mediaEl),mediaEl.addEventListener("ended",()=>eventBus.emit("video:ended",{details:{sectionId:this.sectionId,player:mediaEl,el:mediaEl}})),mediaEl.addEventListener("play",()=>{eventBus.emit("video:started",{details:{sectionId:this.sectionId,player:mediaEl,el:mediaEl}}),eventBus.emit("media:play:global",{activeMediaId:this.mediaId,activeDeferredMediaElement:this})}),mediaEl.addEventListener("pause",()=>eventBus.emit("video:paused",{details:{sectionId:this.sectionId,player:mediaEl,el:mediaEl}}));break;case"IFRAME":{const src=mediaEl.src;if(src&&src.includes("vimeo")&&mediaEl.classList.add("pointer-events-none"),mediaEl.dataset.mediaIsPlaying="true",this.controlsEnabled||this.setupIframeToggle(mediaEl),this.useJsApi){const type=src.includes("vimeo")?"vimeo":"youtube";this.initializeJsApi(type)}break}}}setupVideoToggle(videoEl){!videoEl||videoEl.tagName!=="VIDEO"||this.isProductMedia&&!videoEl.closest(".swiper-slide-active")||videoEl.addEventListener("click",()=>{videoEl.paused?videoEl.play():videoEl.pause()})}setupIframeToggle(iframeEl){if(!iframeEl||iframeEl.tagName!=="IFRAME"||this.isProductMedia&&!iframeEl.closest(".swiper-slide-active"))return;const iframeWrapper=iframeEl.closest("[data-media-wrapper]");iframeWrapper&&iframeWrapper.addEventListener("click",()=>{const src=iframeEl.src,isPlaying=iframeEl.dataset.mediaIsPlaying==="true";if(this.isYouTubeOrVimeo(src)){const message=isPlaying?"pause":"play";try{iframeEl.contentWindow.postMessage(this.messageFn(message,src),"*"),iframeEl.dataset.mediaIsPlaying=isPlaying?"false":"true",message==="play"&&eventBus.emit("media:play:global",{activeMediaId:this.mediaId,activeDeferredMediaElement:this})}catch(error){console.error("Error toggling iframe media:",error)}}})}isYouTubeOrVimeo(src){return/youtube|vimeo/.test(src)}loadModelFeatures(modelViewerElement){Shopify.loadFeatures([{name:"model-viewer-ui",version:"1.0",onLoad:errors=>{if(errors)return;const modelViewerUI=new Shopify.ModelViewerUI(modelViewerElement);modelViewerElement.modelViewerUI=modelViewerUI,this.addModelInteractionListeners(modelViewerElement),this.initializeShopifyXR()}}])}addModelInteractionListeners(modelViewerElement){const events=["mousedown","mouseup","touchstart","touchend"],actionMap={mousedown:"disable-swiping",mouseup:"enable-swiping",touchstart:"disable-swiping",touchend:"enable-swiping"};events.forEach(evt=>modelViewerElement.addEventListener(evt,()=>eventBus.emit(actionMap[evt],{sectionId:this.sectionId})))}initializeShopifyXR(){Shopify.loadFeatures([{name:"shopify-xr",version:"1.0",onLoad:errors=>{errors||document.addEventListener("shopify_xr_initialized",()=>this.setupShopifyXR())}}])}setupShopifyXR(){document.querySelectorAll('[id^="ProductJSON-"]').forEach(modelJSON=>{window.ShopifyXR.addModels(JSON.parse(modelJSON.textContent)),modelJSON.remove()}),window.ShopifyXR.setupXRElements()}pauseAllMedia(){return new Promise(resolve=>{eventBus.emit("media:pause:all",{initiator:this}),setTimeout(resolve,10)})}removeAutoplayFromLoadedMedia(){this.querySelectorAll("[data-media-loaded] iframe, [data-media-loaded] video").forEach(media=>

1this.removeAutoplayFromMedia(media))}pauseMedia(media){if(media.tagName==="IFRAME")try{media.contentWindow.postMessage(this.messageFn("pause",media.src),"*"),media.dataset.mediaIsPlaying="false"}catch(error){console.error("Error pausing iframe media:",error)}else{if(media.tagName==="VIDEO"&&!media.paused)return media.pause();media.tagName==="MODEL-VIEWER"&&media.modelViewerUI&&media.modelViewerUI.pause()}}removeAutoplayFromMedia(media){!media||this.autoPlayEnabled||(media.tagName==="IFRAME"&&media.src.includes("autoplay=1")&&(media.src=media.src.replace("autoplay=1","autoplay=0")),media.tagName==="VIDEO"&&media.hasAttribute("autoplay")&&media.removeAttribute("autoplay"))}messageFn(action,src){if(src.includes("youtube"))return JSON.stringify({event:"command",func:action==="play"?"playVideo":"pauseVideo",args:[]});if(src.includes("vimeo"))return JSON.stringify({method:action})}}customElements.get("deferred-media")||customElements.define("deferred-media",DeferredMedia)})();
2//# sourceMappingURL=/cdn/shop/t/472/assets/component-deferred-media.js.map?v=73854649479037296041789735874