Merge branch 'master' into fix-restart-on-config-change

plugins/downloader/menu.js

@@ -5,6 +5,7 @@ const { dialog, ipcMain } = require("electron");
 const is = require("electron-is");
 const ytpl = require("ytpl");
 const chokidar = require('chokidar');
+const filenamify = require('filenamify');
 
 const { setMenuOptions } = require("../../config/plugins");
 const { sendError } = require("./back");
@@ -94,10 +95,10 @@ async function downloadPlaylist(givenUrl, win, options) {
 		sendError(win, e);
 		return;
 	}
-	const playlistTitle = playlist.title;
+	const safePlaylistTitle = filenamify(playlist.title, {replacement: ' '});
 
 	const folder = getFolder(options.downloadFolder);
-	const playlistFolder = join(folder, playlistTitle);
+	const playlistFolder = join(folder, safePlaylistTitle);
 	if (existsSync(playlistFolder)) {
 		sendError(
 			win,
@@ -111,13 +112,13 @@ async function downloadPlaylist(givenUrl, win, options) {
 		type: "info",
 		buttons: ["OK"],
 		title: "Started Download",
-		message: `Downloading Playlist "${playlistTitle}"`,
+		message: `Downloading Playlist "${playlist.title}"`,
 		detail: `(${playlist.items.length} songs)`,
 	});
 
 	if (is.dev()) {
 		console.log(
-			`Downloading playlist "${playlistTitle}" - ${playlist.items.length} songs (${playlistId})`
+			`Downloading playlist "${playlist.title}" - ${playlist.items.length} songs (${playlistId})`
 		);
 	}
 
@@ -143,7 +144,7 @@ async function downloadPlaylist(givenUrl, win, options) {
 		win.webContents.send(
 			"downloader-download-playlist",
 			song.url,
-			playlistTitle,
+			safePlaylistTitle,
 			options
 		);
 	});

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, setMenuOptions } = require("../../config/plugins");
+const { setOptions, setMenuOptions, 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;