@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260523055026 → 0.8.1-dev.20260525045412

package/dist/{HlsPlayer-GZR4QXJY.mjs → HlsPlayer-OPTPF5PZ.mjs}

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

package/dist/{chunk-72PHGKW4.mjs → chunk-BYK57CMC.mjs}

@@ -54,6 +54,7 @@ var HlsPlayer = React.memo(
     const inactivityTimerRef = useRef(null);
     const clickTimerRef = useRef(null);
     const hlsInitializedRef = useRef(false);
+    const [isInView, setIsInView] = useState(false);
     const INACTIVITY_DELAY = 2500;
     const CLICK_DEBOUNCE = 220;
     const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl, posterUrl }] : [];
@@ -70,6 +71,25 @@ var HlsPlayer = React.memo(
       window.addEventListener("resize", checkMobile);
       return () => window.removeEventListener("resize", checkMobile);
     }, []);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container || typeof IntersectionObserver === "undefined") {
+        setIsInView(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.25 }
+        // 25% of the player must be visible to trigger
+      );
+      observer.observe(container);
+      return () => observer.disconnect();
+    }, []);
     useEffect(() => {
       const onFullscreenChange = () => {
         setIsFullscreen(getFullscreenElement() === containerRef.current);
@@ -122,7 +142,19 @@ var HlsPlayer = React.memo(
       if (!chosenSrc) return;
       hlsInitializedRef.current = true;
       if (Hls.isSupported()) {
-        const hls = new Hls();
+        const hlsConfig = isPlayOnHover ? {
+          // For hover-play: only buffer enough to start playing smoothly.
+          // maxBufferLength    – target seconds of forward buffer (default 30s → 10s)
+          // maxMaxBufferLength – hard ceiling hls.js won't exceed (default 600s → 15s)
+          // maxBufferSize      – byte ceiling before hls.js pauses loading (default 60MB → 10MB)
+          // lowLatencyMode     – off; we don't need ultra-low latency for on-demand hover clips
+          maxBufferLength: 10,
+          maxMaxBufferLength: 15,
+          maxBufferSize: 10 * 1e3 * 1e3,
+          // 10 MB
+          lowLatencyMode: false
+        } : {};
+        const hls = new Hls(hlsConfig);
         hls.loadSource(chosenSrc);
         hls.attachMedia(v);
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
@@ -140,11 +172,19 @@ var HlsPlayer = React.memo(
       }
     }, [JSON.stringify(resolvedSources)]);
     useEffect(() => {
+      if (!isInView) return;
       if (isPlayOnHover) return;
-      initHls(
-        /* autoPlayAfterLoad */
-        playOptions === "autoplay"
-      );
+      if (playOptions === "autoplay") {
+        initHls(
+          /* autoPlayAfterLoad */
+          true
+        );
+      } else {
+        initHls(
+          /* autoPlayAfterLoad */
+          false
+        );
+      }
       return () => {
         if (hlsRef.current) {
           hlsRef.current.destroy();
@@ -152,10 +192,17 @@ var HlsPlayer = React.memo(
         }
         hlsInitializedRef.current = false;
       };
-    }, [JSON.stringify(resolvedSources), isPlayOnHover]);
+    }, [JSON.stringify(resolvedSources), isPlayOnHover, isInView]);
     const handlePlayPause = useCallback(() => {
       const v = videoRef.current;
       if (!v) return;
+      if (!hlsInitializedRef.current) {
+        initHls(
+          /* autoPlayAfterLoad */
+          true
+        );
+        return;
+      }
       if (v.paused) {
         wasManuallyPausedRef.current = false;
         v.play().then(() => setIsPlaying(true));
@@ -164,7 +211,7 @@ var HlsPlayer = React.memo(
         v.pause();
         setIsPlaying(false);
       }
-    }, []);
+    }, [initHls]);
     const handleMuteToggle = useCallback(() => {
       const v = videoRef.current;
       if (!v) return;
@@ -217,6 +264,11 @@ var HlsPlayer = React.memo(
         videoRef.current.pause();
         videoRef.current.currentTime = 0;
         setIsPlaying(false);
+        if (hlsRef.current) {
+          hlsRef.current.destroy();
+          hlsRef.current = null;
+          hlsInitializedRef.current = false;
+        }
       }
     }, [isPlayOnHover, isMobile, isPlaying]);
     const handleMouseMove = useCallback(() => {

package/dist/index.js

@@ -218,6 +218,7 @@ var init_HlsPlayer = __esm({
         const inactivityTimerRef = (0, import_react4.useRef)(null);
         const clickTimerRef = (0, import_react4.useRef)(null);
         const hlsInitializedRef = (0, import_react4.useRef)(false);
+        const [isInView, setIsInView] = (0, import_react4.useState)(false);
         const INACTIVITY_DELAY = 2500;
         const CLICK_DEBOUNCE = 220;
         const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl, posterUrl }] : [];
@@ -234,6 +235,25 @@ var init_HlsPlayer = __esm({
           window.addEventListener("resize", checkMobile);
           return () => window.removeEventListener("resize", checkMobile);
         }, []);
+        (0, import_react4.useEffect)(() => {
+          const container = containerRef.current;
+          if (!container || typeof IntersectionObserver === "undefined") {
+            setIsInView(true);
+            return;
+          }
+          const observer = new IntersectionObserver(
+            ([entry]) => {
+              if (entry.isIntersecting) {
+                setIsInView(true);
+                observer.disconnect();
+              }
+            },
+            { threshold: 0.25 }
+            // 25% of the player must be visible to trigger
+          );
+          observer.observe(container);
+          return () => observer.disconnect();
+        }, []);
         (0, import_react4.useEffect)(() => {
           const onFullscreenChange = () => {
             setIsFullscreen(getFullscreenElement() === containerRef.current);
@@ -286,7 +306,19 @@ var init_HlsPlayer = __esm({
           if (!chosenSrc) return;
           hlsInitializedRef.current = true;
           if (import_hls.default.isSupported()) {
-            const hls = new import_hls.default();
+            const hlsConfig = isPlayOnHover ? {
+              // For hover-play: only buffer enough to start playing smoothly.
+              // maxBufferLength    – target seconds of forward buffer (default 30s → 10s)
+              // maxMaxBufferLength – hard ceiling hls.js won't exceed (default 600s → 15s)
+              // maxBufferSize      – byte ceiling before hls.js pauses loading (default 60MB → 10MB)
+              // lowLatencyMode     – off; we don't need ultra-low latency for on-demand hover clips
+              maxBufferLength: 10,
+              maxMaxBufferLength: 15,
+              maxBufferSize: 10 * 1e3 * 1e3,
+              // 10 MB
+              lowLatencyMode: false
+            } : {};
+            const hls = new import_hls.default(hlsConfig);
             hls.loadSource(chosenSrc);
             hls.attachMedia(v);
             hls.on(import_hls.default.Events.MANIFEST_PARSED, () => {
@@ -304,11 +336,19 @@ var init_HlsPlayer = __esm({
           }
         }, [JSON.stringify(resolvedSources)]);
         (0, import_react4.useEffect)(() => {
+          if (!isInView) return;
           if (isPlayOnHover) return;
-          initHls(
-            /* autoPlayAfterLoad */
-            playOptions === "autoplay"
-          );
+          if (playOptions === "autoplay") {
+            initHls(
+              /* autoPlayAfterLoad */
+              true
+            );
+          } else {
+            initHls(
+              /* autoPlayAfterLoad */
+              false
+            );
+          }
           return () => {
             if (hlsRef.current) {
               hlsRef.current.destroy();
@@ -316,10 +356,17 @@ var init_HlsPlayer = __esm({
             }
             hlsInitializedRef.current = false;
           };
-        }, [JSON.stringify(resolvedSources), isPlayOnHover]);
+        }, [JSON.stringify(resolvedSources), isPlayOnHover, isInView]);
         const handlePlayPause = (0, import_react4.useCallback)(() => {
           const v = videoRef.current;
           if (!v) return;
+          if (!hlsInitializedRef.current) {
+            initHls(
+              /* autoPlayAfterLoad */
+              true
+            );
+            return;
+          }
           if (v.paused) {
             wasManuallyPausedRef.current = false;
             v.play().then(() => setIsPlaying(true));
@@ -328,7 +375,7 @@ var init_HlsPlayer = __esm({
             v.pause();
             setIsPlaying(false);
           }
-        }, []);
+        }, [initHls]);
         const handleMuteToggle = (0, import_react4.useCallback)(() => {
           const v = videoRef.current;
           if (!v) return;
@@ -381,6 +428,11 @@ var init_HlsPlayer = __esm({
             videoRef.current.pause();
             videoRef.current.currentTime = 0;
             setIsPlaying(false);
+            if (hlsRef.current) {
+              hlsRef.current.destroy();
+              hlsRef.current = null;
+              hlsInitializedRef.current = false;
+            }
           }
         }, [isPlayOnHover, isMobile, isPlaying]);
         const handleMouseMove = (0, import_react4.useCallback)(() => {
@@ -1655,20 +1707,17 @@ var DeviceAssetSelector = ({
       apiBaseUrl: assetBaseUrl,
       session
     }
-  ) : (
-    // eslint-disable-next-line @next/next/no-img-element
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "img",
-      {
-        style: styles,
-        loading: "lazy",
-        className: "object-cover w-full",
-        src: resolvedAssetUrl,
-        width: selectedAsset.intrinsicWidth,
-        height: selectedAsset.intrinsicHeight,
-        alt: title || "Asset image"
-      }
-    )
+  ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "img",
+    {
+      style: styles,
+      loading: "lazy",
+      className: "object-cover w-full",
+      src: resolvedAssetUrl,
+      width: selectedAsset.intrinsicWidth,
+      height: selectedAsset.intrinsicHeight,
+      alt: title || "Asset image"
+    }
   );
   if (width) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width }, children: renderMedia() });
   if (nodeProps?.format) {
@@ -3482,15 +3531,12 @@ var ImageNode = (props) => {
     posterUrl = AssetUtility_default.resolveUrl(props.assetBaseUrl, props.node.posterUrl);
   } else if (props.dataitem && props.node.datafield) {
     const image = getNestedValue(props.dataitem, props.node.datafield);
-    try {
-      if (typeof image === "string") {
-        assets = JSON.parse(image);
-      } else if (Array.isArray(image)) {
-        assets = image;
-      } else if (image && typeof image === "object") {
-        assets = [image];
-      }
-    } catch {
+    if (typeof image === "string") {
+      assets = JSON.parse(image);
+    } else if (Array.isArray(image)) {
+      assets = image;
+    } else if (image && typeof image === "object") {
+      assets = [image];
     }
     if (assets && assets.length > 0) {
       return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-72PHGKW4.mjs";
+} from "./chunk-BYK57CMC.mjs";
 import {
   Button_default,
   ClientButton_default,
@@ -168,20 +168,17 @@ var DeviceAssetSelector = ({
       apiBaseUrl: assetBaseUrl,
       session
     }
-  ) : (
-    // eslint-disable-next-line @next/next/no-img-element
-    /* @__PURE__ */ jsx3(
-      "img",
-      {
-        style: styles,
-        loading: "lazy",
-        className: "object-cover w-full",
-        src: resolvedAssetUrl,
-        width: selectedAsset.intrinsicWidth,
-        height: selectedAsset.intrinsicHeight,
-        alt: title || "Asset image"
-      }
-    )
+  ) : /* @__PURE__ */ jsx3(
+    "img",
+    {
+      style: styles,
+      loading: "lazy",
+      className: "object-cover w-full",
+      src: resolvedAssetUrl,
+      width: selectedAsset.intrinsicWidth,
+      height: selectedAsset.intrinsicHeight,
+      alt: title || "Asset image"
+    }
   );
   if (width) return /* @__PURE__ */ jsx3("div", { style: { width }, children: renderMedia() });
   if (nodeProps?.format) {
@@ -1978,7 +1975,7 @@ import React28 from "react";
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import dynamic3 from "next/dynamic";
 import { jsx as jsx38 } from "react/jsx-runtime";
-var HlsPlayer = dynamic3(() => import("./HlsPlayer-GZR4QXJY.mjs"), { ssr: false });
+var HlsPlayer = dynamic3(() => import("./HlsPlayer-OPTPF5PZ.mjs"), { ssr: false });
 var getNestedValue = (obj, path) => {
   if (!obj || !path) return void 0;
   return path.split(".").reduce((current, key) => {
@@ -1999,15 +1996,12 @@ var ImageNode = (props) => {
     posterUrl = AssetUtility_default.resolveUrl(props.assetBaseUrl, props.node.posterUrl);
   } else if (props.dataitem && props.node.datafield) {
     const image = getNestedValue(props.dataitem, props.node.datafield);
-    try {
-      if (typeof image === "string") {
-        assets = JSON.parse(image);
-      } else if (Array.isArray(image)) {
-        assets = image;
-      } else if (image && typeof image === "object") {
-        assets = [image];
-      }
-    } catch {
+    if (typeof image === "string") {
+      assets = JSON.parse(image);
+    } else if (Array.isArray(image)) {
+      assets = image;
+    } else if (image && typeof image === "object") {
+      assets = [image];
     }
     if (assets && assets.length > 0) {
       return /* @__PURE__ */ jsx38(
@@ -3638,7 +3632,7 @@ var Pagination_default = Pagination;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic7 from "next/dynamic";
 import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-GZR4QXJY.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-OPTPF5PZ.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.20260523055026",
+  "version": "0.8.1-dev.20260525045412",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",