analytica-frontend-lib 1.1.13 → 1.1.14

package/dist/Quiz/index.mjs

@@ -3225,6 +3225,8 @@ var CardAudio = forwardRef6(
     const [duration, setDuration] = useState3(0);
     const [volume, setVolume] = useState3(1);
     const [showVolumeControl, setShowVolumeControl] = useState3(false);
+    const [showSpeedMenu, setShowSpeedMenu] = useState3(false);
+    const [playbackRate, setPlaybackRate] = useState3(1);
     const audioRef = useRef3(null);
     const formatTime = (time) => {
       const minutes = Math.floor(time / 60);
@@ -3278,6 +3280,16 @@ var CardAudio = forwardRef6(
     const toggleVolumeControl = () => {
       setShowVolumeControl(!showVolumeControl);
     };
+    const toggleSpeedMenu = () => {
+      setShowSpeedMenu(!showSpeedMenu);
+    };
+    const handleSpeedChange = (speed) => {
+      setPlaybackRate(speed);
+      if (audioRef.current) {
+        audioRef.current.playbackRate = speed;
+      }
+      setShowSpeedMenu(false);
+    };
     const getVolumeIcon = () => {
       if (volume === 0) {
         return /* @__PURE__ */ jsx11(SpeakerSimpleX, {});
@@ -3434,13 +3446,35 @@ var CardAudio = forwardRef6(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx11(
-            DotsThreeVertical,
-            {
-              size: 24,
-              className: "text-text-950 cursor-pointer hover:text-primary-600"
-            }
-          )
+          /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                onClick: toggleSpeedMenu,
+                className: "cursor-pointer text-text-950 hover:text-primary-600",
+                "aria-label": "Op\xE7\xF5es de velocidade",
+                children: /* @__PURE__ */ jsx11(DotsThreeVertical, { size: 24 })
+              }
+            ),
+            showSpeedMenu && /* @__PURE__ */ jsx11("div", { className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg min-w-24 z-10", children: /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-1", children: [
+              { speed: 1, label: "1x" },
+              { speed: 1.5, label: "1.5x" },
+              { speed: 2, label: "2x" }
+            ].map(({ speed, label }) => /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSpeedChange(speed),
+                className: cn(
+                  "px-3 py-1 text-sm text-left rounded hover:bg-border-50 transition-colors",
+                  playbackRate === speed ? "bg-primary-950 text-secondary-100 font-medium" : "text-text-950"
+                ),
+                children: label
+              },
+              speed
+            )) }) })
+          ] })
         ]
       }
     );