migrate from remote to ipc

index.js

@@ -2,8 +2,6 @@
 const path = require("path");
 
 const electron = require("electron");
-const remote = require('@electron/remote/main');
-remote.initialize();
 const enhanceWebRequest = require("electron-better-web-request").default;
 const is = require("electron-is");
 const unhandled = require("electron-unhandled");
@@ -15,6 +13,7 @@ const { fileExists, injectCSS } = require("./plugins/utils");
 const { isTesting } = require("./utils/testing");
 const { setUpTray } = require("./tray");
 const { setupSongInfo } = require("./providers/song-info");
+const { setupAppControls } = require("./providers/app-controls");
 
 // Catch errors and log them
 unhandled({
@@ -138,7 +137,6 @@ function createMainWindow() {
 			: "default",
 		autoHideMenuBar: config.get("options.hideMenu"),
 	});
-	remote.enable(win.webContents);
 
 	if (windowPosition) {
 		const { x, y } = windowPosition;
@@ -249,6 +247,7 @@ app.once("browser-window-created", (event, win) => {
 
 	setupSongInfo(win);
 	loadPlugins(win);
+	setupAppControls();
 
 	win.webContents.on("did-fail-load", (
 		_event,

plugins/downloader/youtube-dl.js

@@ -3,7 +3,6 @@ const { join } = require("path");
 
 const Mutex = require("async-mutex").Mutex;
 const { ipcRenderer } = require("electron");
-const remote = require('@electron/remote');
 const is = require("electron-is");
 const filenamify = require("filenamify");
 
@@ -137,7 +136,7 @@ const toMP3 = async (
 			safeVideoName + "." + extension
 		);
 
-		const folder = options.downloadFolder || remote.app.getPath("downloads");
+		const folder = options.downloadFolder || await ipcRenderer.invoke('getDownloadsFolder');
 		const name = metadata.title
 			? `${metadata.artist ? `${metadata.artist} - ` : ""}${metadata.title}`
 			: videoName;

plugins/precise-volume/back.js

@@ -4,6 +4,17 @@ This is used to determine if plugin is actually active
 */
 let enabled = false;
 
-module.exports = () => enabled = true;
+const { globalShortcut } = require('electron');
+
+module.exports = (win, options) => {
+    enabled = true;
+
+    if (options.globalShortcuts?.volumeUp) {
+		globalShortcut.register((options.globalShortcuts.volumeUp), () => win.webContents.send('changeVolume', true));
+	}
+	if (options.globalShortcuts?.volumeDown) {
+		globalShortcut.register((options.globalShortcuts.volumeDown), () => win.webContents.send('changeVolume', false));
+	}
+}
 
 module.exports.enabled = () => enabled;

plugins/precise-volume/front.js

@@ -1,22 +1,24 @@
 const { ipcRenderer } = require("electron");
-const { globalShortcut } = require('@electron/remote');
 
 const { setOptions, setMenuOptions, isEnabled } = require("../../config/plugins");
 
 function $(selector) { return document.querySelector(selector); }
-let api;
 
-module.exports = (options) => {
+let api, options;
+
+module.exports = (_options) => {
+	options = _options;
 	document.addEventListener('apiLoaded', e => {
 		api = e.detail;
-		firstRun(options);
+		ipcRenderer.on('changeVolume', (_, toIncrease) => changeVolume(toIncrease));
+		firstRun();
 	}, { once: true, passive: true })
 };
 
 module.exports.moveVolumeHud = moveVolumeHud;
 
 /** Restore saved volume and setup tooltip */
-function firstRun(options) {
+function firstRun() {
 	if (typeof options.savedVolume === "number") {
 		// Set saved volume as tooltip
 		setTooltip(options.savedVolume);
@@ -26,16 +28,16 @@ function firstRun(options) {
 		}
 	}
 
-	setupPlaybar(options);
+	setupPlaybar();
 
-	setupLocalArrowShortcuts(options);
+	setupLocalArrowShortcuts();
 
-	setupGlobalShortcuts(options);
+	setupGlobalShortcuts();
 
 	const noVid = $("#main-panel")?.computedStyleMap().get("display").value === "none";
 	injectVolumeHud(noVid);
 	if (!noVid) {
-		setupVideoPlayerOnwheel(options);
+		setupVideoPlayerOnwheel();
 		if (!isEnabled('video-toggle')) {
 			//video-toggle handles hud positioning on its own
 			const videoMode = () => api.getPlayerResponse().videoDetails?.musicVideoType !== 'MUSIC_VIDEO_TYPE_ATV';
@@ -98,22 +100,22 @@ function showVolumeHud(volume) {
 }
 
 /** Add onwheel event to video player */
-function setupVideoPlayerOnwheel(options) {
+function setupVideoPlayerOnwheel() {
 	$("#main-panel").addEventListener("wheel", event => {
 		event.preventDefault();
 		// Event.deltaY < 0 means wheel-up
-		changeVolume(event.deltaY < 0, options);
+		changeVolume(event.deltaY < 0);
 	});
 }
 
-function saveVolume(volume, options) {
+function saveVolume(volume) {
 	options.savedVolume = volume;
-	writeOptions(options);
+	writeOptions();
 }
 
 //without this function it would rewrite config 20 time when volume change by 20
 let writeTimeout;
-function writeOptions(options) {
+function writeOptions() {
 	if (writeTimeout) clearTimeout(writeTimeout);
 
 	writeTimeout = setTimeout(() => {
@@ -123,13 +125,13 @@ function writeOptions(options) {
 }
 
 /** Add onwheel event to play bar and also track if play bar is hovered*/
-function setupPlaybar(options) {
+function setupPlaybar() {
 	const playerbar = $("ytmusic-player-bar");
 
 	playerbar.addEventListener("wheel", event => {
 		event.preventDefault();
 		// Event.deltaY < 0 means wheel-up
-		changeVolume(event.deltaY < 0, options);
+		changeVolume(event.deltaY < 0);
 	});
 
 	// Keep track of mouse position for showVolumeSlider()
@@ -141,11 +143,11 @@ function setupPlaybar(options) {
 		playerbar.classList.remove("on-hover");
 	});
 
-	setupSliderObserver(options);
+	setupSliderObserver();
 }
 
 /** Save volume + Update the volume tooltip when volume-slider is manually changed */
-function setupSliderObserver(options) {
+function setupSliderObserver() {
 	const sliderObserver = new MutationObserver(mutations => {
 		for (const mutation of mutations) {
 			// This checks that volume-slider was manually set
@@ -153,7 +155,7 @@ function setupSliderObserver(options) {
 				(typeof options.savedVolume !== "number" || Math.abs(options.savedVolume - mutation.target.value) > 4)) {
 				// Diff>4 means it was manually set
 				setTooltip(mutation.target.value);
-				saveVolume(mutation.target.value, options);
+				saveVolume(mutation.target.value);
 			}
 		}
 	});
@@ -166,7 +168,7 @@ function setupSliderObserver(options) {
 }
 
 /** if (toIncrease = false) then volume decrease */
-function changeVolume(toIncrease, options) {
+function changeVolume(toIncrease) {
 	// Apply volume change if valid
 	const steps = Number(options.steps || 1);
 	api.setVolume(toIncrease ?
@@ -174,10 +176,10 @@ function changeVolume(toIncrease, options) {
 		Math.max(api.getVolume() - steps, 0));
 
 	// Save the new volume
-	saveVolume(api.getVolume(), options);
+	saveVolume(api.getVolume());
 
 	// change slider position (important)
-	updateVolumeSlider(options);
+	updateVolumeSlider();
 
 	// Change tooltips to new value
 	setTooltip(options.savedVolume);
@@ -187,7 +189,7 @@ function changeVolume(toIncrease, options) {
 	showVolumeHud(options.savedVolume);
 }
 
-function updateVolumeSlider(options) {
+function updateVolumeSlider() {
 	// Slider value automatically rounds to multiples of 5
 	$("#volume-slider").value = options.savedVolume > 0 && options.savedVolume < 5 ?
 		5 : options.savedVolume;
@@ -226,26 +228,17 @@ function setTooltip(volume) {
 	}
 }
 
-function setupGlobalShortcuts(options) {
+function setupLocalArrowShortcuts() {
-	if (options.globalShortcuts.volumeUp) {
-		globalShortcut.register((options.globalShortcuts.volumeUp), () => changeVolume(true, options));
-	}
-	if (options.globalShortcuts.volumeDown) {
-		globalShortcut.register((options.globalShortcuts.volumeDown), () => changeVolume(false, options));
-	}
-}
-
-function setupLocalArrowShortcuts(options) {
 	if (options.arrowsShortcut) {
 		window.addEventListener('keydown', (event) => {
 			switch (event.code) {
 				case "ArrowUp":
 					event.preventDefault();
-					changeVolume(true, options);
+					changeVolume(true);
 					break;
 				case "ArrowDown":
 					event.preventDefault();
-					changeVolume(false, options);
+					changeVolume(false);
 					break;
 			}
 		});

plugins/quality-changer/back.js

@@ -0,0 +1,15 @@
+const { ipcMain, dialog } = require("electron");
+
+module.exports = () => {
+	ipcMain.handle('qualityChanger', async (_, qualityLabels, currentIndex) => {
+         return await dialog.showMessageBox({
+            type: "question",
+            buttons: qualityLabels,
+            defaultId: currentIndex,
+            title: "Choose Video Quality",
+            message: "Choose Video Quality:",
+            detail: `Current Quality: ${qualityLabels[currentIndex]}`,
+            cancelId: -1
+        })
+    })
+};

plugins/quality-changer/front.js

@@ -1,5 +1,5 @@
 const { ElementFromFile, templatePath } = require("../utils");
-const { dialog } = require('@electron/remote');
+const { ipcRenderer } = require("electron");
 
 function $(selector) { return document.querySelector(selector); }
 
@@ -21,21 +21,15 @@ function setup(event) {
         if (api.getPlayerState() === 2) api.playVideo();
         else if (api.getPlayerState() === 1) api.pauseVideo();
 
-        const currentIndex = api.getAvailableQualityLevels().indexOf(api.getPlaybackQuality())
+        const qualityLevels = api.getAvailableQualityLevels();
 
-        dialog.showMessageBox({
+        const currentIndex = qualityLevels.indexOf(api.getPlaybackQuality());
-            type: "question",
+
-            buttons: api.getAvailableQualityLabels(),
+        ipcRenderer.invoke('qualityChanger', api.getAvailableQualityLabels(), currentIndex).then(promise => {
-            defaultId: currentIndex,
-            title: "Choose Video Quality",
-            message: "Choose Video Quality:",
-            detail: `Current Quality: ${api.getAvailableQualityLabels()[currentIndex]}`,
-            cancelId: -1
-        }).then((promise) => {
             if (promise.response === -1) return;
-            const newQuality = api.getAvailableQualityLevels()[promise.response];
+            const newQuality = qualityLevels[promise.response];
             api.setPlaybackQualityRange(newQuality);
             api.setPlaybackQuality(newQuality)
-        })
+        });
     }
 }

preload.js

@@ -1,12 +1,11 @@
 const path = require("path");
 
-const remote = require('@electron/remote');
-
 const config = require("./config");
 const { fileExists } = require("./plugins/utils");
 const setupFrontLogger = require("./providers/front-logger");
 const setupSongInfo = require("./providers/song-info-front");
 const { setupSongControls } = require("./providers/song-controls-front");
+const { ipcRenderer } = require("electron");
 
 const plugins = config.plugins.getEnabled();
 
@@ -53,8 +52,7 @@ document.addEventListener("DOMContentLoaded", () => {
 	setupFrontLogger();
 
 	// Add action for reloading
-	global.reload = () =>
+	global.reload = () => ipcRenderer.send('reload');
-		remote.getCurrentWindow().webContents.loadURL(config.get("url"));
 
 	// Blocks the "Are You Still There?" popup by setting the last active time to Date.now every 15min
 	setInterval(() => window._lact = Date.now(), 900000);

providers/app-controls.js

@@ -1,6 +1,19 @@
-const app = require("electron").app || require('@electron/remote').app;
+const is = require("electron-is");
+
+const { app, BrowserWindow, ipcMain, ipcRenderer } = require("electron");
+const config = require("../config");
 
 module.exports.restart = () => {
-    app.relaunch(); 
+    is.main() ? restart() : ipcRenderer.send('restart');
- 	app.exit(); 
 };
+
+module.exports.setupAppControls = () => {
+    ipcMain.on('restart', restart);
+    ipcMain.handle('getDownloadsFolder', () => app.getPath("downloads"));
+    ipcMain.on('reload', () => BrowserWindow.getFocusedWindow().webContents.loadURL(config.get("url")));
+}
+
+function restart() {
+    app.relaunch();
+    app.exit();
+}