@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260603061415 → 0.8.1-dev.20260603093340

package/dist/{HlsPlayer-TJGNEU53.mjs → HlsPlayer-SM3WGJSW.mjs}

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

package/dist/{chunk-GG2OSSQZ.mjs → chunk-4XZGG725.mjs}

@@ -36,8 +36,7 @@ var HlsPlayer = React.memo(
     showControls = true,
     loop = false,
     playOptions = "autoplay",
-    placementCode = "",
-    styles
+    placementCode = ""
   }) => {
     const containerRef = useRef(null);
     const videoRef = useRef(null);
@@ -51,6 +50,7 @@ var HlsPlayer = React.memo(
     const [isPosterVisible, setIsPosterVisible] = useState(true);
     const [isMuted, setIsMuted] = useState(startsMuted);
     const [isFullscreen, setIsFullscreen] = useState(false);
+    const [isBuffering, setIsBuffering] = useState(false);
     const wasManuallyPausedRef = useRef(false);
     const inactivityTimerRef = useRef(null);
     const clickTimerRef = useRef(null);
@@ -163,10 +163,14 @@ var HlsPlayer = React.memo(
             v.play().catch(console.error).then(() => setIsPlaying(true));
           }
         });
+        v.addEventListener("playing", () => setIsBuffering(false), { once: true });
+        v.addEventListener("error", () => setIsBuffering(false), { once: true });
         hlsRef.current = hls;
       } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
         v.src = chosenSrc;
         v.load();
+        v.addEventListener("playing", () => setIsBuffering(false), { once: true });
+        v.addEventListener("error", () => setIsBuffering(false), { once: true });
         if (autoPlayAfterLoad) {
           v.play().catch(console.error).then(() => setIsPlaying(true));
         }
@@ -192,6 +196,7 @@ var HlsPlayer = React.memo(
       const v = videoRef.current;
       if (!v) return;
       if (!hlsInitializedRef.current) {
+        setIsBuffering(true);
         initHls(
           /* autoPlayAfterLoad */
           true
@@ -300,8 +305,7 @@ var HlsPlayer = React.memo(
       "div",
       {
         ref: containerRef,
-        className: "relative w-full overflow-hidden aspect-video bg-black",
-        style: styles,
+        className: "relative w-full aspect-video bg-black",
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onMouseMove: handleMouseMove,
@@ -310,7 +314,7 @@ var HlsPlayer = React.memo(
             "video",
             {
               ref: videoRef,
-              className: "w-full h-full object-cover",
+              className: "w-full h-full object-contain",
               poster: fallbackPoster,
               controls: showControls && (isMobile || isPlaying),
               muted: startsMuted,
@@ -364,7 +368,35 @@ var HlsPlayer = React.memo(
             transform: scale(1.08);
           }
         ` }),
-          !isPlayOnHover && /* @__PURE__ */ jsx(
+          isBuffering && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+              style: { zIndex: 10 },
+              children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx("style", { children: `
+                @keyframes hls-bounce {
+                  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
+                  40%           { transform: translateY(-10px); opacity: 1; }
+                }
+                .hls-dot {
+                  width: clamp(8px, 1.5vmin, 12px);
+                  height: clamp(8px, 1.5vmin, 12px);
+                  border-radius: 50%;
+                  background: white;
+                  animation: hls-bounce 1.1s ease-in-out infinite;
+                }
+                .hls-dot:nth-child(1) { animation-delay: 0s; }
+                .hls-dot:nth-child(2) { animation-delay: 0.18s; }
+                .hls-dot:nth-child(3) { animation-delay: 0.36s; }
+              ` }),
+                /* @__PURE__ */ jsx("div", { className: "hls-dot" }),
+                /* @__PURE__ */ jsx("div", { className: "hls-dot" }),
+                /* @__PURE__ */ jsx("div", { className: "hls-dot" })
+              ] })
+            }
+          ),
+          !isPlayOnHover && !isBuffering && /* @__PURE__ */ jsx(
             "div",
             {
               className: "absolute inset-0 flex items-center justify-center pointer-events-none",

package/dist/index.js

@@ -200,8 +200,7 @@ var init_HlsPlayer = __esm({
         showControls = true,
         loop = false,
         playOptions = "autoplay",
-        placementCode = "",
-        styles
+        placementCode = ""
       }) => {
         const containerRef = (0, import_react4.useRef)(null);
         const videoRef = (0, import_react4.useRef)(null);
@@ -215,6 +214,7 @@ var init_HlsPlayer = __esm({
         const [isPosterVisible, setIsPosterVisible] = (0, import_react4.useState)(true);
         const [isMuted, setIsMuted] = (0, import_react4.useState)(startsMuted);
         const [isFullscreen, setIsFullscreen] = (0, import_react4.useState)(false);
+        const [isBuffering, setIsBuffering] = (0, import_react4.useState)(false);
         const wasManuallyPausedRef = (0, import_react4.useRef)(false);
         const inactivityTimerRef = (0, import_react4.useRef)(null);
         const clickTimerRef = (0, import_react4.useRef)(null);
@@ -327,10 +327,14 @@ var init_HlsPlayer = __esm({
                 v.play().catch(console.error).then(() => setIsPlaying(true));
               }
             });
+            v.addEventListener("playing", () => setIsBuffering(false), { once: true });
+            v.addEventListener("error", () => setIsBuffering(false), { once: true });
             hlsRef.current = hls;
           } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
             v.src = chosenSrc;
             v.load();
+            v.addEventListener("playing", () => setIsBuffering(false), { once: true });
+            v.addEventListener("error", () => setIsBuffering(false), { once: true });
             if (autoPlayAfterLoad) {
               v.play().catch(console.error).then(() => setIsPlaying(true));
             }
@@ -356,6 +360,7 @@ var init_HlsPlayer = __esm({
           const v = videoRef.current;
           if (!v) return;
           if (!hlsInitializedRef.current) {
+            setIsBuffering(true);
             initHls(
               /* autoPlayAfterLoad */
               true
@@ -464,8 +469,7 @@ var init_HlsPlayer = __esm({
           "div",
           {
             ref: containerRef,
-            className: "relative w-full overflow-hidden aspect-video bg-black",
-            style: styles,
+            className: "relative w-full aspect-video bg-black",
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             onMouseMove: handleMouseMove,
@@ -474,7 +478,7 @@ var init_HlsPlayer = __esm({
                 "video",
                 {
                   ref: videoRef,
-                  className: "w-full h-full object-cover",
+                  className: "w-full h-full object-contain",
                   poster: fallbackPoster,
                   controls: showControls && (isMobile || isPlaying),
                   muted: startsMuted,
@@ -528,7 +532,35 @@ var init_HlsPlayer = __esm({
             transform: scale(1.08);
           }
         ` }),
-              !isPlayOnHover && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              isBuffering && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+                  style: { zIndex: 10 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+                @keyframes hls-bounce {
+                  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
+                  40%           { transform: translateY(-10px); opacity: 1; }
+                }
+                .hls-dot {
+                  width: clamp(8px, 1.5vmin, 12px);
+                  height: clamp(8px, 1.5vmin, 12px);
+                  border-radius: 50%;
+                  background: white;
+                  animation: hls-bounce 1.1s ease-in-out infinite;
+                }
+                .hls-dot:nth-child(1) { animation-delay: 0s; }
+                .hls-dot:nth-child(2) { animation-delay: 0.18s; }
+                .hls-dot:nth-child(3) { animation-delay: 0.36s; }
+              ` }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hls-dot" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hls-dot" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hls-dot" })
+                  ] })
+                }
+              ),
+              !isPlayOnHover && !isBuffering && /* @__PURE__ */ (0, import_jsx_runtime4.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-GG2OSSQZ.mjs";
+} from "./chunk-4XZGG725.mjs";
 import {
   Button_default,
   ClientButton_default,
@@ -2055,7 +2055,7 @@ import React30 from "react";
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import dynamic3 from "next/dynamic";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var HlsPlayer = dynamic3(() => import("./HlsPlayer-TJGNEU53.mjs"), { ssr: false });
+var HlsPlayer = dynamic3(() => import("./HlsPlayer-SM3WGJSW.mjs"), { ssr: false });
 var getNestedValue = (obj, path) => {
   if (!obj || !path) return void 0;
   return path.split(".").reduce((current, key) => {
@@ -3715,7 +3715,7 @@ var Pagination_default = Pagination;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic7 from "next/dynamic";
 import { Fragment as Fragment7, jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-TJGNEU53.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic7(() => import("./HlsPlayer-SM3WGJSW.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.20260603061415",
+  "version": "0.8.1-dev.20260603093340",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",