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

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

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

package/dist/{chunk-VVEZGWP4.mjs → chunk-ELASRK22.mjs}

@@ -2,13 +2,6 @@
 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,
@@ -27,7 +20,7 @@ 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 }] : [];
+    const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl, posterUrl }] : [];
     useEffect(() => {
       const checkMobile = () => {
         const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
@@ -41,41 +34,38 @@ 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 || !activeSrc) 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(activeSrc);
-        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.src = activeSrc;
         v.load();
       }
-    }, [activeSrc]);
+    }, [JSON.stringify(resolvedSources)]);
     const handlePlayPause = useCallback(() => {
       const v = videoRef.current;
       if (!v) return;
@@ -104,6 +94,8 @@ var HlsPlayer = React.memo(
         setIsPlaying(false);
       }
     }, [playOptions, isMobile]);
+    const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
+    const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
     if (resolvedSources.length === 0) return null;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -117,23 +109,40 @@ var HlsPlayer = React.memo(
             {
               ref: videoRef,
               className: "w-full h-full object-contain",
-              poster: posterUrl,
               controls: showControls && (isMobile || isPlaying),
               muted: playOptions === "autoplay" || playOptions === "playOnHover",
               autoPlay: playOptions === "autoplay",
               loop,
               playsInline: true,
-              onClick: !isMobile && !isPlaying ? handlePlayPause : void 0
+              onClick: !isMobile && !isPlaying ? handlePlayPause : void 0,
+              children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
+                "source",
+                {
+                  src,
+                  type: "application/x-mpegURL",
+                  ...media ? { media } : {}
+                },
+                i
+              ))
             }
           ),
-          !isMobile && playOptions === "playOnHover" && posterUrl && /* @__PURE__ */ jsx(
-            "img",
+          fallbackPoster && !isPlaying && /* @__PURE__ */ jsxs(
+            "picture",
             {
-              src: posterUrl,
-              width: intrinsicWidth,
-              height: intrinsicHeight,
-              alt: "poster",
-              className: `absolute inset-0 object-cover transition-opacity ${isHovered ? "opacity-0" : "opacity-100"}`
+              className: `absolute inset-0 transition-opacity ${!isMobile && playOptions === "playOnHover" && isHovered ? "opacity-0" : "opacity-100"}`,
+              children: [
+                posterSources.map(({ media, posterUrl: src }, i) => /* @__PURE__ */ jsx("source", { media, srcSet: src }, i)),
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: fallbackPoster,
+                    width: intrinsicWidth,
+                    height: intrinsicHeight,
+                    alt: "poster",
+                    className: "w-full h-full object-cover"
+                  }
+                )
+              ]
             }
           ),
           !isMobile && !isPlaying && /* @__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, resolveActiveSource, HlsPlayer, HlsPlayer_default;
+var import_react33, import_hls, import_jsx_runtime42, HlsPlayer, HlsPlayer_default;
 var init_HlsPlayer = __esm({
   "src/components/HlsPlayer.tsx"() {
     "use strict";
@@ -279,13 +279,6 @@ 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,
@@ -304,7 +297,7 @@ 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 }] : [];
+        const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl, posterUrl }] : [];
         (0, import_react33.useEffect)(() => {
           const checkMobile = () => {
             const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
@@ -318,41 +311,38 @@ 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 || !activeSrc) 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(activeSrc);
-            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.src = activeSrc;
             v.load();
           }
-        }, [activeSrc]);
+        }, [JSON.stringify(resolvedSources)]);
         const handlePlayPause = (0, import_react33.useCallback)(() => {
           const v = videoRef.current;
           if (!v) return;
@@ -381,6 +371,8 @@ var init_HlsPlayer = __esm({
             setIsPlaying(false);
           }
         }, [playOptions, isMobile]);
+        const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
+        const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
         if (resolvedSources.length === 0) return null;
         return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "div",
@@ -394,23 +386,40 @@ var init_HlsPlayer = __esm({
                 {
                   ref: videoRef,
                   className: "w-full h-full object-contain",
-                  poster: posterUrl,
                   controls: showControls && (isMobile || isPlaying),
                   muted: playOptions === "autoplay" || playOptions === "playOnHover",
                   autoPlay: playOptions === "autoplay",
                   loop,
                   playsInline: true,
-                  onClick: !isMobile && !isPlaying ? handlePlayPause : void 0
+                  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
+                  ))
                 }
               ),
-              !isMobile && playOptions === "playOnHover" && posterUrl && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                "img",
+              fallbackPoster && !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                "picture",
                 {
-                  src: posterUrl,
-                  width: intrinsicWidth,
-                  height: intrinsicHeight,
-                  alt: "poster",
-                  className: `absolute inset-0 object-cover transition-opacity ${isHovered ? "opacity-0" : "opacity-100"}`
+                  className: `absolute inset-0 transition-opacity ${!isMobile && playOptions === "playOnHover" && isHovered ? "opacity-0" : "opacity-100"}`,
+                  children: [
+                    posterSources.map(({ media, posterUrl: src }, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("source", { media, srcSet: src }, i)),
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      "img",
+                      {
+                        src: fallbackPoster,
+                        width: intrinsicWidth,
+                        height: intrinsicHeight,
+                        alt: "poster",
+                        className: "w-full h-full object-cover"
+                      }
+                    )
+                  ]
                 }
               ),
               !isMobile && !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -5174,13 +5183,17 @@ var ImageGalleryNode = (props) => {
       const src = resolveImageUrl(img.imageUrl);
       if (!src) return [];
       const media = deviceToMediaQuery(img.device);
-      return [{ src, ...media ? { media } : {} }];
+      const posterUrl = resolvePosterUrl(img.posterUrl);
+      return [{ src, ...media ? { media } : {}, ...posterUrl ? { posterUrl } : {} }];
     }),
     // Unconstrained fallback(s) — no media attr, always matches.
-    ...hlsImages.filter((img) => !img.device).map((img) => ({ src: resolveImageUrl(img.imageUrl) })).filter((s) => !!s.src)
+    ...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 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);
@@ -5196,7 +5209,6 @@ var ImageGalleryNode = (props) => {
       HlsPlayer3,
       {
         sources: hlsSources,
-        posterUrl: hlsPosterUrl,
         intrinsicWidth: hlsIntrinsicWidth,
         intrinsicHeight: hlsIntrinsicHeight,
         showControls: primaryHls?.showControls ?? false,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-VVEZGWP4.mjs";
+} from "./chunk-ELASRK22.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-O6BEBDTQ.mjs"), {
+var HlsPlayer = dynamic(() => import("./HlsPlayer-IKEZJ5A5.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -4107,7 +4107,7 @@ var Pagination_default = Pagination;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic5 from "next/dynamic";
 import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-O6BEBDTQ.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-IKEZJ5A5.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":
@@ -4156,13 +4156,17 @@ var ImageGalleryNode = (props) => {
       const src = resolveImageUrl(img.imageUrl);
       if (!src) return [];
       const media = deviceToMediaQuery(img.device);
-      return [{ src, ...media ? { media } : {} }];
+      const posterUrl = resolvePosterUrl(img.posterUrl);
+      return [{ src, ...media ? { media } : {}, ...posterUrl ? { posterUrl } : {} }];
     }),
     // Unconstrained fallback(s) — no media attr, always matches.
-    ...hlsImages.filter((img) => !img.device).map((img) => ({ src: resolveImageUrl(img.imageUrl) })).filter((s) => !!s.src)
+    ...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 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);
@@ -4178,7 +4182,6 @@ var ImageGalleryNode = (props) => {
       HlsPlayer2,
       {
         sources: hlsSources,
-        posterUrl: hlsPosterUrl,
         intrinsicWidth: hlsIntrinsicWidth,
         intrinsicHeight: hlsIntrinsicHeight,
         showControls: primaryHls?.showControls ?? false,

package/package.json

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