Merge branch 'master' into discord-timeout-time-prompt

plugins/lyrics-genius/style.css

@@ -9,4 +9,5 @@
 #contents.genius-lyrics {
     font-size: 1vw;
     opacity: 0.9;
+    text-align: center;
 }

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) {

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;