From b4e71fe4120969327913388fcb465551aa57a7c1 Mon Sep 17 00:00:00 2001
From: D3SOX <nico@d3sox.me>
Date: Mon, 3 Jun 2024 02:55:18 +0200
Subject: [PATCH] feat(mediaPlaybackSpeed): add tooltip

---
 src/plugins/mediaPlaybackSpeed/index.tsx | 59 +++++++++++++-----------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/plugins/mediaPlaybackSpeed/index.tsx b/src/plugins/mediaPlaybackSpeed/index.tsx
index aff0dc8d5..600983ff4 100644
--- a/src/plugins/mediaPlaybackSpeed/index.tsx
+++ b/src/plugins/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>
         );
     },