analytica-frontend-lib 1.1.57 → 1.1.59

package/dist/Quiz/index.js

@@ -3570,6 +3570,8 @@ var CardAudio = (0, import_react7.forwardRef)(
     const [showSpeedMenu, setShowSpeedMenu] = (0, import_react7.useState)(false);
     const [playbackRate, setPlaybackRate] = (0, import_react7.useState)(1);
     const audioRef = (0, import_react7.useRef)(null);
+    const volumeControlRef = (0, import_react7.useRef)(null);
+    const speedMenuRef = (0, import_react7.useRef)(null);
     const formatTime = (time) => {
       const minutes = Math.floor(time / 60);
       const seconds = Math.floor(time % 60);
@@ -3621,9 +3623,11 @@ var CardAudio = (0, import_react7.forwardRef)(
     };
     const toggleVolumeControl = () => {
       setShowVolumeControl(!showVolumeControl);
+      setShowSpeedMenu(false);
     };
     const toggleSpeedMenu = () => {
       setShowSpeedMenu(!showSpeedMenu);
+      setShowVolumeControl(false);
     };
     const handleSpeedChange = (speed) => {
       setPlaybackRate(speed);
@@ -3641,6 +3645,20 @@ var CardAudio = (0, import_react7.forwardRef)(
       }
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_phosphor_react5.SpeakerHigh, { size: 24 });
     };
+    (0, import_react7.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (volumeControlRef.current && !volumeControlRef.current.contains(event.target)) {
+          setShowVolumeControl(false);
+        }
+        if (speedMenuRef.current && !speedMenuRef.current.contains(event.target)) {
+          setShowSpeedMenu(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       CardBase,
       {
@@ -3729,7 +3747,7 @@ var CardAudio = (0, import_react7.forwardRef)(
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(duration) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative h-6", ref: volumeControlRef, children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
@@ -3791,7 +3809,7 @@ var CardAudio = (0, import_react7.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative h-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative h-6", ref: speedMenuRef, children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {