@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260423063335 → 0.8.1-dev.20260423070204

package/dist/{HlsPlayer-CTZICLSJ.mjs → HlsPlayer-GV3FOPYT.mjs}

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

package/dist/{chunk-VNSFFK3H.mjs → chunk-TXHD4F4A.mjs}

@@ -20,6 +20,7 @@ var HlsPlayer = React.memo(
     const [isHovered, setIsHovered] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
     const [isControlsVisible, setIsControlsVisible] = useState(true);
+    const [isPosterVisible, setIsPosterVisible] = useState(true);
     const wasManuallyPausedRef = useRef(false);
     const inactivityTimerRef = useRef(null);
     const INACTIVITY_DELAY = 2500;
@@ -37,6 +38,20 @@ var HlsPlayer = React.memo(
       window.addEventListener("resize", checkMobile);
       return () => window.removeEventListener("resize", checkMobile);
     }, []);
+    useEffect(() => {
+      const v = videoRef.current;
+      if (!v) return;
+      const onPlaying = () => setIsPosterVisible(false);
+      const onPause = () => {
+        if (v.currentTime === 0) setIsPosterVisible(true);
+      };
+      v.addEventListener("playing", onPlaying);
+      v.addEventListener("pause", onPause);
+      return () => {
+        v.removeEventListener("playing", onPlaying);
+        v.removeEventListener("pause", onPause);
+      };
+    }, []);
     const resetInactivityTimer = useCallback(() => {
       setIsControlsVisible(true);
       if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
@@ -127,6 +142,7 @@ var HlsPlayer = React.memo(
     }, [isMobile, resetInactivityTimer]);
     const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
     const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
+    const isPlayOnHover = playOptions === "playOnHover";
     if (resolvedSources.length === 0) return null;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -143,7 +159,7 @@ var HlsPlayer = React.memo(
               className: "w-full h-full object-contain",
               poster: fallbackPoster,
               controls: showControls && (isMobile || isPlaying),
-              muted: playOptions === "autoplay" || playOptions === "playOnHover",
+              muted: playOptions === "autoplay" || isPlayOnHover,
               autoPlay: playOptions === "autoplay",
               loop,
               playsInline: true,
@@ -159,10 +175,14 @@ var HlsPlayer = React.memo(
               ))
             }
           ),
-          !isMobile && playOptions === "playOnHover" && fallbackPoster && /* @__PURE__ */ jsxs(
+          !isMobile && fallbackPoster && /* @__PURE__ */ jsxs(
             "picture",
             {
-              className: `absolute inset-0 transition-opacity ${isHovered ? "opacity-0" : "opacity-100"}`,
+              className: "absolute inset-0 pointer-events-none",
+              style: {
+                opacity: isPosterVisible && (!isPlayOnHover || !isHovered) ? 1 : 0,
+                transition: "opacity 0.4s ease"
+              },
               children: [
                 posterSources.map(({ media, posterUrl: src }, i) => /* @__PURE__ */ jsx("source", { media, srcSet: src }, i)),
                 /* @__PURE__ */ jsx(
@@ -178,7 +198,7 @@ var HlsPlayer = React.memo(
               ]
             }
           ),
-          !isMobile && /* @__PURE__ */ jsx(
+          !isMobile && !isPlayOnHover && /* @__PURE__ */ jsx(
             "div",
             {
               className: "absolute inset-0 flex items-center justify-center pointer-events-none",

package/dist/index.js

@@ -515,6 +515,7 @@ var init_HlsPlayer = __esm({
         const [isHovered, setIsHovered] = (0, import_react35.useState)(false);
         const [isMobile, setIsMobile] = (0, import_react35.useState)(false);
         const [isControlsVisible, setIsControlsVisible] = (0, import_react35.useState)(true);
+        const [isPosterVisible, setIsPosterVisible] = (0, import_react35.useState)(true);
         const wasManuallyPausedRef = (0, import_react35.useRef)(false);
         const inactivityTimerRef = (0, import_react35.useRef)(null);
         const INACTIVITY_DELAY = 2500;
@@ -532,6 +533,20 @@ var init_HlsPlayer = __esm({
           window.addEventListener("resize", checkMobile);
           return () => window.removeEventListener("resize", checkMobile);
         }, []);
+        (0, import_react35.useEffect)(() => {
+          const v = videoRef.current;
+          if (!v) return;
+          const onPlaying = () => setIsPosterVisible(false);
+          const onPause = () => {
+            if (v.currentTime === 0) setIsPosterVisible(true);
+          };
+          v.addEventListener("playing", onPlaying);
+          v.addEventListener("pause", onPause);
+          return () => {
+            v.removeEventListener("playing", onPlaying);
+            v.removeEventListener("pause", onPause);
+          };
+        }, []);
         const resetInactivityTimer = (0, import_react35.useCallback)(() => {
           setIsControlsVisible(true);
           if (inactivityTimerRef.current) clearTimeout(inactivityTimerRef.current);
@@ -622,6 +637,7 @@ var init_HlsPlayer = __esm({
         }, [isMobile, resetInactivityTimer]);
         const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
         const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
+        const isPlayOnHover = playOptions === "playOnHover";
         if (resolvedSources.length === 0) return null;
         return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "div",
@@ -638,7 +654,7 @@ var init_HlsPlayer = __esm({
                   className: "w-full h-full object-contain",
                   poster: fallbackPoster,
                   controls: showControls && (isMobile || isPlaying),
-                  muted: playOptions === "autoplay" || playOptions === "playOnHover",
+                  muted: playOptions === "autoplay" || isPlayOnHover,
                   autoPlay: playOptions === "autoplay",
                   loop,
                   playsInline: true,
@@ -654,10 +670,14 @@ var init_HlsPlayer = __esm({
                   ))
                 }
               ),
-              !isMobile && playOptions === "playOnHover" && fallbackPoster && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              !isMobile && fallbackPoster && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
                 "picture",
                 {
-                  className: `absolute inset-0 transition-opacity ${isHovered ? "opacity-0" : "opacity-100"}`,
+                  className: "absolute inset-0 pointer-events-none",
+                  style: {
+                    opacity: isPosterVisible && (!isPlayOnHover || !isHovered) ? 1 : 0,
+                    transition: "opacity 0.4s ease"
+                  },
                   children: [
                     posterSources.map(({ media, posterUrl: src }, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("source", { media, srcSet: src }, i)),
                     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -673,7 +693,7 @@ var init_HlsPlayer = __esm({
                   ]
                 }
               ),
-              !isMobile && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              !isMobile && !isPlayOnHover && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 flex items-center justify-center pointer-events-none",

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-VNSFFK3H.mjs";
+} from "./chunk-TXHD4F4A.mjs";
 import {
   Button_default,
   ServiceClient_default,
@@ -2782,7 +2782,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import { Fragment as Fragment3, jsx as jsx41 } from "react/jsx-runtime";
-var HlsPlayer = dynamic(() => import("./HlsPlayer-CTZICLSJ.mjs"), {
+var HlsPlayer = dynamic(() => import("./HlsPlayer-GV3FOPYT.mjs"), {
   ssr: false
 });
 var getNestedValue = (obj, path) => {
@@ -4251,7 +4251,7 @@ var Pagination_default = Pagination;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic5 from "next/dynamic";
 import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-CTZICLSJ.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-GV3FOPYT.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.20260423063335",
+  "version": "0.8.1-dev.20260423070204",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",