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

package/dist/{HlsPlayer-G27NMG7A.mjs → HlsPlayer-3GPS6EL2.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   HlsPlayer_default
-} from "./chunk-F6CXFHUE.mjs";
+} from "./chunk-2YXREMBN.mjs";
 export {
   HlsPlayer_default as default
 };

package/dist/{chunk-F6CXFHUE.mjs → chunk-2YXREMBN.mjs}

@@ -36,7 +36,8 @@ var HlsPlayer = React.memo(
     showControls = true,
     loop = false,
     playOptions = "autoplay",
-    placementCode = ""
+    placementCode = "",
+    styles
   }) => {
     const containerRef = useRef(null);
     const videoRef = useRef(null);
@@ -299,7 +300,8 @@ var HlsPlayer = React.memo(
       "div",
       {
         ref: containerRef,
-        className: "relative w-full aspect-video bg-black",
+        className: "relative w-full overflow-hidden aspect-video bg-black",
+        style: styles,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onMouseMove: handleMouseMove,

package/dist/index.js

@@ -200,7 +200,8 @@ var init_HlsPlayer = __esm({
         showControls = true,
         loop = false,
         playOptions = "autoplay",
-        placementCode = ""
+        placementCode = "",
+        styles
       }) => {
         const containerRef = (0, import_react4.useRef)(null);
         const videoRef = (0, import_react4.useRef)(null);
@@ -463,7 +464,8 @@ var init_HlsPlayer = __esm({
           "div",
           {
             ref: containerRef,
-            className: "relative w-full aspect-video bg-black",
+            className: "relative w-full overflow-hidden aspect-video bg-black",
+            style: styles,
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             onMouseMove: handleMouseMove,
@@ -5248,33 +5250,24 @@ var HlsPlayer3 = (0, import_dynamic7.default)(() => Promise.resolve().then(() =>
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":
-      return "(max-width: 767px)";
+      return "(max-width: 480px)";
     case "md":
-      return "(min-width: 768px) and (max-width: 1199px)";
+      return "(max-width: 768px)";
     case "lg":
-      return "(min-width: 1200px) and (max-width: 1919px)";
-    case "tv":
-      return "(min-width: 1920px)";
+      return "(min-width: 769px)";
+    // 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 "";
@@ -5294,62 +5287,56 @@ var ImageGalleryNode = (props) => {
   const staticImages = rawImages.filter(
     (img) => !resolveImageUrl(img.imageUrl).endsWith(".m3u8")
   );
-  const { sources: staticSources, fallback: staticFallback } = groupImagesForPicture(staticImages);
+  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 hlsStyles = {};
+  if (primaryHls?.height) hlsStyles.height = primaryHls.height;
+  if (primaryHls?.width) hlsStyles.width = primaryHls.width;
+  if (primaryHls?.borderRadius) hlsStyles.borderRadius = primaryHls.borderRadius;
+  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_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
-        );
+  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,
+        styles: hlsStyles
+      }
+    ) }),
+    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);
         if (!match) return null;
         const srcUrl = resolveImageUrl(match.imageUrl);
         if (!srcUrl) return null;
@@ -5377,7 +5364,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

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-F6CXFHUE.mjs";
+} from "./chunk-2YXREMBN.mjs";
 import {
   Button_default,
   ClientButton_default,
@@ -2049,7 +2049,7 @@ import React30 from "react";
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import dynamic3 from "next/dynamic";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var HlsPlayer = dynamic3(() => import("./HlsPlayer-G27NMG7A.mjs"), { ssr: false });
+var HlsPlayer = dynamic3(() => import("./HlsPlayer-3GPS6EL2.mjs"), { ssr: false });
 var getNestedValue = (obj, path) => {
   if (!obj || !path) return void 0;
   return path.split(".").reduce((current, key) => {
@@ -3708,38 +3708,29 @@ var Pagination_default = Pagination;
 
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic7 from "next/dynamic";
-import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-G27NMG7A.mjs"), { ssr: false });
+import { Fragment as Fragment7, jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
+var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-3GPS6EL2.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":
-      return "(max-width: 767px)";
+      return "(max-width: 480px)";
     case "md":
-      return "(min-width: 768px) and (max-width: 1199px)";
+      return "(max-width: 768px)";
     case "lg":
-      return "(min-width: 1200px) and (max-width: 1919px)";
-    case "tv":
-      return "(min-width: 1920px)";
+      return "(min-width: 769px)";
+    // 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 "";
@@ -3759,62 +3750,56 @@ var ImageGalleryNode = (props) => {
   const staticImages = rawImages.filter(
     (img) => !resolveImageUrl(img.imageUrl).endsWith(".m3u8")
   );
-  const { sources: staticSources, fallback: staticFallback } = groupImagesForPicture(staticImages);
+  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 hlsStyles = {};
+  if (primaryHls?.height) hlsStyles.height = primaryHls.height;
+  if (primaryHls?.width) hlsStyles.width = primaryHls.width;
+  if (primaryHls?.borderRadius) hlsStyles.borderRadius = primaryHls.borderRadius;
+  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__ */ 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
-        );
+  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,
+        styles: hlsStyles
+      }
+    ) }),
+    staticFallback && /* @__PURE__ */ jsx58(Fragment7, { children: /* @__PURE__ */ jsxs31("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;
@@ -3842,7 +3827,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",
             {
@@ -4282,7 +4267,7 @@ var PageBodyRenderer_default = PageBodyRenderer;
 
 // src/components/Toast.tsx
 import { useState as useState8 } from "react";
-import { Fragment as Fragment7, jsx as jsx61, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs33 } from "react/jsx-runtime";
 var Toast = () => {
   const [showToast, setShowToast] = useState8(false);
   const [message, setMessage] = useState8("");
@@ -4325,7 +4310,7 @@ var Toast = () => {
   const closeToast = () => {
     setShowToast(false);
   };
-  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: [
+  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: [
     /* @__PURE__ */ jsx61(
       "span",
       {
@@ -4445,7 +4430,7 @@ var ContentView = (props) => {
 var ContentView_default = ContentView;
 
 // src/components/dataForm/DataList.tsx
-import { Fragment as Fragment8, jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs35 } from "react/jsx-runtime";
 var DataList = (props) => {
   console.log(props.dataset, "datasetssssss");
   const router = useRouter();
@@ -4537,7 +4522,7 @@ var DataList = (props) => {
       const showFirstPages = activePageNumber <= 5;
       const showLastPages = activePageNumber > pages - 5;
       if (showFirstPages) {
-        return /* @__PURE__ */ jsxs35(Fragment8, { children: [
+        return /* @__PURE__ */ jsxs35(Fragment9, { children: [
           Array.from({ length: 8 }, (_, index) => index + 1).map((page) => /* @__PURE__ */ jsx65(React46.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ jsx65(
             Hyperlink,
             {
@@ -4585,7 +4570,7 @@ var DataList = (props) => {
           ) })
         ] });
       } else if (showLastPages) {
-        return /* @__PURE__ */ jsxs35(Fragment8, { children: [
+        return /* @__PURE__ */ jsxs35(Fragment9, { children: [
           /* @__PURE__ */ jsx65(
             Hyperlink,
             {
@@ -4615,7 +4600,7 @@ var DataList = (props) => {
           )
         ] });
       } else {
-        return /* @__PURE__ */ jsxs35(Fragment8, { children: [
+        return /* @__PURE__ */ jsxs35(Fragment9, { children: [
           /* @__PURE__ */ jsx65(
             Hyperlink,
             {

package/package.json

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