analytica-frontend-lib 1.1.50 → 1.1.51

package/dist/index.mjs

@@ -7118,6 +7118,7 @@ import {
   useEffect as useEffect13,
   useCallback as useCallback2
 } from "react";
+import { createPortal } from "react-dom";
 import {
   Play as Play2,
   Pause,
@@ -7193,30 +7194,63 @@ var SpeedMenu = ({
   showSpeedMenu,
   playbackRate,
   onToggleMenu,
-  onSpeedChange
-}) => /* @__PURE__ */ jsxs31("div", { className: "relative", children: [
-  /* @__PURE__ */ jsx37(
-    IconButton_default,
+  onSpeedChange,
+  isFullscreen
+}) => {
+  const buttonRef = useRef10(null);
+  const getMenuPosition = () => {
+    if (!buttonRef.current) return { top: 0, left: 0 };
+    const rect = buttonRef.current.getBoundingClientRect();
+    return {
+      // Fixed coords are viewport-based — no scroll offsets.
+      top: Math.max(8, rect.top - 180),
+      left: Math.max(8, rect.right - 80)
+    };
+  };
+  const position = getMenuPosition();
+  const menuContent = /* @__PURE__ */ jsx37(
+    "div",
     {
-      icon: /* @__PURE__ */ jsx37(DotsThreeVertical2, { size: 24 }),
-      onClick: onToggleMenu,
+      role: "menu",
       "aria-label": "Playback speed",
-      className: "!bg-transparent !text-white hover:!bg-white/20"
+      className: isFullscreen ? "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20 z-[9999]" : "fixed bg-black/90 rounded-lg p-2 min-w-20 z-[9999]",
+      style: !isFullscreen ? {
+        top: `${position.top}px`,
+        left: `${position.left}px`
+      } : void 0,
+      children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ jsxs31(
+        "button",
+        {
+          role: "menuitemradio",
+          "aria-checked": playbackRate === speed,
+          onClick: () => onSpeedChange(speed),
+          className: `block w-full text-left px-3 py-1 text-sm rounded hover:bg-white/20 transition-colors ${playbackRate === speed ? "text-primary-400" : "text-white"}`,
+          children: [
+            speed,
+            "x"
+          ]
+        },
+        speed
+      ))
     }
-  ),
-  showSpeedMenu && /* @__PURE__ */ jsx37("div", { className: "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20", children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ jsxs31(
-    "button",
-    {
-      onClick: () => onSpeedChange(speed),
-      className: `block w-full text-left px-3 py-1 text-sm rounded hover:bg-white/20 transition-colors ${playbackRate === speed ? "text-primary-400" : "text-white"}`,
-      children: [
-        speed,
-        "x"
-      ]
-    },
-    speed
-  )) })
-] });
+  );
+  const portalContent = typeof window !== "undefined" && typeof document !== "undefined" ? createPortal(menuContent, document.body) : null;
+  return /* @__PURE__ */ jsxs31("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx37(
+      IconButton_default,
+      {
+        ref: buttonRef,
+        icon: /* @__PURE__ */ jsx37(DotsThreeVertical2, { size: 24 }),
+        onClick: onToggleMenu,
+        "aria-label": "Playback speed",
+        "aria-haspopup": "menu",
+        "aria-expanded": showSpeedMenu,
+        className: "!bg-transparent !text-white hover:!bg-white/20"
+      }
+    ),
+    showSpeedMenu && (isFullscreen ? menuContent : portalContent)
+  ] });
+};
 var VideoPlayer = ({
   src,
   poster,
@@ -7756,7 +7790,8 @@ var VideoPlayer = ({
                       showSpeedMenu,
                       playbackRate,
                       onToggleMenu: toggleSpeedMenu,
-                      onSpeedChange: handleSpeedChange
+                      onSpeedChange: handleSpeedChange,
+                      isFullscreen
                     }
                   ) })
                 ] })