[SpotifyControls] Add option to show Controls on hover (#352)

Co-authored-by: Dominik <domi@bambus.me>
Co-authored-by: Ven <vendicated@riseup.net>

src/plugins/spotifyControls/index.tsx

@@ -16,16 +16,38 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+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: () => <Player />
 });