add volume hud

plugins/precise-volume/back.js

@@ -1,5 +1,3 @@
-const { isEnabled } = require("../../config/plugins");
-
 /*
 This is used to determine if plugin is actually active
 (not if its only enabled in options)
@@ -9,12 +7,8 @@ let enabled = false;
 module.exports = (win) => {
 	enabled = true;
 
-	// 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");
-		win.webContents.send("setupVideoPlayerVolumeMousewheel", !isEnabled("hide-video-player"));
+		win.webContents.send("did-finish-load");
 	});
 };
 

plugins/precise-volume/front.js

@@ -16,15 +16,45 @@ module.exports = (options) => {
 		setupGlobalShortcuts(options);
 	}
 
-	firstRun(options);
-
-	// This way the ipc listener gets cleared either way
-	ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => {
-		if (toEnable)
+	ipcRenderer.once("did-finish-load", () => {
+		injectVolumeHud();
+		// if hideVideo is disabled
+		if ($("#main-panel")?.computedStyleMap().get("display").value !== "none") {
 			setupVideoPlayerOnwheel(options);
+		}
 	});
+
+	firstRun(options);
 };
 
+function injectVolumeHud() {
+    const position = `top: 18px; right: 60px; z-index: 999; position: absolute;`;
+    const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1.5s"
+    $(".center-content.ytmusic-nav-bar").insertAdjacentHTML('beforeend', `<span id="volumeHud" style="${position + mainStyle}"></span>`)
+}
+
+let hudFadeTimeout;
+
+function showVolumeHud(volume) {
+    let volumeHud = $('#volumeHud');
+    if (!volumeHud) {
+		console.error("volumeHud Not Found !");
+		return;
+	}
+
+    volumeHud.textContent = volume + '%';
+    volumeHud.style.opacity = 1;
+
+    if (hudFadeTimeout) {
+		clearTimeout(hudFadeTimeout);
+	}
+
+    hudFadeTimeout = setTimeout(() => {
+        volumeHud.style.opacity = 0;
+        hudFadeTimeout = null;
+    }, 2000);
+}
+
 /** Add onwheel event to video player */
 function setupVideoPlayerOnwheel(options) {
 	$("#main-panel").addEventListener("wheel", event => {
@@ -102,8 +132,10 @@ function changeVolume(toIncrease, options) {
 	slider.value = options.savedVolume;
 	// Change tooltips to new value
 	setTooltip(options.savedVolume);
-	// Show volume slider on volume change
+	// Show volume slider
 	showVolumeSlider(slider);
+	// Show volume HUD
+	showVolumeHud(options.savedVolume);
 }
 
 let volumeHoverTimeoutID;

plugins/precise-volume/preload.js

@@ -25,7 +25,7 @@ function overrideAddEventListener() {
 module.exports = () => {
     overrideAddEventListener();
     // 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
+    ipcRenderer.once("did-finish-load", () => { // Called from main to make sure page is completly loaded
         Element.prototype.addEventListener = Element.prototype._addEventListener;
         Element.prototype._addEventListener = undefined;
         ignored = undefined;