npm - @acoustte-digital-services/digitalstore-controls-dev - Versions diffs - 0.8.1-dev.20260603061415 → 0.8.1-dev.20260604041835 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/{HlsPlayer-TJGNEU53.mjs → HlsPlayer-JXH6KK7T.mjs} +1 -1
package/dist/{chunk-GG2OSSQZ.mjs → chunk-DPFBQY2N.mjs} +35 -1
package/dist/index.js +35 -1
package/dist/index.mjs +3 -3
package/package.json +1 -1

package/dist/{HlsPlayer-TJGNEU53.mjs → HlsPlayer-JXH6KK7T.mjs} RENAMED Viewed

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

package/dist/{chunk-GG2OSSQZ.mjs → chunk-DPFBQY2N.mjs} RENAMED Viewed

@@ -51,6 +51,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 +164,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 +197,7 @@ var HlsPlayer = React.memo(
       const v = videoRef.current;
       if (!v) return;
       if (!hlsInitializedRef.current) {
+        setIsBuffering(true);
         initHls(
           /* autoPlayAfterLoad */
           true
@@ -364,7 +370,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 CHANGED Viewed

@@ -215,6 +215,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 +328,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 +361,7 @@ var init_HlsPlayer = __esm({
           const v = videoRef.current;
           if (!v) return;
           if (!hlsInitializedRef.current) {
+            setIsBuffering(true);
             initHls(
               /* autoPlayAfterLoad */
               true
@@ -528,7 +534,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import {
   HlsPlayer_default
-} from "./chunk-GG2OSSQZ.mjs";
+} from "./chunk-DPFBQY2N.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-JXH6KK7T.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-JXH6KK7T.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "sm":

package/package.json CHANGED Viewed

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