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: () => });