diff --git a/src/plugins/spotifyControls/index.tsx b/src/plugins/spotifyControls/index.tsx
index 7ab1e370..86e187e3 100644
--- a/src/plugins/spotifyControls/index.tsx
+++ b/src/plugins/spotifyControls/index.tsx
@@ -16,16 +16,38 @@
* along with this program. If not, see .
*/
+import { Settings } from "@api/settings";
import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
import { Player } from "./PlayerComponent";
+function toggleHoverControls(value: boolean) {
+ document.getElementById("vc-spotify-hover-controls")?.remove();
+ if (value) {
+ const style = document.createElement("style");
+ style.id = "vc-spotify-hover-controls";
+ style.textContent = `
+.vc-spotify-button-row { height: 0; opacity: 0; will-change: height, opacity; transition: height .2s, opacity .05s; }
+#vc-spotify-player:hover .vc-spotify-button-row { opacity: 1; height: 32px; }
+`;
+ document.head.appendChild(style);
+ }
+}
+
export default definePlugin({
name: "SpotifyControls",
description: "Spotify Controls",
authors: [Devs.Ven, Devs.afn, Devs.KraXen72],
dependencies: ["MenuItemDeobfuscatorAPI"],
+ options: {
+ hoverControls: {
+ description: "Show controls on hover",
+ type: OptionType.BOOLEAN,
+ default: false,
+ onChange: v => toggleHoverControls(v)
+ },
+ },
patches: [
{
find: "showTaglessAccountPanel:",
@@ -53,6 +75,6 @@ export default definePlugin({
}
}
],
-
+ start: () => toggleHoverControls(Settings.plugins.SpotifyControls.hoverControls),
renderPlayer: () =>
});