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

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

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

package/dist/{chunk-Q46ODS3X.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,
@@ -34,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;
@@ -116,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,
@@ -311,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;
@@ -393,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)(

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-Q46ODS3X.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-UECDBJDB.mjs"), {
+var HlsPlayer = dynamic(() => import("./HlsPlayer-O6BEBDTQ.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-UECDBJDB.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-O6BEBDTQ.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":

package/package.json

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