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

package/dist/{HlsPlayer-LIFSWOII.mjs → HlsPlayer-O6BEBDTQ.mjs}

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

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

@@ -2,6 +2,13 @@
 import React, { useRef, useEffect, useState, useCallback } from "react";
 import Hls from "hls.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+var resolveActiveSource = (sources) => {
+  for (const { src, media } of sources) {
+    if (media && window.matchMedia(media).matches) return src;
+  }
+  const fallback = sources.find((s) => !s.media);
+  return fallback?.src ?? sources[0]?.src ?? "";
+};
 var HlsPlayer = React.memo(
   ({
     sources,
@@ -11,7 +18,8 @@ var HlsPlayer = React.memo(
     intrinsicHeight,
     showControls = true,
     loop = false,
-    playOptions = "autoplay"
+    playOptions = "autoplay",
+    placementCode = ""
   }) => {
     const videoRef = useRef(null);
     const hlsRef = useRef(null);
@@ -33,41 +41,41 @@ var HlsPlayer = React.memo(
       window.addEventListener("resize", checkMobile);
       return () => window.removeEventListener("resize", checkMobile);
     }, []);
+    const [activeSrc, setActiveSrc] = useState("");
+    useEffect(() => {
+      if (resolvedSources.length === 0) return;
+      const update = () => setActiveSrc(resolveActiveSource(resolvedSources));
+      update();
+      const mqls = resolvedSources.filter((s) => s.media).map((s) => window.matchMedia(s.media));
+      mqls.forEach((mql) => mql.addEventListener("change", update));
+      return () => mqls.forEach((mql) => mql.removeEventListener("change", update));
+    }, [JSON.stringify(resolvedSources)]);
     useEffect(() => {
       const v = videoRef.current;
-      if (!v || resolvedSources.length === 0) return;
+      if (!v || !activeSrc) return;
       if (hlsRef.current) {
         hlsRef.current.destroy();
         hlsRef.current = null;
       }
       if (Hls.isSupported()) {
         const hls = new Hls();
-        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();
+        hls.loadSource(activeSrc);
+        hls.attachMedia(v);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          if (isPlaying && !wasManuallyPausedRef.current) {
+            v.play().catch(console.error);
+          }
+        });
         hlsRef.current = hls;
         return () => {
-          v.removeEventListener("loadstart", onLoadStart);
           hls.destroy();
           hlsRef.current = null;
         };
       } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
+        v.src = activeSrc;
         v.load();
       }
-    }, [
-      // Serialise the source array so the dependency is a stable primitive.
-      JSON.stringify(resolvedSources)
-    ]);
+    }, [activeSrc]);
     const handlePlayPause = useCallback(() => {
       const v = videoRef.current;
       if (!v) return;
@@ -115,16 +123,7 @@ var HlsPlayer = React.memo(
               autoPlay: playOptions === "autoplay",
               loop,
               playsInline: true,
-              onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
-              children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
-                "source",
-                {
-                  src,
-                  type: "application/x-mpegURL",
-                  ...media ? { media } : {}
-                },
-                i
-              ))
+              onClick: !isMobile && !isPlaying ? handlePlayPause : void 0
             }
           ),
           !isMobile && playOptions === "playOnHover" && posterUrl && /* @__PURE__ */ jsx(

package/dist/index.js

@@ -271,7 +271,7 @@ var HlsPlayer_exports = {};
 __export(HlsPlayer_exports, {
   default: () => HlsPlayer_default
 });
-var import_react33, import_hls, import_jsx_runtime42, HlsPlayer, HlsPlayer_default;
+var import_react33, import_hls, import_jsx_runtime42, resolveActiveSource, HlsPlayer, HlsPlayer_default;
 var init_HlsPlayer = __esm({
   "src/components/HlsPlayer.tsx"() {
     "use strict";
@@ -279,6 +279,13 @@ var init_HlsPlayer = __esm({
     import_react33 = __toESM(require("react"));
     import_hls = __toESM(require("hls.js"));
     import_jsx_runtime42 = require("react/jsx-runtime");
+    resolveActiveSource = (sources) => {
+      for (const { src, media } of sources) {
+        if (media && window.matchMedia(media).matches) return src;
+      }
+      const fallback = sources.find((s) => !s.media);
+      return fallback?.src ?? sources[0]?.src ?? "";
+    };
     HlsPlayer = import_react33.default.memo(
       ({
         sources,
@@ -288,7 +295,8 @@ var init_HlsPlayer = __esm({
         intrinsicHeight,
         showControls = true,
         loop = false,
-        playOptions = "autoplay"
+        playOptions = "autoplay",
+        placementCode = ""
       }) => {
         const videoRef = (0, import_react33.useRef)(null);
         const hlsRef = (0, import_react33.useRef)(null);
@@ -310,41 +318,41 @@ var init_HlsPlayer = __esm({
           window.addEventListener("resize", checkMobile);
           return () => window.removeEventListener("resize", checkMobile);
         }, []);
+        const [activeSrc, setActiveSrc] = (0, import_react33.useState)("");
+        (0, import_react33.useEffect)(() => {
+          if (resolvedSources.length === 0) return;
+          const update = () => setActiveSrc(resolveActiveSource(resolvedSources));
+          update();
+          const mqls = resolvedSources.filter((s) => s.media).map((s) => window.matchMedia(s.media));
+          mqls.forEach((mql) => mql.addEventListener("change", update));
+          return () => mqls.forEach((mql) => mql.removeEventListener("change", update));
+        }, [JSON.stringify(resolvedSources)]);
         (0, import_react33.useEffect)(() => {
           const v = videoRef.current;
-          if (!v || resolvedSources.length === 0) return;
+          if (!v || !activeSrc) return;
           if (hlsRef.current) {
             hlsRef.current.destroy();
             hlsRef.current = null;
           }
           if (import_hls.default.isSupported()) {
             const hls = new import_hls.default();
-            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();
+            hls.loadSource(activeSrc);
+            hls.attachMedia(v);
+            hls.on(import_hls.default.Events.MANIFEST_PARSED, () => {
+              if (isPlaying && !wasManuallyPausedRef.current) {
+                v.play().catch(console.error);
+              }
+            });
             hlsRef.current = hls;
             return () => {
-              v.removeEventListener("loadstart", onLoadStart);
               hls.destroy();
               hlsRef.current = null;
             };
           } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
+            v.src = activeSrc;
             v.load();
           }
-        }, [
-          // Serialise the source array so the dependency is a stable primitive.
-          JSON.stringify(resolvedSources)
-        ]);
+        }, [activeSrc]);
         const handlePlayPause = (0, import_react33.useCallback)(() => {
           const v = videoRef.current;
           if (!v) return;
@@ -392,16 +400,7 @@ var init_HlsPlayer = __esm({
                   autoPlay: playOptions === "autoplay",
                   loop,
                   playsInline: true,
-                  onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
-                  children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                    "source",
-                    {
-                      src,
-                      type: "application/x-mpegURL",
-                      ...media ? { media } : {}
-                    },
-                    i
-                  ))
+                  onClick: !isMobile && !isPlaying ? handlePlayPause : void 0
                 }
               ),
               !isMobile && playOptions === "playOnHover" && posterUrl && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -5130,13 +5129,13 @@ var HlsPlayer3 = (0, import_dynamic5.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;
   }
@@ -5192,22 +5191,23 @@ var ImageGalleryNode = (props) => {
     right: "justify-end"
   };
   const formatClasses = FormatClass[props.node.format || ""] || "";
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    hlsSources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       HlsPlayer3,
       {
         sources: hlsSources,
         posterUrl: hlsPosterUrl,
         intrinsicWidth: hlsIntrinsicWidth,
         intrinsicHeight: hlsIntrinsicHeight,
-        showControls: true,
-        loop: false,
-        playOptions: void 0,
+        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_runtime67.jsx)("div", { className: "max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("picture", { children: [
+    staticFallback && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { 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;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-6C4HXWFR.mjs";
+} from "./chunk-VVEZGWP4.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-LIFSWOII.mjs"), {
+var HlsPlayer = dynamic(() => import("./HlsPlayer-O6BEBDTQ.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -4106,18 +4106,18 @@ var Pagination_default = Pagination;
 
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic5 from "next/dynamic";
-import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-LIFSWOII.mjs"), { ssr: false });
+import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-O6BEBDTQ.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;
   }
@@ -4173,22 +4173,23 @@ var ImageGalleryNode = (props) => {
     right: "justify-end"
   };
   const formatClasses = FormatClass[props.node.format || ""] || "";
-  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(
+  return /* @__PURE__ */ jsxs33(Fragment9, { children: [
+    hlsSources.length > 0 && /* @__PURE__ */ jsx58(Fragment9, { children: /* @__PURE__ */ jsx58(
       HlsPlayer2,
       {
         sources: hlsSources,
         posterUrl: hlsPosterUrl,
         intrinsicWidth: hlsIntrinsicWidth,
         intrinsicHeight: hlsIntrinsicHeight,
-        showControls: true,
-        loop: false,
-        playOptions: void 0,
+        showControls: primaryHls?.showControls ?? false,
+        loop: primaryHls?.loop ?? false,
+        playOptions: primaryHls?.playOptions ?? "",
+        placementCode: primaryHls?.placementCode ?? "",
         apiBaseUrl: props.apiBaseUrl,
         session: props.session
       }
     ) }),
-    staticFallback && /* @__PURE__ */ jsx58("div", { className: "max-w-full", children: /* @__PURE__ */ jsxs33("picture", { children: [
+    staticFallback && /* @__PURE__ */ jsx58(Fragment9, { children: /* @__PURE__ */ jsxs33("picture", { children: [
       DEVICE_ORDER.map((deviceKey) => {
         const match = staticSources.find((img) => img.device === deviceKey);
         if (!match) return null;
@@ -4656,7 +4657,7 @@ var PageBodyRenderer_default = PageBodyRenderer;
 
 // src/components/Toast.tsx
 import { useState as useState8 } from "react";
-import { Fragment as Fragment9, jsx as jsx61, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx61, jsxs as jsxs35 } from "react/jsx-runtime";
 var Toast = () => {
   const [showToast, setShowToast] = useState8(false);
   const [message, setMessage] = useState8("");
@@ -4699,7 +4700,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__ */ jsxs35("div", { className: `w-full items-center flex justify-between p-3 rounded-md relative shadow border bg-${messageType}-soft`, children: [
+  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: [
     /* @__PURE__ */ jsx61(
       "span",
       {

package/package.json

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