Merge remote-tracking branch 'upstream/master' into custom-electron-prompt

plugins/discord/back.js

@@ -55,9 +55,6 @@ module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
 		});
 
 		// Startup the rpc client
-		rpc.login({
-				clientId,
-			})
-			.catch(console.error);
+		rpc.login({ clientId }).catch(console.error);
 	});
 };

plugins/downloader/back.js

@@ -1,6 +1,8 @@
+const { writeFileSync } = require("fs");
 const { join } = require("path");
 
-const { dialog } = require("electron");
+const ID3Writer = require("browser-id3-writer");
+const { dialog, ipcMain } = require("electron");
 
 const getSongInfo = require("../../providers/song-info");
 const { injectCSS, listenAction } = require("../utils");
@@ -38,6 +40,34 @@ function handle(win) {
 				console.log("Unknown action: " + action);
 		}
 	});
+
+	ipcMain.on("add-metadata", (event, filePath, songBuffer, currentMetadata) => {
+		let fileBuffer = songBuffer;
+		const songMetadata = { ...metadata, ...currentMetadata };
+
+		try {
+			const coverBuffer = songMetadata.image.toPNG();
+			const writer = new ID3Writer(songBuffer);
+
+			// Create the metadata tags
+			writer
+				.setFrame("TIT2", songMetadata.title)
+				.setFrame("TPE1", [songMetadata.artist])
+				.setFrame("APIC", {
+					type: 3,
+					data: coverBuffer,
+					description: "",
+				});
+			writer.addTag();
+			fileBuffer = Buffer.from(writer.arrayBuffer);
+		} catch (error) {
+			sendError(win, error);
+		}
+
+		writeFileSync(filePath, fileBuffer);
+		// Notify the youtube-dl file
+		event.reply("add-metadata-done");
+	});
 }
 
 module.exports = handle;

plugins/downloader/front.js

@@ -44,7 +44,7 @@ global.download = () => {
 		.getAttribute("href");
 	videoUrl = !videoUrl
 		? global.songInfo.url || window.location.href
-		: baseUrl + videoUrl;
+		: baseUrl + "/" + videoUrl;
 
 	downloadVideoToMP3(
 		videoUrl,

plugins/downloader/utils.js

@@ -1,4 +1,5 @@
-const downloadsFolder = require("downloads-folder");
+const electron = require("electron");
 
-module.exports.getFolder = (customFolder) => customFolder || downloadsFolder();
+module.exports.getFolder = (customFolder) =>
+	customFolder || (electron.app || electron.remote.app).getPath("downloads");
 module.exports.defaultMenuDownloadLabel = "Download playlist";

plugins/downloader/youtube-dl.js

@@ -1,9 +1,7 @@
 const { randomBytes } = require("crypto");
-const { writeFileSync } = require("fs");
 const { join } = require("path");
 
 const Mutex = require("async-mutex").Mutex;
-const ID3Writer = require("browser-id3-writer");
 const { ipcRenderer } = require("electron");
 const is = require("electron-is");
 const filenamify = require("filenamify");
@@ -126,35 +124,19 @@ const toMP3 = async (
 			: videoName;
 		const filename = filenamify(name + "." + extension, {
 			replacement: "_",
+			maxLength: 255,
 		});
 
 		const filePath = join(folder, subfolder, filename);
 		const fileBuffer = ffmpeg.FS("readFile", safeVideoName + "." + extension);
 
 		// Add the metadata
-		try {
-			const writer = new ID3Writer(fileBuffer);
-			if (metadata.image) {
-				const coverBuffer = metadata.image.toPNG();
-
-				// Create the metadata tags
-				writer
-					.setFrame("TIT2", metadata.title)
-					.setFrame("TPE1", [metadata.artist])
-					.setFrame("APIC", {
-						type: 3,
-						data: coverBuffer,
-						description: "",
-					});
-				writer.addTag();
-			}
-
-			writeFileSync(filePath, Buffer.from(writer.arrayBuffer));
-		} catch (error) {
-			sendError(error);
-		} finally {
-			reinit();
-		}
+		sendFeedback("Adding metadata…");
+		ipcRenderer.send("add-metadata", filePath, fileBuffer, {
+			artist: metadata.artist,
+			title: metadata.title,
+		});
+		ipcRenderer.once("add-metadata-done", reinit);
 	} catch (e) {
 		sendError(e);
 	} finally {

plugins/in-app-menu/back.js

@@ -7,8 +7,8 @@ const config = require("../../config");
 const { setApplicationMenu } = require("../../menu");
 const { injectCSS } = require("../utils");
 
-//check that menu doesn't get created twice
-let done = false;
+//tracks menu visibility
+let visible = true;
 // win hook for fixing menu
 let win;
 
@@ -16,7 +16,7 @@ const originalBuildMenu = Menu.buildFromTemplate;
 // This function natively gets called on all submenu so no more reason to use recursion
 Menu.buildFromTemplate = (template) => {
 	// Fix checkboxes and radio buttons
-	updateCheckboxesAndRadioButtons(win, template);
+	updateTemplate(template);
 
 	// return as normal
 	return originalBuildMenu(template);
@@ -28,47 +28,54 @@ module.exports = (winImport) => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
 	injectCSS(win.webContents, path.join(__dirname, "style.css"));
 
-	win.on("ready-to-show", () => {
-		// (apparently ready-to-show is called twice)
-		if (done) {
-			return;
-		}
-		done = true;
+	win.once("ready-to-show", () => {
 
 		setApplicationMenu(win);
 
 		//register keyboard shortcut && hide menu if hideMenu is enabled
 		if (config.get("options.hideMenu")) {
-			switchMenuVisibility(win);
 			electronLocalshortcut.register(win, "Esc", () => {
-				switchMenuVisibility(win);
+				switchMenuVisibility();
 			});
 		}
 	});
+
+	//set menu visibility on load
+	win.webContents.once("did-finish-load", () => {
+		// fix bug with menu not applying on start when no internet connection available
+		setMenuVisibility(!config.get("options.hideMenu"));
+	});
 };
 
-let visible = true;
-function switchMenuVisibility(win) {
-	visible = !visible;
+function switchMenuVisibility() {
+	setMenuVisibility(!visible);
+}
+
+function setMenuVisibility(value) {
+	visible = value;
 	win.webContents.send("updateMenu", visible);
 }
 
-function checkCheckbox(win, item) {
-	//check item
-	item.checked = !item.checked;
-	//update menu (closes it)
-	win.webContents.send("updateMenu", true);
+function updateCheckboxesAndRadioButtons(item, isRadio, hasSubmenu) {
+	if (!isRadio) {
+		//fix checkbox
+		item.checked = !item.checked;
+	}
+	//update menu if radio / hasSubmenu
+	if (isRadio || hasSubmenu) {
+		win.webContents.send("updateMenu", true);
+	}
 }
 
 // Update checkboxes/radio buttons
-function updateCheckboxesAndRadioButtons(win, template) {
+function updateTemplate(template) {
 	for (let item of template) {
 		// Change onClick of checkbox+radio
 		if ((item.type === "checkbox" || item.type === "radio") && !item.fixed) {
-			let originalOnclick = item.click;
+			const originalOnclick = item.click;
 			item.click = (itemClicked) => {
 				originalOnclick(itemClicked);
-				checkCheckbox(win, itemClicked);
+				updateCheckboxesAndRadioButtons(itemClicked, item.type === "radio", item.hasSubmenu);
 			};
 			item.fixed = true;
 		}

plugins/in-app-menu/style.css

@@ -8,36 +8,46 @@
 .menubar-menu-container {
 	overflow-y: visible !important;
 }
+
 /* fixes scrollbar positioning relative to nav bar  */
 #nav-bar-background.ytmusic-app-layout {
 	right: 15px !important;
 }
+
 /* remove window dragging for nav bar (conflict with titlebar drag) */
 ytmusic-nav-bar,
 .tab-titleiron-icon,
 ytmusic-pivot-bar-item-renderer {
-	-webkit-app-region: unset;
-}
-
-/* Move navBar downwards and make it opaque */
-ytmusic-app-layout {
-	--ytmusic-nav-bar-height: 120px;
-}
-
-ytmusic-search-box.ytmusic-nav-bar {
-	margin-top: 29px;
+	-webkit-app-region: unset !important;
 }
 
+/* navbar background black */
 .center-content.ytmusic-nav-bar {
 	background: #030303;
 }
-yt-page-navigation-progress,
-#progress.yt-page-navigation-progress,
-ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_]
-	#header.ytmusic-item-section-renderer,
-ytmusic-header-renderer.ytmusic-search-page {
-	top: 90px !important;
+
+/* move up item selectrion renderer by 15 px */
+ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
+	top: 75 !important;
 }
+
+/* fix weird positioning in search screen*/
+ytmusic-header-renderer.ytmusic-search-page {
+	position: unset !important;
+}
+
+/* Move navBar downwards */
+ytmusic-app-layout > [slot="nav-bar"],
+#nav-bar-background.ytmusic-app-layout {
+	top: 17px !important;
+}
+
+/* fix page progress bar position*/
+yt-page-navigation-progress,
+#progress.yt-page-navigation-progress {
+	top: 30px !important;
+}
+
 /* Custom scrollbar */
 ::-webkit-scrollbar {
 	width: 12px;
@@ -56,13 +66,13 @@ ytmusic-header-renderer.ytmusic-search-page {
 	background-clip: padding-box;
 	border: 2px solid rgba(0, 0, 0, 0);
 
-	background: rgb(49, 0, 0);
+	background: #3a3a3a;
 	border-radius: 100px;
 	-moz-border-radius: 100px;
 	-webkit-border-radius: 100px;
 }
 ::-webkit-scrollbar-thumb:vertical:active {
-	background: rgb(56, 0, 0); /* Some darker color when you click it */
+	background: #4d4c4c; /* Some darker color when you click it */
 	border-radius: 100px;
 	-moz-border-radius: 100px;
 	-webkit-border-radius: 100px;

plugins/last-fm/back.js

@@ -0,0 +1,175 @@
+const fetch = require('node-fetch');
+const md5 = require('md5');
+const open = require("open");
+const { setOptions } = require('../../config/plugins');
+const getSongInfo = require('../../providers/song-info');
+const defaultConfig = require('../../config/defaults');
+
+const cleanupArtistName = (config, artist) => {
+	// removes the suffixes of the artist name for more recognition by last.fm
+	const { suffixesToRemove } = config;
+	if (suffixesToRemove === undefined) return artist;
+
+	for (suffix of suffixesToRemove) {
+		artist = artist.replace(suffix, '');
+	}
+	return artist;
+}
+
+const createFormData = params => {
+	// creates the body for in the post request
+	const formData = new URLSearchParams();
+	for (key in params) {
+		formData.append(key, params[key]);
+	}
+	return formData;
+}
+const createQueryString = (params, api_sig) => {
+	// creates a querystring
+	const queryData = [];
+	params.api_sig = api_sig;
+	for (key in params) {
+		queryData.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`);
+	}
+	return '?'+queryData.join('&');
+}
+
+const createApiSig = (params, secret) => { 
+	// this function creates the api signature, see: https://www.last.fm/api/authspec
+	const keys = [];
+	for (key in params) {
+		keys.push(key);
+	}
+	keys.sort();
+	let sig = '';
+	for (key of keys) {
+		if (String(key) === 'format')
+			continue
+		sig += `${key}${params[key]}`;
+	}
+	sig += secret;
+	sig = md5(sig);
+	return sig;
+}
+
+const createToken = async ({ api_key, api_root, secret }) => {
+	// creates and stores the auth token
+	const data = {
+		method: 'auth.gettoken',
+		api_key: api_key,
+		format: 'json'
+	};
+	const api_sig = createApiSig(data, secret);
+	let response = await fetch(`${api_root}${createQueryString(data, api_sig)}`);
+	response = await response.json();
+	return response?.token;
+}
+
+const authenticate = async config => {
+	// asks the user for authentication
+	config.token = await createToken(config);
+	setOptions('last-fm', config);
+	open(`https://www.last.fm/api/auth/?api_key=${config.api_key}&token=${config.token}`);
+	return config;
+}
+
+const getAndSetSessionKey = async config => {
+	// get and store the session key
+	const data = {
+		api_key: config.api_key,
+		format: 'json',
+		method: 'auth.getsession',
+		token: config.token,
+	};
+	const api_sig = createApiSig(data, config.secret);
+	let res = await fetch(`${config.api_root}${createQueryString(data, api_sig)}`);
+	res = await res.json();
+	if (res.error)
+		await authenticate(config);
+	config.session_key = res?.session?.key;
+	setOptions('last-fm', config);
+	return config;
+}
+
+const postSongDataToAPI = async (songInfo, config, data) => {
+	// this sends a post request to the api, and adds the common data
+	if (!config.session_key)
+		await getAndSetSessionKey(config);
+
+	const postData = {
+		track: songInfo.title,
+		duration: songInfo.songDuration,
+		artist: songInfo.artist,
+		api_key: config.api_key,
+		sk: config.session_key,
+		format: 'json',
+		...data,
+	};
+
+	postData.api_sig = createApiSig(postData, config.secret);
+	fetch('https://ws.audioscrobbler.com/2.0/', {method: 'POST', body: createFormData(postData)})
+		.catch(res => {
+			if (res.response.data.error == 9) {
+				// session key is invalid, so remove it from the config and reauthenticate
+				config.session_key = undefined;
+				setOptions('last-fm', config);
+				authenticate(config);
+			}
+		});
+}
+
+const addScrobble = (songInfo, config) => {
+	// this adds one scrobbled song to last.fm
+	const data = {
+		method: 'track.scrobble',
+		timestamp: ~~((Date.now() - songInfo.elapsedSeconds) / 1000),
+	};
+	postSongDataToAPI(songInfo, config, data);
+}
+
+const setNowPlaying = (songInfo, config) => {
+	// this sets the now playing status in last.fm
+	const data = {
+		method: 'track.updateNowPlaying',
+	};
+	postSongDataToAPI(songInfo, config, data);
+}
+
+
+// this will store the timeout that will trigger addScrobble
+let scrobbleTimer = undefined;
+
+const lastfm = async (win, config) => {
+	const registerCallback = getSongInfo(win);
+
+	if (!config.api_root || !config.suffixesToRemove) {
+		// settings are not present, creating them with the default values
+		config = defaultConfig.plugins['last-fm'];
+		config.enabled = true;
+		setOptions('last-fm', config);
+	}
+
+	if (!config.session_key) {
+		// not authenticated
+		config = await getAndSetSessionKey(config);
+	}
+
+	registerCallback( songInfo => {
+		// set remove the old scrobble timer
+		clearTimeout(scrobbleTimer);
+		// make the artist name a bit cleaner
+		songInfo.artist = cleanupArtistName(config, songInfo.artist);
+		if (!songInfo.isPaused) {
+			setNowPlaying(songInfo, config);
+			// scrobble when the song is half way through, or has passed the 4 minute mark
+			const scrobbleTime = Math.min(Math.ceil(songInfo.songDuration / 2), 4 * 60);
+			if (scrobbleTime > songInfo.elapsedSeconds) {
+				// scrobble still needs to happen
+				const timeToWait = (scrobbleTime - songInfo.elapsedSeconds) * 1000;
+				scrobbleTimer = setTimeout(addScrobble, timeToWait, songInfo, config);
+			}
+		}
+	});
+}
+
+module.exports = lastfm;

plugins/notifications/back.js

@@ -1,18 +1,17 @@
 const { Notification } = require("electron");
+const is = require("electron-is");
 const getSongInfo = require("../../providers/song-info");
+const { notificationImage } = require("./utils");
+
+const { setupInteractive, notifyInteractive } = require("./interactive")
 
 const notify = (info, options) => {
-	let notificationImage = "assets/youtube-music.png";
-
-	if (info.image) {
-		notificationImage = info.image.resize({ height: 256, width: 256 });
-	}
 
 	// Fill the notification with content
 	const notification = {
 		title: info.title || "Playing",
 		body: info.artist,
-		icon: notificationImage,
+		icon: notificationImage(info),
 		silent: true,
 		urgency: options.urgency,
 	};
@@ -25,10 +24,15 @@ const notify = (info, options) => {
 };
 
 module.exports = (win, options) => {
+	const isInteractive = is.windows() && options.interactive;
+	//setup interactive notifications for windows
+	if (isInteractive) {
+		setupInteractive(win, options.unpauseNotification);
+	}
 	const registerCallback = getSongInfo(win);
 	let oldNotification;
 	let oldURL = "";
-	win.on("ready-to-show", () => {
+	win.once("ready-to-show", () => {
 		// Register the callback for new song information
 		registerCallback(songInfo => {
 			// on pause - reset url? and skip notification
@@ -42,10 +46,14 @@ module.exports = (win, options) => {
 			// If url isn't the same as last one - send notification
 			if (songInfo.url !== oldURL) {
 				oldURL = songInfo.url;
-				// Close the old notification
-				oldNotification?.close();
-				// This fixes a weird bug that would cause the notification to be updated instead of showing
-				setTimeout(()=>{ oldNotification = notify(songInfo, options) }, 10);
+				if (isInteractive) {
+					notifyInteractive(songInfo);
+				} else {
+					// Close the old notification
+					oldNotification?.close();
+					// This fixes a weird bug that would cause the notification to be updated instead of showing
+					setTimeout(() => { oldNotification = notify(songInfo, options) }, 10);
+				}
 			}
 		});
 	});

plugins/notifications/interactive.js

@@ -0,0 +1,93 @@
+const { notificationImage, icons } = require("./utils");
+const getSongControls = require('../../providers/song-controls');
+const notifier = require("node-notifier");
+
+//store song controls reference on launch
+let controls;
+let notificationOnPause;
+
+//Save controls and onPause option
+module.exports.setupInteractive = (win, unpauseNotification) => {
+    const { playPause, next, previous } = getSongControls(win);
+    controls = { playPause, next, previous };
+
+    notificationOnPause = unpauseNotification;
+
+    win.webContents.once("closed", () => {
+        deleteNotification()
+    });
+}
+
+//delete old notification
+let toDelete;
+function deleteNotification() {
+    if (toDelete !== undefined) {
+        // To remove the notification it has to be done this way
+        const removeNotif = Object.assign(toDelete, {
+            remove: toDelete.id
+        })
+        notifier.notify(removeNotif)
+
+        toDelete = undefined;
+    }
+}
+
+//New notification
+module.exports.notifyInteractive = function sendToaster(songInfo) {
+    deleteNotification();
+    //download image and get path
+    let imgSrc = notificationImage(songInfo, true);
+    toDelete = {
+        //app id undefined - will break buttons
+        title: songInfo.title || "Playing",
+        message: songInfo.artist,
+        id: parseInt(Math.random() * 1000000, 10),
+        icon: imgSrc,
+        actions: [
+            icons.previous,
+            songInfo.isPaused ? icons.play : icons.pause,
+            icons.next
+        ],
+        sound: false,
+    };
+    //send notification
+    notifier.notify(
+        toDelete,
+        (err, data) => {
+            // Will also wait until notification is closed.
+            if (err) {
+                console.log(`ERROR = ${err.toString()}\n DATA = ${data}`);
+            }
+            switch (data) {
+                //buttons
+                case icons.previous.normalize():
+                    controls.previous();
+                    return;
+                case icons.next.normalize():
+                    controls.next();
+                    return;
+                case icons.play.normalize():
+                    controls.playPause();
+                    // dont delete notification on play/pause
+                    toDelete = undefined;
+                    //manually send notification if not sending automatically
+                    if (!notificationOnPause) {
+                        songInfo.isPaused = false;
+                        sendToaster(songInfo);
+                    }
+                    return;
+                case icons.pause.normalize():
+                    controls.playPause();
+                    songInfo.isPaused = true;
+                    toDelete = undefined;
+                    sendToaster(songInfo);
+                    return;
+                //Native datatype
+                case "dismissed":
+                case "timeout":
+                    deleteNotification();
+            }
+        }
+
+    );
+}

plugins/notifications/menu.js

@@ -1,19 +1,30 @@
-const {urgencyLevels, setUrgency, setUnpause} = require("./utils");
+const { urgencyLevels, setOption } = require("./utils");
+const is = require("electron-is");
 
 module.exports = (win, options) => [
-	{
-		label: "Notification Priority",
-		submenu: urgencyLevels.map(level => ({
-			label: level.name,
-			type: "radio",
-			checked: options.urgency === level.value,
-			click: () => setUrgency(options, level.value)
-		})),
-	},
+	...(is.linux() ?
+		[{
+			label: "Notification Priority",
+			submenu: urgencyLevels.map(level => ({
+				label: level.name,
+				type: "radio",
+				checked: options.urgency === level.value,
+				click: () => setOption(options, "urgency", level.value)
+			})),
+		}] :
+		[]),
+	...(is.windows() ?
+		[{
+			label: "Interactive Notifications",
+			type: "checkbox",
+			checked: options.interactive,
+			click: (item) => setOption(options, "interactive", item.checked)
+		}] :
+		[]),
 	{
 		label: "Show notification on unpause",
 		type: "checkbox",
 		checked: options.unpauseNotification,
-		click: (item) => setUnpause(options, item.checked)
-	}
+		click: (item) => setOption(options, "unpauseNotification", item.checked)
+	},
 ];

plugins/notifications/utils.js

@@ -1,19 +1,56 @@
-const {setOptions} = require("../../config/plugins");
+const { setOptions } = require("../../config/plugins");
+const path = require("path");
+const { app } = require("electron");
+const fs = require("fs");
+
+const icon = "assets/youtube-music.png";
+const tempIcon = path.join(app.getPath("userData"), "tempIcon.png");
+
+module.exports.icons = {
+	play: "\u{1405}", // ᐅ
+	pause: "\u{2016}", // ‖
+	next: "\u{1433}", // ᐳ
+	previous: "\u{1438}" // ᐸ
+}
+
+module.exports.setOption = (options, option, value) => {
+	options[option] = value;
+	setOptions("notifications", options)
+}
 
 module.exports.urgencyLevels = [
-	{name: "Low", value: "low"},
-	{name: "Normal", value: "normal"},
-	{name: "High", value: "critical"},
+	{ name: "Low", value: "low" },
+	{ name: "Normal", value: "normal" },
+	{ name: "High", value: "critical" },
 ];
-module.exports.setUrgency = (options, level) => {
-	options.urgency = level
-	setOption(options)
-};
-module.exports.setUnpause = (options, value) => {
-	options.unpauseNotification = value
-	setOption(options)
+
+module.exports.notificationImage = function (songInfo, saveIcon = false) {
+	//return local path to temp icon
+	if (saveIcon && !!songInfo.image) {
+		try {
+			fs.writeFileSync(tempIcon,
+				centerNativeImage(songInfo.image)
+					.toPNG()
+			);
+		} catch (err) {
+			console.log(`Error writing song icon to disk:\n${err.toString()}`)
+			return icon;
+		}
+		return tempIcon;
+	}
+	//else: return image
+	return songInfo.image
+		? centerNativeImage(songInfo.image)
+		: icon
 };
 
-let setOption = options => {
-	setOptions("notifications", options)
-};
+function centerNativeImage(nativeImage) {
+	const tempImage = nativeImage.resize({ height: 256 });
+	const margin = Math.max((tempImage.getSize().width - 256), 0);
+
+	return tempImage.crop({
+		x: Math.round(margin / 2),
+		y: 0,
+		width: 256, height: 256
+	})
+}

plugins/precise-volume/back.js

@@ -0,0 +1,23 @@
+const { isEnabled } = require("../../config/plugins");
+
+/*
+This is used to determine if plugin is actually active
+(not if its only enabled in options)
+*/
+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"));
+	});
+};
+
+module.exports.enabled = () => {
+	return enabled;
+};

plugins/precise-volume/front.js

@@ -0,0 +1,207 @@
+const { ipcRenderer, remote } = require("electron");
+
+const { setOptions } = require("../../config/plugins");
+
+function $(selector) { return document.querySelector(selector); }
+
+module.exports = (options) => {
+
+	setupPlaybar(options);
+
+	setupSliderObserver(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);
+	});
+};
+
+/** Add onwheel event to video player */
+function setupVideoPlayerOnwheel(options) {
+	$("#main-panel").addEventListener("wheel", event => {
+		event.preventDefault();
+		// Event.deltaY < 0 means wheel-up
+		changeVolume(event.deltaY < 0, options);
+	});
+}
+
+function toPercent(volume) {
+	return Math.round(Number.parseFloat(volume) * 100);
+}
+
+function saveVolume(volume, options) {
+	options.savedVolume = volume;
+	setOptions("precise-volume", options);
+}
+
+/** Restore saved volume and setup tooltip */
+function firstRun(options) {
+	const videoStream = $(".video-stream");
+	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
+			&& Math.abs(slider.value - options.savedVolume) < 5
+			// If plugin was disabled and volume changed then diff>4
+		) {
+			videoStream.volume = options.savedVolume / 100;
+			slider.value = options.savedVolume;
+		}
+		// Set current volume as tooltip
+		setTooltip(toPercent(videoStream.volume));
+	} else {
+		setTimeout(firstRun, 500, options); // Try again in 500 milliseconds
+	}
+}
+
+/** Add onwheel event to play bar and also track if play bar is hovered*/
+function setupPlaybar(options) {
+	const playerbar = $("ytmusic-player-bar");
+
+	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", () => {
+		playerbar.classList.add("on-hover");
+	});
+
+	playerbar.addEventListener("mouseleave", () => {
+		playerbar.classList.remove("on-hover");
+	});
+}
+
+/** if (toIncrease = false) then volume decrease */
+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 || 1) / 100;
+	videoStream.volume = toIncrease ?
+		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;
+	// 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 */
+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",
+	"#expand-volume-slider",
+	"#expand-volume"
+];
+
+function setTooltip(volume) {
+	for (target of tooltipTargets) {
+		$(target).title = `${volume}%`;
+	}
+}
+
+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) {
+	if (options.arrowsShortcut) {
+		addListener();
+	}
+
+	// Change options from renderer to keep sync
+	ipcRenderer.on("setArrowsShortcut", (_event, isEnabled) => {
+		options.arrowsShortcut = isEnabled;
+		setOptions("precise-volume", options);
+		// This allows changing this setting without restarting app
+		if (isEnabled) {
+			addListener();
+		} else {
+			removeListener();
+		}
+	});
+
+	function addListener() {
+		window.addEventListener('keydown', callback);
+	}
+
+	function removeListener() {
+		window.removeEventListener("keydown", callback);
+	}
+
+	function callback(event) {
+		event.preventDefault();
+		switch (event.code) {
+			case "ArrowUp":
+				changeVolume(true, options);
+				break;
+			case "ArrowDown":
+				changeVolume(false, options);
+				break;
+		}
+	}
+}

plugins/precise-volume/menu.js

@@ -0,0 +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) => {
+			// 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);
+			}
+		}
+	}
+];

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;
+    // 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);
+    };
+}
+
+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
+        Element.prototype.addEventListener = Element.prototype._addEventListener;
+    });
+};

plugins/taskbar-mediacontrol/back.js

@@ -2,57 +2,53 @@ const getSongControls = require('../../providers/song-controls');
 const getSongInfo = require('../../providers/song-info');
 const path = require('path');
 
+let controls;
+let currentSongInfo;
+
 module.exports = win => {
-	win.hide = function () {
-		win.minimize();
-		win.setSkipTaskbar(true);
-	};
-
-	const show = win.show;
-	win.show = function () {
-		win.restore();
-		win.focus();
-		win.setSkipTaskbar(false);
-		show.apply(win);
-	};
-
-	win.isVisible = function () {
-		return !win.isMinimized();
-	};
-
 	const registerCallback = getSongInfo(win);
-	const {playPause, next, previous} = getSongControls(win);
+	const { playPause, next, previous } = getSongControls(win);
+	controls = { playPause, next, previous };
 
-	// If the page is ready, register the callback
-	win.on('ready-to-show', () => {
-		registerCallback(songInfo => {
-			// Wait for song to start before setting thumbar
-			if (songInfo.title === '') {
-				return;
-			}
-
-			// Win32 require full rewrite of components
-			win.setThumbarButtons([
-				{
-					tooltip: 'Previous',
-					icon: get('backward.png'),
-					click() {previous(win.webContents);}
-				}, {
-					tooltip: 'Play/Pause',
-					// Update icon based on play state
-					icon: songInfo.isPaused ? get('play.png') : get('pause.png'),
-					click() {playPause(win.webContents);}
-				}, {
-					tooltip: 'Next',
-					icon: get('forward.png'),
-					click() {next(win.webContents);}
-				}
-			]);
-		});
+	registerCallback(songInfo => {
+		//update currentsonginfo for win.on('show')
+		currentSongInfo = songInfo;
+		// update thumbar
+		setThumbar(win, songInfo);
 	});
+
+	// need to set thumbar again after win.show 
+	win.on("show", () => {
+		setThumbar(win, currentSongInfo)
+	})
 };
 
+function setThumbar(win, songInfo) {
+	// Wait for song to start before setting thumbar
+	if (!songInfo?.title) {
+		return;
+	}
+
+	// Win32 require full rewrite of components
+	win.setThumbarButtons([
+		{
+			tooltip: 'Previous',
+			icon: get('backward.png'),
+			click() { controls.previous(win.webContents); }
+		}, {
+			tooltip: 'Play/Pause',
+			// Update icon based on play state
+			icon: songInfo.isPaused ? get('play.png') : get('pause.png'),
+			click() { controls.playPause(win.webContents); }
+		}, {
+			tooltip: 'Next',
+			icon: get('forward.png'),
+			click() { controls.next(win.webContents); }
+		}
+	]);
+}
+
 // Util
 function get(file) {
-	return path.join(__dirname,"assets", file);
+	return path.join(__dirname, "assets", file);
 }

plugins/touchbar/back.js

@@ -63,7 +63,7 @@ module.exports = (win) => {
 	const { playPause, next, previous, like, dislike } = getSongControls(win);
 
 	// If the page is ready, register the callback
-	win.on("ready-to-show", () => {
+	win.once("ready-to-show", () => {
 		controls = [previous, playPause, next, like, dislike];
 
 		// Register the callback

plugins/utils.js

@@ -43,7 +43,7 @@ module.exports.fileExists = (path, callbackIfExists) => {
 };
 
 module.exports.injectCSS = (webContents, filepath, cb = undefined) => {
-	webContents.on("did-finish-load", async () => {
+	webContents.once("did-finish-load", async () => {
 		await webContents.insertCSS(fs.readFileSync(filepath, "utf8"));
 		if (cb) {
 			cb();