feat(mediaPlaybackSpeed): add tooltip

This commit is contained in:
D3SOX 2024-06-03 02:55:18 +02:00
parent 7708172b12
commit b4e71fe412
No known key found for this signature in database
GPG key ID: 39EC1673FC37B048

View file

@ -10,7 +10,7 @@ import { classNameFactory } from "@api/Styles";
import { makeRange } from "@components/PluginSettings/components"; import { makeRange } from "@components/PluginSettings/components";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import definePlugin from "@utils/types"; 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 { RefObject } from "react";
import SpeedIcon from "./components/SpeedIcon"; import SpeedIcon from "./components/SpeedIcon";
@ -33,31 +33,38 @@ export default definePlugin({
}; };
return ( return (
<button className={cl("icon")} onClick={e => { <Tooltip text="Playback speed">
ContextMenuApi.openContextMenu(e, () => {({ onMouseEnter, onMouseLeave }) => (
<Menu.Menu <button
navId="playback-speed" className={cl("icon")}
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })} onMouseEnter={onMouseEnter}
aria-label="Playback speed control" onMouseLeave={onMouseLeave}
> onClick={e => {
<Menu.MenuGroup ContextMenuApi.openContextMenu(e, () =>
label="Playback speed" <Menu.Menu
> navId="playback-speed"
{speeds.map(speed => ( onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
<Menu.MenuItem aria-label="Playback speed control"
key={speed} >
id={"speed-" + speed} <Menu.MenuGroup
label={`${speed}x`} label="Playback speed"
action={() => changeSpeed(speed)} >
/> {speeds.map(speed => (
))} <Menu.MenuItem
</Menu.MenuGroup> key={speed}
id={"speed-" + speed}
</Menu.Menu> label={`${speed}x`}
); action={() => changeSpeed(speed)}
}}> />
<SpeedIcon /> ))}
</button> </Menu.MenuGroup>
</Menu.Menu>
);
}}>
<SpeedIcon/>
</button>
)}
</Tooltip>
); );
}, },