@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260420121019 → 0.8.1-dev.20260421095450

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

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

package/dist/{chunk-CVVLFQ4J.mjs → chunk-SA6A3K2T.mjs}

@@ -48,9 +48,15 @@ var HlsPlayer = React.memo(
         });
         hlsRef.current = hls;
       } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
-        v.src = assetUrl;
+        v.load();
       }
-    }, [assetUrl, isPlaying]);
+      return () => {
+        if (hlsRef.current) {
+          hlsRef.current.destroy();
+          hlsRef.current = null;
+        }
+      };
+    }, [assetUrl]);
     const handlePlayPause = useCallback(() => {
       const v = videoRef.current;
       if (!v) return;
@@ -97,7 +103,8 @@ var HlsPlayer = React.memo(
               autoPlay: playOptions === "autoplay",
               loop,
               playsInline: true,
-              onClick: !isMobile && !isPlaying ? handlePlayPause : void 0
+              onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
+              children: assetUrl && /* @__PURE__ */ jsx("source", { src: assetUrl, type: "application/x-mpegURL" })
             }
           ),
           !isMobile && playOptions === "playOnHover" && posterUrl && /* @__PURE__ */ jsx(

package/dist/index.js

@@ -325,9 +325,15 @@ var init_HlsPlayer = __esm({
             });
             hlsRef.current = hls;
           } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
-            v.src = assetUrl;
+            v.load();
           }
-        }, [assetUrl, isPlaying]);
+          return () => {
+            if (hlsRef.current) {
+              hlsRef.current.destroy();
+              hlsRef.current = null;
+            }
+          };
+        }, [assetUrl]);
         const handlePlayPause = (0, import_react33.useCallback)(() => {
           const v = videoRef.current;
           if (!v) return;
@@ -374,7 +380,8 @@ var init_HlsPlayer = __esm({
                   autoPlay: playOptions === "autoplay",
                   loop,
                   playsInline: true,
-                  onClick: !isMobile && !isPlaying ? handlePlayPause : void 0
+                  onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
+                  children: assetUrl && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("source", { src: assetUrl, type: "application/x-mpegURL" })
                 }
               ),
               !isMobile && playOptions === "playOnHover" && posterUrl && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -5098,11 +5105,22 @@ var Pagination_default = Pagination;
 
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 var import_dynamic5 = __toESM(require("next/dynamic"));
-init_HlsPlayer();
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var HlsPlayer1 = (0, import_dynamic5.default)(() => Promise.resolve().then(() => (init_HlsPlayer(), HlsPlayer_exports)), {
-  ssr: false
-});
+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: 767px)";
+    case "md":
+      return "(min-width: 768px) and (max-width: 1199px)";
+    case "lg":
+      return "(min-width: 1200px) and (max-width: 1919px)";
+    case "tv":
+      return "(min-width: 1920px)";
+    default:
+      return null;
+  }
+};
 var parseMaybeNumber = (value) => {
   if (typeof value === "number") {
     return Number.isFinite(value) ? value : void 0;
@@ -5111,14 +5129,15 @@ var parseMaybeNumber = (value) => {
   const n = Number(value);
   return Number.isFinite(n) ? n : void 0;
 };
-var shouldRenderForDevice = (imageDevice, currentDevice) => {
-  if (!imageDevice) return true;
-  return imageDevice === currentDevice;
+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) => {
-  console.log("Gallery Component Loaded");
-  console.log("Current Device:", props.device);
-  console.log("Gallery Images:", props.node.images);
   const resolveImageUrl = (imageUrl) => {
     if (!imageUrl) return "";
     if (imageUrl.startsWith("http")) return imageUrl;
@@ -5130,62 +5149,106 @@ var ImageGalleryNode = (props) => {
     if (!posterUrl) return void 0;
     return AssetUtility_default.resolveUrl(props.assetBaseUrl, posterUrl);
   };
-  const images = Array.isArray(props.node.images) ? props.node.images : [];
+  const rawImages = Array.isArray(props.node.images) ? props.node.images : [];
+  const hlsImages = rawImages.filter(
+    (img) => resolveImageUrl(img.imageUrl).endsWith(".m3u8")
+  );
+  const staticImages = rawImages.filter(
+    (img) => !resolveImageUrl(img.imageUrl).endsWith(".m3u8")
+  );
+  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_runtime67.jsx)("div", { className: `flex flex-wrap gap-4 ${formatClasses}`, children: images.map((img, idx) => {
-    console.log("Checking Image:", img.imageUrl);
-    console.log("Image Device:", img.device);
-    console.log("Page Device:", props.device);
-    if (!shouldRenderForDevice(img.device, props.device)) {
-      console.log("\u274C Skipping Image (device mismatch)");
-      return null;
-    }
-    console.log("\u2705 Rendering Image");
-    const imageUrl = resolveImageUrl(img.imageUrl);
-    if (!imageUrl) return null;
-    const posterUrl = resolvePosterUrl(img.posterUrl);
-    const intrinsicWidth = parseMaybeNumber(img.intrinsicWidth);
-    const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
-    const isHls = imageUrl.endsWith(".m3u8");
-    const alt = img.title || "Gallery image";
-    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_runtime67.jsx)("div", { className: "max-w-full", children: isHls ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-      HlsPlayer_default,
-      {
-        assetUrl: imageUrl,
-        posterUrl,
-        intrinsicWidth: intrinsicWidth?.toString(),
-        intrinsicHeight: intrinsicHeight?.toString(),
-        showControls: true,
-        loop: false,
-        playOptions: void 0,
-        apiBaseUrl: props.apiBaseUrl,
-        session: props.session
-      }
-    ) : (
-      /* eslint-disable-next-line @next/next/no-img-element */
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-        "img",
+  return /* @__PURE__ */ (0, import_jsx_runtime67.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);
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+        "div",
         {
-          loading: "lazy",
-          style: styles,
-          className: "object-cover max-w-full",
-          src: imageUrl,
-          width: intrinsicWidth,
-          height: intrinsicHeight,
-          alt
-        }
-      )
-    ) }, `${idx}-${img.imageUrl}`);
-  }) });
+          className: "max-w-full",
+          style: mediaQuery ? { "--media-query": mediaQuery } : void 0,
+          children: [
+            mediaQuery && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("style", { children: `
+                [data-hls-idx="${idx}"] { display: none; }
+                @media ${mediaQuery} { [data-hls-idx="${idx}"] { display: block; } }
+              ` }),
+            /* @__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)("div", { className: "max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime67.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;
+        const mediaQuery = deviceToMediaQuery(match.device);
+        return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          "source",
+          {
+            media: mediaQuery,
+            srcSet: srcUrl,
+            width: parseMaybeNumber(match.intrinsicWidth),
+            height: parseMaybeNumber(match.intrinsicHeight)
+          },
+          deviceKey
+        );
+      }),
+      (() => {
+        const img = staticFallback;
+        const imageUrl = resolveImageUrl(img.imageUrl);
+        if (!imageUrl) return null;
+        const intrinsicWidth = parseMaybeNumber(img.intrinsicWidth);
+        const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
+        const alt = img.title || "Gallery image";
+        const styles = {};
+        if (img.height) styles.height = img.height;
+        if (img.width) styles.width = img.width;
+        if (img.borderRadius) styles.borderRadius = img.borderRadius;
+        return (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            "img",
+            {
+              loading: "lazy",
+              style: styles,
+              className: "object-cover max-w-full",
+              src: imageUrl,
+              width: intrinsicWidth,
+              height: intrinsicHeight,
+              alt
+            }
+          )
+        );
+      })()
+    ] }) })
+  ] });
 };
 var ImageGalleryNode_default = ImageGalleryNode;
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-CVVLFQ4J.mjs";
+} from "./chunk-SA6A3K2T.mjs";
 import {
   Button_default,
   ServiceClient_default,
@@ -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-FFEIK6FG.mjs"), {
+var HlsPlayer = dynamic(() => import("./HlsPlayer-5AJ5M4IS.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -4106,10 +4106,22 @@ var Pagination_default = Pagination;
 
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic5 from "next/dynamic";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var HlsPlayer1 = dynamic5(() => import("./HlsPlayer-FFEIK6FG.mjs"), {
-  ssr: false
-});
+import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-5AJ5M4IS.mjs"), { ssr: false });
+var deviceToMediaQuery = (device) => {
+  switch (device) {
+    case "sm":
+      return "(max-width: 767px)";
+    case "md":
+      return "(min-width: 768px) and (max-width: 1199px)";
+    case "lg":
+      return "(min-width: 1200px) and (max-width: 1919px)";
+    case "tv":
+      return "(min-width: 1920px)";
+    default:
+      return null;
+  }
+};
 var parseMaybeNumber = (value) => {
   if (typeof value === "number") {
     return Number.isFinite(value) ? value : void 0;
@@ -4118,14 +4130,15 @@ var parseMaybeNumber = (value) => {
   const n = Number(value);
   return Number.isFinite(n) ? n : void 0;
 };
-var shouldRenderForDevice = (imageDevice, currentDevice) => {
-  if (!imageDevice) return true;
-  return imageDevice === currentDevice;
+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) => {
-  console.log("Gallery Component Loaded");
-  console.log("Current Device:", props.device);
-  console.log("Gallery Images:", props.node.images);
   const resolveImageUrl = (imageUrl) => {
     if (!imageUrl) return "";
     if (imageUrl.startsWith("http")) return imageUrl;
@@ -4137,68 +4150,112 @@ var ImageGalleryNode = (props) => {
     if (!posterUrl) return void 0;
     return AssetUtility_default.resolveUrl(props.assetBaseUrl, posterUrl);
   };
-  const images = Array.isArray(props.node.images) ? props.node.images : [];
+  const rawImages = Array.isArray(props.node.images) ? props.node.images : [];
+  const hlsImages = rawImages.filter(
+    (img) => resolveImageUrl(img.imageUrl).endsWith(".m3u8")
+  );
+  const staticImages = rawImages.filter(
+    (img) => !resolveImageUrl(img.imageUrl).endsWith(".m3u8")
+  );
+  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__ */ jsx58("div", { className: `flex flex-wrap gap-4 ${formatClasses}`, children: images.map((img, idx) => {
-    console.log("Checking Image:", img.imageUrl);
-    console.log("Image Device:", img.device);
-    console.log("Page Device:", props.device);
-    if (!shouldRenderForDevice(img.device, props.device)) {
-      console.log("\u274C Skipping Image (device mismatch)");
-      return null;
-    }
-    console.log("\u2705 Rendering Image");
-    const imageUrl = resolveImageUrl(img.imageUrl);
-    if (!imageUrl) return null;
-    const posterUrl = resolvePosterUrl(img.posterUrl);
-    const intrinsicWidth = parseMaybeNumber(img.intrinsicWidth);
-    const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
-    const isHls = imageUrl.endsWith(".m3u8");
-    const alt = img.title || "Gallery image";
-    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__ */ jsx58("div", { className: "max-w-full", children: isHls ? /* @__PURE__ */ jsx58(
-      HlsPlayer_default,
-      {
-        assetUrl: imageUrl,
-        posterUrl,
-        intrinsicWidth: intrinsicWidth?.toString(),
-        intrinsicHeight: intrinsicHeight?.toString(),
-        showControls: true,
-        loop: false,
-        playOptions: void 0,
-        apiBaseUrl: props.apiBaseUrl,
-        session: props.session
-      }
-    ) : (
-      /* eslint-disable-next-line @next/next/no-img-element */
-      /* @__PURE__ */ jsx58(
-        "img",
+  return /* @__PURE__ */ jsxs33("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);
+      return /* @__PURE__ */ jsxs33(
+        "div",
         {
-          loading: "lazy",
-          style: styles,
-          className: "object-cover max-w-full",
-          src: imageUrl,
-          width: intrinsicWidth,
-          height: intrinsicHeight,
-          alt
-        }
-      )
-    ) }, `${idx}-${img.imageUrl}`);
-  }) });
+          className: "max-w-full",
+          style: mediaQuery ? { "--media-query": mediaQuery } : void 0,
+          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__ */ jsxs33("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;
+        const mediaQuery = deviceToMediaQuery(match.device);
+        return /* @__PURE__ */ jsx58(
+          "source",
+          {
+            media: mediaQuery,
+            srcSet: srcUrl,
+            width: parseMaybeNumber(match.intrinsicWidth),
+            height: parseMaybeNumber(match.intrinsicHeight)
+          },
+          deviceKey
+        );
+      }),
+      (() => {
+        const img = staticFallback;
+        const imageUrl = resolveImageUrl(img.imageUrl);
+        if (!imageUrl) return null;
+        const intrinsicWidth = parseMaybeNumber(img.intrinsicWidth);
+        const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
+        const alt = img.title || "Gallery image";
+        const styles = {};
+        if (img.height) styles.height = img.height;
+        if (img.width) styles.width = img.width;
+        if (img.borderRadius) styles.borderRadius = img.borderRadius;
+        return (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          /* @__PURE__ */ jsx58(
+            "img",
+            {
+              loading: "lazy",
+              style: styles,
+              className: "object-cover max-w-full",
+              src: imageUrl,
+              width: intrinsicWidth,
+              height: intrinsicHeight,
+              alt
+            }
+          )
+        );
+      })()
+    ] }) })
+  ] });
 };
 var ImageGalleryNode_default = ImageGalleryNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import Link2 from "next/link";
-import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 function toCamelCase(str) {
   return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 }
@@ -4522,7 +4579,7 @@ var DivContainer = async (props) => {
     props.node.autoFormat && "auto-format",
     props.node.bgClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs33(React42.Fragment, { children: [
+  return /* @__PURE__ */ jsxs34(React42.Fragment, { children: [
     /* @__PURE__ */ jsx59("style", { dangerouslySetInnerHTML: { __html: cssResult.css + animationCSS } }),
     /* @__PURE__ */ jsx59(React42.Fragment, { children: /* @__PURE__ */ jsx59(
       Wrapper,
@@ -4614,7 +4671,7 @@ var PageBodyRenderer_default = PageBodyRenderer;
 
 // src/components/Toast.tsx
 import { useState as useState8 } from "react";
-import { Fragment as Fragment9, jsx as jsx61, jsxs as jsxs34 } 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("");
@@ -4657,7 +4714,7 @@ var Toast = () => {
   const closeToast = () => {
     setShowToast(false);
   };
-  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__ */ jsxs34("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.20260420121019",
+  "version": "0.8.1-dev.20260421095450",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",