https://www.volero.de/cdn/shop/t/156/assets/media.js?v=51864736107851196501787682406

1import{Component}from"@theme/component";import{ThemeEvents,MediaStartedPlayingEvent}from"@theme/events";import{DialogCloseEvent}from"@theme/dialog";import{prefersReducedMotion}from"@theme/utilities";customElements.get("load-image")||customElements.define("load-image",class extends Component{#observer=null;connectedCallback(){this.#setupImages(),this.#observeImages()}disconnectedCallback(){this.#observer&&this.#observer.disconnect()}#setupImages(){const images=this.querySelectorAll("img");for(const img of images){if(img.complete){img.toggleAttribute("data-loaded",!0);continue}img.toggleAttribute("data-loading",!0),img.addEventListener("load",()=>{img.toggleAttribute("data-loading",!1),img.toggleAttribute("data-loaded",!0)},{once:!0}),img.addEventListener("error",()=>{img.toggleAttribute("data-loading",!1),img.toggleAttribute("data-loaded",!0)},{once:!0})}}#observeImages(){this.#observer=new MutationObserver(()=>{this.#setupImages()}),this.#observer&&this.#observer.observe(this,{childList:!0,subtree:!0})}});class DeferredMedia extends Component{isPlaying=!1;#autoplayObserver=null;#userPaused=!1;#prefetchObserver=null;#renditionSrc=null;#onScreen=!0;#abortController=new AbortController;connectedCallback(){super.connectedCallback(),this.hasAttribute("autoplay")&&prefersReducedMotion()&&this.querySelector('[ref="toggleMediaButton"]')&&(this.#userPaused=!0),this.hasAttribute("autoplay")?(this.#autoplayObserver=new IntersectionObserver(entries=>{for(const entry of entries)this.#onScreen=entry.isIntersecting,entry.isIntersecting?this.#loadAndSettlePlayback():this.pauseMedia()},{threshold:.25}),this.#autoplayObserver.observe(this)):this.#playlistSrc&&(this.#prefetchObserver=new IntersectionObserver(async(entries,observer)=>{entries.some(entry=>entry.isIntersecting)&&(await this.#resolveRendition(),this.#renditionSrc&&observer.disconnect())},{rootMargin:"400px"}),this.#prefetchObserver.observe(this));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(),this.#autoplayObserver&&(this.#autoplayObserver.disconnect(),this.#autoplayObserver=null),this.#prefetchObserver&&(this.#prefetchObserver.disconnect(),this.#prefetchObserver=null)}updatePlayPause(isPlaying){this.isPlaying=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);const label=isPlaying?toggleMediaButton.dataset.labelPause:toggleMediaButton.dataset.labelPlay;label&&toggleMediaButton.setAttribute("aria-label",label)}this.toggleAttribute("playing",this.isPlaying)}async#loadAndSettlePlayback(){await this.loadContent(!1),this.#onScreen&&!this.#userPaused?this.playMedia():this.pauseMedia()}showDeferredMedia=()=>{this.loadContent(!0),this.updatePlayPause(!0)};async loadContent(focus=!0){if(this.getAttribute("data-media-loaded"))return;this.dispatchEvent(new MediaStartedPlayingEvent(this));const content=this.querySelector("template")?.content.firstElementChild?.cloneNode(!0);if(content){if(this.setAttribute("data-media-loaded","true"),content instanceof HTMLVideoElement&&(this.hasAttribute("autoplay")&&await this.#resolveRendition(),this.#renditionSrc)){const source=content.querySelector("source");source&&(source.src=this.#renditionSrc)}this.appendChild(content),focus&&content instanceof HTMLElement&&content.focus(),this.#userPaused?(content instanceof HTMLVideoElement?content.removeAttribute("autoplay"):content.addEventListener("load",()=>this.pauseMedia(),{once:!0}),this.pauseMedia()):content instanceof HTMLVideoElement&&content.getAttribute("autoplay")&&content.play()}}get#playlistSrc(){return this.querySelector("template")?.content.querySelector("video")?.dataset.hlsSrc}async#resolveRendition(){const playlistSrc=this.#playlistSrc,slotWidth=this.clientWidth;if(!playlistSrc||!slotWidth)return;const target=slotWidth*(this.hasAttribute("autoplay")?.85:1.2);try{const playlistUrl=new URL(playlistSrc,location.href),response=await fetch(playlistUrl,{signal:AbortSignal.timeout(1e3)});if(!response.ok)return;const renditions=[...(await response.text()).matchAll(/RESOLUTION=(\d+)x\d+[^\n]*\n\s*(\S+\.m3u8)/g)].map(([,width,name])=>({width:Number(width),url:new URL(name,playlistUrl).href.replace(/\.(HD|SD)-(\d+p)\.([\d.]+Mbps)\.hls\.(\d+)_\.m3u8$/,".$1-$2-$3-$4.mp4")})).filter(rendition=>rendition.url.endsWith(".mp4")).sort((a,b)=>a.width-b.width);this.#renditionSrc=renditions.find(rendition=>rendition.width>=target)?.url??null}catch{}}toggleMedia(){this.#userPaused=this.isPlaying,this.isPlaying?this.pauseMedia():(this.#onScreen=!0,this.#loadAndSettlePlayback())}

1playMedia(){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.updatePlayPause(!0)}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.updatePlayPause(!1)}}customElements.get("deferred-media")||customElements.define("deferred-media",DeferredMedia);class ProductModel extends DeferredMedia{#abortController=new AbortController;loadContent(focus=!0){const loaded=super.loadContent(focus);return Shopify.loadFeatures([{name:"model-viewer-ui",version:"1.0",onLoad:this.setupModelViewerUI.bind(this)}]),loaded}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);
2//# sourceMappingURL=/cdn/shop/t/156/assets/media.js.map?v=51864736107851196501787682406