feat(mediaPlaybackSpeed): add tooltip

D3SOX · Jun 3, 2024 · 1cd3ef5 · 1cd3ef5
1 parent dc41a4c
commit 1cd3ef5
Showing 1 changed file with 33 additions and 26 deletions.
diff --git a/mediaPlaybackSpeed/index.tsx b/mediaPlaybackSpeed/index.tsx
@@ -10,7 +10,7 @@ import { classNameFactory } from "@api/Styles";
 import { makeRange } from "@components/PluginSettings/components";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { ContextMenuApi, FluxDispatcher, Menu, React } from "@webpack/common";
+import { ContextMenuApi, FluxDispatcher, Menu, React, Tooltip } from "@webpack/common";
 import { RefObject } from "react";
 
 import SpeedIcon from "./components/SpeedIcon";
@@ -33,31 +33,38 @@ export default definePlugin({
  };
 
  return (
- <button className={cl("icon")} onClick={e => {
- ContextMenuApi.openContextMenu(e, () =>
- <Menu.Menu
- navId="playback-speed"
- onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
- aria-label="Playback speed control"
- >
- <Menu.MenuGroup
- label="Playback speed"
- >
- {speeds.map(speed => (
- <Menu.MenuItem
- key={speed}
- id={"speed-" + speed}
- label={`${speed}x`}
- action={() => changeSpeed(speed)}
- />
- ))}
- </Menu.MenuGroup>
-
- </Menu.Menu>
- );
- }}>
- <SpeedIcon />
- </button>
+ <Tooltip text="Playback speed">
+ {({ onMouseEnter, onMouseLeave }) => (
+ <button
+ className={cl("icon")}
+ onMouseEnter={onMouseEnter}
+ onMouseLeave={onMouseLeave}
+ onClick={e => {
+ ContextMenuApi.openContextMenu(e, () =>
+ <Menu.Menu
+ navId="playback-speed"
+ onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
+ aria-label="Playback speed control"
+ >
+ <Menu.MenuGroup
+ label="Playback speed"
+ >
+ {speeds.map(speed => (
+ <Menu.MenuItem
+ key={speed}
+ id={"speed-" + speed}
+ label={`${speed}x`}
+ action={() => changeSpeed(speed)}
+ />
+ ))}
+ </Menu.MenuGroup>
+ </Menu.Menu>
+ );
+ }}>
+ <SpeedIcon/>
+ </button>
+ )}
+ </Tooltip>
  );
  },