From d5e4f3af4610ae2302d2a1ae12c2dc705f6d470e Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Mon, 14 Mar 2022 22:00:57 +0200
Subject: [PATCH] fix volumeHud position in miniplayer

---
 plugins/precise-volume/back.js        |  8 +++++++-
 plugins/precise-volume/front.js       | 12 +++++-------
 plugins/precise-volume/volume-hud.css | 11 +++++++++++
 3 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 plugins/precise-volume/volume-hud.css

diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js
index f891ce32..3d8b23ac 100644
--- a/plugins/precise-volume/back.js
+++ b/plugins/precise-volume/back.js
@@ -1,9 +1,15 @@
+const { injectCSS } = require("../utils");
+const path = require("path");
+
 /*
 This is used to determine if plugin is actually active
 (not if its only enabled in options)
 */
 let enabled = false;
 
-module.exports = () => enabled = true;
+module.exports = (win) => {
+    enabled = true;
+    injectCSS(win.webContents, path.join(__dirname, "volume-hud.css"));
+}
 
 module.exports.enabled = () => enabled;
diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 3b1e34f1..b9370eee 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -45,23 +45,21 @@ function firstRun(options) {
 
 	// Change options from renderer to keep sync
 	ipcRenderer.on("setOptions", (_event, newOptions = {}) => {
-		for (option in newOptions) {
-			options[option] = newOptions[option];
-		}
+		Object.assign(options, newOptions)
 		setMenuOptions("precise-volume", options);
 	});
 }
 
 function injectVolumeHud(noVid) {
 	if (noVid) {
-		const position = "top: 18px; right: 60px; z-index: 999; position: absolute;";
-		const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1s; pointer-events: none;";
+		const position = "top: 18px; right: 60px;";
+		const mainStyle = "font-size: xx-large;";
 
 		$(".center-content.ytmusic-nav-bar").insertAdjacentHTML("beforeend",
 			`<span id="volumeHud" style="${position + mainStyle}"></span>`)
 	} else {
-		const position = `top: 10px; left: 10px; z-index: 999; position: absolute;`;
-		const mainStyle = "font-size: xxx-large; padding: 10px; transition: opacity 0.6s; webkit-text-stroke: 1px black; font-weight: 600; pointer-events: none;";
+		const position = `top: 10px; left: 10px;`;
+		const mainStyle = "font-size: xxx-large; webkit-text-stroke: 1px black; font-weight: 600;";
 
 		$("#song-video").insertAdjacentHTML('afterend',
 			`<span id="volumeHud" style="${position + mainStyle}"></span>`)
diff --git a/plugins/precise-volume/volume-hud.css b/plugins/precise-volume/volume-hud.css
new file mode 100644
index 00000000..618b94fc
--- /dev/null
+++ b/plugins/precise-volume/volume-hud.css
@@ -0,0 +1,11 @@
+#volumeHud {
+	z-index: 999;
+	position: absolute;
+	transition: opacity 0.6s;
+	pointer-events: none;
+	padding: 10px;
+}
+
+ytmusic-player[player-ui-state_="MINIPLAYER"] #volumeHud {
+	top: 0 !important;
+}