@dropins/storefront-pdp 3.0.4-beta1 → 3.0.4-beta2

package/containers/ProductGallery.js

@@ -1,4 +1,4 @@
 /*! Copyright 2026 Adobe
 All Rights Reserved. */
-import{jsxs as O,jsx as i}from"@dropins/tools/preact-jsx-runtime.js";import{useState as C,useEffect as B,useRef as Z,useMemo as S}from"@dropins/tools/preact-compat.js";import{Slot as $}from"@dropins/tools/lib.js";import{Image as G}from"@dropins/tools/components.js";import{events as J}from"@dropins/tools/event-bus.js";import{g as L}from"../chunks/getFetchedProductData.js";import{C as k,O as a,Z as b}from"../chunks/Zoom.js";/* empty css                  */import"@dropins/tools/preact-hooks.js";/* empty css                       *//* empty css                           */import{useText as m}from"@dropins/tools/i18n.js";import"@dropins/tools/preact.js";const W=[".mp4",".webm",".ogg",".mov",".avi",".mkv"],P={".mp4":"video/mp4",".webm":"video/webm",".ogg":"video/ogg",".mov":"video/quicktime",".avi":"video/x-msvideo",".mkv":"video/x-matroska"};function ee(o){if(!o)return"video/mp4";const n=o.toLowerCase(),t=W.find(e=>n.endsWith(e));return t?P[t]:"video/mp4"}function te(o){if(!o)return!1;const n=o.toLowerCase();return W.some(t=>n.endsWith(t))}function R(o,n){if(n)return n;if(o!=null&&o.includes("adobeaemcloud.com")&&o.endsWith("/play"))return o.replace(/\/play$/,"/as/thumbnail.png")}function oe(o){if(!o)return"";const n=o.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/);if(n)return`https://www.youtube.com/embed/${n[1]}?rel=0`;const t=o.match(/vimeo\.com\/(?:video\/)?(\d+)/);return t?`https://player.vimeo.com/video/${t[1]}`:o}const re=3e3;function ne(o,{enabled:n=!0,timeoutMs:t=re}={}){const e=o.join(" "),u=!n||o.length===0,[l,c]=C(null),[d,A]=C(null);return B(()=>{if(u){c(e),A(null);return}let v=!1,r=o.length,h=!1;const y=()=>{v||(v=!0,h&&A(e),c(e))},g=window.setTimeout(()=>{h=!0,y()},t),s=w=>{v||(w&&(h=!0),r-=1,r<=0&&(window.clearTimeout(g),y()))};return o.forEach(w=>{const f=new Image;f.src=w,typeof f.decode=="function"?f.decode().then(()=>s(!1)).catch(()=>s(!0)):(f.onload=()=>s(!1),f.onerror=()=>s(!0))}),()=>{v=!0,window.clearTimeout(g)}},[e,n,t,u]),{ready:u||l===e,error:d===e}}const le=200,de=(o,n)=>{var l,c;const t=((l=o==null?void 0:o.images)==null?void 0:l.map(d=>({type:"image",url:d.url,label:d.label})))??[];if(!n)return t;const e=((c=o==null?void 0:o.videos)==null?void 0:c.map(d=>({type:"video",url:d.url,label:d.title??"",preview:d.preview})))??[];return(typeof n=="object"?n.position:"last")==="first"?[...e,...t]:[...t,...e]},ce=(o,n)=>{if(!o)return[];const t=(o.images??[]).map(e=>e.url);return n&&(o.videos??[]).forEach(e=>{var l;const u=R(e.url,(l=e.preview)==null?void 0:l.url);u&&t.push(u)}),t},ie=(o,n,t)=>{if(o===n)return!0;if(!o||!n)return!1;const e=o.images??[],u=n.images??[];if(e.length!==u.length)return!1;for(let d=0;d<e.length;d+=1)if(e[d].url!==u[d].url)return!1;if(!t)return!0;const l=o.videos??[],c=n.videos??[];if(l.length!==c.length)return!1;for(let d=0;d<l.length;d+=1)if(l[d].url!==c[d].url)return!1;return!0},ue=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,K=({data:o,videos:n,imageParams:t,thumbnailParams:e,zoom:u,slots:l,ImagesLabel:c,onZoom:d})=>{const A=S(()=>({data:o}),[o]),p=S(()=>de(o,n),[o,n]),M=S(()=>p.length>0?p.map((r,h)=>{const y=({...g})=>{var f;const s={title:r.label,src:r.url,alt:c==null?void 0:c.replace("{product}",r.label).replace("{key}",String(h+1)).replace("{total}",String(p.length)),width:(t==null?void 0:t.width)??960,height:(t==null?void 0:t.height)??1191,params:t??{width:960},loading:h===0?"eager":"lazy",...g},w=r.type==="video"?R(r.url,(f=r.preview)==null?void 0:f.url):void 0;return i($,{name:"CarouselMainImage",slot:l==null?void 0:l.CarouselMainImage,context:{...A,defaultImageProps:s,mediaType:r.type,previewUrl:w},children:r.type==="video"?te(r.url)?O("video",{className:"pdp-product-gallery__video",controls:!0,preload:"metadata",poster:w,width:(t==null?void 0:t.width)??960,height:(t==null?void 0:t.height)??1191,children:[i("source",{src:r.url,type:ee(r.url)}),"Your browser does not support the video tag."]}):i("iframe",{className:"pdp-product-gallery__video-iframe",src:oe(r.url),title:r.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(G,{...s})})};return u&&r.type==="image"?i(b,{closeButton:typeof u=="object"?u.closeButton:!1,children:i(y,{})},r.url):i(y,{onClick:()=>d==null?void 0:d(h)},r.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,p,t,u,A,l==null?void 0:l.CarouselMainImage,d]),v=S(()=>p.length>0?p.map((r,h)=>{var s;const y={title:r.label,src:r.url,alt:c==null?void 0:c.replace("{product}",r.label).replace("{key}",String(h+1)).replace("{total}",String(p.length)),width:(e==null?void 0:e.width)??200,height:(e==null?void 0:e.height)??248,params:e??{width:200},loading:"lazy"},g=r.type==="video"?R(r.url,(s=r.preview)==null?void 0:s.url):void 0;return i($,{name:"CarouselThumbnail",slotTag:"span",contentTag:"span",slot:l==null?void 0:l.CarouselThumbnail,context:{...A,defaultImageProps:y,mediaType:r.type,previewUrl:g},children:r.type==="video"?O("span",{className:"pdp-product-gallery__video-thumbnail",role:"img","aria-label":`Play video: ${r.label||"Product video"}`,children:[g?i("img",{src:g,alt:"",width:(e==null?void 0:e.width)??200,height:(e==null?void 0:e.height)??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(G,{...y})},r.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,p,e,A,l==null?void 0:l.CarouselThumbnail]);return{mediaItems:p,galleryItems:M,thumbnails:v}},pe=({initialData:o=null,scope:n,controls:t="dots",loop:e=!0,peak:u=!1,gap:l=null,arrows:c=!0,arrowsOnMainImage:d=!1,zoom:A=!1,videos:p=!1,imageParams:M,thumbnailParams:v,children:r,slots:h,...y})=>{const g=m("PDP.Product.Image.label").label,[s,w]=C(o),[f,x]=C(null),[q,N]=C(!1),[D,j]=C(null),F=Z(o);B(()=>{F.current=s},[s]),B(()=>{const T=J.on("pdp/data",E=>{if(!E){w(null),x(null),N(!1);return}if(ie(F.current,E,p)){w(E),x(null),N(!1);return}x(E),N(!1)},{scope:n});return()=>{T==null||T.off()}},[n,p]);const z=S(()=>ce(f,p),[f,p]),{ready:V}=ne(z,{enabled:!!f});B(()=>{if(!f||!V)return;const T=()=>{w(f),x(null),N(!1)};if(ue()){T();return}const E=window.requestAnimationFrame(()=>N(!0)),X=window.setTimeout(T,le+50);return()=>{window.cancelAnimationFrame(E),window.clearTimeout(X)}},[V,f]);const{mediaItems:_,galleryItems:U,thumbnails:H}=K({data:s,videos:p,imageParams:M,thumbnailParams:v,zoom:A,slots:h,ImagesLabel:g,onZoom:j}),I=K({data:f,videos:p,imageParams:M,thumbnailParams:v,zoom:A,slots:h,ImagesLabel:g});if(!s)return null;const Q=["pdp-product-gallery__stack",y.className].filter(Boolean).join(" "),Y=["pdp-product-gallery__layer","pdp-product-gallery__layer--pending",q?"pdp-product-gallery__layer--entering":""].filter(Boolean).join(" ");return O("div",{...y,className:Q,children:[i("div",{className:"pdp-product-gallery__layer",children:i(k,{arrows:!!_.length&&c,arrowsOnMainImage:d,controls:_.length?t:void 0,loop:e&&!!_.length,peak:!!_.length&&u,gap:l,defaultIndex:D||0,thumbnails:H,children:U})}),f?i("div",{className:Y,"aria-hidden":"true",children:i(k,{arrows:!!I.mediaItems.length&&c,arrowsOnMainImage:d,controls:I.mediaItems.length?t:void 0,loop:e&&!!I.mediaItems.length,peak:!!I.mediaItems.length&&u,gap:l,defaultIndex:0,thumbnails:I.thumbnails,children:I.galleryItems})}):null,D===null?null:i(a,{onClose:()=>j(null),centered:!0,children:i(k,{arrows:!!_.length,width:"100%",height:"100%",defaultIndex:D,loop:e&&!!_.length,controls:"dots",isZoomed:!0,children:U})})]})};pe.getInitialData=L;export{pe as ProductGallery,pe as default};
+import{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{g as a}from"../chunks/getFetchedProductData.js";import{C as k,O as b,Z as m}from"../chunks/Zoom.js";/* empty css                  */import"@dropins/tools/preact-hooks.js";/* empty css                       *//* empty css                           */import{useText as P}from"@dropins/tools/i18n.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(()=>{if(p){c(e),h(null);return}let g=!1,n=r.length,y=!1;const w=()=>{g||(g=!0,y&&h(e),c(e))},A=window.setTimeout(()=>{y=!0,w()},t),s=v=>{g||(v&&(y=!0),n-=1,n<=0&&(window.clearTimeout(A),w()))};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))}),()=>{g=!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),g=x(c[o].url,(h=c[o].preview)==null?void 0:h.url);if(_!==g)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 w=({...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(w,{})},n.url):i(w,{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]),g=S(()=>o.length>0?o.map((n,y)=>{var s;const w={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:w,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.height)??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,{...w})},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:g}},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:g,children:n,slots:y,...w})=>{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:g,zoom:h,slots:y,ImagesLabel:A,onZoom:j}),T=q({data:f,videos:o,imageParams:_,thumbnailParams:g,zoom:h,slots:y,ImagesLabel:A});if(!s)return null;const X=["pdp-product-gallery__stack",w.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",{...w,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};
 //# sourceMappingURL=ProductGallery.js.map

package/containers/ProductGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductGallery.js","sources":["/@dropins/storefront-pdp/src/lib/videoUtils.ts","/@dropins/storefront-pdp/src/lib/usePreloadImages.ts","/@dropins/storefront-pdp/src/containers/ProductGallery/ProductGallery.tsx"],"sourcesContent":["/**\n * Video utility functions for ProductGallery\n */\n\nconst VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv'];\n\nconst VIDEO_MIME_TYPES: Record<string, string> = {\n  '.mp4': 'video/mp4',\n  '.webm': 'video/webm',\n  '.ogg': 'video/ogg',\n  '.mov': 'video/quicktime',\n  '.avi': 'video/x-msvideo',\n  '.mkv': 'video/x-matroska',\n};\n\n/**\n * Gets the MIME type for a video URL based on file extension\n * @param url - The video URL\n * @returns The MIME type string, defaults to 'video/mp4' if unknown\n */\nexport function getVideoMimeType(url: string): string {\n  if (!url) return 'video/mp4';\n  const lowerUrl = url.toLowerCase();\n  const ext = VIDEO_EXTENSIONS.find((e) => lowerUrl.endsWith(e));\n  return ext ? VIDEO_MIME_TYPES[ext] : 'video/mp4';\n}\n\n/**\n * Checks if URL is a direct video file based on extension\n * @param url - The video URL\n * @returns true if direct video file\n */\nexport function isDirectVideoFile(url: string): boolean {\n  if (!url) return false;\n  const lowerUrl = url.toLowerCase();\n  return VIDEO_EXTENSIONS.some((ext) => lowerUrl.endsWith(ext));\n}\n\n/**\n * Gets the preview image URL for a video.\n * Uses provided preview URL if available, otherwise tries to derive from video URL.\n * @param videoUrl - The video URL\n * @param previewUrl - The preview URL from data (if available)\n * @returns The preview image URL or undefined\n */\nexport function getVideoPreviewUrl(\n  videoUrl: string,\n  previewUrl?: string\n): string | undefined {\n  // Use provided preview URL if available\n  if (previewUrl) return previewUrl;\n\n  // Fallback: Derive thumbnail for AEM Assets URLs\n  // Pattern: .../urn:aaid:aem:.../play -> .../urn:aaid:aem:.../as/thumbnail.png\n  if (videoUrl?.includes('adobeaemcloud.com') && videoUrl.endsWith('/play')) {\n    return videoUrl.replace(/\\/play$/, '/as/thumbnail.png');\n  }\n\n  return undefined;\n}\n\n/**\n * Converts YouTube/Vimeo URLs to embeddable URLs.\n * Returns original URL for other video sources.\n * @param url - The original video URL\n * @returns The embed URL\n */\nexport function getEmbedUrl(url: string): string {\n  if (!url) return '';\n\n  // YouTube: various formats\n  // https://www.youtube.com/watch?v=VIDEO_ID\n  // https://youtu.be/VIDEO_ID\n  // https://www.youtube.com/embed/VIDEO_ID\n  const youtubeMatch = url.match(\n    /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]+)/\n  );\n  if (youtubeMatch) {\n    return `https://www.youtube.com/embed/${youtubeMatch[1]}?rel=0`;\n  }\n\n  // Vimeo: various formats\n  // https://vimeo.com/VIDEO_ID\n  // https://player.vimeo.com/video/VIDEO_ID\n  const vimeoMatch = url.match(/vimeo\\.com\\/(?:video\\/)?(\\d+)/);\n  if (vimeoMatch) {\n    return `https://player.vimeo.com/video/${vimeoMatch[1]}`;\n  }\n\n  // Return original URL for other sources (AEM, etc.)\n  return url;\n}\n","/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2026 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { useEffect, useState } from 'preact/compat';\n\nexport interface UsePreloadImagesOptions {\n  /** Skip the preload entirely; ready resolves to true synchronously. */\n  enabled?: boolean;\n  /**\n   * Maximum time to wait for all images before giving up and reporting ready=true\n   * with error=true. Prevents a single broken URL from soft-locking consumers.\n   */\n  timeoutMs?: number;\n}\n\nexport interface UsePreloadImagesResult {\n  ready: boolean;\n  error: boolean;\n}\n\nconst DEFAULT_TIMEOUT_MS = 3000;\n\n/**\n * Preloads a list of image URLs in the background and reports when all are\n * decoded and ready to paint. Used to avoid visible flicker when a gallery\n * needs to swap to a new set of images.\n *\n * - Calls img.decode() when available (guarantees paint readiness); falls\n *   back to onload otherwise.\n * - Cancels in-flight loads if the URL list changes.\n * - Always resolves ready=true after timeoutMs as a safety fallback.\n *\n * `ready` is derived synchronously from the URL list, so a transition to a\n * new non-empty url set immediately reports ready=false in the same render —\n * avoiding races where consumers would otherwise see a stale ready=true.\n */\nexport function usePreloadImages(\n  urls: string[],\n  {\n    enabled = true,\n    timeoutMs = DEFAULT_TIMEOUT_MS,\n  }: UsePreloadImagesOptions = {}\n): UsePreloadImagesResult {\n  const key = urls.join(' ');\n  const trivial = !enabled || urls.length === 0;\n\n  const [loadedKey, setLoadedKey] = useState<string | null>(null);\n  const [errorKey, setErrorKey] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (trivial) {\n      setLoadedKey(key);\n      setErrorKey(null);\n      return undefined;\n    }\n\n    let cancelled = false;\n    let remaining = urls.length;\n    let hadError = false;\n\n    const finish = () => {\n      if (cancelled) return;\n      cancelled = true;\n      if (hadError) setErrorKey(key);\n      setLoadedKey(key);\n    };\n\n    const timeoutId = window.setTimeout(() => {\n      hadError = true;\n      finish();\n    }, timeoutMs);\n\n    const onOne = (failed: boolean) => {\n      if (cancelled) return;\n      if (failed) hadError = true;\n      remaining -= 1;\n      if (remaining <= 0) {\n        window.clearTimeout(timeoutId);\n        finish();\n      }\n    };\n\n    urls.forEach((url) => {\n      const img = new Image();\n      img.src = url;\n      if (typeof img.decode === 'function') {\n        img\n          .decode()\n          .then(() => onOne(false))\n          .catch(() => onOne(true));\n      } else {\n        img.onload = () => onOne(false);\n        img.onerror = () => onOne(true);\n      }\n    });\n\n    return () => {\n      cancelled = true;\n      window.clearTimeout(timeoutId);\n    };\n    // key intentionally drives the effect; urls is its source.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, enabled, timeoutMs, trivial]);\n\n  const ready = trivial || loadedKey === key;\n  const error = errorKey === key;\n  return { ready, error };\n}\n","import {\n  HTMLAttributes,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'preact/compat';\nimport {\n  Container,\n  ResolveImageUrlOptions,\n  Slot,\n  SlotProps,\n} from '@adobe-commerce/elsie/lib';\n\nimport { Image, ImageProps } from '@adobe-commerce/elsie/components';\nimport { events } from '@adobe-commerce/event-bus';\nimport { ProductModel } from '@/pdp/data/models/product-model';\nimport { getFetchedProductData } from '@/pdp/api';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Carousel, Overlay, Zoom } from '@/pdp/components';\nimport {\n  isDirectVideoFile,\n  getEmbedUrl,\n  getVideoPreviewUrl,\n  getVideoMimeType,\n} from '@/pdp/lib/videoUtils';\nimport { usePreloadImages } from '@/pdp/lib/usePreloadImages';\nimport '@/pdp/containers/ProductGallery/ProductGallery.css';\n\nconst CROSSFADE_MS = 200;\n\ntype DefaultSlotContext = {\n  data: ProductModel | null;\n};\n\ntype VideosProp = boolean | { position: 'first' | 'last' };\n\nexport interface ProductGalleryProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'controls'> {\n  scope?: string;\n  controls?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots' | null;\n  loop?: boolean;\n  peak?: boolean;\n  gap?: 'small' | 'medium' | 'large' | null;\n  arrows?: boolean;\n  arrowsOnMainImage?: boolean;\n  imageParams?: ResolveImageUrlOptions;\n  thumbnailParams?: ResolveImageUrlOptions;\n  zoom?: { closeButton: boolean } | boolean;\n  videos?: VideosProp;\n  slots?: {\n    CarouselThumbnail?: SlotProps<\n      DefaultSlotContext & {\n        defaultImageProps: ImageProps;\n        mediaType?: 'image' | 'video';\n        previewUrl?: string;\n      }\n    >;\n    CarouselMainImage?: SlotProps<\n      DefaultSlotContext & {\n        defaultImageProps: ImageProps;\n        mediaType?: 'image' | 'video';\n        previewUrl?: string;\n      }\n    >;\n  };\n}\n\ntype MediaItem =\n  | { type: 'image'; url: string; label: string }\n  | {\n      type: 'video';\n      url: string;\n      label: string;\n      preview?: { url: string; label?: string };\n    };\n\nconst buildMediaItems = (\n  data: ProductModel | null,\n  videos: VideosProp\n): MediaItem[] => {\n  const imageItems: MediaItem[] =\n    data?.images?.map((img) => ({\n      type: 'image' as const,\n      url: img.url,\n      label: img.label,\n    })) ?? [];\n\n  if (!videos) return imageItems;\n\n  const videoItems: MediaItem[] =\n    data?.videos?.map((video) => ({\n      type: 'video' as const,\n      url: video.url,\n      label: video.title ?? '',\n      preview: video.preview,\n    })) ?? [];\n\n  const position = typeof videos === 'object' ? videos.position : 'last';\n  return position === 'first'\n    ? [...videoItems, ...imageItems]\n    : [...imageItems, ...videoItems];\n};\n\nconst collectPreloadUrls = (\n  data: ProductModel | null,\n  videos: VideosProp\n): string[] => {\n  if (!data) return [];\n  const urls: string[] = (data.images ?? []).map((img) => img.url);\n  if (videos) {\n    (data.videos ?? []).forEach((video) => {\n      const previewUrl = getVideoPreviewUrl(video.url, video.preview?.url);\n      if (previewUrl) urls.push(previewUrl);\n    });\n  }\n  return urls;\n};\n\nconst sameMediaUrls = (\n  a: ProductModel | null,\n  b: ProductModel | null,\n  videos: VideosProp\n): boolean => {\n  if (a === b) return true;\n  if (!a || !b) return false;\n\n  const aImages = a.images ?? [];\n  const bImages = b.images ?? [];\n  if (aImages.length !== bImages.length) return false;\n  for (let i = 0; i < aImages.length; i += 1) {\n    if (aImages[i].url !== bImages[i].url) return false;\n  }\n\n  if (!videos) return true;\n\n  const aVideos = a.videos ?? [];\n  const bVideos = b.videos ?? [];\n  if (aVideos.length !== bVideos.length) return false;\n  for (let i = 0; i < aVideos.length; i += 1) {\n    if (aVideos[i].url !== bVideos[i].url) return false;\n  }\n  return true;\n};\n\nconst prefersReducedMotion = (): boolean =>\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\ninterface GalleryContentArgs {\n  data: ProductModel | null;\n  videos: VideosProp;\n  imageParams?: ResolveImageUrlOptions;\n  thumbnailParams?: ResolveImageUrlOptions;\n  zoom: ProductGalleryProps['zoom'];\n  slots: ProductGalleryProps['slots'];\n  ImagesLabel?: string;\n  onZoom?: (key: number) => void;\n}\n\nconst useGalleryContent = ({\n  data,\n  videos,\n  imageParams,\n  thumbnailParams,\n  zoom,\n  slots,\n  ImagesLabel,\n  onZoom,\n}: GalleryContentArgs) => {\n  const defaultSlotContext: DefaultSlotContext = useMemo(\n    () => ({ data }),\n    [data]\n  );\n\n  const mediaItems = useMemo(\n    () => buildMediaItems(data, videos),\n    [data, videos]\n  );\n\n  const galleryItems = useMemo(\n    () =>\n      mediaItems.length > 0 ? (\n        mediaItems.map((item, key) => {\n          const Item = ({ ...itemProps }) => {\n            const defaultProps = {\n              title: item.label,\n              src: item.url,\n              alt: ImagesLabel?.replace('{product}', item.label)\n                .replace('{key}', String(key + 1))\n                .replace('{total}', String(mediaItems.length)),\n\n              // TODO: change width/height for image aspect ratio\n              // pending https://jira.corp.adobe.com/browse/DATA-5122\n              width: imageParams?.width ?? 960,\n              height: imageParams?.height ?? 1191,\n              params: imageParams ?? { width: 960 },\n              loading: key === 0 ? 'eager' : 'lazy',\n              ...itemProps,\n            } as const;\n\n            const previewUrl =\n              item.type === 'video'\n                ? getVideoPreviewUrl(item.url, item.preview?.url)\n                : undefined;\n\n            return (\n              <Slot\n                name=\"CarouselMainImage\"\n                slot={slots?.CarouselMainImage}\n                context={{\n                  ...defaultSlotContext,\n                  defaultImageProps: defaultProps,\n                  mediaType: item.type,\n                  previewUrl,\n                }}\n              >\n                {item.type === 'video' ? (\n                  isDirectVideoFile(item.url) ? (\n                    <video\n                      className=\"pdp-product-gallery__video\"\n                      controls\n                      preload=\"metadata\"\n                      poster={previewUrl}\n                      width={imageParams?.width ?? 960}\n                      height={imageParams?.height ?? 1191}\n                    >\n                      <source\n                        src={item.url}\n                        type={getVideoMimeType(item.url)}\n                      />\n                      Your browser does not support the video tag.\n                    </video>\n                  ) : (\n                    <iframe\n                      className=\"pdp-product-gallery__video-iframe\"\n                      src={getEmbedUrl(item.url)}\n                      title={item.label || 'Product video'}\n                      width={imageParams?.width ?? 960}\n                      height={imageParams?.height ?? 1191}\n                      loading=\"lazy\"\n                      allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                      allowFullScreen\n                    />\n                  )\n                ) : (\n                  <Image {...defaultProps} />\n                )}\n              </Slot>\n            );\n          };\n\n          return zoom && item.type === 'image' ? (\n            <Zoom\n              key={item.url}\n              closeButton={typeof zoom === 'object' ? zoom.closeButton : false}\n            >\n              <Item />\n            </Zoom>\n          ) : (\n            <Item key={item.url} onClick={() => onZoom?.(key)} />\n          );\n        })\n      ) : (\n        <img\n          key=\"pleaceholder\"\n          src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          className=\"pdp-product-gallery__images__placeholder\"\n          width={imageParams?.width ?? 960}\n          height={imageParams?.height ?? 1191}\n          aria-hidden\n        />\n      ),\n    [\n      ImagesLabel,\n      mediaItems,\n      imageParams,\n      zoom,\n      defaultSlotContext,\n      slots?.CarouselMainImage,\n      onZoom,\n    ]\n  );\n\n  const thumbnails = useMemo(() => {\n    return mediaItems.length > 0 ? (\n      mediaItems.map((item, key) => {\n        const defaultProps = {\n          title: item.label,\n          src: item.url,\n          alt: ImagesLabel?.replace('{product}', item.label)\n            .replace('{key}', String(key + 1))\n            .replace('{total}', String(mediaItems.length)),\n\n          // TODO: change width/height for image aspect ratio\n          // pending https://jira.corp.adobe.com/browse/DATA-5122\n          width: thumbnailParams?.width ?? 200,\n          height: thumbnailParams?.height ?? 248,\n          params: thumbnailParams ?? { width: 200 },\n          loading: 'lazy',\n        } as const;\n\n        const previewUrl =\n          item.type === 'video'\n            ? getVideoPreviewUrl(item.url, item.preview?.url)\n            : undefined;\n\n        return (\n          <Slot\n            key={item.url}\n            name=\"CarouselThumbnail\"\n            slotTag=\"span\"\n            contentTag=\"span\"\n            slot={slots?.CarouselThumbnail}\n            context={{\n              ...defaultSlotContext,\n              defaultImageProps: defaultProps,\n              mediaType: item.type,\n              previewUrl,\n            }}\n          >\n            {item.type === 'video' ? (\n              <span\n                className=\"pdp-product-gallery__video-thumbnail\"\n                role=\"img\"\n                aria-label={`Play video: ${item.label || 'Product video'}`}\n              >\n                {previewUrl ? (\n                  <img\n                    src={previewUrl}\n                    alt=\"\"\n                    width={thumbnailParams?.width ?? 200}\n                    height={thumbnailParams?.height ?? 248}\n                    loading=\"lazy\"\n                    aria-hidden=\"true\"\n                  />\n                ) : (\n                  <span\n                    className=\"pdp-product-gallery__video-thumbnail-placeholder\"\n                    style={{\n                      width: thumbnailParams?.width ?? 200,\n                      height: thumbnailParams?.height ?? 248,\n                    }}\n                    aria-hidden=\"true\"\n                  />\n                )}\n                <span\n                  className=\"pdp-product-gallery__video-icon\"\n                  aria-hidden=\"true\"\n                >\n                  ▶\n                </span>\n              </span>\n            ) : (\n              <Image {...defaultProps} />\n            )}\n          </Slot>\n        );\n      })\n    ) : (\n      <img\n        key=\"pleaceholder\"\n        src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        className=\"pdp-product-gallery__thumbnail__placeholder\"\n        width={thumbnailParams?.width ?? 200}\n        height={thumbnailParams?.height ?? 248}\n        aria-hidden\n      />\n    );\n  }, [\n    ImagesLabel,\n    mediaItems,\n    thumbnailParams,\n    defaultSlotContext,\n    slots?.CarouselThumbnail,\n  ]);\n\n  return { mediaItems, galleryItems, thumbnails };\n};\n\nexport const ProductGallery: Container<\n  ProductGalleryProps,\n  ProductModel | null\n> = ({\n  initialData = null,\n  scope,\n  controls = 'dots',\n  loop = true,\n  peak = false,\n  gap = null,\n  arrows = true,\n  arrowsOnMainImage = false,\n  zoom = false,\n  videos = false,\n  imageParams,\n  thumbnailParams,\n  children,\n  slots,\n  ...props\n}) => {\n  const ImagesLabel = useText('PDP.Product.Image.label').label;\n\n  const [displayedData, setDisplayedData] = useState<ProductModel | null>(\n    initialData\n  );\n  const [pendingData, setPendingData] = useState<ProductModel | null>(null);\n  const [entering, setEntering] = useState(false);\n  const [zoomTo, setZoomTo] = useState<number | null>(null);\n\n  const displayedRef = useRef<ProductModel | null>(initialData);\n  useEffect(() => {\n    displayedRef.current = displayedData;\n  }, [displayedData]);\n\n  useEffect(() => {\n    const dataEvent = events.on(\n      'pdp/data',\n      (newData: ProductModel | null) => {\n        if (!newData) {\n          setDisplayedData(null);\n          setPendingData(null);\n          setEntering(false);\n          return;\n        }\n\n        if (sameMediaUrls(displayedRef.current, newData, videos)) {\n          // Same media set — fast path, skip buffering and crossfade.\n          setDisplayedData(newData);\n          setPendingData(null);\n          setEntering(false);\n          return;\n        }\n\n        setPendingData(newData);\n        setEntering(false);\n      },\n      { scope }\n    );\n    return () => {\n      dataEvent?.off();\n    };\n  }, [scope, videos]);\n\n  const pendingUrls = useMemo(\n    () => collectPreloadUrls(pendingData, videos),\n    [pendingData, videos]\n  );\n\n  const { ready: pendingReady } = usePreloadImages(pendingUrls, {\n    enabled: !!pendingData,\n  });\n\n  useEffect(() => {\n    if (!pendingData || !pendingReady) return undefined;\n\n    const promote = () => {\n      setDisplayedData(pendingData);\n      setPendingData(null);\n      setEntering(false);\n    };\n\n    if (prefersReducedMotion()) {\n      promote();\n      return undefined;\n    }\n\n    // Mount pending layer in opacity:0, flip to 1 on the next frame so the\n    // browser commits the initial style before the transition starts.\n    const raf = window.requestAnimationFrame(() => setEntering(true));\n    const timer = window.setTimeout(promote, CROSSFADE_MS + 50);\n\n    return () => {\n      window.cancelAnimationFrame(raf);\n      window.clearTimeout(timer);\n    };\n  }, [pendingReady, pendingData]);\n\n  const { mediaItems, galleryItems, thumbnails } = useGalleryContent({\n    data: displayedData,\n    videos,\n    imageParams,\n    thumbnailParams,\n    zoom,\n    slots,\n    ImagesLabel,\n    onZoom: setZoomTo,\n  });\n\n  const pendingContent = useGalleryContent({\n    data: pendingData,\n    videos,\n    imageParams,\n    thumbnailParams,\n    zoom,\n    slots,\n    ImagesLabel,\n    // No onZoom: pending layer is non-interactive.\n  });\n\n  if (!displayedData) return null;\n\n  const stackClassName = ['pdp-product-gallery__stack', props.className]\n    .filter(Boolean)\n    .join(' ');\n\n  const pendingLayerClassName = [\n    'pdp-product-gallery__layer',\n    'pdp-product-gallery__layer--pending',\n    entering ? 'pdp-product-gallery__layer--entering' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...props} className={stackClassName}>\n      <div className=\"pdp-product-gallery__layer\">\n        <Carousel\n          arrows={!!mediaItems.length && arrows}\n          arrowsOnMainImage={arrowsOnMainImage}\n          controls={mediaItems.length ? controls : undefined}\n          loop={loop && !!mediaItems.length}\n          peak={!!mediaItems.length && peak}\n          gap={gap}\n          defaultIndex={zoomTo || 0}\n          thumbnails={thumbnails}\n        >\n          {galleryItems}\n        </Carousel>\n      </div>\n\n      {pendingData ? (\n        <div className={pendingLayerClassName} aria-hidden=\"true\">\n          <Carousel\n            arrows={!!pendingContent.mediaItems.length && arrows}\n            arrowsOnMainImage={arrowsOnMainImage}\n            controls={pendingContent.mediaItems.length ? controls : undefined}\n            loop={loop && !!pendingContent.mediaItems.length}\n            peak={!!pendingContent.mediaItems.length && peak}\n            gap={gap}\n            defaultIndex={0}\n            thumbnails={pendingContent.thumbnails}\n          >\n            {pendingContent.galleryItems}\n          </Carousel>\n        </div>\n      ) : null}\n\n      {/* Zoom Overlay (always uses displayed data) */}\n      {zoomTo === null ? null : (\n        <Overlay onClose={() => setZoomTo(null)} centered>\n          <Carousel\n            arrows={!!mediaItems.length}\n            width=\"100%\"\n            height=\"100%\"\n            defaultIndex={zoomTo}\n            loop={loop && !!mediaItems.length}\n            controls=\"dots\"\n            isZoomed\n          >\n            {galleryItems}\n          </Carousel>\n        </Overlay>\n      )}\n    </div>\n  );\n};\n\nProductGallery.getInitialData = getFetchedProductData;\n"],"names":["VIDEO_EXTENSIONS","VIDEO_MIME_TYPES","getVideoMimeType","url","lowerUrl","ext","isDirectVideoFile","getVideoPreviewUrl","videoUrl","previewUrl","getEmbedUrl","youtubeMatch","vimeoMatch","DEFAULT_TIMEOUT_MS","usePreloadImages","urls","enabled","timeoutMs","key","trivial","loadedKey","setLoadedKey","useState","errorKey","setErrorKey","useEffect","cancelled","remaining","hadError","finish","timeoutId","onOne","failed","img","CROSSFADE_MS","buildMediaItems","data","videos","imageItems","_a","videoItems","_b","video","collectPreloadUrls","sameMediaUrls","a","b","aImages","bImages","i","aVideos","bVideos","prefersReducedMotion","useGalleryContent","imageParams","thumbnailParams","zoom","slots","ImagesLabel","onZoom","defaultSlotContext","useMemo","mediaItems","galleryItems","item","Item","itemProps","defaultProps","jsx","Slot","jsxs","Image","Zoom","thumbnails","ProductGallery","initialData","scope","controls","loop","peak","gap","arrows","arrowsOnMainImage","children","props","useText","displayedData","setDisplayedData","pendingData","setPendingData","entering","setEntering","zoomTo","setZoomTo","displayedRef","useRef","dataEvent","events","newData","pendingUrls","pendingReady","promote","raf","timer","pendingContent","stackClassName","pendingLayerClassName","Carousel","Overlay","getFetchedProductData"],"mappings":"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"}
+{"version":3,"file":"ProductGallery.js","sources":["/@dropins/storefront-pdp/src/lib/videoUtils.ts","/@dropins/storefront-pdp/src/lib/usePreloadImages.ts","/@dropins/storefront-pdp/src/containers/ProductGallery/ProductGallery.tsx"],"sourcesContent":["/**\n * Video utility functions for ProductGallery\n */\n\nconst VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv'];\n\nconst VIDEO_MIME_TYPES: Record<string, string> = {\n  '.mp4': 'video/mp4',\n  '.webm': 'video/webm',\n  '.ogg': 'video/ogg',\n  '.mov': 'video/quicktime',\n  '.avi': 'video/x-msvideo',\n  '.mkv': 'video/x-matroska',\n};\n\n/**\n * Gets the MIME type for a video URL based on file extension\n * @param url - The video URL\n * @returns The MIME type string, defaults to 'video/mp4' if unknown\n */\nexport function getVideoMimeType(url: string): string {\n  if (!url) return 'video/mp4';\n  const lowerUrl = url.toLowerCase();\n  const ext = VIDEO_EXTENSIONS.find((e) => lowerUrl.endsWith(e));\n  return ext ? VIDEO_MIME_TYPES[ext] : 'video/mp4';\n}\n\n/**\n * Checks if URL is a direct video file based on extension\n * @param url - The video URL\n * @returns true if direct video file\n */\nexport function isDirectVideoFile(url: string): boolean {\n  if (!url) return false;\n  const lowerUrl = url.toLowerCase();\n  return VIDEO_EXTENSIONS.some((ext) => lowerUrl.endsWith(ext));\n}\n\n/**\n * Gets the preview image URL for a video.\n * Uses provided preview URL if available, otherwise tries to derive from video URL.\n * @param videoUrl - The video URL\n * @param previewUrl - The preview URL from data (if available)\n * @returns The preview image URL or undefined\n */\nexport function getVideoPreviewUrl(\n  videoUrl: string,\n  previewUrl?: string\n): string | undefined {\n  // Use provided preview URL if available\n  if (previewUrl) return previewUrl;\n\n  // Fallback: Derive thumbnail for AEM Assets URLs\n  // Pattern: .../urn:aaid:aem:.../play -> .../urn:aaid:aem:.../as/thumbnail.png\n  if (videoUrl?.includes('adobeaemcloud.com') && videoUrl.endsWith('/play')) {\n    return videoUrl.replace(/\\/play$/, '/as/thumbnail.png');\n  }\n\n  return undefined;\n}\n\n/**\n * Converts YouTube/Vimeo URLs to embeddable URLs.\n * Returns original URL for other video sources.\n * @param url - The original video URL\n * @returns The embed URL\n */\nexport function getEmbedUrl(url: string): string {\n  if (!url) return '';\n\n  // YouTube: various formats\n  // https://www.youtube.com/watch?v=VIDEO_ID\n  // https://youtu.be/VIDEO_ID\n  // https://www.youtube.com/embed/VIDEO_ID\n  const youtubeMatch = url.match(\n    /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]+)/\n  );\n  if (youtubeMatch) {\n    return `https://www.youtube.com/embed/${youtubeMatch[1]}?rel=0`;\n  }\n\n  // Vimeo: various formats\n  // https://vimeo.com/VIDEO_ID\n  // https://player.vimeo.com/video/VIDEO_ID\n  const vimeoMatch = url.match(/vimeo\\.com\\/(?:video\\/)?(\\d+)/);\n  if (vimeoMatch) {\n    return `https://player.vimeo.com/video/${vimeoMatch[1]}`;\n  }\n\n  // Return original URL for other sources (AEM, etc.)\n  return url;\n}\n","/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2026 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { useEffect, useState } from 'preact/compat';\n\nexport interface UsePreloadImagesOptions {\n  /** Skip the preload entirely; ready resolves to true synchronously. */\n  enabled?: boolean;\n  /**\n   * Maximum time to wait for all images before giving up and reporting ready=true\n   * with error=true. Prevents a single broken URL from soft-locking consumers.\n   */\n  timeoutMs?: number;\n}\n\nexport interface UsePreloadImagesResult {\n  ready: boolean;\n  error: boolean;\n}\n\nconst DEFAULT_TIMEOUT_MS = 3000;\n\n/**\n * Preloads a list of image URLs in the background and reports when all are\n * decoded and ready to paint. Used to avoid visible flicker when a gallery\n * needs to swap to a new set of images.\n *\n * - Calls img.decode() when available (guarantees paint readiness); falls\n *   back to onload otherwise.\n * - Cancels stale state updates when the URL list changes; the underlying\n *   network requests continue in the background and are left to the browser.\n * - Always resolves ready=true after timeoutMs as a safety fallback.\n *\n * `ready` is derived synchronously from the URL list, so a transition to a\n * new non-empty url set immediately reports ready=false in the same render —\n * avoiding races where consumers would otherwise see a stale ready=true.\n */\nexport function usePreloadImages(\n  urls: string[],\n  {\n    enabled = true,\n    timeoutMs = DEFAULT_TIMEOUT_MS,\n  }: UsePreloadImagesOptions = {}\n): UsePreloadImagesResult {\n  // \\0 cannot appear in a URL, so this avoids collisions with URLs that\n  // contain spaces or other delimiter-like characters.\n  const key = urls.join('\\0');\n  const trivial = !enabled || urls.length === 0;\n\n  const [loadedKey, setLoadedKey] = useState<string | null>(null);\n  const [errorKey, setErrorKey] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (trivial) {\n      setLoadedKey(key);\n      setErrorKey(null);\n      return undefined;\n    }\n\n    let cancelled = false;\n    let remaining = urls.length;\n    let hadError = false;\n\n    const finish = () => {\n      if (cancelled) return;\n      cancelled = true;\n      if (hadError) setErrorKey(key);\n      setLoadedKey(key);\n    };\n\n    const timeoutId = window.setTimeout(() => {\n      hadError = true;\n      finish();\n    }, timeoutMs);\n\n    const onOne = (failed: boolean) => {\n      if (cancelled) return;\n      if (failed) hadError = true;\n      remaining -= 1;\n      if (remaining <= 0) {\n        window.clearTimeout(timeoutId);\n        finish();\n      }\n    };\n\n    urls.forEach((url) => {\n      const img = new Image();\n      img.src = url;\n      if (typeof img.decode === 'function') {\n        img\n          .decode()\n          .then(() => onOne(false))\n          .catch(() => onOne(true));\n      } else {\n        img.onload = () => onOne(false);\n        img.onerror = () => onOne(true);\n      }\n    });\n\n    return () => {\n      cancelled = true;\n      window.clearTimeout(timeoutId);\n    };\n    // key intentionally drives the effect; urls is its source.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, enabled, timeoutMs, trivial]);\n\n  const ready = trivial || loadedKey === key;\n  const error = errorKey === key;\n  return { ready, error };\n}\n","import {\n  HTMLAttributes,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'preact/compat';\nimport {\n  Container,\n  ResolveImageUrlOptions,\n  Slot,\n  SlotProps,\n} from '@adobe-commerce/elsie/lib';\n\nimport { Image, ImageProps } from '@adobe-commerce/elsie/components';\nimport { events } from '@adobe-commerce/event-bus';\nimport { ProductModel } from '@/pdp/data/models/product-model';\nimport { getFetchedProductData } from '@/pdp/api';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Carousel, Overlay, Zoom } from '@/pdp/components';\nimport {\n  isDirectVideoFile,\n  getEmbedUrl,\n  getVideoPreviewUrl,\n  getVideoMimeType,\n} from '@/pdp/lib/videoUtils';\nimport { usePreloadImages } from '@/pdp/lib/usePreloadImages';\nimport '@/pdp/containers/ProductGallery/ProductGallery.css';\n\n// Total time we hold the pending layer before promoting it. Must exceed the\n// CSS transition duration in ProductGallery.css (currently 180ms). If you\n// change one, update the other.\nconst CROSSFADE_MS = 200;\n\ntype DefaultSlotContext = {\n  data: ProductModel | null;\n};\n\ntype VideosProp = boolean | { position: 'first' | 'last' };\n\nexport interface ProductGalleryProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'controls'> {\n  scope?: string;\n  controls?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots' | null;\n  loop?: boolean;\n  peak?: boolean;\n  gap?: 'small' | 'medium' | 'large' | null;\n  arrows?: boolean;\n  arrowsOnMainImage?: boolean;\n  imageParams?: ResolveImageUrlOptions;\n  thumbnailParams?: ResolveImageUrlOptions;\n  zoom?: { closeButton: boolean } | boolean;\n  videos?: VideosProp;\n  slots?: {\n    CarouselThumbnail?: SlotProps<\n      DefaultSlotContext & {\n        defaultImageProps: ImageProps;\n        mediaType?: 'image' | 'video';\n        previewUrl?: string;\n      }\n    >;\n    CarouselMainImage?: SlotProps<\n      DefaultSlotContext & {\n        defaultImageProps: ImageProps;\n        mediaType?: 'image' | 'video';\n        previewUrl?: string;\n      }\n    >;\n  };\n}\n\ntype MediaItem =\n  | { type: 'image'; url: string; label: string }\n  | {\n      type: 'video';\n      url: string;\n      label: string;\n      preview?: { url: string; label?: string };\n    };\n\nconst buildMediaItems = (\n  data: ProductModel | null,\n  videos: VideosProp\n): MediaItem[] => {\n  const imageItems: MediaItem[] =\n    data?.images?.map((img) => ({\n      type: 'image' as const,\n      url: img.url,\n      label: img.label,\n    })) ?? [];\n\n  if (!videos) return imageItems;\n\n  const videoItems: MediaItem[] =\n    data?.videos?.map((video) => ({\n      type: 'video' as const,\n      url: video.url,\n      label: video.title ?? '',\n      preview: video.preview,\n    })) ?? [];\n\n  const position = typeof videos === 'object' ? videos.position : 'last';\n  return position === 'first'\n    ? [...videoItems, ...imageItems]\n    : [...imageItems, ...videoItems];\n};\n\nconst collectPreloadUrls = (\n  data: ProductModel | null,\n  videos: VideosProp\n): string[] => {\n  if (!data) return [];\n  const urls: string[] = (data.images ?? []).map((img) => img.url);\n  if (videos) {\n    (data.videos ?? []).forEach((video) => {\n      const previewUrl = getVideoPreviewUrl(video.url, video.preview?.url);\n      if (previewUrl) urls.push(previewUrl);\n    });\n  }\n  return urls;\n};\n\nconst sameMediaUrls = (\n  a: ProductModel | null,\n  b: ProductModel | null,\n  videos: VideosProp\n): boolean => {\n  if (a === b) return true;\n  if (!a || !b) return false;\n\n  const aImages = a.images ?? [];\n  const bImages = b.images ?? [];\n  if (aImages.length !== bImages.length) return false;\n  for (let i = 0; i < aImages.length; i += 1) {\n    if (aImages[i].url !== bImages[i].url) return false;\n  }\n\n  if (!videos) return true;\n\n  const aVideos = a.videos ?? [];\n  const bVideos = b.videos ?? [];\n  if (aVideos.length !== bVideos.length) return false;\n  for (let i = 0; i < aVideos.length; i += 1) {\n    if (aVideos[i].url !== bVideos[i].url) return false;\n    // Mirror collectPreloadUrls: a video preview thumbnail change should\n    // also trigger the buffered swap, not the fast path.\n    const aPreview = getVideoPreviewUrl(\n      aVideos[i].url,\n      aVideos[i].preview?.url\n    );\n    const bPreview = getVideoPreviewUrl(\n      bVideos[i].url,\n      bVideos[i].preview?.url\n    );\n    if (aPreview !== bPreview) return false;\n  }\n  return true;\n};\n\nconst prefersReducedMotion = (): boolean =>\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\ninterface GalleryContentArgs {\n  data: ProductModel | null;\n  videos: VideosProp;\n  imageParams?: ResolveImageUrlOptions;\n  thumbnailParams?: ResolveImageUrlOptions;\n  zoom: ProductGalleryProps['zoom'];\n  slots: ProductGalleryProps['slots'];\n  ImagesLabel?: string;\n  onZoom?: (key: number) => void;\n}\n\nconst useGalleryContent = ({\n  data,\n  videos,\n  imageParams,\n  thumbnailParams,\n  zoom,\n  slots,\n  ImagesLabel,\n  onZoom,\n}: GalleryContentArgs) => {\n  const defaultSlotContext: DefaultSlotContext = useMemo(\n    () => ({ data }),\n    [data]\n  );\n\n  const mediaItems = useMemo(\n    () => buildMediaItems(data, videos),\n    [data, videos]\n  );\n\n  const galleryItems = useMemo(\n    () =>\n      mediaItems.length > 0 ? (\n        mediaItems.map((item, key) => {\n          const Item = ({ ...itemProps }) => {\n            const defaultProps = {\n              title: item.label,\n              src: item.url,\n              alt: ImagesLabel?.replace('{product}', item.label)\n                .replace('{key}', String(key + 1))\n                .replace('{total}', String(mediaItems.length)),\n\n              // TODO: change width/height for image aspect ratio\n              // pending https://jira.corp.adobe.com/browse/DATA-5122\n              width: imageParams?.width ?? 960,\n              height: imageParams?.height ?? 1191,\n              params: imageParams ?? { width: 960 },\n              loading: key === 0 ? 'eager' : 'lazy',\n              ...itemProps,\n            } as const;\n\n            const previewUrl =\n              item.type === 'video'\n                ? getVideoPreviewUrl(item.url, item.preview?.url)\n                : undefined;\n\n            return (\n              <Slot\n                name=\"CarouselMainImage\"\n                slot={slots?.CarouselMainImage}\n                context={{\n                  ...defaultSlotContext,\n                  defaultImageProps: defaultProps,\n                  mediaType: item.type,\n                  previewUrl,\n                }}\n              >\n                {item.type === 'video' ? (\n                  isDirectVideoFile(item.url) ? (\n                    <video\n                      className=\"pdp-product-gallery__video\"\n                      controls\n                      preload=\"metadata\"\n                      poster={previewUrl}\n                      width={imageParams?.width ?? 960}\n                      height={imageParams?.height ?? 1191}\n                    >\n                      <source\n                        src={item.url}\n                        type={getVideoMimeType(item.url)}\n                      />\n                      Your browser does not support the video tag.\n                    </video>\n                  ) : (\n                    <iframe\n                      className=\"pdp-product-gallery__video-iframe\"\n                      src={getEmbedUrl(item.url)}\n                      title={item.label || 'Product video'}\n                      width={imageParams?.width ?? 960}\n                      height={imageParams?.height ?? 1191}\n                      loading=\"lazy\"\n                      allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                      allowFullScreen\n                    />\n                  )\n                ) : (\n                  <Image {...defaultProps} />\n                )}\n              </Slot>\n            );\n          };\n\n          return zoom && item.type === 'image' ? (\n            <Zoom\n              key={item.url}\n              closeButton={typeof zoom === 'object' ? zoom.closeButton : false}\n            >\n              <Item />\n            </Zoom>\n          ) : (\n            <Item key={item.url} onClick={() => onZoom?.(key)} />\n          );\n        })\n      ) : (\n        <img\n          key=\"pleaceholder\"\n          src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          className=\"pdp-product-gallery__images__placeholder\"\n          width={imageParams?.width ?? 960}\n          height={imageParams?.height ?? 1191}\n          aria-hidden\n        />\n      ),\n    [\n      ImagesLabel,\n      mediaItems,\n      imageParams,\n      zoom,\n      defaultSlotContext,\n      slots?.CarouselMainImage,\n      onZoom,\n    ]\n  );\n\n  const thumbnails = useMemo(() => {\n    return mediaItems.length > 0 ? (\n      mediaItems.map((item, key) => {\n        const defaultProps = {\n          title: item.label,\n          src: item.url,\n          alt: ImagesLabel?.replace('{product}', item.label)\n            .replace('{key}', String(key + 1))\n            .replace('{total}', String(mediaItems.length)),\n\n          // TODO: change width/height for image aspect ratio\n          // pending https://jira.corp.adobe.com/browse/DATA-5122\n          width: thumbnailParams?.width ?? 200,\n          height: thumbnailParams?.height ?? 248,\n          params: thumbnailParams ?? { width: 200 },\n          loading: 'lazy',\n        } as const;\n\n        const previewUrl =\n          item.type === 'video'\n            ? getVideoPreviewUrl(item.url, item.preview?.url)\n            : undefined;\n\n        return (\n          <Slot\n            key={item.url}\n            name=\"CarouselThumbnail\"\n            slotTag=\"span\"\n            contentTag=\"span\"\n            slot={slots?.CarouselThumbnail}\n            context={{\n              ...defaultSlotContext,\n              defaultImageProps: defaultProps,\n              mediaType: item.type,\n              previewUrl,\n            }}\n          >\n            {item.type === 'video' ? (\n              <span\n                className=\"pdp-product-gallery__video-thumbnail\"\n                role=\"img\"\n                aria-label={`Play video: ${item.label || 'Product video'}`}\n              >\n                {previewUrl ? (\n                  <img\n                    src={previewUrl}\n                    alt=\"\"\n                    width={thumbnailParams?.width ?? 200}\n                    height={thumbnailParams?.height ?? 248}\n                    loading=\"lazy\"\n                    aria-hidden=\"true\"\n                  />\n                ) : (\n                  <span\n                    className=\"pdp-product-gallery__video-thumbnail-placeholder\"\n                    style={{\n                      width: thumbnailParams?.width ?? 200,\n                      height: thumbnailParams?.height ?? 248,\n                    }}\n                    aria-hidden=\"true\"\n                  />\n                )}\n                <span\n                  className=\"pdp-product-gallery__video-icon\"\n                  aria-hidden=\"true\"\n                >\n                  ▶\n                </span>\n              </span>\n            ) : (\n              <Image {...defaultProps} />\n            )}\n          </Slot>\n        );\n      })\n    ) : (\n      <img\n        key=\"pleaceholder\"\n        src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        className=\"pdp-product-gallery__thumbnail__placeholder\"\n        width={thumbnailParams?.width ?? 200}\n        height={thumbnailParams?.height ?? 248}\n        aria-hidden\n      />\n    );\n  }, [\n    ImagesLabel,\n    mediaItems,\n    thumbnailParams,\n    defaultSlotContext,\n    slots?.CarouselThumbnail,\n  ]);\n\n  return { mediaItems, galleryItems, thumbnails };\n};\n\nexport const ProductGallery: Container<\n  ProductGalleryProps,\n  ProductModel | null\n> = ({\n  initialData = null,\n  scope,\n  controls = 'dots',\n  loop = true,\n  peak = false,\n  gap = null,\n  arrows = true,\n  arrowsOnMainImage = false,\n  zoom = false,\n  videos = false,\n  imageParams,\n  thumbnailParams,\n  children,\n  slots,\n  ...props\n}) => {\n  const ImagesLabel = useText('PDP.Product.Image.label').label;\n\n  const [displayedData, setDisplayedData] = useState<ProductModel | null>(\n    initialData\n  );\n  const [pendingData, setPendingData] = useState<ProductModel | null>(null);\n  const [entering, setEntering] = useState(false);\n  const [zoomTo, setZoomTo] = useState<number | null>(null);\n\n  const displayedRef = useRef<ProductModel | null>(initialData);\n  useEffect(() => {\n    displayedRef.current = displayedData;\n  }, [displayedData]);\n\n  // videosRef avoids re-subscribing the event listener when a consumer passes\n  // an inline object for `videos` (a fresh reference on every parent render).\n  const videosRef = useRef(videos);\n  videosRef.current = videos;\n\n  useEffect(() => {\n    const dataEvent = events.on(\n      'pdp/data',\n      (newData: ProductModel | null) => {\n        if (!newData) {\n          setDisplayedData(null);\n          setPendingData(null);\n          setEntering(false);\n          return;\n        }\n\n        if (sameMediaUrls(displayedRef.current, newData, videosRef.current)) {\n          // Same media set — fast path, skip buffering and crossfade.\n          setDisplayedData(newData);\n          setPendingData(null);\n          setEntering(false);\n          return;\n        }\n\n        setPendingData(newData);\n        setEntering(false);\n      },\n      { scope }\n    );\n    return () => {\n      dataEvent?.off();\n    };\n  }, [scope]);\n\n  const pendingUrls = useMemo(\n    () => collectPreloadUrls(pendingData, videos),\n    [pendingData, videos]\n  );\n\n  const { ready: pendingReady } = usePreloadImages(pendingUrls, {\n    enabled: !!pendingData,\n  });\n\n  useEffect(() => {\n    if (!pendingData || !pendingReady) return undefined;\n\n    const promote = () => {\n      setDisplayedData(pendingData);\n      setPendingData(null);\n      setEntering(false);\n    };\n\n    if (prefersReducedMotion()) {\n      promote();\n      return undefined;\n    }\n\n    // Mount pending layer in opacity:0, flip to 1 on the next frame so the\n    // browser commits the initial style before the transition starts.\n    const raf = window.requestAnimationFrame(() => setEntering(true));\n    const timer = window.setTimeout(promote, CROSSFADE_MS + 50);\n\n    return () => {\n      window.cancelAnimationFrame(raf);\n      window.clearTimeout(timer);\n    };\n  }, [pendingReady, pendingData]);\n\n  const { mediaItems, galleryItems, thumbnails } = useGalleryContent({\n    data: displayedData,\n    videos,\n    imageParams,\n    thumbnailParams,\n    zoom,\n    slots,\n    ImagesLabel,\n    onZoom: setZoomTo,\n  });\n\n  const pendingContent = useGalleryContent({\n    data: pendingData,\n    videos,\n    imageParams,\n    thumbnailParams,\n    zoom,\n    slots,\n    ImagesLabel,\n    // No onZoom: pending layer is non-interactive.\n  });\n\n  if (!displayedData) return null;\n\n  const stackClassName = ['pdp-product-gallery__stack', props.className]\n    .filter(Boolean)\n    .join(' ');\n\n  const pendingLayerClassName = [\n    'pdp-product-gallery__layer',\n    'pdp-product-gallery__layer--pending',\n    entering ? 'pdp-product-gallery__layer--entering' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...props} className={stackClassName}>\n      <div className=\"pdp-product-gallery__layer\">\n        <Carousel\n          arrows={!!mediaItems.length && arrows}\n          arrowsOnMainImage={arrowsOnMainImage}\n          controls={mediaItems.length ? controls : undefined}\n          loop={loop && !!mediaItems.length}\n          peak={!!mediaItems.length && peak}\n          gap={gap}\n          defaultIndex={zoomTo || 0}\n          thumbnails={thumbnails}\n        >\n          {galleryItems}\n        </Carousel>\n      </div>\n\n      {pendingData ? (\n        <div className={pendingLayerClassName} aria-hidden=\"true\">\n          <Carousel\n            arrows={!!pendingContent.mediaItems.length && arrows}\n            arrowsOnMainImage={arrowsOnMainImage}\n            controls={pendingContent.mediaItems.length ? controls : undefined}\n            loop={loop && !!pendingContent.mediaItems.length}\n            peak={!!pendingContent.mediaItems.length && peak}\n            gap={gap}\n            defaultIndex={0}\n            thumbnails={pendingContent.thumbnails}\n          >\n            {pendingContent.galleryItems}\n          </Carousel>\n        </div>\n      ) : null}\n\n      {/* Zoom Overlay (always uses displayed data) */}\n      {zoomTo === null ? null : (\n        <Overlay onClose={() => setZoomTo(null)} centered>\n          <Carousel\n            arrows={!!mediaItems.length}\n            width=\"100%\"\n            height=\"100%\"\n            defaultIndex={zoomTo}\n            loop={loop && !!mediaItems.length}\n            controls=\"dots\"\n            isZoomed\n          >\n            {galleryItems}\n          </Carousel>\n        </Overlay>\n      )}\n    </div>\n  );\n};\n\nProductGallery.getInitialData = getFetchedProductData;\n"],"names":["VIDEO_EXTENSIONS","VIDEO_MIME_TYPES","getVideoMimeType","url","lowerUrl","ext","isDirectVideoFile","getVideoPreviewUrl","videoUrl","previewUrl","getEmbedUrl","youtubeMatch","vimeoMatch","DEFAULT_TIMEOUT_MS","usePreloadImages","urls","enabled","timeoutMs","key","trivial","loadedKey","setLoadedKey","useState","errorKey","setErrorKey","useEffect","cancelled","remaining","hadError","finish","timeoutId","onOne","failed","img","CROSSFADE_MS","buildMediaItems","data","videos","imageItems","_a","videoItems","_b","video","collectPreloadUrls","sameMediaUrls","a","b","aImages","bImages","i","aVideos","bVideos","aPreview","bPreview","prefersReducedMotion","useGalleryContent","imageParams","thumbnailParams","zoom","slots","ImagesLabel","onZoom","defaultSlotContext","useMemo","mediaItems","galleryItems","item","Item","itemProps","defaultProps","jsx","Slot","jsxs","Image","Zoom","thumbnails","ProductGallery","initialData","scope","controls","loop","peak","gap","arrows","arrowsOnMainImage","children","props","useText","displayedData","setDisplayedData","pendingData","setPendingData","entering","setEntering","zoomTo","setZoomTo","displayedRef","useRef","videosRef","dataEvent","events","newData","pendingUrls","pendingReady","promote","raf","timer","pendingContent","stackClassName","pendingLayerClassName","Carousel","Overlay","getFetchedProductData"],"mappings":"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"}

package/lib/usePreloadImages.d.ts

@@ -33,7 +33,8 @@ export interface UsePreloadImagesResult {
  *
  * - Calls img.decode() when available (guarantees paint readiness); falls
  *   back to onload otherwise.
- * - Cancels in-flight loads if the URL list changes.
+ * - Cancels stale state updates when the URL list changes; the underlying
+ *   network requests continue in the background and are left to the browser.
  * - Always resolves ready=true after timeoutMs as a safety fallback.
  *
  * `ready` is derived synchronously from the URL list, so a transition to a

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-pdp", "version": "3.0.4-beta1", "@dropins/tools": "~1.5.0", "license": "SEE LICENSE IN LICENSE.md"}
+{"name": "@dropins/storefront-pdp", "version": "3.0.4-beta2", "@dropins/tools": "~1.5.0", "license": "SEE LICENSE IN LICENSE.md"}