@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260526122912 → 0.8.1-dev.20260527044956

package/dist/index.js

@@ -5248,24 +5248,33 @@ var HlsPlayer3 = (0, import_dynamic7.default)(() => Promise.resolve().then(() =>
 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 "";
@@ -5285,51 +5294,62 @@ var ImageGalleryNode = (props) => {
   const staticImages = rawImages.filter(
     (img) => !resolveImageUrl(img.imageUrl).endsWith(".m3u8")
   );
-  const hlsSources = [
-    ...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);
-      const posterUrl = resolvePosterUrl(img.posterUrl);
-      return [{ src, ...media ? { media } : {}, ...posterUrl ? { posterUrl } : {} }];
-    }),
-    ...hlsImages.filter((img) => !img.device).map((img) => {
-      const src = resolveImageUrl(img.imageUrl);
-      const posterUrl = resolvePosterUrl(img.posterUrl);
-      return { src, ...posterUrl ? { posterUrl } : {} };
-    }).filter((s) => !!s.src)
-  ];
-  const primaryHls = hlsImages.find((img) => !img.device) ?? hlsImages[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 { sources: staticSources, fallback: staticFallback } = groupImagesForPicture(staticImages);
   const FormatClass = {
     center: "justify-center",
     left: "justify-start",
     right: "justify-end"
   };
   const formatClasses = FormatClass[props.node.format || ""] || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    hlsSources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-      HlsPlayer3,
-      {
-        sources: hlsSources,
-        intrinsicWidth: hlsIntrinsicWidth,
-        intrinsicHeight: hlsIntrinsicHeight,
-        showControls: primaryHls?.showControls ?? false,
-        loop: primaryHls?.loop ?? false,
-        playOptions: primaryHls?.playOptions ?? "",
-        placementCode: primaryHls?.placementCode ?? "",
-        apiBaseUrl: props.apiBaseUrl,
-        session: props.session
-      }
-    ) }),
-    staticFallback && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("picture", { children: [
-      DEVICE_ORDER.map((deviceKey) => {
-        const match = staticSources.find((img) => img.device === deviceKey);
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: `flex flex-wrap gap-4 ${formatClasses}`, 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);
+      const styles = {};
+      if (img.height) styles.height = img.height;
+      if (img.width) styles.width = img.width;
+      if (img.borderRadius) styles.borderRadius = img.borderRadius;
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        "div",
+        {
+          className: "max-w-full",
+          style: {
+            ...mediaQuery ? { "--media-query": mediaQuery } : void 0,
+            ...styles
+          },
+          children: [
+            mediaQuery && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("style", { children: `
+                [data-hls-idx="${idx}"] { display: none; }
+                @media ${mediaQuery} { [data-hls-idx="${idx}"] { display: block; } }
+              ` }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { "data-hls-idx": mediaQuery ? idx : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.jsx)("div", { className: "max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("picture", { children: [
+      ["sm", "md", "lg", "tv"].map((deviceKey) => {
+        const match = staticSources.find(
+          (img) => img.device === deviceKey
+        );
         if (!match) return null;
         const srcUrl = resolveImageUrl(match.imageUrl);
         if (!srcUrl) return null;
@@ -5357,7 +5377,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_runtime69.jsx)(
             "img",
             {

package/dist/index.mjs

@@ -3708,29 +3708,38 @@ var Pagination_default = Pagination;
 
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic7 from "next/dynamic";
-import { Fragment as Fragment7, jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
 var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-G27NMG7A.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 "";
@@ -3750,51 +3759,62 @@ var ImageGalleryNode = (props) => {
   const staticImages = rawImages.filter(
     (img) => !resolveImageUrl(img.imageUrl).endsWith(".m3u8")
   );
-  const hlsSources = [
-    ...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);
-      const posterUrl = resolvePosterUrl(img.posterUrl);
-      return [{ src, ...media ? { media } : {}, ...posterUrl ? { posterUrl } : {} }];
-    }),
-    ...hlsImages.filter((img) => !img.device).map((img) => {
-      const src = resolveImageUrl(img.imageUrl);
-      const posterUrl = resolvePosterUrl(img.posterUrl);
-      return { src, ...posterUrl ? { posterUrl } : {} };
-    }).filter((s) => !!s.src)
-  ];
-  const primaryHls = hlsImages.find((img) => !img.device) ?? hlsImages[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 { sources: staticSources, fallback: staticFallback } = groupImagesForPicture(staticImages);
   const FormatClass = {
     center: "justify-center",
     left: "justify-start",
     right: "justify-end"
   };
   const formatClasses = FormatClass[props.node.format || ""] || "";
-  return /* @__PURE__ */ jsxs31(Fragment7, { children: [
-    hlsSources.length > 0 && /* @__PURE__ */ jsx58(Fragment7, { children: /* @__PURE__ */ jsx58(
-      HlsPlayer2,
-      {
-        sources: hlsSources,
-        intrinsicWidth: hlsIntrinsicWidth,
-        intrinsicHeight: hlsIntrinsicHeight,
-        showControls: primaryHls?.showControls ?? false,
-        loop: primaryHls?.loop ?? false,
-        playOptions: primaryHls?.playOptions ?? "",
-        placementCode: primaryHls?.placementCode ?? "",
-        apiBaseUrl: props.apiBaseUrl,
-        session: props.session
-      }
-    ) }),
-    staticFallback && /* @__PURE__ */ jsx58(Fragment7, { children: /* @__PURE__ */ jsxs31("picture", { children: [
-      DEVICE_ORDER.map((deviceKey) => {
-        const match = staticSources.find((img) => img.device === deviceKey);
+  return /* @__PURE__ */ jsxs31("div", { className: `flex flex-wrap gap-4 ${formatClasses}`, 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);
+      const styles = {};
+      if (img.height) styles.height = img.height;
+      if (img.width) styles.width = img.width;
+      if (img.borderRadius) styles.borderRadius = img.borderRadius;
+      return /* @__PURE__ */ jsxs31(
+        "div",
+        {
+          className: "max-w-full",
+          style: {
+            ...mediaQuery ? { "--media-query": mediaQuery } : void 0,
+            ...styles
+          },
+          children: [
+            mediaQuery && /* @__PURE__ */ jsx58("style", { children: `
+                [data-hls-idx="${idx}"] { display: none; }
+                @media ${mediaQuery} { [data-hls-idx="${idx}"] { display: block; } }
+              ` }),
+            /* @__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("div", { className: "max-w-full", children: /* @__PURE__ */ jsxs31("picture", { children: [
+      ["sm", "md", "lg", "tv"].map((deviceKey) => {
+        const match = staticSources.find(
+          (img) => img.device === deviceKey
+        );
         if (!match) return null;
         const srcUrl = resolveImageUrl(match.imageUrl);
         if (!srcUrl) return null;
@@ -3822,7 +3842,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",
             {
@@ -4262,7 +4282,7 @@ var PageBodyRenderer_default = PageBodyRenderer;
 
 // src/components/Toast.tsx
 import { useState as useState8 } from "react";
-import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx61, jsxs as jsxs33 } from "react/jsx-runtime";
 var Toast = () => {
   const [showToast, setShowToast] = useState8(false);
   const [message, setMessage] = useState8("");
@@ -4305,7 +4325,7 @@ var Toast = () => {
   const closeToast = () => {
     setShowToast(false);
   };
-  return /* @__PURE__ */ jsx61(Fragment8, { 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__ */ jsxs33("div", { className: `w-full items-center flex justify-between p-3 rounded-md relative shadow border bg-${messageType}-soft`, children: [
+  return /* @__PURE__ */ jsx61(Fragment7, { 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__ */ jsxs33("div", { className: `w-full items-center flex justify-between p-3 rounded-md relative shadow border bg-${messageType}-soft`, children: [
     /* @__PURE__ */ jsx61(
       "span",
       {
@@ -4425,7 +4445,7 @@ var ContentView = (props) => {
 var ContentView_default = ContentView;
 
 // src/components/dataForm/DataList.tsx
-import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
 var DataList = (props) => {
   console.log(props.dataset, "datasetssssss");
   const router = useRouter();
@@ -4517,7 +4537,7 @@ var DataList = (props) => {
       const showFirstPages = activePageNumber <= 5;
       const showLastPages = activePageNumber > pages - 5;
       if (showFirstPages) {
-        return /* @__PURE__ */ jsxs35(Fragment9, { children: [
+        return /* @__PURE__ */ jsxs35(Fragment8, { children: [
           Array.from({ length: 8 }, (_, index) => index + 1).map((page) => /* @__PURE__ */ jsx65(React46.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx65(
             Hyperlink,
             {
@@ -4565,7 +4585,7 @@ var DataList = (props) => {
           ) })
         ] });
       } else if (showLastPages) {
-        return /* @__PURE__ */ jsxs35(Fragment9, { children: [
+        return /* @__PURE__ */ jsxs35(Fragment8, { children: [
           /* @__PURE__ */ jsx65(
             Hyperlink,
             {
@@ -4595,7 +4615,7 @@ var DataList = (props) => {
           )
         ] });
       } else {
-        return /* @__PURE__ */ jsxs35(Fragment9, { children: [
+        return /* @__PURE__ */ jsxs35(Fragment8, { children: [
           /* @__PURE__ */ jsx65(
             Hyperlink,
             {

package/package.json

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