From 9beebd3772bd9248fd71e5b5f389f77651531305 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Wed, 20 Apr 2022 18:21:51 +0300
Subject: [PATCH] add different modes to video-toggle plugin

* Custom: like before but slightly position

* Native: use the native video-toggle

* Disabled: force disable the native video-toggle
---
 config/defaults.js                       |  1 +
 config/store.js                          |  5 ++++
 plugins/video-toggle/back.js             |  2 +-
 plugins/video-toggle/button-switcher.css |  5 ++++
 plugins/video-toggle/front.js            | 28 ++++++++++++++++-----
 plugins/video-toggle/menu.js             | 32 ++++++++++++++++++++++++
 6 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/config/defaults.js b/config/defaults.js
index 0a920895..b4d52923 100644
--- a/config/defaults.js
+++ b/config/defaults.js
@@ -80,6 +80,7 @@ const defaultConfig = {
 		},
 		"video-toggle": {
 			enabled: false,
+			mode: "custom",
 			forceHide: false,
 		},
 	},
diff --git a/config/store.js b/config/store.js
index 0b20693e..7ccd9f9f 100644
--- a/config/store.js
+++ b/config/store.js
@@ -3,6 +3,11 @@ const Store = require("electron-store");
 const defaults = require("./defaults");
 
 const migrations = {
+	">=1.17.0": (store) => {
+		if (store.get("plugins.video-toggle.mode") === undefined) {
+			store.set("plugins.video-toggle.mode", "custom");
+		}
+	},
 	">=1.14.0": (store) => {
 		if (
 			typeof store.get("plugins.precise-volume.globalShortcuts") !== "object"
diff --git a/plugins/video-toggle/back.js b/plugins/video-toggle/back.js
index a56e61cf..b57f0722 100644
--- a/plugins/video-toggle/back.js
+++ b/plugins/video-toggle/back.js
@@ -4,7 +4,7 @@ const path = require("path");
 module.exports = (win, options) => {
 	if (options.forceHide) {
 		injectCSS(win.webContents, path.join(__dirname, "force-hide.css"));
-	} else {
+	} else if (!options.mode || options.mode === "custom") {
 		injectCSS(win.webContents, path.join(__dirname, "button-switcher.css"));
 	}
 };
diff --git a/plugins/video-toggle/button-switcher.css b/plugins/video-toggle/button-switcher.css
index 0029f921..626d3bd1 100644
--- a/plugins/video-toggle/button-switcher.css
+++ b/plugins/video-toggle/button-switcher.css
@@ -75,3 +75,8 @@
     transform: translateX(0);
     transition: transform 300ms;
 }
+
+/* disable the native toggler */
+#av-id {
+	display: none;
+}
diff --git a/plugins/video-toggle/front.js b/plugins/video-toggle/front.js
index 1226f640..ab82aef1 100644
--- a/plugins/video-toggle/front.js
+++ b/plugins/video-toggle/front.js
@@ -14,9 +14,24 @@ const switchButtonDiv = ElementFromFile(
 
 module.exports = (_options) => {
     if (_options.forceHide) return;
-    options = _options;
-    document.addEventListener('apiLoaded', setup, { once: true, passive: true });
-}
+    switch (_options.mode) {
+        case "native": {
+            $("ytmusic-player-page").setAttribute("has-av-switcher");
+            $("ytmusic-player").setAttribute("has-av-switcher");
+            return;
+        }
+        case "disabled": {
+            $("ytmusic-player-page").removeAttribute("has-av-switcher");
+            $("ytmusic-player").removeAttribute("has-av-switcher");
+            return;
+        }
+        default:
+        case "custom": {
+            options = _options;
+            document.addEventListener("apiLoaded", setup, { once: true, passive: true });
+        }
+    }
+};
 
 function setup(e) {
     api = e.detail;
@@ -25,8 +40,6 @@ function setup(e) {
 
     $('ytmusic-player-page').prepend(switchButtonDiv);
 
-    $('#song-image.ytmusic-player').style.display = "block";
-
     if (options.hideVideo) {
         $('.video-switch-button-checkbox').checked = false;
         changeDisplay(false);
@@ -50,7 +63,10 @@ function setup(e) {
 function changeDisplay(showVideo) {
     player.style.margin = showVideo ? '' : 'auto 0px';
     player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
-    $('#song-video.ytmusic-player').style.display = showVideo ? 'unset' : 'none';
+
+    $('#song-video.ytmusic-player').style.display = showVideo ? 'block' : 'none';
+    $('#song-image').style.display = showVideo ? 'none' : 'block';
+
     if (showVideo && !video.style.top) {
         video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
     }
diff --git a/plugins/video-toggle/menu.js b/plugins/video-toggle/menu.js
index fb539405..2cf4be0a 100644
--- a/plugins/video-toggle/menu.js
+++ b/plugins/video-toggle/menu.js
@@ -1,6 +1,38 @@
 const { setMenuOptions } = require("../../config/plugins");
 
 module.exports = (win, options) => [
+    {
+        label: "Mode",
+        submenu: [
+            {
+                label: "Custom toggle",
+                type: "radio",
+                checked: options.mode === 'custom',
+                click: () => {
+                    options.mode = 'custom';
+                    setMenuOptions("video-toggle", options);
+                }
+            },
+            {
+                label: "Native toggle",
+                type: "radio",
+                checked: options.mode === 'native',
+                click: () => {
+                    options.mode = 'native';
+                    setMenuOptions("video-toggle", options);
+                }
+            },
+            {
+                label: "Disabled",
+                type: "radio",
+                checked: options.mode === 'disabled',
+                click: () => {
+                    options.mode = 'disabled';
+                    setMenuOptions("video-toggle", options);
+                }
+            },
+        ]
+    },
     {
         label: "Force Remove Video Tab",
         type: "checkbox",