https://www.jumo.group/scripts/__dropins__/storefront-pdp/containers/ProductGallery.js

1/*! Copyright 2026 Adobe
2All Rights Reserved. */
3import{jsxs as O,jsx as i}from"@dropins/tools/preact-jsx-runtime.js";import{useState as M,useEffect as D,useRef as G,useMemo as S}from"@dropins/tools/preact-compat.js";import{Slot as K}from"@dropins/tools/lib.js";import{Image as W}from"@dropins/tools/components.js";import{events as L}from"@dropins/tools/event-bus.js";import{getFetchedProductData as a}from"../api.js";import{C as k,O as b,Z as m}from"../chunks/components.js";import"@dropins/tools/preact-hooks.js";import{useText as P}from"@dropins/tools/i18n.js";import"../fragments.js";import"@dropins/tools/fetch-graphql.js";import"@dropins/tools/preact.js";const z=[".mp4",".webm",".ogg",".mov",".avi",".mkv"],ee={".mp4":"video/mp4",".webm":"video/webm",".ogg":"video/ogg",".mov":"video/quicktime",".avi":"video/x-msvideo",".mkv":"video/x-matroska"};function te(r){if(!r)return"video/mp4";const l=r.toLowerCase(),t=z.find(e=>l.endsWith(e));return t?ee[t]:"video/mp4"}function re(r){if(!r)return!1;const l=r.toLowerCase();return z.some(t=>l.endsWith(t))}function x(r,l){if(l)return l;if(r!=null&&r.includes("adobeaemcloud.com")&&r.endsWith("/play"))return r.replace(/\/play$/,"/as/thumbnail.png")}function oe(r){if(!r)return"";const l=r.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/);if(l)return`https://www.youtube.com/embed/${l[1]}?rel=0`;const t=r.match(/vimeo\.com\/(?:video\/)?(\d+)/);return t?`https://player.vimeo.com/video/${t[1]}`:r}const ne=3e3;function le(r,{enabled:l=!0,timeoutMs:t=ne}={}){const e=r.join("\0"),p=!l||r.length===0,[d,c]=M(null),[u,h]=M(null);return D(()=>

3{if(p){c(e),h(null);return}let w=!1,n=r.length,y=!1;const g=()=>{w||(w=!0,y&&h(e),c(e))},A=window.setTimeout(()=>{y=!0,g()},t),s=v=>{w||(v&&(y=!0),n-=1,n<=0&&(window.clearTimeout(A),g()))};return r.forEach(v=>{const f=new Image;f.src=v,typeof f.decode=="function"?f.decode().then(()=>s(!1)).catch(()=>s(!0)):(f.onload=()=>s(!1),f.onerror=()=>s(!0))}),()=>{w=!0,window.clearTimeout(A)}},[e,l,t,p]),{ready:p||d===e,error:u===e}}const de=200,ce=(r,l)=>{var d,c;const t=((d=r==null?void 0:r.images)==null?void 0:d.map(u=>({type:"image",url:u.url,label:u.label})))??[];if(!l)return t;const e=((c=r==null?void 0:r.videos)==null?void 0:c.map(u=>({type:"video",url:u.url,label:u.title??"",preview:u.preview})))??[];return(typeof l=="object"?l.position:"last")==="first"?[...e,...t]:[...t,...e]},ie=(r,l)=>{if(!r)return[];const t=(r.images??[]).map(e=>e.url);return l&&(r.videos??[]).forEach(e=>{var d;const p=x(e.url,(d=e.preview)==null?void 0:d.url);p&&t.push(p)}),t},ue=(r,l,t)=>{var u,h;if(r===l)return!0;if(!r||!l)return!1;const e=r.images??[],p=l.images??[];if(e.length!==p.length)return!1;for(let o=0;o<e.length;o+=1)if(e[o].url!==p[o].url)return!1;if(!t)return!0;const d=r.videos??[],c=l.videos??[];if(d.length!==c.length)return!1;for(let o=0;o<d.length;o+=1){if(d[o].url!==c[o].url)return!1;const _=x(d[o].url,(u=d[o].preview)==null?void 0:u.url),w=x(c[o].url,(h=c[o].preview)==null?void 0:h.url);if(_!==w)return!1}return!0},pe=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,q=({data:r,videos:l,imageParams:t,thumbnailParams:e,zoom:p,slots:d,ImagesLabel:c,onZoom:u})=>{const h=S(()=>({data:r}),[r]),o=S(()=>ce(r,l),[r,l]),_=S(()=>o.length>0?o.map((n,y)=>{const g=({...A})=>{var f;const s={title:n.label,src:n.url,alt:c==null?void 0:c.replace("{product}",n.label).replace("{key}",String(y+1)).replace("{total}",String(o.length)),width:(t==null?void 0:t.width)??960,height:(t==null?void 0:t.height)??1191,params:t??{width:960},loading:y===0?"eager":"lazy",...A},v=n.type==="video"?x(n.url,(f=n.preview)==null?void 0:f.url):void 0;return i(K,{name:"CarouselMainImage",slot:d==null?void 0:d.CarouselMainImage,context:{...h,defaultImageProps:s,mediaType:n.type,previewUrl:v},children:n.type==="video"?re(n.url)?O("video",{className:"pdp-product-gallery__video",controls:!0,preload:"metadata",poster:v,width:(t==null?void 0:t.width)??960,height:(t==null?void 0:t.height)??1191,children:[i("source",{src:n.url,type:te(n.url)}),"Your browser does not support the video tag."]}):i("iframe",{className:"pdp-product-gallery__video-iframe",src:oe(n.url),title:n.label||"Product video",width:(t==null?void 0:t.width)??960,height:(t==null?void 0:t.height)??1191,loading:"lazy",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):i(W,{...s})})};return p&&n.type==="image"?i(m,{closeButton:typeof p=="object"?p.closeButton:!1,children:i(g,{})},n.url):i(g,{onClick:()=>u==null?void 0:u(y)},n.url)}):i("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product-gallery__images__placeholder",width:(t==null?void 0:t.width)??960,height:(t==null?void 0:t.height)??1191,"aria-hidden":!0},"pleaceholder"),[c,o,t,p,h,d==null?void 0:d.CarouselMainImage,u]),w=S(()=>o.length>0?o.map((n,y)=>{var s;const g={title:n.label,src:n.url,alt:c==null?void 0:c.replace("{product}",n.label).replace("{key}",String(y+1)).replace("{total}",String(o.length)),width:(e==null?void 0:e.width)??200,height:(e==null?void 0:e.height)??248,params:e??{width:200},loading:"lazy"},A=n.type==="video"?x(n.url,(s=n.preview)==null?void 0:s.url):void 0;return i(K,{name:"CarouselThumbnail",slotTag:"span",contentTag:"span",slot:d==null?void 0:d.CarouselThumbnail,context:{...h,defaultImageProps:g,mediaType:n.type,previewUrl:A},children:n.type==="video"?O("span",{className:"pdp-product-gallery__video-thumbnail",role:"img","aria-label":`Play video: ${n.label||"Product video"}`,children:[A?i("img",{src:A,alt:"",width:(e==null?void 0:e.width)??200,height:(e==null?void 0:e.he

3ight)??248,loading:"lazy","aria-hidden":"true"}):i("span",{className:"pdp-product-gallery__video-thumbnail-placeholder",style:{width:(e==null?void 0:e.width)??200,height:(e==null?void 0:e.height)??248},"aria-hidden":"true"}),i("span",{className:"pdp-product-gallery__video-icon","aria-hidden":"true",children:"▶"})]}):i(W,{...g})},n.url)}):i("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product-gallery__thumbnail__placeholder",width:(e==null?void 0:e.width)??200,height:(e==null?void 0:e.height)??248,"aria-hidden":!0},"pleaceholder"),[c,o,e,h,d==null?void 0:d.CarouselThumbnail]);return{mediaItems:o,galleryItems:_,thumbnails:w}},fe=({initialData:r=null,scope:l,controls:t="dots",loop:e=!0,peak:p=!1,gap:d=null,arrows:c=!0,arrowsOnMainImage:u=!1,zoom:h=!1,videos:o=!1,imageParams:_,thumbnailParams:w,children:n,slots:y,...g})=>{const A=P("PDP.Product.Image.label").label,[s,v]=M(r),[f,B]=M(null),[H,N]=M(!1),[R,j]=M(null),F=G(r);D(()=>{F.current=s},[s]);const V=G(o);V.current=o,D(()=>{const E=L.on("pdp/data",C=>{if(!C){v(null),B(null),N(!1);return}if(ue(F.current,C,V.current)){v(C),B(null),N(!1);return}B(C),N(!1)},{scope:l});return()=>{E==null||E.off()}},[l]);const Q=S(()=>ie(f,o),[f,o]),{ready:U}=le(Q,{enabled:!!f});D(()=>{if(!f||!U)return;const E=()=>{v(f),B(null),N(!1)};if(pe()){E();return}const C=window.requestAnimationFrame(()=>N(!0)),J=window.setTimeout(E,de+50);return()=>{window.cancelAnimationFrame(C),window.clearTimeout(J)}},[U,f]);const{mediaItems:I,galleryItems:$,thumbnails:Y}=q({data:s,videos:o,imageParams:_,thumbnailParams:w,zoom:h,slots:y,ImagesLabel:A,onZoom:j}),T=q({data:f,videos:o,imageParams:_,thumbnailParams:w,zoom:h,slots:y,ImagesLabel:A});if(!s)return null;const X=["pdp-product-gallery__stack",g.className].filter(Boolean).join(" "),Z=["pdp-product-gallery__layer","pdp-product-gallery__layer--pending",H?"pdp-product-gallery__layer--entering":""].filter(Boolean).join(" ");return O("div",{...g,className:X,children:[i("div",{className:"pdp-product-gallery__layer",children:i(k,{arrows:!!I.length&&c,arrowsOnMainImage:u,controls:I.length?t:void 0,loop:e&&!!I.length,peak:!!I.length&&p,gap:d,defaultIndex:R||0,thumbnails:Y,children:$})}),f?i("div",{className:Z,"aria-hidden":"true",children:i(k,{arrows:!!T.mediaItems.length&&c,arrowsOnMainImage:u,controls:T.mediaItems.length?t:void 0,loop:e&&!!T.mediaItems.length,peak:!!T.mediaItems.length&&p,gap:d,defaultIndex:0,thumbnails:T.thumbnails,children:T.galleryItems})}):null,R===null?null:i(b,{onClose:()=>j(null),centered:!0,children:i(k,{arrows:!!I.length,width:"100%",height:"100%",defaultIndex:R,loop:e&&!!I.length,controls:"dots",isZoomed:!0,children:$})})]})};fe.getInitialData=a;export{fe as ProductGallery,fe as default};
4//# sourceMappingURL=ProductGallery.js.map