analytica-frontend-lib 1.1.13 → 1.1.14

package/dist/Card/index.js

@@ -1415,6 +1415,8 @@ var CardAudio = (0, import_react.forwardRef)(
     const [duration, setDuration] = (0, import_react.useState)(0);
     const [volume, setVolume] = (0, import_react.useState)(1);
     const [showVolumeControl, setShowVolumeControl] = (0, import_react.useState)(false);
+    const [showSpeedMenu, setShowSpeedMenu] = (0, import_react.useState)(false);
+    const [playbackRate, setPlaybackRate] = (0, import_react.useState)(1);
     const audioRef = (0, import_react.useRef)(null);
     const formatTime = (time) => {
       const minutes = Math.floor(time / 60);
@@ -1468,6 +1470,16 @@ var CardAudio = (0, import_react.forwardRef)(
     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__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.SpeakerSimpleX, {});
@@ -1624,13 +1636,35 @@ var CardAudio = (0, import_react.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_phosphor_react2.DotsThreeVertical,
-            {
-              size: 24,
-              className: "text-text-950 cursor-pointer hover:text-primary-600"
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: toggleSpeedMenu,
+                className: "cursor-pointer text-text-950 hover:text-primary-600",
+                "aria-label": "Op\xE7\xF5es de velocidade",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.DotsThreeVertical, { size: 24 })
+              }
+            ),
+            showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(
+              "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
+            )) }) })
+          ] })
         ]
       }
     );