From 02081d82724019a31ba923c19df2b37e0027cbea Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Sun, 23 Jan 2022 01:05:22 +0200
Subject: [PATCH] fix precise-volume hud positioning

---
 plugins/precise-volume/front.js | 19 ++++++++++++++++++-
 plugins/video-toggle/front.js   | 13 ++++---------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/plugins/precise-volume/front.js b/plugins/precise-volume/front.js
index 33c9e8c1..a5356dec 100644
--- a/plugins/precise-volume/front.js
+++ b/plugins/precise-volume/front.js
@@ -1,7 +1,7 @@
 const { ipcRenderer } = require("electron");
 const { globalShortcut } = require('@electron/remote');
 
-const { setOptions } = require("../../config/plugins");
+const { setOptions, isEnabled } = require("../../config/plugins");
 
 function $(selector) { return document.querySelector(selector); }
 let api;
@@ -13,6 +13,8 @@ module.exports = (options) => {
 	}, { once: true, passive: true })
 };
 
+module.exports.moveVolumeHud = moveVolumeHud;
+
 /** Restore saved volume and setup tooltip */
 function firstRun(options) {
 	if (typeof options.savedVolume === "number") {
@@ -34,6 +36,11 @@ function firstRun(options) {
 	injectVolumeHud(noVid);
 	if (!noVid) {
 		setupVideoPlayerOnwheel(options);
+		if (!isEnabled('video-toggle')) {
+			//video-toggle handles hud positioning on its own
+			const videoMode = () => api.getPlayerResponse().videoDetails?.musicVideoType !== 'MUSIC_VIDEO_TYPE_ATV';
+			$("video").addEventListener("srcChanged", () => moveVolumeHud(videoMode()));
+		}
 	}
 
 	// Change options from renderer to keep sync
@@ -61,6 +68,16 @@ function injectVolumeHud(noVid) {
 	}
 }
 
+let hudMoveTimeout;
+function moveVolumeHud(showVideo) {
+	clearTimeout(hudMoveTimeout);
+	const volumeHud = $('#volumeHud');
+	if (!volumeHud) return;
+	hudMoveTimeout = setTimeout(() => {
+		volumeHud.style.top = showVideo ? `${($('ytmusic-player').clientHeight - $('video').clientHeight) / 2}px` : 0;
+	}, 250)
+}
+
 let hudFadeTimeout;
 
 function showVolumeHud(volume) {
diff --git a/plugins/video-toggle/front.js b/plugins/video-toggle/front.js
index 1c35ce4a..1226f640 100644
--- a/plugins/video-toggle/front.js
+++ b/plugins/video-toggle/front.js
@@ -1,6 +1,8 @@
 const { ElementFromFile, templatePath } = require("../utils");
 
-const { setOptions } = require("../../config/plugins");
+const { setOptions, isEnabled } = require("../../config/plugins");
+
+const moveVolumeHud = isEnabled("precise-volume") ? require("../precise-volume/front").moveVolumeHud : ()=>{};
 
 function $(selector) { return document.querySelector(selector); }
 
@@ -39,7 +41,7 @@ function setup(e) {
         changeDisplay(e.target.checked);
         setOptions("video-toggle", options);
     })
-  
+
     video.addEventListener('srcChanged', videoStarted);
 
     observeThumbnail();
@@ -89,13 +91,6 @@ function forcePlaybackMode() {
     playbackModeObserver.observe(player, { attributeFilter: ["playback-mode"] });
 }
 
-// if precise volume plugin is enabled, move its hud to be on top of the video
-function moveVolumeHud(showVideo) {
-    const volumeHud = $('#volumeHud');
-    if (volumeHud)
-        volumeHud.style.top = showVideo ? `${(player.clientHeight - video.clientHeight) / 2}px` : 0;
-}
-
 function observeThumbnail() {
     const playbackModeObserver = new MutationObserver(mutations => {
         if (!player.videoMode_) return;