https://houseofpacific.com/cdn/shop/t/44/assets/component-deferred-media.js?v=73687470622705034741786709107

1(()=>{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.bindEventHandlers()}connectedCallback(){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)}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),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)}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.mediaLayout!=="grid"&&!this.closest(".swiper-slide-active"))return;this.autoPlayEnabled&&this.mediaPlayButton?.click()}}handlePauseMedia(){this.pauseAllMedia().then(()=>{this.removeAutoplayFromLoadedMedia()}).catch(error=>{console.error("Error handling pause media:",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)}})}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(){let videoType;const script=document.createElement("script");this.querySelector("iframe")?.src?.includes("vimeo")?(videoType="vimeo",script.src="https://player.vimeo.com/api/player.js",script.onload=()=>{eventBus.emit("video:api:loaded")}):this.querySelector("iframe")?.src?.includes("youtube")&&(videoType="youtube",script.src="https://www.youtube.com/iframe_api",script.onload=()=>{eventBus.emit("video:api:loaded")}),document.head.appendChild(script),this.initializeJsApi(videoType)}initializeJsApi(type){eventBus.on("video:api:loaded",()=>{if(type==="youtube")window.onYouTubeIframeAPIReady=()=>{const iframe=this.querySelector("iframe"),player=new YT.Player(iframe,{events:{onStateChange:state=>{const ended=state.data===0;state.data===1&&eventBus.emit("video:started",{details:{sectionId:this.sectionId,player,el:iframe}}

1),ended&&eventBus.emit("video:ended",{details:{sectionId:this.sectionId,player,el:iframe}})}}})};else if(type==="vimeo"){const iframe=this.querySelector("iframe"),player=new Vimeo.Player(iframe);player.on("play",()=>{eventBus.emit("video:started",{details:{sectionId:this.sectionId,player,el:iframe}})}),player.on("ended",()=>{eventBus.emit("video:ended",{details:{sectionId:this.sectionId,player,el:iframe}})})}})}postProcessMedia(mediaEl){mediaEl&&(mediaEl.style.pointerEvents="auto",this.loadSpecificMediaFeatures(mediaEl))}loadSpecificMediaFeatures(mediaEl){switch(mediaEl.tagName){case"MODEL-VIEWER":this.loadModelFeatures(mediaEl);break;case"VIDEO":const markLoaded=()=>{mediaEl.classList.add("is-loaded"),this.querySelector(".deferred-media-poster-image")?.classList.add("is-hidden"),this.hideLoadingIcon()};mediaEl.readyState>=2?markLoaded():mediaEl.addEventListener("loadeddata",markLoaded,{once:!0}),mediaEl.play().catch(error=>{console.error("Error playing video:",error),markLoaded()}),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}})});break;case"IFRAME":{const mediaSrc=mediaEl.src;mediaSrc&&mediaSrc.includes("vimeo")&&mediaEl.classList.add("pointer-events-none"),mediaEl.dataset.mediaIsPlaying="true",this.controlsEnabled||this.setupIframeToggle(mediaEl),this.useJsApi&&this.loadJsApi();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,iframeEl.src),"*"),iframeEl.dataset.mediaIsPlaying=isPlaying?"false":"true"}catch(error){console.error("Error playing iframe media:",error)}}})}isYouTubeOrVimeo(src){return src.includes("youtube")||src.includes("vimeo")}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(event=>{modelViewerElement.addEventListener(event,()=>{eventBus.emit(actionMap[event],{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,reject)=>{try{const allMedia=document.querySelectorAll('deferred-media:not([data-auto-play="true"][data-is-product-media="false"] iframe:not(.is-background-media)), deferred-media:not([data-auto-play="true"][data-is-product-media="false"] video:not(.is-background-media)), model-viewer'),pausePromises=Array.from(allMedia).map(media=>this.pauseMedia(media));Promise.all(pausePromises).then(()=>resolve())}catch(error){reject(error)}})}removeAutoplayFromLoadedMedia(){this.querySelectorAll("[data-media-loaded] iframe, [data-media-loaded] video").forEach(media=>{this.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/44/assets/component-deferred-media.js.map?v=73687470622705034741786709107