@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260421114651 → 0.8.1-dev.20260421115845

package/dist/{HlsPlayer-5AJ5M4IS.mjs → HlsPlayer-LIFSWOII.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   HlsPlayer_default
-} from "./chunk-SA6A3K2T.mjs";
+} from "./chunk-6C4HXWFR.mjs";
 export {
   HlsPlayer_default as default
 };

package/dist/{chunk-SA6A3K2T.mjs → chunk-6C4HXWFR.mjs}

@@ -4,6 +4,7 @@ import Hls from "hls.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var HlsPlayer = React.memo(
   ({
+    sources,
     assetUrl,
     posterUrl,
     intrinsicWidth,
@@ -18,12 +19,14 @@ var HlsPlayer = React.memo(
     const [isHovered, setIsHovered] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
     const wasManuallyPausedRef = useRef(false);
+    const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl }] : [];
     useEffect(() => {
       const checkMobile = () => {
         const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
         const isSmallScreen = window.innerWidth <= 768;
-        const ua = navigator.userAgent.toLowerCase();
-        const isMobileUA = /android|iphone|ipad|ipod/i.test(ua);
+        const isMobileUA = /android|iphone|ipad|ipod/i.test(
+          navigator.userAgent.toLowerCase()
+        );
         setIsMobile(hasTouch || isSmallScreen || isMobileUA);
       };
       checkMobile();
@@ -32,31 +35,39 @@ var HlsPlayer = React.memo(
     }, []);
     useEffect(() => {
       const v = videoRef.current;
-      if (!v || !assetUrl) return;
+      if (!v || resolvedSources.length === 0) return;
       if (hlsRef.current) {
         hlsRef.current.destroy();
         hlsRef.current = null;
       }
       if (Hls.isSupported()) {
         const hls = new Hls();
-        hls.loadSource(assetUrl);
-        hls.attachMedia(v);
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          if (isPlaying && !wasManuallyPausedRef.current) {
-            v.play().catch(console.error);
-          }
-        });
+        const onLoadStart = () => {
+          const chosenSrc = v.currentSrc;
+          if (!chosenSrc) return;
+          hls.loadSource(chosenSrc);
+          hls.attachMedia(v);
+          hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            if (isPlaying && !wasManuallyPausedRef.current) {
+              v.play().catch(console.error);
+            }
+          });
+        };
+        v.addEventListener("loadstart", onLoadStart, { once: true });
+        v.load();
         hlsRef.current = hls;
+        return () => {
+          v.removeEventListener("loadstart", onLoadStart);
+          hls.destroy();
+          hlsRef.current = null;
+        };
       } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
         v.load();
       }
-      return () => {
-        if (hlsRef.current) {
-          hlsRef.current.destroy();
-          hlsRef.current = null;
-        }
-      };
-    }, [assetUrl]);
+    }, [
+      // Serialise the source array so the dependency is a stable primitive.
+      JSON.stringify(resolvedSources)
+    ]);
     const handlePlayPause = useCallback(() => {
       const v = videoRef.current;
       if (!v) return;
@@ -85,6 +96,7 @@ var HlsPlayer = React.memo(
         setIsPlaying(false);
       }
     }, [playOptions, isMobile]);
+    if (resolvedSources.length === 0) return null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -104,7 +116,15 @@ var HlsPlayer = React.memo(
               loop,
               playsInline: true,
               onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
-              children: assetUrl && /* @__PURE__ */ jsx("source", { src: assetUrl, type: "application/x-mpegURL" })
+              children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
+                "source",
+                {
+                  src,
+                  type: "application/x-mpegURL",
+                  ...media ? { media } : {}
+                },
+                i
+              ))
             }
           ),
           !isMobile && playOptions === "playOnHover" && posterUrl && /* @__PURE__ */ jsx(

package/dist/index.js

@@ -281,6 +281,7 @@ var init_HlsPlayer = __esm({
     import_jsx_runtime42 = require("react/jsx-runtime");
     HlsPlayer = import_react33.default.memo(
       ({
+        sources,
         assetUrl,
         posterUrl,
         intrinsicWidth,
@@ -295,12 +296,14 @@ var init_HlsPlayer = __esm({
         const [isHovered, setIsHovered] = (0, import_react33.useState)(false);
         const [isMobile, setIsMobile] = (0, import_react33.useState)(false);
         const wasManuallyPausedRef = (0, import_react33.useRef)(false);
+        const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl }] : [];
         (0, import_react33.useEffect)(() => {
           const checkMobile = () => {
             const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
             const isSmallScreen = window.innerWidth <= 768;
-            const ua = navigator.userAgent.toLowerCase();
-            const isMobileUA = /android|iphone|ipad|ipod/i.test(ua);
+            const isMobileUA = /android|iphone|ipad|ipod/i.test(
+              navigator.userAgent.toLowerCase()
+            );
             setIsMobile(hasTouch || isSmallScreen || isMobileUA);
           };
           checkMobile();
@@ -309,31 +312,39 @@ var init_HlsPlayer = __esm({
         }, []);
         (0, import_react33.useEffect)(() => {
           const v = videoRef.current;
-          if (!v || !assetUrl) return;
+          if (!v || resolvedSources.length === 0) return;
           if (hlsRef.current) {
             hlsRef.current.destroy();
             hlsRef.current = null;
           }
           if (import_hls.default.isSupported()) {
             const hls = new import_hls.default();
-            hls.loadSource(assetUrl);
-            hls.attachMedia(v);
-            hls.on(import_hls.default.Events.MANIFEST_PARSED, () => {
-              if (isPlaying && !wasManuallyPausedRef.current) {
-                v.play().catch(console.error);
-              }
-            });
+            const onLoadStart = () => {
+              const chosenSrc = v.currentSrc;
+              if (!chosenSrc) return;
+              hls.loadSource(chosenSrc);
+              hls.attachMedia(v);
+              hls.on(import_hls.default.Events.MANIFEST_PARSED, () => {
+                if (isPlaying && !wasManuallyPausedRef.current) {
+                  v.play().catch(console.error);
+                }
+              });
+            };
+            v.addEventListener("loadstart", onLoadStart, { once: true });
+            v.load();
             hlsRef.current = hls;
+            return () => {
+              v.removeEventListener("loadstart", onLoadStart);
+              hls.destroy();
+              hlsRef.current = null;
+            };
           } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
             v.load();
           }
-          return () => {
-            if (hlsRef.current) {
-              hlsRef.current.destroy();
-              hlsRef.current = null;
-            }
-          };
-        }, [assetUrl]);
+        }, [
+          // Serialise the source array so the dependency is a stable primitive.
+          JSON.stringify(resolvedSources)
+        ]);
         const handlePlayPause = (0, import_react33.useCallback)(() => {
           const v = videoRef.current;
           if (!v) return;
@@ -362,6 +373,7 @@ var init_HlsPlayer = __esm({
             setIsPlaying(false);
           }
         }, [playOptions, isMobile]);
+        if (resolvedSources.length === 0) return null;
         return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "div",
           {
@@ -381,7 +393,15 @@ var init_HlsPlayer = __esm({
                   loop,
                   playsInline: true,
                   onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
-                  children: assetUrl && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("source", { src: assetUrl, type: "application/x-mpegURL" })
+                  children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    "source",
+                    {
+                      src,
+                      type: "application/x-mpegURL",
+                      ...media ? { media } : {}
+                    },
+                    i
+                  ))
                 }
               ),
               !isMobile && playOptions === "playOnHover" && posterUrl && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -3395,7 +3415,7 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-var import_react52 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
 var import_react37 = __toESM(require("react"));
@@ -4406,7 +4426,7 @@ var FormContainerNode = (props) => {
 var FormContainerNode_default = FormContainerNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-var import_react51 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 
 // src/components/pageRenderingEngine/nodes/EmbedNode.tsx
 var import_dynamic4 = __toESM(require("next/dynamic"));
@@ -5104,40 +5124,30 @@ var Pagination = (props) => {
 var Pagination_default = Pagination;
 
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
-var import_react50 = __toESM(require("react"));
 var import_dynamic5 = __toESM(require("next/dynamic"));
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var HlsPlayer3 = (0, import_dynamic5.default)(() => Promise.resolve().then(() => (init_HlsPlayer(), HlsPlayer_exports)), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":
-      return "(max-width: 480px)";
+      return "(max-width: 767px)";
     case "md":
-      return "(max-width: 768px)";
+      return "(min-width: 768px) and (max-width: 1199px)";
     case "lg":
-      return "(min-width: 769px)";
-    // case "tv":
-    //   return "(min-width: 1920px)";
+      return "(min-width: 1200px) and (max-width: 1919px)";
+    case "tv":
+      return "(min-width: 1920px)";
     default:
       return null;
   }
 };
+var DEVICE_ORDER = ["sm", "md", "lg", "tv"];
 var parseMaybeNumber = (value) => {
-  if (typeof value === "number") {
-    return Number.isFinite(value) ? value : void 0;
-  }
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
   if (typeof value !== "string") return void 0;
   const n = Number(value);
   return Number.isFinite(n) ? n : void 0;
 };
-var groupImagesForPicture = (images) => {
-  const sources = images.filter((img) => !!img.device);
-  const fallbacks = images.filter((img) => !img.device);
-  return {
-    sources,
-    fallback: fallbacks[0] ?? sources[0] ?? null
-  };
-};
 var ImageGalleryNode = (props) => {
   const resolveImageUrl = (imageUrl) => {
     if (!imageUrl) return "";
@@ -5157,49 +5167,49 @@ var ImageGalleryNode = (props) => {
   const staticImages = rawImages.filter(
     (img) => !resolveImageUrl(img.imageUrl).endsWith(".m3u8")
   );
-  const { sources: staticSources, fallback: staticFallback } = groupImagesForPicture(staticImages);
+  const hlsSources = [
+    // Constrained sources in breakpoint order (narrowest first).
+    ...DEVICE_ORDER.flatMap((deviceKey) => {
+      const img = hlsImages.find((i) => i.device === deviceKey);
+      if (!img) return [];
+      const src = resolveImageUrl(img.imageUrl);
+      if (!src) return [];
+      const media = deviceToMediaQuery(img.device);
+      return [{ src, ...media ? { media } : {} }];
+    }),
+    // Unconstrained fallback(s) — no media attr, always matches.
+    ...hlsImages.filter((img) => !img.device).map((img) => ({ src: resolveImageUrl(img.imageUrl) })).filter((s) => !!s.src)
+  ];
+  const primaryHls = hlsImages.find((img) => !img.device) ?? hlsImages[0];
+  const hlsPosterUrl = primaryHls ? resolvePosterUrl(primaryHls.posterUrl) : void 0;
+  const hlsIntrinsicWidth = primaryHls ? parseMaybeNumber(primaryHls.intrinsicWidth)?.toString() : void 0;
+  const hlsIntrinsicHeight = primaryHls ? parseMaybeNumber(primaryHls.intrinsicHeight)?.toString() : void 0;
+  const staticSources = staticImages.filter((img) => !!img.device);
+  const staticFallback = staticImages.find((img) => !img.device) ?? staticImages[0] ?? null;
   const FormatClass = {
     center: "justify-center",
     left: "justify-start",
     right: "justify-end"
   };
   const formatClasses = FormatClass[props.node.format || ""] || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react50.default.Fragment, { children: [
-    hlsImages.map((img, idx) => {
-      const assetUrl = resolveImageUrl(img.imageUrl);
-      if (!assetUrl) return null;
-      const posterUrl = resolvePosterUrl(img.posterUrl);
-      const intrinsicWidth = parseMaybeNumber(img.intrinsicWidth);
-      const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
-      const mediaQuery = deviceToMediaQuery(img.device);
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-        "div",
-        {
-          className: "max-w-full",
-          style: mediaQuery ? { "--media-query": mediaQuery } : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { "data-hls-idx": mediaQuery ? idx : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-            HlsPlayer3,
-            {
-              assetUrl,
-              posterUrl,
-              intrinsicWidth: intrinsicWidth?.toString(),
-              intrinsicHeight: intrinsicHeight?.toString(),
-              showControls: true,
-              loop: false,
-              playOptions: void 0,
-              apiBaseUrl: props.apiBaseUrl,
-              session: props.session
-            }
-          ) })
-        },
-        `hls-${idx}-${img.imageUrl}`
-      );
-    }),
-    staticFallback && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("picture", { children: [
-      ["sm", "md", "lg", "tv"].map((deviceKey) => {
-        const match = staticSources.find(
-          (img) => img.device === deviceKey
-        );
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: `flex flex-wrap gap-4 ${formatClasses}`, children: [
+    hlsSources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "max-w-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      HlsPlayer3,
+      {
+        sources: hlsSources,
+        posterUrl: hlsPosterUrl,
+        intrinsicWidth: hlsIntrinsicWidth,
+        intrinsicHeight: hlsIntrinsicHeight,
+        showControls: true,
+        loop: false,
+        playOptions: void 0,
+        apiBaseUrl: props.apiBaseUrl,
+        session: props.session
+      }
+    ) }),
+    staticFallback && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("picture", { children: [
+      DEVICE_ORDER.map((deviceKey) => {
+        const match = staticSources.find((img) => img.device === deviceKey);
         if (!match) return null;
         const srcUrl = resolveImageUrl(match.imageUrl);
         if (!srcUrl) return null;
@@ -5227,7 +5237,7 @@ var ImageGalleryNode = (props) => {
         if (img.width) styles.width = img.width;
         if (img.borderRadius) styles.borderRadius = img.borderRadius;
         return (
-          /* eslint-disable-next-line @next/next/no-img-element */
+          // eslint-disable-next-line @next/next/no-img-element
           /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             "img",
             {
@@ -5471,7 +5481,7 @@ var DivContainer = async (props) => {
     }
     const SelectedNode = NodeTypes2[node.type];
     if (!SelectedNode) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react51.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react50.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       SelectedNode,
       {
         node,
@@ -5573,9 +5583,9 @@ var DivContainer = async (props) => {
     props.node.autoFormat && "auto-format",
     props.node.bgClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_react51.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_react50.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("style", { dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS } }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react51.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react50.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Wrapper,
       {
         id: guid,
@@ -5584,7 +5594,7 @@ var DivContainer = async (props) => {
         ...wrapperProps,
         children: dataToRender.map(
           (item, idx) => item?.links?.view && renderLink ? renderChildren(props.node.children, props, item, idx, props.href ? void 0 : item?.links?.view)?.map(
-            (child, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react51.default.Fragment, { children: child }, i)
+            (child, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react50.default.Fragment, { children: child }, i)
           ) : renderChildren(props.node.children, props, item, idx)
         )
       }
@@ -5623,11 +5633,11 @@ var PageBodyRenderer = (props) => {
   if (pageBodyTree && pageBodyTree.root) {
     rootNode = pageBodyTree.root;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react52.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react51.default.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react52.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react52.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react51.default.Fragment, { children: SelectedNode && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react51.default.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react51.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       SelectedNode,
       {
         node,
@@ -5643,7 +5653,7 @@ var PageBodyRenderer = (props) => {
         device: props.device,
         widgetRenderer: props.widgetRenderer
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react52.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react51.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       SelectedNode,
       {
         node,
@@ -5664,13 +5674,13 @@ var PageBodyRenderer = (props) => {
 var PageBodyRenderer_default = PageBodyRenderer;
 
 // src/components/Toast.tsx
-var import_react53 = require("react");
+var import_react52 = require("react");
 init_ToastService();
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var Toast = () => {
-  const [showToast, setShowToast] = (0, import_react53.useState)(false);
-  const [message, setMessage] = (0, import_react53.useState)("");
-  const [messageType, setMessageType] = (0, import_react53.useState)("error");
+  const [showToast, setShowToast] = (0, import_react52.useState)(false);
+  const [message, setMessage] = (0, import_react52.useState)("");
+  const [messageType, setMessageType] = (0, import_react52.useState)("error");
   ToastService_default.showError = function(message2) {
     setShowToast(true);
     setMessage(message2);

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-SA6A3K2T.mjs";
+} from "./chunk-6C4HXWFR.mjs";
 import {
   Button_default,
   ServiceClient_default,
@@ -2403,7 +2403,7 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-import React44 from "react";
+import React43 from "react";
 
 // src/components/pageRenderingEngine/nodes/ParagraphNode.tsx
 import React32 from "react";
@@ -2638,7 +2638,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import { Fragment as Fragment3, jsx as jsx39 } from "react/jsx-runtime";
-var HlsPlayer = dynamic(() => import("./HlsPlayer-5AJ5M4IS.mjs"), {
+var HlsPlayer = dynamic(() => import("./HlsPlayer-LIFSWOII.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -3411,7 +3411,7 @@ var FormContainerNode = (props) => {
 var FormContainerNode_default = FormContainerNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
-import React43 from "react";
+import React42 from "react";
 
 // src/components/pageRenderingEngine/nodes/EmbedNode.tsx
 import dynamic4 from "next/dynamic";
@@ -4105,40 +4105,30 @@ var Pagination = (props) => {
 var Pagination_default = Pagination;
 
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
-import React42 from "react";
 import dynamic5 from "next/dynamic";
-import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-5AJ5M4IS.mjs"), { ssr: false });
+import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-LIFSWOII.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":
-      return "(max-width: 480px)";
+      return "(max-width: 767px)";
     case "md":
-      return "(max-width: 768px)";
+      return "(min-width: 768px) and (max-width: 1199px)";
     case "lg":
-      return "(min-width: 769px)";
-    // case "tv":
-    //   return "(min-width: 1920px)";
+      return "(min-width: 1200px) and (max-width: 1919px)";
+    case "tv":
+      return "(min-width: 1920px)";
     default:
       return null;
   }
 };
+var DEVICE_ORDER = ["sm", "md", "lg", "tv"];
 var parseMaybeNumber = (value) => {
-  if (typeof value === "number") {
-    return Number.isFinite(value) ? value : void 0;
-  }
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
   if (typeof value !== "string") return void 0;
   const n = Number(value);
   return Number.isFinite(n) ? n : void 0;
 };
-var groupImagesForPicture = (images) => {
-  const sources = images.filter((img) => !!img.device);
-  const fallbacks = images.filter((img) => !img.device);
-  return {
-    sources,
-    fallback: fallbacks[0] ?? sources[0] ?? null
-  };
-};
 var ImageGalleryNode = (props) => {
   const resolveImageUrl = (imageUrl) => {
     if (!imageUrl) return "";
@@ -4158,49 +4148,49 @@ var ImageGalleryNode = (props) => {
   const staticImages = rawImages.filter(
     (img) => !resolveImageUrl(img.imageUrl).endsWith(".m3u8")
   );
-  const { sources: staticSources, fallback: staticFallback } = groupImagesForPicture(staticImages);
+  const hlsSources = [
+    // Constrained sources in breakpoint order (narrowest first).
+    ...DEVICE_ORDER.flatMap((deviceKey) => {
+      const img = hlsImages.find((i) => i.device === deviceKey);
+      if (!img) return [];
+      const src = resolveImageUrl(img.imageUrl);
+      if (!src) return [];
+      const media = deviceToMediaQuery(img.device);
+      return [{ src, ...media ? { media } : {} }];
+    }),
+    // Unconstrained fallback(s) — no media attr, always matches.
+    ...hlsImages.filter((img) => !img.device).map((img) => ({ src: resolveImageUrl(img.imageUrl) })).filter((s) => !!s.src)
+  ];
+  const primaryHls = hlsImages.find((img) => !img.device) ?? hlsImages[0];
+  const hlsPosterUrl = primaryHls ? resolvePosterUrl(primaryHls.posterUrl) : void 0;
+  const hlsIntrinsicWidth = primaryHls ? parseMaybeNumber(primaryHls.intrinsicWidth)?.toString() : void 0;
+  const hlsIntrinsicHeight = primaryHls ? parseMaybeNumber(primaryHls.intrinsicHeight)?.toString() : void 0;
+  const staticSources = staticImages.filter((img) => !!img.device);
+  const staticFallback = staticImages.find((img) => !img.device) ?? staticImages[0] ?? null;
   const FormatClass = {
     center: "justify-center",
     left: "justify-start",
     right: "justify-end"
   };
   const formatClasses = FormatClass[props.node.format || ""] || "";
-  return /* @__PURE__ */ jsxs33(React42.Fragment, { children: [
-    hlsImages.map((img, idx) => {
-      const assetUrl = resolveImageUrl(img.imageUrl);
-      if (!assetUrl) return null;
-      const posterUrl = resolvePosterUrl(img.posterUrl);
-      const intrinsicWidth = parseMaybeNumber(img.intrinsicWidth);
-      const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
-      const mediaQuery = deviceToMediaQuery(img.device);
-      return /* @__PURE__ */ jsx58(
-        "div",
-        {
-          className: "max-w-full",
-          style: mediaQuery ? { "--media-query": mediaQuery } : void 0,
-          children: /* @__PURE__ */ jsx58("div", { "data-hls-idx": mediaQuery ? idx : void 0, children: /* @__PURE__ */ jsx58(
-            HlsPlayer2,
-            {
-              assetUrl,
-              posterUrl,
-              intrinsicWidth: intrinsicWidth?.toString(),
-              intrinsicHeight: intrinsicHeight?.toString(),
-              showControls: true,
-              loop: false,
-              playOptions: void 0,
-              apiBaseUrl: props.apiBaseUrl,
-              session: props.session
-            }
-          ) })
-        },
-        `hls-${idx}-${img.imageUrl}`
-      );
-    }),
-    staticFallback && /* @__PURE__ */ jsx58(Fragment9, { children: /* @__PURE__ */ jsxs33("picture", { children: [
-      ["sm", "md", "lg", "tv"].map((deviceKey) => {
-        const match = staticSources.find(
-          (img) => img.device === deviceKey
-        );
+  return /* @__PURE__ */ jsxs33("div", { className: `flex flex-wrap gap-4 ${formatClasses}`, children: [
+    hlsSources.length > 0 && /* @__PURE__ */ jsx58("div", { className: "max-w-full w-full", children: /* @__PURE__ */ jsx58(
+      HlsPlayer2,
+      {
+        sources: hlsSources,
+        posterUrl: hlsPosterUrl,
+        intrinsicWidth: hlsIntrinsicWidth,
+        intrinsicHeight: hlsIntrinsicHeight,
+        showControls: true,
+        loop: false,
+        playOptions: void 0,
+        apiBaseUrl: props.apiBaseUrl,
+        session: props.session
+      }
+    ) }),
+    staticFallback && /* @__PURE__ */ jsx58("div", { className: "max-w-full", children: /* @__PURE__ */ jsxs33("picture", { children: [
+      DEVICE_ORDER.map((deviceKey) => {
+        const match = staticSources.find((img) => img.device === deviceKey);
         if (!match) return null;
         const srcUrl = resolveImageUrl(match.imageUrl);
         if (!srcUrl) return null;
@@ -4228,7 +4218,7 @@ var ImageGalleryNode = (props) => {
         if (img.width) styles.width = img.width;
         if (img.borderRadius) styles.borderRadius = img.borderRadius;
         return (
-          /* eslint-disable-next-line @next/next/no-img-element */
+          // eslint-disable-next-line @next/next/no-img-element
           /* @__PURE__ */ jsx58(
             "img",
             {
@@ -4472,7 +4462,7 @@ var DivContainer = async (props) => {
     }
     const SelectedNode = NodeTypes2[node.type];
     if (!SelectedNode) return null;
-    return /* @__PURE__ */ jsx59(React43.Fragment, { children: /* @__PURE__ */ jsx59(
+    return /* @__PURE__ */ jsx59(React42.Fragment, { children: /* @__PURE__ */ jsx59(
       SelectedNode,
       {
         node,
@@ -4574,9 +4564,9 @@ var DivContainer = async (props) => {
     props.node.autoFormat && "auto-format",
     props.node.bgClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs34(React43.Fragment, { children: [
+  return /* @__PURE__ */ jsxs34(React42.Fragment, { children: [
     /* @__PURE__ */ jsx59("style", { dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS } }),
-    /* @__PURE__ */ jsx59(React43.Fragment, { children: /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx59(React42.Fragment, { children: /* @__PURE__ */ jsx59(
       Wrapper,
       {
         id: guid,
@@ -4585,7 +4575,7 @@ var DivContainer = async (props) => {
         ...wrapperProps,
         children: dataToRender.map(
           (item, idx) => item?.links?.view && renderLink ? renderChildren(props.node.children, props, item, idx, props.href ? void 0 : item?.links?.view)?.map(
-            (child, i) => /* @__PURE__ */ jsx59(React43.Fragment, { children: child }, i)
+            (child, i) => /* @__PURE__ */ jsx59(React42.Fragment, { children: child }, i)
           ) : renderChildren(props.node.children, props, item, idx)
         )
       }
@@ -4624,11 +4614,11 @@ var PageBodyRenderer = (props) => {
   if (pageBodyTree && pageBodyTree.root) {
     rootNode = pageBodyTree.root;
   }
-  return /* @__PURE__ */ jsx60(React44.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ jsx60(React43.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
-    return /* @__PURE__ */ jsx60(React44.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx60(React44.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx60(React44.Fragment, { children: /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx60(React43.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx60(React43.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx60(React43.Fragment, { children: /* @__PURE__ */ jsx60(
       SelectedNode,
       {
         node,
@@ -4644,7 +4634,7 @@ var PageBodyRenderer = (props) => {
         device: props.device,
         widgetRenderer: props.widgetRenderer
       }
-    ) }) : /* @__PURE__ */ jsx60(React44.Fragment, { children: /* @__PURE__ */ jsx60(
+    ) }) : /* @__PURE__ */ jsx60(React43.Fragment, { children: /* @__PURE__ */ jsx60(
       SelectedNode,
       {
         node,
@@ -4666,7 +4656,7 @@ var PageBodyRenderer_default = PageBodyRenderer;
 
 // src/components/Toast.tsx
 import { useState as useState8 } from "react";
-import { Fragment as Fragment10, jsx as jsx61, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx61, jsxs as jsxs35 } from "react/jsx-runtime";
 var Toast = () => {
   const [showToast, setShowToast] = useState8(false);
   const [message, setMessage] = useState8("");
@@ -4709,7 +4699,7 @@ var Toast = () => {
   const closeToast = () => {
     setShowToast(false);
   };
-  return /* @__PURE__ */ jsx61(Fragment10, { children: showToast && /* @__PURE__ */ jsx61("div", { className: "fixed top-2 flex justify-center w-1/2 max-w-xl left-1/2 -translate-x-1/2", style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs35("div", { className: `w-full items-center flex justify-between p-3 rounded-md relative shadow border bg-${messageType}-soft`, children: [
+  return /* @__PURE__ */ jsx61(Fragment9, { children: showToast && /* @__PURE__ */ jsx61("div", { className: "fixed top-2 flex justify-center w-1/2 max-w-xl left-1/2 -translate-x-1/2", style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs35("div", { className: `w-full items-center flex justify-between p-3 rounded-md relative shadow border bg-${messageType}-soft`, children: [
     /* @__PURE__ */ jsx61(
       "span",
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260421114651",
+  "version": "0.8.1-dev.20260421115845",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",