Merge branch 'master' into interactive-notifications

config/defaults.js

@@ -36,6 +36,13 @@ const defaultConfig = {
 			ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
 			downloadFolder: undefined, // Custom download folder (absolute path)
 		},
+		"last-fm": {
+			enabled: false,
+			api_root: "http://ws.audioscrobbler.com/2.0/",
+			api_key: "04d76faaac8726e60988e14c105d421a", // api key registered by @semvis123
+			secret: "a5d2a36fdf64819290f6982481eaffa2",
+			suffixesToRemove: [' - Topic', 'VEVO'] // removes suffixes of the artist name, for better recognition
+		},
 		discord: {
 			enabled: false,
 			activityTimoutEnabled: true, // if enabled, the discord rich presence gets cleared when music paused after the time specified below
@@ -46,6 +53,17 @@ const defaultConfig = {
 			unpauseNotification: false,
 			urgency: "normal", //has effect only on Linux 
 			interactive: false //has effect only on Windows
+		},
+		"precise-volume": {
+			enabled: false,
+			steps: 1, //percentage of volume to change
+			arrowsShortcut: true, //enable ArrowUp + ArrowDown local shortcuts
+			globalShortcuts: {
+				enabled: false, // enable global shortcuts
+				volumeUp: "Shift+PageUp", // Keybind default can be changed
+				volumeDown: "Shift+PageDown"
+			},
+			savedVolume: undefined //plugin save volume between session here
 		}
 	},
 };

package.json

@@ -62,37 +62,38 @@
 		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.20.1",
+		"@cliqz/adblocker-electron": "^1.20.4",
 		"@ffmpeg/core": "^0.8.5",
 		"@ffmpeg/ffmpeg": "^0.9.7",
-		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.1",
+		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.9.0",
 		"async-mutex": "^0.3.1",
 		"browser-id3-writer": "^4.4.0",
 		"custom-electron-titlebar": "^3.2.6",
 		"discord-rpc": "^3.2.0",
-		"downloads-folder": "^3.0.1",
 		"electron-debug": "^3.2.0",
 		"electron-is": "^3.0.0",
 		"electron-localshortcut": "^3.2.1",
-		"electron-store": "^7.0.2",
+		"electron-store": "^7.0.3",
 		"electron-unhandled": "^3.0.2",
-		"electron-updater": "^4.3.6",
+		"electron-updater": "^4.3.8",
 		"filenamify": "^4.2.0",
+		"md5": "^2.3.0",
 		"node-fetch": "^2.6.1",
-		"node-notifier": "^9.0.1",
-		"ytdl-core": "^4.4.5",
-		"ytpl": "^2.0.5"
+    "node-notifier": "^9.0.1",
+		"open": "^8.0.3",
+		"ytdl-core": "^4.5.0",
+		"ytpl": "^2.1.1"
 	},
 	"devDependencies": {
-		"electron": "^11.2.3",
-		"electron-builder": "^22.9.1",
+		"electron": "^11.4.2",
+		"electron-builder": "^22.10.5",
 		"electron-devtools-installer": "^3.1.1",
 		"electron-icon-maker": "0.0.5",
 		"get-port": "^5.1.1",
 		"jest": "^26.6.3",
 		"rimraf": "^3.0.2",
 		"spectron": "^13.0.0",
-		"xo": "^0.37.1"
+		"xo": "^0.38.2"
 	},
 	"resolutions": {
 		"yargs-parser": "18.1.3"

plugins/discord/back.js

@@ -15,10 +15,13 @@ module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
 	const registerCallback = getSongInfo(win);
 
 	// If the page is ready, register the callback
-	win.on("ready-to-show", () => {
-		rpc.on("ready", () => {
+	win.once("ready-to-show", () => {
+		rpc.once("ready", () => {
 			// Register the callback
 			registerCallback((songInfo) => {
+				if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
+					return;
+				}
 				// Song information changed, so lets update the rich presence
 				const activityInfo = {
 					details: songInfo.title,
@@ -36,8 +39,7 @@ module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
 					activityInfo.smallImageText = "idle/paused";
 					// Set start the timer so the activity gets cleared after a while if enabled
 					if (activityTimoutEnabled)
-						clearActivity = setTimeout(()=>rpc.clearActivity(), activityTimoutTime||10,000);
-
+						clearActivity = setTimeout(()=>rpc.clearActivity(), activityTimoutTime||10000);
 				} else {
 					// stop the clear activity timout
 					clearTimeout(clearActivity);
@@ -53,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/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/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);
 }

preload.js

@@ -1,6 +1,6 @@
 const path = require("path");
 
-const { contextBridge, remote } = require("electron");
+const { remote } = require("electron");
 
 const config = require("./config");
 const { fileExists } = require("./plugins/utils");
@@ -8,9 +8,15 @@ const { fileExists } = require("./plugins/utils");
 const plugins = config.plugins.getEnabled();
 
 plugins.forEach(([plugin, options]) => {
-	const pluginPath = path.join(__dirname, "plugins", plugin, "actions.js");
-	fileExists(pluginPath, () => {
-		const actions = require(pluginPath).actions || {};
+	const preloadPath = path.join(__dirname, "plugins", plugin, "preload.js");
+	fileExists(preloadPath, () => {
+		const run = require(preloadPath);
+		run(options);
+	});
+
+	const actionPath = path.join(__dirname, "plugins", plugin, "actions.js");
+	fileExists(actionPath, () => {
+		const actions = require(actionPath).actions || {};
 
 		// TODO: re-enable once contextIsolation is set to true
 		// contextBridge.exposeInMainWorld(plugin + "Actions", actions);

providers/song-info.js

@@ -5,6 +5,7 @@ const fetch = require("node-fetch");
 // This selects the progress bar, used for current progress
 const progressSelector = "#progress-bar";
 
+
 // Grab the progress using the selector
 const getProgress = async (win) => {
 	// Get current value of the progressbar element