From 40968d573c1c0dae1ac0c5d81a73ce6a1a14fdef Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Fri, 16 Apr 2021 21:52:56 +0300
Subject: [PATCH 01/22] add precise scrollwheel control + precise tooltip

---
 plugins/precise-volume/front.js | 74 +++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 plugins/precise-volume/front.js

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
new file mode 100644
index 00000000..abf38955
--- /dev/null
+++ b/plugins/precise-volume/front.js
@@ -0,0 +1,74 @@
+module.exports = () => {
+    setupPlaybarOnwheel();
+    setupObserver();
+    firstTooltip();
+}
+
+function firstTooltip () {  
+    const videoStream = document.querySelector(".video-stream");
+    if (videoStream) {
+        setTooltip(Math.round(parseFloat(videoStream.volume) * 100));
+    } else {
+      setTimeout(firstTooltip, 500); // try again in 500 milliseconds
+    }
+  }
+
+function setupPlaybarOnwheel() {
+    //add onwheel event to play bar
+    document.querySelector("ytmusic-player-bar").onwheel = (event) => {
+        event.preventDefault();
+        //event.deltaY < 0 => wheel up
+        changeVolume(event.deltaY < 0)
+    }
+}
+
+let newVolume;
+
+
+function changeVolume(increase) {
+    //need to change both the slider and the actual volume
+    const videoStream = document.querySelector(".video-stream");
+    const slider = document.querySelector("#volume-slider");
+    //get the volume diff to apply
+    const diff = increase
+        ? videoStream.volume < 1 ? 0.01 : 0
+        : videoStream.volume > 0 ? -0.01 : 0
+    //apply on both elements and save the new volume
+    videoStream.volume += diff;
+    newVolume = Math.round(parseFloat(videoStream.volume) * 100);
+    slider.value = newVolume;
+    //finally change tooltip to new value
+    setTooltip(newVolume)
+}
+
+//observer sets the tooltip when volume is manually changed
+function setupObserver() {
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            //this checks that the new volume was manually set (without the new changeVolume() function)
+            if (mutation.oldValue !== mutation.target.value
+                && (!newVolume || Math.abs(newVolume - mutation.target.value) > 4)) {
+                //if diff>4 -> it was manually set, so update tooltip accordingly
+                setTooltip(mutation.target.value);
+            }
+        }
+    });
+
+    //observing only changes in value of volume-slider
+    observer.observe(document.querySelector("#volume-slider"), {
+        attributeFilter: ["value"],
+        attributeOldValue: true,
+    });
+}
+
+function setTooltip(newValue) {
+    newValue += "%";
+    //set new volume as tooltip for volume slider and icon
+    document.querySelector("#volume-slider").title = newValue;
+    document.querySelector("tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar").title = newValue;
+
+    //also for expanding slider (appears when window size is small)
+    let expandingSlider = document.querySelector("#expanding-menu");
+    expandingSlider.querySelector("#expand-volume-slider").title = newValue;
+    expandingSlider.querySelector("#expand-volume").title = newValue;
+}
\ No newline at end of file

From c0ec1bc5cfc1468e158d759e236288ba50dee320 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Fri, 16 Apr 2021 22:37:34 +0300
Subject: [PATCH 02/22] update inline doc

---
 plugins/precise-volume/front.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index abf38955..603ae8ac 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -4,14 +4,14 @@ module.exports = () => {
     firstTooltip();
 }
 
-function firstTooltip () {  
+function firstTooltip() {
     const videoStream = document.querySelector(".video-stream");
     if (videoStream) {
         setTooltip(Math.round(parseFloat(videoStream.volume) * 100));
     } else {
-      setTimeout(firstTooltip, 500); // try again in 500 milliseconds
+        setTimeout(firstTooltip, 500); // try again in 500 milliseconds
     }
-  }
+}
 
 function setupPlaybarOnwheel() {
     //add onwheel event to play bar
@@ -22,8 +22,8 @@ function setupPlaybarOnwheel() {
     }
 }
 
-let newVolume;
-
+//the last volume set by changeVolume() is stored here
+let newVolume; //used to determine if volume-slider was manually moved 
 
 function changeVolume(increase) {
     //need to change both the slider and the actual volume
@@ -41,20 +41,20 @@ function changeVolume(increase) {
     setTooltip(newVolume)
 }
 
-//observer sets the tooltip when volume is manually changed
+//update the volume tooltip when volume-slider is manually changed
 function setupObserver() {
     const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
-            //this checks that the new volume was manually set (without the new changeVolume() function)
+            //this checks that volume-slider was manually set
             if (mutation.oldValue !== mutation.target.value
                 && (!newVolume || Math.abs(newVolume - mutation.target.value) > 4)) {
-                //if diff>4 -> it was manually set, so update tooltip accordingly
+                //diff>4 means it was manually set, so update tooltip accordingly
                 setTooltip(mutation.target.value);
             }
         }
     });
 
-    //observing only changes in value of volume-slider
+    //observing only changes in 'value' of volume-slider
     observer.observe(document.querySelector("#volume-slider"), {
         attributeFilter: ["value"],
         attributeOldValue: true,

From 02896cac03c587e5003b51c2c91f20842c66c9c8 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Fri, 16 Apr 2021 23:02:16 +0300
Subject: [PATCH 03/22] xo --fix

---
 plugins/precise-volume/front.js | 121 ++++++++++++++++----------------
 1 file changed, 61 insertions(+), 60 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 603ae8ac..d6aa4073 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -1,74 +1,75 @@
 module.exports = () => {
-    setupPlaybarOnwheel();
-    setupObserver();
-    firstTooltip();
+	setPlaybarOnwheel();
+	setObserver();
+	setFirstTooltip();
+};
+
+function setFirstTooltip() {
+	const videoStream = document.querySelector(".video-stream");
+	if (videoStream?.volume) {
+		setTooltip(Math.round(parseFloat(videoStream.volume) * 100));
+	} else {
+		setTimeout(setFirstTooltip, 500); // Try again in 500 milliseconds
+	}
 }
 
-function firstTooltip() {
-    const videoStream = document.querySelector(".video-stream");
-    if (videoStream) {
-        setTooltip(Math.round(parseFloat(videoStream.volume) * 100));
-    } else {
-        setTimeout(firstTooltip, 500); // try again in 500 milliseconds
-    }
+function setPlaybarOnwheel() {
+	// Add onwheel event to play bar
+	document.querySelector("ytmusic-player-bar").onwheel = event => {
+		event.preventDefault();
+		// Event.deltaY < 0 => wheel up
+		changeVolume(event.deltaY < 0);
+	};
 }
 
-function setupPlaybarOnwheel() {
-    //add onwheel event to play bar
-    document.querySelector("ytmusic-player-bar").onwheel = (event) => {
-        event.preventDefault();
-        //event.deltaY < 0 => wheel up
-        changeVolume(event.deltaY < 0)
-    }
-}
-
-//the last volume set by changeVolume() is stored here
-let newVolume; //used to determine if volume-slider was manually moved 
+// The last volume set by changeVolume() is stored here
+let newVolume; // Used to determine if volume-slider was manually moved
 
 function changeVolume(increase) {
-    //need to change both the slider and the actual volume
-    const videoStream = document.querySelector(".video-stream");
-    const slider = document.querySelector("#volume-slider");
-    //get the volume diff to apply
-    const diff = increase
-        ? videoStream.volume < 1 ? 0.01 : 0
-        : videoStream.volume > 0 ? -0.01 : 0
-    //apply on both elements and save the new volume
-    videoStream.volume += diff;
-    newVolume = Math.round(parseFloat(videoStream.volume) * 100);
-    slider.value = newVolume;
-    //finally change tooltip to new value
-    setTooltip(newVolume)
+	// Need to change both the slider and the actual volume
+	const videoStream = document.querySelector(".video-stream");
+	const slider = document.querySelector("#volume-slider");
+	// Get the volume diff to apply
+	const diff = increase ?
+		(videoStream.volume < 1 ? 0.01 : 0) :
+		(videoStream.volume > 0 ? -0.01 : 0);
+	// Apply on both elements and save the new volume
+	videoStream.volume += diff;
+	newVolume = Math.round(Number.parseFloat(videoStream.volume) * 100);
+	// Slider value automatically rounds to multiples of 5
+	slider.value = newVolume;
+	// Finally change tooltip to new value
+	setTooltip(newVolume);
 }
 
-//update the volume tooltip when volume-slider is manually changed
-function setupObserver() {
-    const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            //this checks that volume-slider was manually set
-            if (mutation.oldValue !== mutation.target.value
-                && (!newVolume || Math.abs(newVolume - mutation.target.value) > 4)) {
-                //diff>4 means it was manually set, so update tooltip accordingly
-                setTooltip(mutation.target.value);
-            }
-        }
-    });
+// Update the volume tooltip when volume-slider is manually changed
+function setObserver() {
+	const observer = new MutationObserver(mutations => {
+		for (const mutation of mutations) {
+			// This checks that volume-slider was manually set
+			if (mutation.oldValue !== mutation.target.value &&
+                (!newVolume || Math.abs(newVolume - mutation.target.value) > 4)) {
+				// Diff>4 means it was manually set, so update tooltip accordingly
+				setTooltip(mutation.target.value);
+			}
+		}
+	});
 
-    //observing only changes in 'value' of volume-slider
-    observer.observe(document.querySelector("#volume-slider"), {
-        attributeFilter: ["value"],
-        attributeOldValue: true,
-    });
+	// Observing only changes in 'value' of volume-slider
+	observer.observe(document.querySelector("#volume-slider"), {
+		attributeFilter: ["value"],
+		attributeOldValue: true
+	});
 }
 
 function setTooltip(newValue) {
-    newValue += "%";
-    //set new volume as tooltip for volume slider and icon
-    document.querySelector("#volume-slider").title = newValue;
-    document.querySelector("tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar").title = newValue;
+	newValue += "%";
+	// Set new volume as tooltip for volume slider and icon
+	document.querySelector("#volume-slider").title = newValue;
+	document.querySelector("tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar").title = newValue;
 
-    //also for expanding slider (appears when window size is small)
-    let expandingSlider = document.querySelector("#expanding-menu");
-    expandingSlider.querySelector("#expand-volume-slider").title = newValue;
-    expandingSlider.querySelector("#expand-volume").title = newValue;
-}
\ No newline at end of file
+	// Also for expanding slider (appears when window size is small)
+	const expandingSlider = document.querySelector("#expanding-menu");
+	expandingSlider.querySelector("#expand-volume-slider").title = newValue;
+	expandingSlider.querySelector("#expand-volume").title = newValue;
+}

From 06958c424c81f6ac24597b0e0fbb8cb43f08b81f Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Fri, 16 Apr 2021 23:30:43 +0300
Subject: [PATCH 04/22] refactor

---
 plugins/precise-volume/front.js | 53 +++++++++++++++++++--------------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index d6aa4073..45292194 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -7,19 +7,19 @@ module.exports = () => {
 function setFirstTooltip() {
 	const videoStream = document.querySelector(".video-stream");
 	if (videoStream?.volume) {
-		setTooltip(Math.round(parseFloat(videoStream.volume) * 100));
+		setTooltip(toPercent(videoStream.volume));
 	} else {
 		setTimeout(setFirstTooltip, 500); // Try again in 500 milliseconds
 	}
 }
 
 function setPlaybarOnwheel() {
-	// Add onwheel event to play bar
-	document.querySelector("ytmusic-player-bar").onwheel = event => {
-		event.preventDefault();
-		// Event.deltaY < 0 => wheel up
-		changeVolume(event.deltaY < 0);
-	};
+    // Add onwheel event to play bar
+    document.querySelector("ytmusic-player-bar").onwheel = event => {
+        event.preventDefault();
+        // Event.deltaY < 0 => wheel up
+        changeVolume(event.deltaY < 0);
+    };
 }
 
 // The last volume set by changeVolume() is stored here
@@ -29,13 +29,14 @@ function changeVolume(increase) {
 	// Need to change both the slider and the actual volume
 	const videoStream = document.querySelector(".video-stream");
 	const slider = document.querySelector("#volume-slider");
-	// Get the volume diff to apply
-	const diff = increase ?
-		(videoStream.volume < 1 ? 0.01 : 0) :
-		(videoStream.volume > 0 ? -0.01 : 0);
-	// Apply on both elements and save the new volume
-	videoStream.volume += diff;
-	newVolume = Math.round(Number.parseFloat(videoStream.volume) * 100);
+
+	// Apply volume change if valid
+	videoStream.volume = increase ?
+		Math.min(videoStream.volume + 0.01, 1) :
+		Math.max(videoStream.volume - 0.01, 0);
+
+	// Save the new volume
+	newVolume = toPercent(videoStream.volume);
 	// Slider value automatically rounds to multiples of 5
 	slider.value = newVolume;
 	// Finally change tooltip to new value
@@ -62,14 +63,22 @@ function setObserver() {
 	});
 }
 
+// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
+const tooltipTargets = [
+	"#volume-slider",
+	"tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar",
+	"#expand-volume-slider",
+	"#expand-volume"
+];
+
 function setTooltip(newValue) {
 	newValue += "%";
-	// Set new volume as tooltip for volume slider and icon
-	document.querySelector("#volume-slider").title = newValue;
-	document.querySelector("tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar").title = newValue;
-
-	// Also for expanding slider (appears when window size is small)
-	const expandingSlider = document.querySelector("#expanding-menu");
-	expandingSlider.querySelector("#expand-volume-slider").title = newValue;
-	expandingSlider.querySelector("#expand-volume").title = newValue;
+	for (target of tooltipTargets) {
+		document.querySelector(target).title = newValue;
+	}
 }
+
+function toPercent(volume) {
+	return Math.round(Number.parseFloat(volume) * 100);
+}
+

From b65bc65d7c29cc6c8df2b96529b7f6274b28fee0 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Sat, 17 Apr 2021 01:58:33 +0300
Subject: [PATCH 05/22] save volume to settings

---
 plugins/precise-volume/front.js | 62 ++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 45292194..395cee31 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -1,31 +1,42 @@
-module.exports = () => {
-	setPlaybarOnwheel();
-	setObserver();
-	setFirstTooltip();
+const { setOptions } = require("../../config/plugins");
+
+module.exports = (options) => {
+	setPlaybarOnwheel(options);
+	setObserver(options);
+	firstRun(options);
 };
 
-function setFirstTooltip() {
+function saveVolume(volume, options) {
+	options.savedVolume = volume;
+	setOptions("precise-volume", options);
+}
+
+function firstRun(options) {
 	const videoStream = document.querySelector(".video-stream");
-	if (videoStream?.volume) {
+	if (videoStream) {
+		// Set saved volume if it exists and is valid
+		if (options.savedVolume && options.savedVolume >= 0 && options.savedVolume <= 100) {
+			videoStream.volume = options.savedVolume / 100;
+			document.querySelector("#volume-slider").value = options.savedVolume;
+		}
+
+		// Set current volume as tooltip
 		setTooltip(toPercent(videoStream.volume));
 	} else {
-		setTimeout(setFirstTooltip, 500); // Try again in 500 milliseconds
+		setTimeout(firstRun, 500, options); // Try again in 500 milliseconds
 	}
 }
 
-function setPlaybarOnwheel() {
-    // Add onwheel event to play bar
-    document.querySelector("ytmusic-player-bar").onwheel = event => {
-        event.preventDefault();
-        // Event.deltaY < 0 => wheel up
-        changeVolume(event.deltaY < 0);
-    };
+function setPlaybarOnwheel(options) {
+	// Add onwheel event to play bar
+	document.querySelector("ytmusic-player-bar").onwheel = event => {
+		event.preventDefault();
+		// Event.deltaY < 0 => wheel up
+		changeVolume(event.deltaY < 0, options);
+	};
 }
 
-// The last volume set by changeVolume() is stored here
-let newVolume; // Used to determine if volume-slider was manually moved
-
-function changeVolume(increase) {
+function changeVolume(increase, options) {
 	// Need to change both the slider and the actual volume
 	const videoStream = document.querySelector(".video-stream");
 	const slider = document.querySelector("#volume-slider");
@@ -36,22 +47,23 @@ function changeVolume(increase) {
 		Math.max(videoStream.volume - 0.01, 0);
 
 	// Save the new volume
-	newVolume = toPercent(videoStream.volume);
+	saveVolume(toPercent(videoStream.volume), options);
 	// Slider value automatically rounds to multiples of 5
-	slider.value = newVolume;
+	slider.value = options.savedVolume;
 	// Finally change tooltip to new value
-	setTooltip(newVolume);
+	setTooltip(options.savedVolume);
 }
 
-// Update the volume tooltip when volume-slider is manually changed
-function setObserver() {
+// Save volume + Update the volume tooltip when volume-slider is manually changed
+function setObserver(options) {
 	const observer = new MutationObserver(mutations => {
 		for (const mutation of mutations) {
 			// This checks that volume-slider was manually set
 			if (mutation.oldValue !== mutation.target.value &&
-                (!newVolume || Math.abs(newVolume - mutation.target.value) > 4)) {
-				// Diff>4 means it was manually set, so update tooltip accordingly
+				(!options.savedVolume || Math.abs(options.savedVolume - mutation.target.value) > 4)) {
+				// Diff>4 means it was manually set
 				setTooltip(mutation.target.value);
+				saveVolume(mutation.target.value, options);
 			}
 		}
 	});

From 5adcc3efadc985bbfa4d6552f0f6592255a5a887 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Sat, 17 Apr 2021 02:38:45 +0300
Subject: [PATCH 06/22] fix set volume on first run after not using plugin

---
 plugins/precise-volume/front.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 395cee31..ce657fb1 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -13,11 +13,17 @@ function saveVolume(volume, options) {
 
 function firstRun(options) {
 	const videoStream = document.querySelector(".video-stream");
-	if (videoStream) {
-		// Set saved volume if it exists and is valid
-		if (options.savedVolume && options.savedVolume >= 0 && options.savedVolume <= 100) {
+	const slider = document.querySelector("#volume-slider");
+
+	if (videoStream && slider) {
+		// Set saved volume if it pass checks
+		if (options.savedVolume
+			&& options.savedVolume >= 0 && options.savedVolume <= 100
+			&& Math.abs(slider.value - options.savedVolume) < 5
+			// If plugin was disabled and volume changed then diff>4
+		) {
 			videoStream.volume = options.savedVolume / 100;
-			document.querySelector("#volume-slider").value = options.savedVolume;
+			slider.value = options.savedVolume;
 		}
 
 		// Set current volume as tooltip

From 94e152bb571ad79c7cb889ea4f6482cd3d5371be Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Sat, 17 Apr 2021 04:14:54 +0300
Subject: [PATCH 07/22] add optional arrowkeys controls option

---
 plugins/precise-volume/front.js | 24 ++++++++++++++++++++++++
 plugins/precise-volume/menu.js  | 10 ++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 plugins/precise-volume/menu.js

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index ce657fb1..18b1b45c 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -1,9 +1,11 @@
 const { setOptions } = require("../../config/plugins");
+const { ipcRenderer } = require("electron");
 
 module.exports = (options) => {
 	setPlaybarOnwheel(options);
 	setObserver(options);
 	firstRun(options);
+	setupArrowShortcuts(options);
 };
 
 function saveVolume(volume, options) {
@@ -42,6 +44,28 @@ function setPlaybarOnwheel(options) {
 	};
 }
 
+function setupArrowShortcuts(options) {
+	//change options from renderer to keep sync
+	ipcRenderer.on("setArrowsShortcut", (event, value) => {
+		options.arrowsShortcut = value;
+		setOptions("precise-volume", options);
+	});
+
+	//register shortcuts if enabled
+	if (options.arrowsShortcut) {
+		window.addEventListener('keydown', (event) => {
+			switch (event.code) {
+				case `ArrowUp`:
+					changeVolume(true, options);
+					break;
+				case `ArrowDown`:
+					changeVolume(false, options);
+					break;
+			}
+		}, true);
+	}
+}
+
 function changeVolume(increase, options) {
 	// Need to change both the slider and the actual volume
 	const videoStream = document.querySelector(".video-stream");
diff --git a/plugins/precise-volume/menu.js b/plugins/precise-volume/menu.js
new file mode 100644
index 00000000..9b870efd
--- /dev/null
+++ b/plugins/precise-volume/menu.js
@@ -0,0 +1,10 @@
+module.exports = (win, options) => [
+	{
+		label: "Arrowkeys controls",
+		type: "checkbox",
+		checked: !!options.arrowsShortcut,
+		click: (item) => {
+            win.webContents.send("setArrowsShortcut", item.checked);
+        }
+	}
+];

From 834202411d4c02cb83bfbe52354c5b6aa61b35db Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Sat, 17 Apr 2021 04:38:23 +0300
Subject: [PATCH 08/22] enable changing shortcut setting without restart

---
 plugins/precise-volume/front.js | 40 +++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 18b1b45c..7aa42dc5 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -46,23 +46,39 @@ function setPlaybarOnwheel(options) {
 
 function setupArrowShortcuts(options) {
 	//change options from renderer to keep sync
-	ipcRenderer.on("setArrowsShortcut", (event, value) => {
-		options.arrowsShortcut = value;
+	ipcRenderer.on("setArrowsShortcut", (event, isEnabled) => {
+		options.arrowsShortcut = isEnabled;
 		setOptions("precise-volume", options);
+		//can setting without restarting app
+		if (isEnabled) {
+			addListener();
+		} else {
+			removeListener();
+		}
 	});
 
 	//register shortcuts if enabled
 	if (options.arrowsShortcut) {
-		window.addEventListener('keydown', (event) => {
-			switch (event.code) {
-				case `ArrowUp`:
-					changeVolume(true, options);
-					break;
-				case `ArrowDown`:
-					changeVolume(false, options);
-					break;
-			}
-		}, true);
+		addListener();
+	}
+
+	function addListener() {
+		window.addEventListener('keydown', callback);
+	}
+
+	function removeListener() {
+		window.removeEventListener("keydown", callback);
+	}
+
+	function callback(event) {
+		switch (event.code) {
+			case `ArrowUp`:
+				changeVolume(true, options);
+				break;
+			case `ArrowDown`:
+				changeVolume(false, options);
+				break;
+		}
 	}
 }
 

From 49698ea6693462524a88b07b87e82b06e560dda2 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Sat, 17 Apr 2021 05:08:07 +0300
Subject: [PATCH 09/22] fix changing settings when plugin is disabled

---
 plugins/precise-volume/back.js | 12 ++++++++++++
 plugins/precise-volume/menu.js | 11 ++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 plugins/precise-volume/back.js

diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js
new file mode 100644
index 00000000..7582f4ce
--- /dev/null
+++ b/plugins/precise-volume/back.js
@@ -0,0 +1,12 @@
+/*
+this is used to determine if plugin is actually active
+(not if its only enabled in options)
+*/
+let enabled = false;
+module.exports = (win,options) => {
+    enabled = true;
+};
+
+module.exports.enabled = () => {
+    return enabled;
+};
\ No newline at end of file
diff --git a/plugins/precise-volume/menu.js b/plugins/precise-volume/menu.js
index 9b870efd..a906addf 100644
--- a/plugins/precise-volume/menu.js
+++ b/plugins/precise-volume/menu.js
@@ -1,10 +1,19 @@
+const { enabled } = require("./back")
+const { setOptions } = require("../../config/plugins");
+
 module.exports = (win, options) => [
 	{
 		label: "Arrowkeys controls",
 		type: "checkbox",
 		checked: !!options.arrowsShortcut,
 		click: (item) => {
-            win.webContents.send("setArrowsShortcut", item.checked);
+            //dynamically change setting if plugin enabled
+            if (enabled()) {
+                win.webContents.send("setArrowsShortcut", item.checked);
+            } else { //fallback to usual method if disabled
+                options.arrowsShortcut = item.checked;
+                setOptions("precise-volume", options);
+            }
         }
 	}
 ];

From 12a2517697f1f66396faed8653259ee012585491 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Sat, 17 Apr 2021 15:03:19 +0300
Subject: [PATCH 10/22] xo --fix

---
 plugins/precise-volume/back.js  | 10 +++++-----
 plugins/precise-volume/front.js | 27 +++++++++++++--------------
 plugins/precise-volume/menu.js  | 18 +++++++++---------
 3 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js
index 7582f4ce..e6b101f9 100644
--- a/plugins/precise-volume/back.js
+++ b/plugins/precise-volume/back.js
@@ -1,12 +1,12 @@
 /*
-this is used to determine if plugin is actually active
+This is used to determine if plugin is actually active
 (not if its only enabled in options)
 */
 let enabled = false;
-module.exports = (win,options) => {
-    enabled = true;
+module.exports = () => {
+	enabled = true;
 };
 
 module.exports.enabled = () => {
-    return enabled;
-};
\ No newline at end of file
+	return enabled;
+};
diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 7aa42dc5..d6424df1 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -3,9 +3,9 @@ const { ipcRenderer } = require("electron");
 
 module.exports = (options) => {
 	setPlaybarOnwheel(options);
-	setObserver(options);
-	firstRun(options);
+	setupObserver(options);
 	setupArrowShortcuts(options);
+	firstRun(options);
 };
 
 function saveVolume(volume, options) {
@@ -45,11 +45,16 @@ function setPlaybarOnwheel(options) {
 }
 
 function setupArrowShortcuts(options) {
-	//change options from renderer to keep sync
+	// Register shortcuts if enabled
+	if (options.arrowsShortcut) {
+		addListener();
+	}
+
+	// Change options from renderer to keep sync
 	ipcRenderer.on("setArrowsShortcut", (event, isEnabled) => {
 		options.arrowsShortcut = isEnabled;
 		setOptions("precise-volume", options);
-		//can setting without restarting app
+		// Can setting without restarting app
 		if (isEnabled) {
 			addListener();
 		} else {
@@ -57,11 +62,6 @@ function setupArrowShortcuts(options) {
 		}
 	});
 
-	//register shortcuts if enabled
-	if (options.arrowsShortcut) {
-		addListener();
-	}
-
 	function addListener() {
 		window.addEventListener('keydown', callback);
 	}
@@ -101,7 +101,7 @@ function changeVolume(increase, options) {
 }
 
 // Save volume + Update the volume tooltip when volume-slider is manually changed
-function setObserver(options) {
+function setupObserver(options) {
 	const observer = new MutationObserver(mutations => {
 		for (const mutation of mutations) {
 			// This checks that volume-slider was manually set
@@ -129,14 +129,13 @@ const tooltipTargets = [
 	"#expand-volume"
 ];
 
-function setTooltip(newValue) {
-	newValue += "%";
+function setTooltip(volume) {
+	const tooltip = volume + "%";
 	for (target of tooltipTargets) {
-		document.querySelector(target).title = newValue;
+		document.querySelector(target).title = tooltip;
 	}
 }
 
 function toPercent(volume) {
 	return Math.round(Number.parseFloat(volume) * 100);
 }
-
diff --git a/plugins/precise-volume/menu.js b/plugins/precise-volume/menu.js
index a906addf..d4ed37a7 100644
--- a/plugins/precise-volume/menu.js
+++ b/plugins/precise-volume/menu.js
@@ -1,4 +1,4 @@
-const { enabled } = require("./back")
+const { enabled } = require("./back");
 const { setOptions } = require("../../config/plugins");
 
 module.exports = (win, options) => [
@@ -7,13 +7,13 @@ module.exports = (win, options) => [
 		type: "checkbox",
 		checked: !!options.arrowsShortcut,
 		click: (item) => {
-            //dynamically change setting if plugin enabled
-            if (enabled()) {
-                win.webContents.send("setArrowsShortcut", item.checked);
-            } else { //fallback to usual method if disabled
-                options.arrowsShortcut = item.checked;
-                setOptions("precise-volume", options);
-            }
-        }
+			// Dynamically change setting if plugin enabled
+			if (enabled()) {
+				win.webContents.send("setArrowsShortcut", item.checked);
+			} else { // Fallback to usual method if disabled
+				options.arrowsShortcut = item.checked;
+				setOptions("precise-volume", options);
+			}
+		}
 	}
 ];

From c48260f10c80346c346b035858a61ac70e559e1b Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Sat, 17 Apr 2021 16:42:13 +0300
Subject: [PATCH 11/22] add advanced option to change volume steps

---
 config/defaults.js              | 6 ++++++
 plugins/precise-volume/front.js | 7 ++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/config/defaults.js b/config/defaults.js
index fb87e566..4b484951 100644
--- a/config/defaults.js
+++ b/config/defaults.js
@@ -45,6 +45,12 @@ const defaultConfig = {
 			enabled: false,
 			urgency: "normal",
 			unpauseNotification: false
+		},
+		"precise-volume": {
+			enabled: false,
+			steps: 1, //percentage of volume to change
+			arrowsShortcut: true, //enable ArrowUp + ArrowDown local shortcuts
+			savedVolume: undefined //plugin save volume between session here
 		}
 	},
 };
diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index d6424df1..ed0cf4c5 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -86,11 +86,12 @@ function changeVolume(increase, options) {
 	// Need to change both the slider and the actual volume
 	const videoStream = document.querySelector(".video-stream");
 	const slider = document.querySelector("#volume-slider");
-
+	
 	// Apply volume change if valid
+	const steps = options.steps / 100;
 	videoStream.volume = increase ?
-		Math.min(videoStream.volume + 0.01, 1) :
-		Math.max(videoStream.volume - 0.01, 0);
+		Math.min(videoStream.volume + steps, 1) :
+		Math.max(videoStream.volume - steps, 0);
 
 	// Save the new volume
 	saveVolume(toPercent(videoStream.volume), options);

From 10dffdbde25363a883e7f75e585745d6b6551fa7 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Mon, 19 Apr 2021 01:45:32 +0300
Subject: [PATCH 12/22] refactor + lint

---
 plugins/precise-volume/front.js | 141 ++++++++++++++++----------------
 1 file changed, 70 insertions(+), 71 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index ed0cf4c5..33ad5095 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -1,24 +1,29 @@
 const { setOptions } = require("../../config/plugins");
 const { ipcRenderer } = require("electron");
+function $(selector){ return document.querySelector(selector); }
 
 module.exports = (options) => {
 	setPlaybarOnwheel(options);
-	setupObserver(options);
+	setupSliderObserver(options);
 	setupArrowShortcuts(options);
 	firstRun(options);
 };
 
+function toPercent(volume) {
+	return Math.round(Number.parseFloat(volume) * 100);
+}
+
 function saveVolume(volume, options) {
 	options.savedVolume = volume;
 	setOptions("precise-volume", options);
 }
 
 function firstRun(options) {
-	const videoStream = document.querySelector(".video-stream");
-	const slider = document.querySelector("#volume-slider");
-
+	const videoStream = $(".video-stream");
+	const slider = $("#volume-slider");
+	// Those elements load abit after DOMContentLoaded
 	if (videoStream && slider) {
-		// Set saved volume if it pass checks
+		// Set saved volume IF it pass checks
 		if (options.savedVolume
 			&& options.savedVolume >= 0 && options.savedVolume <= 100
 			&& Math.abs(slider.value - options.savedVolume) < 5
@@ -27,7 +32,6 @@ function firstRun(options) {
 			videoStream.volume = options.savedVolume / 100;
 			slider.value = options.savedVolume;
 		}
-
 		// Set current volume as tooltip
 		setTooltip(toPercent(videoStream.volume));
 	} else {
@@ -37,13 +41,67 @@ function firstRun(options) {
 
 function setPlaybarOnwheel(options) {
 	// Add onwheel event to play bar
-	document.querySelector("ytmusic-player-bar").onwheel = event => {
+	$("ytmusic-player-bar").onwheel = event => {
 		event.preventDefault();
-		// Event.deltaY < 0 => wheel up
+		// Event.deltaY < 0 means wheel-up
 		changeVolume(event.deltaY < 0, options);
 	};
 }
 
+// (increase = false) means volume decrease
+function changeVolume(increase, options) {
+	// Need to change both the actual volume and the slider
+	const videoStream = $(".video-stream");
+	
+	// Apply volume change if valid
+	const steps = options.steps / 100;
+	videoStream.volume = increase ?
+		Math.min(videoStream.volume + steps, 1) :
+		Math.max(videoStream.volume - steps, 0);
+
+	// Save the new volume
+	saveVolume(toPercent(videoStream.volume), options);
+	// Slider value automatically rounds to multiples of 5
+	$("#volume-slider").value = options.savedVolume;
+	// Finally change tooltip to new value
+	setTooltip(options.savedVolume);
+}
+
+// Save volume + Update the volume tooltip when volume-slider is manually changed
+function setupSliderObserver(options) {
+	const sliderObserver = new MutationObserver(mutations => {
+		for (const mutation of mutations) {
+			// This checks that volume-slider was manually set
+			if (mutation.oldValue !== mutation.target.value &&
+				(!options.savedVolume || Math.abs(options.savedVolume - mutation.target.value) > 4)) {
+				// Diff>4 means it was manually set
+				setTooltip(mutation.target.value);
+				saveVolume(mutation.target.value, options);
+			}
+		}
+	});
+
+	// Observing only changes in 'value' of volume-slider
+	sliderObserver.observe($("#volume-slider"), {
+		attributeFilter: ["value"],
+		attributeOldValue: true
+	});
+}
+
+// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
+const tooltipTargets = [
+	"#volume-slider",
+	"tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar",
+	"#expand-volume-slider",
+	"#expand-volume"
+];
+
+function setTooltip(volume) {
+	for (target of tooltipTargets) {
+		$(target).title =  `${volume}%`;
+	}
+}
+
 function setupArrowShortcuts(options) {
 	// Register shortcuts if enabled
 	if (options.arrowsShortcut) {
@@ -51,10 +109,10 @@ function setupArrowShortcuts(options) {
 	}
 
 	// Change options from renderer to keep sync
-	ipcRenderer.on("setArrowsShortcut", (event, isEnabled) => {
+	ipcRenderer.on("setArrowsShortcut", (_event, isEnabled) => {
 		options.arrowsShortcut = isEnabled;
 		setOptions("precise-volume", options);
-		// Can setting without restarting app
+		// This allows changing setting without restarting app
 		if (isEnabled) {
 			addListener();
 		} else {
@@ -72,71 +130,12 @@ function setupArrowShortcuts(options) {
 
 	function callback(event) {
 		switch (event.code) {
-			case `ArrowUp`:
+			case "ArrowUp":
 				changeVolume(true, options);
 				break;
-			case `ArrowDown`:
+			case "ArrowDown":
 				changeVolume(false, options);
 				break;
 		}
 	}
 }
-
-function changeVolume(increase, options) {
-	// Need to change both the slider and the actual volume
-	const videoStream = document.querySelector(".video-stream");
-	const slider = document.querySelector("#volume-slider");
-	
-	// Apply volume change if valid
-	const steps = options.steps / 100;
-	videoStream.volume = increase ?
-		Math.min(videoStream.volume + steps, 1) :
-		Math.max(videoStream.volume - steps, 0);
-
-	// Save the new volume
-	saveVolume(toPercent(videoStream.volume), options);
-	// Slider value automatically rounds to multiples of 5
-	slider.value = options.savedVolume;
-	// Finally change tooltip to new value
-	setTooltip(options.savedVolume);
-}
-
-// Save volume + Update the volume tooltip when volume-slider is manually changed
-function setupObserver(options) {
-	const observer = new MutationObserver(mutations => {
-		for (const mutation of mutations) {
-			// This checks that volume-slider was manually set
-			if (mutation.oldValue !== mutation.target.value &&
-				(!options.savedVolume || Math.abs(options.savedVolume - mutation.target.value) > 4)) {
-				// Diff>4 means it was manually set
-				setTooltip(mutation.target.value);
-				saveVolume(mutation.target.value, options);
-			}
-		}
-	});
-
-	// Observing only changes in 'value' of volume-slider
-	observer.observe(document.querySelector("#volume-slider"), {
-		attributeFilter: ["value"],
-		attributeOldValue: true
-	});
-}
-
-// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
-const tooltipTargets = [
-	"#volume-slider",
-	"tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar",
-	"#expand-volume-slider",
-	"#expand-volume"
-];
-
-function setTooltip(volume) {
-	const tooltip = volume + "%";
-	for (target of tooltipTargets) {
-		document.querySelector(target).title = tooltip;
-	}
-}
-
-function toPercent(volume) {
-	return Math.round(Number.parseFloat(volume) * 100);
-}

From 5fa8f3ef6f913f059ed31ae80d7049c0616e4717 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Thu, 22 Apr 2021 05:34:43 +0300
Subject: [PATCH 13/22] add option for plugin to have a preload.js

---
 preload.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/preload.js b/preload.js
index 94f2a72a..ab7927fc 100644
--- a/preload.js
+++ b/preload.js
@@ -1,6 +1,6 @@
 const path = require("path");
 
-const { contextBridge, remote } = require("electron");
+const { remote } = require("electron");
 
 const config = require("./config");
 const { fileExists } = require("./plugins/utils");
@@ -8,9 +8,15 @@ const { fileExists } = require("./plugins/utils");
 const plugins = config.plugins.getEnabled();
 
 plugins.forEach(([plugin, options]) => {
-	const pluginPath = path.join(__dirname, "plugins", plugin, "actions.js");
-	fileExists(pluginPath, () => {
-		const actions = require(pluginPath).actions || {};
+	const preloadPath = path.join(__dirname, "plugins", plugin, "preload.js");
+	fileExists(preloadPath, () => {
+		const run = require(preloadPath);
+		run(options);
+	});
+
+	const actionPath = path.join(__dirname, "plugins", plugin, "actions.js");
+	fileExists(actionPath, () => {
+		const actions = require(actionPath).actions || {};
 
 		// TODO: re-enable once contextIsolation is set to true
 		// contextBridge.exposeInMainWorld(plugin + "Actions", actions);

From 021d2a8a54531355f3943e104aa2b3bce36e8d20 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Thu, 22 Apr 2021 05:34:54 +0300
Subject: [PATCH 14/22] disable native volume-slider listeners

---
 plugins/precise-volume/back.js    |  9 ++++++++-
 plugins/precise-volume/front.js   | 10 ++++++----
 plugins/precise-volume/preload.js | 28 ++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 plugins/precise-volume/preload.js

diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js
index e6b101f9..c0767535 100644
--- a/plugins/precise-volume/back.js
+++ b/plugins/precise-volume/back.js
@@ -3,8 +3,15 @@ This is used to determine if plugin is actually active
 (not if its only enabled in options)
 */
 let enabled = false;
-module.exports = () => {
+
+module.exports = (win) => {
 	enabled = true;
+
+	//did-finish-load is called after DOMContentLoaded.
+	//thats the reason the timing is controlled from main
+	win.webContents.once("did-finish-load", () => {
+		win.webContents.send("restoreAddEventListener");
+	});
 };
 
 module.exports.enabled = () => {
diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 33ad5095..91203655 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -1,6 +1,7 @@
-const { setOptions } = require("../../config/plugins");
 const { ipcRenderer } = require("electron");
-function $(selector){ return document.querySelector(selector); }
+const { setOptions } = require("../../config/plugins");
+ 
+function $(selector) { return document.querySelector(selector); }
 
 module.exports = (options) => {
 	setPlaybarOnwheel(options);
@@ -23,6 +24,7 @@ function firstRun(options) {
 	const slider = $("#volume-slider");
 	// Those elements load abit after DOMContentLoaded
 	if (videoStream && slider) {
+
 		// Set saved volume IF it pass checks
 		if (options.savedVolume
 			&& options.savedVolume >= 0 && options.savedVolume <= 100
@@ -52,7 +54,7 @@ function setPlaybarOnwheel(options) {
 function changeVolume(increase, options) {
 	// Need to change both the actual volume and the slider
 	const videoStream = $(".video-stream");
-	
+
 	// Apply volume change if valid
 	const steps = options.steps / 100;
 	videoStream.volume = increase ?
@@ -98,7 +100,7 @@ const tooltipTargets = [
 
 function setTooltip(volume) {
 	for (target of tooltipTargets) {
-		$(target).title =  `${volume}%`;
+		$(target).title = `${volume}%`;
 	}
 }
 
diff --git a/plugins/precise-volume/preload.js b/plugins/precise-volume/preload.js
new file mode 100644
index 00000000..75580d3b
--- /dev/null
+++ b/plugins/precise-volume/preload.js
@@ -0,0 +1,28 @@
+const { ipcRenderer } = require("electron");
+
+// Override specific listeners of volume-slider by modifying Element.prototype
+function overrideAddEventListener(){
+    // Events to ignore
+    const nativeEvents = ["mousewheel", "keydown", "keyup"];
+    // Save native addEventListener
+	Element.prototype._addEventListener = Element.prototype.addEventListener;
+
+	Element.prototype.addEventListener = function(type,listener,useCapture=false) {
+        if(this.tagName === "TP-YT-PAPER-SLIDER") { //tagName of #volume-slider
+            for (const eventType of nativeEvents) {
+                if (eventType === type) {
+                    return;
+                }
+            }
+        } //else
+		this._addEventListener(type,listener,useCapture);
+    };
+}
+
+module.exports = () => {
+    overrideAddEventListener();
+    // Restore the listeners after load to avoid keeping Element.prototype altered
+    ipcRenderer.once("restoreAddEventListener", () => { //called from Main to make sure page is completly loaded
+		Element.prototype.addEventListener = Element.prototype._addEventListener;
+	});
+}

From 65f682219971919b7e8bd4f15faca3ca18dea5fc Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Thu, 22 Apr 2021 14:44:37 +0300
Subject: [PATCH 15/22] Show volume slider on volume change

---
 plugins/precise-volume/front.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 91203655..24b9e44b 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -1,6 +1,6 @@
 const { ipcRenderer } = require("electron");
 const { setOptions } = require("../../config/plugins");
- 
+
 function $(selector) { return document.querySelector(selector); }
 
 module.exports = (options) => {
@@ -54,7 +54,7 @@ function setPlaybarOnwheel(options) {
 function changeVolume(increase, options) {
 	// Need to change both the actual volume and the slider
 	const videoStream = $(".video-stream");
-
+	const slider = $("#volume-slider");
 	// Apply volume change if valid
 	const steps = options.steps / 100;
 	videoStream.volume = increase ?
@@ -64,9 +64,11 @@ function changeVolume(increase, options) {
 	// Save the new volume
 	saveVolume(toPercent(videoStream.volume), options);
 	// Slider value automatically rounds to multiples of 5
-	$("#volume-slider").value = options.savedVolume;
-	// Finally change tooltip to new value
+	slider.value = options.savedVolume;
+	// Change tooltips to new value
 	setTooltip(options.savedVolume);
+	// Show volume slider on volume change
+	slider.classList.add("on-hover")
 }
 
 // Save volume + Update the volume tooltip when volume-slider is manually changed

From 0bc1b5e0d3482ee11a791fe5cb975f87497d89ca Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Thu, 22 Apr 2021 16:30:34 +0300
Subject: [PATCH 16/22] lint

---
 plugins/precise-volume/back.js    |  5 +++--
 plugins/precise-volume/front.js   |  5 ++---
 plugins/precise-volume/preload.js | 22 +++++++++++-----------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js
index c0767535..1d53e4eb 100644
--- a/plugins/precise-volume/back.js
+++ b/plugins/precise-volume/back.js
@@ -7,8 +7,9 @@ let enabled = false;
 module.exports = (win) => {
 	enabled = true;
 
-	//did-finish-load is called after DOMContentLoaded.
-	//thats the reason the timing is controlled from main
+	// youtube-music register some of the target listeners after DOMContentLoaded
+	// did-finish-load is called after all elements finished loading, including said listeners
+	// Thats the reason the timing is controlled from main
 	win.webContents.once("did-finish-load", () => {
 		win.webContents.send("restoreAddEventListener");
 	});
diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 24b9e44b..762ded10 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -24,7 +24,6 @@ function firstRun(options) {
 	const slider = $("#volume-slider");
 	// Those elements load abit after DOMContentLoaded
 	if (videoStream && slider) {
-
 		// Set saved volume IF it pass checks
 		if (options.savedVolume
 			&& options.savedVolume >= 0 && options.savedVolume <= 100
@@ -68,7 +67,7 @@ function changeVolume(increase, options) {
 	// Change tooltips to new value
 	setTooltip(options.savedVolume);
 	// Show volume slider on volume change
-	slider.classList.add("on-hover")
+	slider.classList.add("on-hover");
 }
 
 // Save volume + Update the volume tooltip when volume-slider is manually changed
@@ -95,7 +94,7 @@ function setupSliderObserver(options) {
 // Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
 const tooltipTargets = [
 	"#volume-slider",
-	"tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar",
+	"tp-yt-paper-icon-button.volume",
 	"#expand-volume-slider",
 	"#expand-volume"
 ];
diff --git a/plugins/precise-volume/preload.js b/plugins/precise-volume/preload.js
index 75580d3b..bfd6a01c 100644
--- a/plugins/precise-volume/preload.js
+++ b/plugins/precise-volume/preload.js
@@ -1,28 +1,28 @@
 const { ipcRenderer } = require("electron");
 
 // Override specific listeners of volume-slider by modifying Element.prototype
-function overrideAddEventListener(){
+function overrideAddEventListener() {
     // Events to ignore
     const nativeEvents = ["mousewheel", "keydown", "keyup"];
     // Save native addEventListener
-	Element.prototype._addEventListener = Element.prototype.addEventListener;
-
-	Element.prototype.addEventListener = function(type,listener,useCapture=false) {
-        if(this.tagName === "TP-YT-PAPER-SLIDER") { //tagName of #volume-slider
+    Element.prototype._addEventListener = Element.prototype.addEventListener;
+    // Override addEventListener to Ignore specific events in volume-slider
+    Element.prototype.addEventListener = function (type, listener, useCapture = false) {
+        if (this.tagName === "TP-YT-PAPER-SLIDER") { // tagName of #volume-slider
             for (const eventType of nativeEvents) {
                 if (eventType === type) {
                     return;
                 }
             }
-        } //else
-		this._addEventListener(type,listener,useCapture);
+        }//else
+        this._addEventListener(type, listener, useCapture);
     };
 }
 
 module.exports = () => {
     overrideAddEventListener();
-    // Restore the listeners after load to avoid keeping Element.prototype altered
+    // Restore original function after did-finish-load to avoid keeping Element.prototype altered
     ipcRenderer.once("restoreAddEventListener", () => { //called from Main to make sure page is completly loaded
-		Element.prototype.addEventListener = Element.prototype._addEventListener;
-	});
-}
+        Element.prototype.addEventListener = Element.prototype._addEventListener;
+    });
+};

From 064facb048f12a7cff8925ffc2c42c4b176aeba6 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Fri, 23 Apr 2021 01:20:03 +0300
Subject: [PATCH 17/22] remove slider on-hover after 3 seconds if !focused

---
 plugins/precise-volume/front.js | 35 ++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 762ded10..941d847d 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -4,7 +4,7 @@ const { setOptions } = require("../../config/plugins");
 function $(selector) { return document.querySelector(selector); }
 
 module.exports = (options) => {
-	setPlaybarOnwheel(options);
+	setupPlaybar(options);
 	setupSliderObserver(options);
 	setupArrowShortcuts(options);
 	firstRun(options);
@@ -40,13 +40,23 @@ function firstRun(options) {
 	}
 }
 
-function setPlaybarOnwheel(options) {
+function setupPlaybar(options) {
+	const playerbar = $("ytmusic-player-bar");
 	// Add onwheel event to play bar
-	$("ytmusic-player-bar").onwheel = event => {
+	playerbar.onwheel = event => {
 		event.preventDefault();
 		// Event.deltaY < 0 means wheel-up
 		changeVolume(event.deltaY < 0, options);
 	};
+
+	// Keep track of mouse position for showVolumeSlider()
+	playerbar.addEventListener("mouseenter", () => {
+		playerbar.classList.add("on-hover");
+	});
+
+	playerbar.addEventListener("mouseleave", () => {
+		playerbar.classList.remove("on-hover");
+	});
 }
 
 // (increase = false) means volume decrease
@@ -67,7 +77,25 @@ function changeVolume(increase, options) {
 	// Change tooltips to new value
 	setTooltip(options.savedVolume);
 	// Show volume slider on volume change
+	showVolumeSlider(slider);
+}
+
+let volumeHoverTimeoutID;
+
+function showVolumeSlider(slider) {
+	// This class display the volume slider if not in minimized mode
 	slider.classList.add("on-hover");
+	 // Reset timeout if previous one hasn't completed
+	if (volumeHoverTimeoutID) {
+		clearTimeout(volumeHoverTimeoutID);
+	}
+	// Timeout to remove volume preview after 3 seconds if playbar isn't hovered
+	volumeHoverTimeoutID = setTimeout(() => {
+		volumeHoverTimeoutID = null;
+		if (!$("ytmusic-player-bar").classList.contains("on-hover")) {
+			slider.classList.remove("on-hover");
+		}
+	}, 3000);
 }
 
 // Save volume + Update the volume tooltip when volume-slider is manually changed
@@ -132,6 +160,7 @@ function setupArrowShortcuts(options) {
 	}
 
 	function callback(event) {
+		event.preventDefault();
 		switch (event.code) {
 			case "ArrowUp":
 				changeVolume(true, options);

From 8b1bbdf3607cec7a9fe9323c69ec20aa8283b447 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Fri, 23 Apr 2021 05:29:03 +0300
Subject: [PATCH 18/22] Add Video Player Mousewheel Volume Control (if
 hide-video-player plugin is disabled)

---
 plugins/precise-volume/back.js  |  3 +++
 plugins/precise-volume/front.js | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/plugins/precise-volume/back.js b/plugins/precise-volume/back.js
index 1d53e4eb..93ebea9f 100644
--- a/plugins/precise-volume/back.js
+++ b/plugins/precise-volume/back.js
@@ -1,3 +1,5 @@
+const { isEnabled } = require("../../config/plugins");
+
 /*
 This is used to determine if plugin is actually active
 (not if its only enabled in options)
@@ -12,6 +14,7 @@ module.exports = (win) => {
 	// Thats the reason the timing is controlled from main
 	win.webContents.once("did-finish-load", () => {
 		win.webContents.send("restoreAddEventListener");
+		win.webContents.send("setupVideoPlayerVolumeMousewheel", !isEnabled("hide-video-player"));
 	});
 };
 
diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 941d847d..27efbfba 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -8,8 +8,21 @@ module.exports = (options) => {
 	setupSliderObserver(options);
 	setupArrowShortcuts(options);
 	firstRun(options);
+	ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => {
+		if (toEnable)
+			setupVideoPlayerOnwheel(options);
+	});
 };
 
+function setupVideoPlayerOnwheel(options){
+	// Add onwheel event to video player
+	$("#main-panel").onwheel = event => {
+		event.preventDefault();
+		// Event.deltaY < 0 means wheel-up
+		changeVolume(event.deltaY < 0, options);
+	};
+}
+
 function toPercent(volume) {
 	return Math.round(Number.parseFloat(volume) * 100);
 }

From d4fdced538f3124a7ac9e687492057f76ac18851 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Sun, 25 Apr 2021 02:22:08 +0300
Subject: [PATCH 19/22] addEventListener insead of .onwheel

---
 plugins/precise-volume/front.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 27efbfba..de7fd614 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -16,11 +16,11 @@ module.exports = (options) => {
 
 function setupVideoPlayerOnwheel(options){
 	// Add onwheel event to video player
-	$("#main-panel").onwheel = event => {
+	$("#main-panel").addEventListener("wheel", event => {
 		event.preventDefault();
 		// Event.deltaY < 0 means wheel-up
 		changeVolume(event.deltaY < 0, options);
-	};
+	});
 }
 
 function toPercent(volume) {
@@ -56,11 +56,11 @@ function firstRun(options) {
 function setupPlaybar(options) {
 	const playerbar = $("ytmusic-player-bar");
 	// Add onwheel event to play bar
-	playerbar.onwheel = event => {
+	playerbar.addEventListener("wheel", event => {
 		event.preventDefault();
 		// Event.deltaY < 0 means wheel-up
 		changeVolume(event.deltaY < 0, options);
-	};
+	});
 
 	// Keep track of mouse position for showVolumeSlider()
 	playerbar.addEventListener("mouseenter", () => {

From 5a77528526851807ab38a9539d20d599267a9ef7 Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Mon, 26 Apr 2021 21:01:19 +0300
Subject: [PATCH 20/22] enable global volume shortcuts in advanced config

---
 config/defaults.js              |  5 +++++
 plugins/precise-volume/front.js | 33 ++++++++++++++++++++++++++-------
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/config/defaults.js b/config/defaults.js
index 4b484951..647c2e4f 100644
--- a/config/defaults.js
+++ b/config/defaults.js
@@ -50,6 +50,11 @@ const defaultConfig = {
 			enabled: false,
 			steps: 1, //percentage of volume to change
 			arrowsShortcut: true, //enable ArrowUp + ArrowDown local shortcuts
+			globalShortcuts: {
+				enabled: false, // enable global shortcuts
+				volumeUp: "Shift+PageUp", // Keybind default can be changed
+				volumeDown: "Shift+PageDown"
+			},
 			savedVolume: undefined //plugin save volume between session here
 		}
 	},
diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index de7fd614..7e6bfa84 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -1,20 +1,30 @@
-const { ipcRenderer } = require("electron");
+const { ipcRenderer, remote } = require("electron");
+
 const { setOptions } = require("../../config/plugins");
 
 function $(selector) { return document.querySelector(selector); }
 
 module.exports = (options) => {
+
 	setupPlaybar(options);
+
 	setupSliderObserver(options);
-	setupArrowShortcuts(options);
+
+	setupLocalArrowShortcuts(options);
+
+	if (options.globalShortcuts?.enabled) {
+		setupGlobalShortcuts(options);
+	}
+
 	firstRun(options);
+	// This way the ipc listener gets cleared either way
 	ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => {
 		if (toEnable)
 			setupVideoPlayerOnwheel(options);
 	});
 };
 
-function setupVideoPlayerOnwheel(options){
+function setupVideoPlayerOnwheel(options) {
 	// Add onwheel event to video player
 	$("#main-panel").addEventListener("wheel", event => {
 		event.preventDefault();
@@ -73,13 +83,13 @@ function setupPlaybar(options) {
 }
 
 // (increase = false) means volume decrease
-function changeVolume(increase, options) {
+function changeVolume(toIncrease, options) {
 	// Need to change both the actual volume and the slider
 	const videoStream = $(".video-stream");
 	const slider = $("#volume-slider");
 	// Apply volume change if valid
 	const steps = options.steps / 100;
-	videoStream.volume = increase ?
+	videoStream.volume = toIncrease ?
 		Math.min(videoStream.volume + steps, 1) :
 		Math.max(videoStream.volume - steps, 0);
 
@@ -98,7 +108,7 @@ let volumeHoverTimeoutID;
 function showVolumeSlider(slider) {
 	// This class display the volume slider if not in minimized mode
 	slider.classList.add("on-hover");
-	 // Reset timeout if previous one hasn't completed
+	// Reset timeout if previous one hasn't completed
 	if (volumeHoverTimeoutID) {
 		clearTimeout(volumeHoverTimeoutID);
 	}
@@ -146,7 +156,16 @@ function setTooltip(volume) {
 	}
 }
 
-function setupArrowShortcuts(options) {
+function setupGlobalShortcuts(options) {
+	if (options.globalShortcuts.volumeUp) {
+		remote.globalShortcut.register((options.globalShortcuts.volumeUp), () => changeVolume(true, options));
+	}
+	if (options.globalShortcuts.volumeDown) {
+		remote.globalShortcut.register((options.globalShortcuts.volumeDown), () => changeVolume(false, options));
+	}
+}
+
+function setupLocalArrowShortcuts(options) {
 	// Register shortcuts if enabled
 	if (options.arrowsShortcut) {
 		addListener();

From 98fd6240ba457a71b5d106e8aede535f9316785a Mon Sep 17 00:00:00 2001
From: Araxeus <oaeben@gmail.com>
Date: Mon, 26 Apr 2021 21:09:42 +0300
Subject: [PATCH 21/22] update inline doc

---
 plugins/precise-volume/front.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 7e6bfa84..834c5def 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -17,6 +17,7 @@ module.exports = (options) => {
 	}
 
 	firstRun(options);
+
 	// This way the ipc listener gets cleared either way
 	ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => {
 		if (toEnable)
@@ -24,8 +25,8 @@ module.exports = (options) => {
 	});
 };
 
+/** Add onwheel event to video player */
 function setupVideoPlayerOnwheel(options) {
-	// Add onwheel event to video player
 	$("#main-panel").addEventListener("wheel", event => {
 		event.preventDefault();
 		// Event.deltaY < 0 means wheel-up
@@ -42,6 +43,7 @@ function saveVolume(volume, options) {
 	setOptions("precise-volume", options);
 }
 
+/** Restore saved volume and setup tooltip */
 function firstRun(options) {
 	const videoStream = $(".video-stream");
 	const slider = $("#volume-slider");
@@ -63,9 +65,10 @@ function firstRun(options) {
 	}
 }
 
+/** Add onwheel event to play bar and also track if play bar is hovered*/
 function setupPlaybar(options) {
 	const playerbar = $("ytmusic-player-bar");
-	// Add onwheel event to play bar
+
 	playerbar.addEventListener("wheel", event => {
 		event.preventDefault();
 		// Event.deltaY < 0 means wheel-up
@@ -82,7 +85,7 @@ function setupPlaybar(options) {
 	});
 }
 
-// (increase = false) means volume decrease
+/** if (toIncrease = false) then volume decrease */
 function changeVolume(toIncrease, options) {
 	// Need to change both the actual volume and the slider
 	const videoStream = $(".video-stream");
@@ -121,7 +124,7 @@ function showVolumeSlider(slider) {
 	}, 3000);
 }
 
-// Save volume + Update the volume tooltip when volume-slider is manually changed
+/** Save volume + Update the volume tooltip when volume-slider is manually changed */
 function setupSliderObserver(options) {
 	const sliderObserver = new MutationObserver(mutations => {
 		for (const mutation of mutations) {
@@ -166,7 +169,6 @@ function setupGlobalShortcuts(options) {
 }
 
 function setupLocalArrowShortcuts(options) {
-	// Register shortcuts if enabled
 	if (options.arrowsShortcut) {
 		addListener();
 	}
@@ -175,7 +177,7 @@ function setupLocalArrowShortcuts(options) {
 	ipcRenderer.on("setArrowsShortcut", (_event, isEnabled) => {
 		options.arrowsShortcut = isEnabled;
 		setOptions("precise-volume", options);
-		// This allows changing setting without restarting app
+		// This allows changing this setting without restarting app
 		if (isEnabled) {
 			addListener();
 		} else {

From e9d7ddebb2d18fe0d0ef32424cb1f8777a70bbd6 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 27 Apr 2021 23:51:29 +0300
Subject: [PATCH 22/22] defensive code

Co-authored-by: th-ch <th-ch@users.noreply.github.com>
---
 plugins/precise-volume/front.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 834c5def..a1b30fe4 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -91,7 +91,7 @@ function changeVolume(toIncrease, options) {
 	const videoStream = $(".video-stream");
 	const slider = $("#volume-slider");
 	// Apply volume change if valid
-	const steps = options.steps / 100;
+	const steps = (options.steps || 1) / 100;
 	videoStream.volume = toIncrease ?
 		Math.min(videoStream.volume + steps, 1) :
 		Math.max(videoStream.volume - steps, 0);