@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260504073103 → 0.8.1-dev.20260505044510

package/dist/{HlsPlayer-ZPLOKA4L.mjs → HlsPlayer-HWWCUCH6.mjs}

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

package/dist/{chunk-FRNG2H5Y.mjs → chunk-CT5SLXYT.mjs}

@@ -8,6 +8,24 @@ var pickSource = (sources) => {
   }
   return sources.find((s) => !s.media)?.src ?? sources[0]?.src ?? "";
 };
+var requestFullscreen = (el) => {
+  if (el.requestFullscreen) return el.requestFullscreen();
+  const anyEl = el;
+  if (anyEl.webkitRequestFullscreen) return anyEl.webkitRequestFullscreen();
+  if (anyEl.mozRequestFullScreen) return anyEl.mozRequestFullScreen();
+  return Promise.resolve();
+};
+var exitFullscreen = () => {
+  if (document.exitFullscreen) return document.exitFullscreen();
+  const anyDoc = document;
+  if (anyDoc.webkitExitFullscreen) return anyDoc.webkitExitFullscreen();
+  if (anyDoc.mozCancelFullScreen) return anyDoc.mozCancelFullScreen();
+  return Promise.resolve();
+};
+var getFullscreenElement = () => (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  document.fullscreenElement ?? document.webkitFullscreenElement ?? null
+);
 var HlsPlayer = React.memo(
   ({
     sources,
@@ -20,6 +38,7 @@ var HlsPlayer = React.memo(
     playOptions = "autoplay",
     placementCode = ""
   }) => {
+    const containerRef = useRef(null);
     const videoRef = useRef(null);
     const hlsRef = useRef(null);
     const isPlayOnHover = playOptions === "playOnHover";
@@ -30,9 +49,12 @@ var HlsPlayer = React.memo(
     const [isControlsVisible, setIsControlsVisible] = useState(true);
     const [isPosterVisible, setIsPosterVisible] = useState(true);
     const [isMuted, setIsMuted] = useState(startsMuted);
+    const [isFullscreen, setIsFullscreen] = useState(false);
     const wasManuallyPausedRef = useRef(false);
     const inactivityTimerRef = useRef(null);
+    const clickTimerRef = useRef(null);
     const INACTIVITY_DELAY = 2500;
+    const CLICK_DEBOUNCE = 220;
     const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl, posterUrl }] : [];
     useEffect(() => {
       const checkMobile = () => {
@@ -47,6 +69,17 @@ var HlsPlayer = React.memo(
       window.addEventListener("resize", checkMobile);
       return () => window.removeEventListener("resize", checkMobile);
     }, []);
+    useEffect(() => {
+      const onFullscreenChange = () => {
+        setIsFullscreen(getFullscreenElement() === containerRef.current);
+      };
+      document.addEventListener("fullscreenchange", onFullscreenChange);
+      document.addEventListener("webkitfullscreenchange", onFullscreenChange);
+      return () => {
+        document.removeEventListener("fullscreenchange", onFullscreenChange);
+        document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
+      };
+    }, []);
     useEffect(() => {
       if (isPlaying) {
         setIsPosterVisible(false);
@@ -74,6 +107,7 @@ var HlsPlayer = React.memo(
     useEffect(() => {
       return () => {
         if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
+        if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
       };
     }, []);
     useEffect(() => {
@@ -122,6 +156,28 @@ var HlsPlayer = React.memo(
       v.muted = !v.muted;
       setIsMuted(v.muted);
     }, []);
+    const handleFullscreenToggle = useCallback(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      if (getFullscreenElement() === container) {
+        exitFullscreen().catch(console.error);
+      } else {
+        requestFullscreen(container).catch(console.error);
+      }
+    }, []);
+    const handleVideoClick = useCallback(() => {
+      if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+      clickTimerRef.current = setTimeout(() => {
+        handlePlayPause();
+      }, CLICK_DEBOUNCE);
+    }, [handlePlayPause]);
+    const handleVideoDoubleClick = useCallback(() => {
+      if (clickTimerRef.current) {
+        clearTimeout(clickTimerRef.current);
+        clickTimerRef.current = null;
+      }
+      handleFullscreenToggle();
+    }, [handleFullscreenToggle]);
     const handleMouseEnter = useCallback(() => {
       if (isMobile) return;
       setIsHovered(true);
@@ -157,29 +213,21 @@ var HlsPlayer = React.memo(
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      background: "rgba(0, 0, 0, 0.45)",
-      backdropFilter: "blur(10px)",
-      WebkitBackdropFilter: "blur(10px)",
-      boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
+      // background: "#F31F49",
+      // background: "linear-gradient(50deg,rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
+      // background: "rgba(0, 0, 0, 0.45)",
+      // backdropFilter: "blur(10px)",
+      // WebkitBackdropFilter: "blur(10px)",
+      // boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
       transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
     };
-    const handleButtonMouseEnter = useCallback((e) => {
-      const btn = e.currentTarget;
-      btn.style.transform = "scale(1.1)";
-      btn.style.background = "rgba(0,0,0,0.65)";
-      btn.style.borderColor = "rgba(255,255,255,0.32)";
-    }, []);
-    const handleButtonMouseLeave = useCallback((e) => {
-      const btn = e.currentTarget;
-      btn.style.transform = "scale(1)";
-      btn.style.background = "rgba(0,0,0,0.45)";
-      btn.style.borderColor = "rgba(255,255,255,0.18)";
-    }, []);
     if (resolvedSources.length === 0) return null;
     const showMuteButton = !showControls && !isPlayOnHover;
+    const showExpandButton = !showControls && !isPlayOnHover;
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: containerRef,
         className: "relative w-full aspect-video bg-black",
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -195,8 +243,9 @@ var HlsPlayer = React.memo(
               muted: startsMuted,
               autoPlay: playOptions === "autoplay",
               loop,
-              onClick: handlePlayPause,
               playsInline: true,
+              onClick: handleVideoClick,
+              onDoubleClick: handleVideoDoubleClick,
               children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ jsx(
                 "source",
                 {
@@ -249,9 +298,12 @@ var HlsPlayer = React.memo(
                     e.stopPropagation();
                     handlePlayPause();
                   },
-                  style: { ...overlayButtonStyle, width: 64, height: 64 },
-                  onMouseEnter: handleButtonMouseEnter,
-                  onMouseLeave: handleButtonMouseLeave,
+                  style: {
+                    ...overlayButtonStyle,
+                    width: 64,
+                    height: 64,
+                    background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)"
+                  },
                   children: isPlaying ? /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
                     /* @__PURE__ */ jsx("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
                     /* @__PURE__ */ jsx("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
@@ -260,37 +312,59 @@ var HlsPlayer = React.memo(
               )
             }
           ),
-          showMuteButton && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             "div",
             {
               className: "absolute bottom-4 right-4 pointer-events-none",
               style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
                 opacity: isControlsVisible ? 1 : 0,
                 transition: "opacity 0.3s ease"
               },
-              children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": isMuted ? "Unmute" : "Mute",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleMuteToggle();
-                  },
-                  style: overlayButtonStyle,
-                  onMouseEnter: handleButtonMouseEnter,
-                  onMouseLeave: handleButtonMouseLeave,
-                  children: isMuted ? /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                    /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
-                    /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
-                    /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
-                  ] }) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                    /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
-                    /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
-                    /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
-                  ] })
-                }
-              )
+              children: [
+                showMuteButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": isMuted ? "Unmute" : "Mute",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleMuteToggle();
+                    },
+                    style: overlayButtonStyle,
+                    children: isMuted ? /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                      /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                      /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                    ] }) : /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                      /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                    ] })
+                  }
+                ),
+                showExpandButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleFullscreenToggle();
+                    },
+                    style: overlayButtonStyle,
+                    children: isFullscreen ? (
+                      /* Compress / exit icon — two inward-pointing arrows */
+                      /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    ) : (
+                      /* Expand icon — four outward-pointing arrows */
+                      /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    )
+                  }
+                )
+              ]
             }
           )
         ]

package/dist/index.js

@@ -520,7 +520,7 @@ var HlsPlayer_exports = {};
 __export(HlsPlayer_exports, {
   default: () => HlsPlayer_default
 });
-var import_react32, import_hls, import_jsx_runtime41, pickSource, HlsPlayer, HlsPlayer_default;
+var import_react32, import_hls, import_jsx_runtime41, pickSource, requestFullscreen, exitFullscreen, getFullscreenElement, HlsPlayer, HlsPlayer_default;
 var init_HlsPlayer = __esm({
   "src/components/HlsPlayer.tsx"() {
     "use strict";
@@ -534,6 +534,24 @@ var init_HlsPlayer = __esm({
       }
       return sources.find((s) => !s.media)?.src ?? sources[0]?.src ?? "";
     };
+    requestFullscreen = (el) => {
+      if (el.requestFullscreen) return el.requestFullscreen();
+      const anyEl = el;
+      if (anyEl.webkitRequestFullscreen) return anyEl.webkitRequestFullscreen();
+      if (anyEl.mozRequestFullScreen) return anyEl.mozRequestFullScreen();
+      return Promise.resolve();
+    };
+    exitFullscreen = () => {
+      if (document.exitFullscreen) return document.exitFullscreen();
+      const anyDoc = document;
+      if (anyDoc.webkitExitFullscreen) return anyDoc.webkitExitFullscreen();
+      if (anyDoc.mozCancelFullScreen) return anyDoc.mozCancelFullScreen();
+      return Promise.resolve();
+    };
+    getFullscreenElement = () => (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      document.fullscreenElement ?? document.webkitFullscreenElement ?? null
+    );
     HlsPlayer = import_react32.default.memo(
       ({
         sources,
@@ -546,6 +564,7 @@ var init_HlsPlayer = __esm({
         playOptions = "autoplay",
         placementCode = ""
       }) => {
+        const containerRef = (0, import_react32.useRef)(null);
         const videoRef = (0, import_react32.useRef)(null);
         const hlsRef = (0, import_react32.useRef)(null);
         const isPlayOnHover = playOptions === "playOnHover";
@@ -556,9 +575,12 @@ var init_HlsPlayer = __esm({
         const [isControlsVisible, setIsControlsVisible] = (0, import_react32.useState)(true);
         const [isPosterVisible, setIsPosterVisible] = (0, import_react32.useState)(true);
         const [isMuted, setIsMuted] = (0, import_react32.useState)(startsMuted);
+        const [isFullscreen, setIsFullscreen] = (0, import_react32.useState)(false);
         const wasManuallyPausedRef = (0, import_react32.useRef)(false);
         const inactivityTimerRef = (0, import_react32.useRef)(null);
+        const clickTimerRef = (0, import_react32.useRef)(null);
         const INACTIVITY_DELAY = 2500;
+        const CLICK_DEBOUNCE = 220;
         const resolvedSources = sources && sources.length > 0 ? sources : assetUrl ? [{ src: assetUrl, posterUrl }] : [];
         (0, import_react32.useEffect)(() => {
           const checkMobile = () => {
@@ -573,6 +595,17 @@ var init_HlsPlayer = __esm({
           window.addEventListener("resize", checkMobile);
           return () => window.removeEventListener("resize", checkMobile);
         }, []);
+        (0, import_react32.useEffect)(() => {
+          const onFullscreenChange = () => {
+            setIsFullscreen(getFullscreenElement() === containerRef.current);
+          };
+          document.addEventListener("fullscreenchange", onFullscreenChange);
+          document.addEventListener("webkitfullscreenchange", onFullscreenChange);
+          return () => {
+            document.removeEventListener("fullscreenchange", onFullscreenChange);
+            document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
+          };
+        }, []);
         (0, import_react32.useEffect)(() => {
           if (isPlaying) {
             setIsPosterVisible(false);
@@ -600,6 +633,7 @@ var init_HlsPlayer = __esm({
         (0, import_react32.useEffect)(() => {
           return () => {
             if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
+            if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
           };
         }, []);
         (0, import_react32.useEffect)(() => {
@@ -648,6 +682,28 @@ var init_HlsPlayer = __esm({
           v.muted = !v.muted;
           setIsMuted(v.muted);
         }, []);
+        const handleFullscreenToggle = (0, import_react32.useCallback)(() => {
+          const container = containerRef.current;
+          if (!container) return;
+          if (getFullscreenElement() === container) {
+            exitFullscreen().catch(console.error);
+          } else {
+            requestFullscreen(container).catch(console.error);
+          }
+        }, []);
+        const handleVideoClick = (0, import_react32.useCallback)(() => {
+          if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+          clickTimerRef.current = setTimeout(() => {
+            handlePlayPause();
+          }, CLICK_DEBOUNCE);
+        }, [handlePlayPause]);
+        const handleVideoDoubleClick = (0, import_react32.useCallback)(() => {
+          if (clickTimerRef.current) {
+            clearTimeout(clickTimerRef.current);
+            clickTimerRef.current = null;
+          }
+          handleFullscreenToggle();
+        }, [handleFullscreenToggle]);
         const handleMouseEnter = (0, import_react32.useCallback)(() => {
           if (isMobile) return;
           setIsHovered(true);
@@ -683,29 +739,21 @@ var init_HlsPlayer = __esm({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "rgba(0, 0, 0, 0.45)",
-          backdropFilter: "blur(10px)",
-          WebkitBackdropFilter: "blur(10px)",
-          boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
+          // background: "#F31F49",
+          // background: "linear-gradient(50deg,rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
+          // background: "rgba(0, 0, 0, 0.45)",
+          // backdropFilter: "blur(10px)",
+          // WebkitBackdropFilter: "blur(10px)",
+          // boxShadow: "0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)",
           transition: "transform 0.18s ease, background 0.18s ease, border-color 0.18s ease"
         };
-        const handleButtonMouseEnter = (0, import_react32.useCallback)((e) => {
-          const btn = e.currentTarget;
-          btn.style.transform = "scale(1.1)";
-          btn.style.background = "rgba(0,0,0,0.65)";
-          btn.style.borderColor = "rgba(255,255,255,0.32)";
-        }, []);
-        const handleButtonMouseLeave = (0, import_react32.useCallback)((e) => {
-          const btn = e.currentTarget;
-          btn.style.transform = "scale(1)";
-          btn.style.background = "rgba(0,0,0,0.45)";
-          btn.style.borderColor = "rgba(255,255,255,0.18)";
-        }, []);
         if (resolvedSources.length === 0) return null;
         const showMuteButton = !showControls && !isPlayOnHover;
+        const showExpandButton = !showControls && !isPlayOnHover;
         return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "div",
           {
+            ref: containerRef,
             className: "relative w-full aspect-video bg-black",
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
@@ -721,8 +769,9 @@ var init_HlsPlayer = __esm({
                   muted: startsMuted,
                   autoPlay: playOptions === "autoplay",
                   loop,
-                  onClick: handlePlayPause,
                   playsInline: true,
+                  onClick: handleVideoClick,
+                  onDoubleClick: handleVideoDoubleClick,
                   children: resolvedSources.map(({ src, media }, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     "source",
                     {
@@ -775,9 +824,12 @@ var init_HlsPlayer = __esm({
                         e.stopPropagation();
                         handlePlayPause();
                       },
-                      style: { ...overlayButtonStyle, width: 64, height: 64 },
-                      onMouseEnter: handleButtonMouseEnter,
-                      onMouseLeave: handleButtonMouseLeave,
+                      style: {
+                        ...overlayButtonStyle,
+                        width: 64,
+                        height: 64,
+                        background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)"
+                      },
                       children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
                         /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
@@ -786,37 +838,59 @@ var init_HlsPlayer = __esm({
                   )
                 }
               ),
-              showMuteButton && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                 "div",
                 {
                   className: "absolute bottom-4 right-4 pointer-events-none",
                   style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
                     opacity: isControlsVisible ? 1 : 0,
                     transition: "opacity 0.3s ease"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": isMuted ? "Unmute" : "Mute",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleMuteToggle();
-                      },
-                      style: overlayButtonStyle,
-                      onMouseEnter: handleButtonMouseEnter,
-                      onMouseLeave: handleButtonMouseLeave,
-                      children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
-                      ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
-                      ] })
-                    }
-                  )
+                  children: [
+                    showMuteButton && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": isMuted ? "Unmute" : "Mute",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMuteToggle();
+                        },
+                        style: overlayButtonStyle,
+                        children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "23", y1: "9", x2: "17", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("line", { x1: "17", y1: "9", x2: "23", y2: "15", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11 5L6 9H2v6h4l5 4V5Z", fill: "white" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                        ] })
+                      }
+                    ),
+                    showExpandButton && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleFullscreenToggle();
+                        },
+                        style: overlayButtonStyle,
+                        children: isFullscreen ? (
+                          /* Compress / exit icon — two inward-pointing arrows */
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        ) : (
+                          /* Expand icon — four outward-pointing arrows */
+                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        )
+                      }
+                    )
+                  ]
                 }
               )
             ]

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-FRNG2H5Y.mjs";
+} from "./chunk-CT5SLXYT.mjs";
 import {
   Button_default,
   ClientButton_default,
@@ -1963,7 +1963,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import { Fragment as Fragment2, jsx as jsx37 } from "react/jsx-runtime";
-var HlsPlayer = dynamic2(() => import("./HlsPlayer-ZPLOKA4L.mjs"), {
+var HlsPlayer = dynamic2(() => import("./HlsPlayer-HWWCUCH6.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -3645,7 +3645,7 @@ var Pagination_default = Pagination;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic6 from "next/dynamic";
 import { Fragment as Fragment8, jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-ZPLOKA4L.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic6(() => import("./HlsPlayer-HWWCUCH6.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.20260504073103",
+  "version": "0.8.1-dev.20260505044510",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",