Bump version to 1.15.0

Switch from spectron to playwright to fix tests

config/defaults.js

@@ -36,6 +36,7 @@ const defaultConfig = {
 			enabled: false,
 			ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
 			downloadFolder: undefined, // Custom download folder (absolute path)
+			preset: "mp3",
 		},
 		"last-fm": {
 			enabled: false,

index.js

@@ -2,6 +2,8 @@
 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");
@@ -24,8 +26,9 @@ const app = electron.app;
 app.commandLine.appendSwitch(
 	"js-flags",
 	// WebAssembly flags
-	"--experimental-wasm-threads --experimental-wasm-bulk-memory"
+	"--experimental-wasm-threads"
 );
+app.commandLine.appendSwitch("enable-features", "SharedArrayBuffer"); // Required for downloader
 app.allowRendererProcessReuse = true; // https://github.com/electron/electron/issues/18397
 if (config.get("options.disableHardwareAcceleration")) {
 	if (is.dev()) {
@@ -98,7 +101,6 @@ function createMainWindow() {
 			preload: path.join(__dirname, "preload.js"),
 			nodeIntegrationInSubFrames: true,
 			nativeWindowOpen: true, // window.open return Window object(like in regular browsers), not BrowserWindowProxy
-			enableRemoteModule: true,
 			affinity: "main-window", // main window, and addition windows should work in one process
 			...(isTesting()
 				? {
@@ -116,6 +118,7 @@ function createMainWindow() {
 			: "default",
 		autoHideMenuBar: config.get("options.hideMenu"),
 	});
+	remote.enable(win.webContents);
 	if (windowPosition) {
 		const { x, y } = windowPosition;
 		win.setPosition(x, y);
@@ -163,6 +166,31 @@ function createMainWindow() {
 }
 
 app.once("browser-window-created", (event, win) => {
+	// User agents are from https://developers.whatismybrowser.com/useragents/explore/
+	const originalUserAgent = win.webContents.userAgent;
+	const userAgents = {
+		mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 12.1; rv:95.0) Gecko/20100101 Firefox/95.0",
+		windows: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
+		linux: "Mozilla/5.0 (Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0",
+	}
+
+	const updatedUserAgent = 
+		is.macOS() ? userAgents.mac :
+		is.windows() ? userAgents.windows :
+		userAgents.linux;
+
+	win.webContents.userAgent = updatedUserAgent;
+	app.userAgentFallback = updatedUserAgent;
+
+	win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
+		// this will only happen if login failed, and "retry" was pressed
+		if (win.webContents.getURL().startsWith("https://accounts.google.com") && details.url.startsWith("https://accounts.google.com")){
+			details.requestHeaders["User-Agent"] = originalUserAgent;
+		}
+		cb({ requestHeaders: details.requestHeaders });
+	});
+
+
 	setupSongInfo(win);
 	loadPlugins(win);
 
@@ -197,31 +225,6 @@ app.once("browser-window-created", (event, win) => {
 		event.preventDefault();
 	});
 
-	win.webContents.on("will-navigate", (_, url) => {
-		if (url.startsWith("https://accounts.google.com")) {
-			// Force user-agent "Firefox Windows" for Google OAuth to work
-			// From https://github.com/firebase/firebase-js-sdk/issues/2478#issuecomment-571356751
-			// Only set on accounts.google.com, otherwise querySelectors in preload scripts fail (?)
-			// Uses custom user agent to Google alert with a correct device type (https://github.com/th-ch/youtube-music/issues/327)
-			// User agents are from https://developers.whatismybrowser.com/useragents/explore/
-			const userAgents = {
-				mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0",
-				windows: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0",
-				linux: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0",
-			}
-			
-			const userAgent = 
-				is.macOS() ? userAgents.mac :
-				is.windows() ? userAgents.windows :
-				userAgents.linux;
-
-			win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
-				details.requestHeaders["User-Agent"] = userAgent;
-				cb({ requestHeaders: details.requestHeaders });
-			});
-		}
-	});
-
 	win.webContents.on(
 		"new-window",
 		(e, url, frameName, disposition, options) => {

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.14.0",
+	"version": "1.15.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -37,11 +37,20 @@
 				"deb",
 				"rpm"
 			]
+		},
+		"snap": {
+			"slots": [
+				{
+					"mpris": {
+						"interface": "mpris"
+					}
+				}
+			]
 		}
 	},
 	"scripts": {
 		"test": "jest",
-		"start": "electron .",
+		"start": "NODE_OPTIONS= electron .",
 		"start:debug": "ELECTRON_ENABLE_LOGGING=1 electron .",
 		"icon": "rimraf assets/generated && electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
 		"generate:package": "node utils/generate-package-json.js",
@@ -63,14 +72,15 @@
 		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.22.6",
+		"@cliqz/adblocker-electron": "^1.23.1",
+		"@electron/remote": "^2.0.1",
 		"@ffmpeg/core": "^0.10.0",
 		"@ffmpeg/ffmpeg": "^0.10.0",
 		"async-mutex": "^0.3.2",
 		"browser-id3-writer": "^4.4.0",
-		"custom-electron-prompt": "^1.2.0",
 		"chokidar": "^3.5.2",
-		"custom-electron-titlebar": "^3.2.7",
+		"custom-electron-prompt": "^1.4.0",
+		"custom-electron-titlebar": "^3.2.9",
 		"discord-rpc": "^3.2.0",
 		"electron-better-web-request": "^1.0.1",
 		"electron-debug": "^3.2.0",
@@ -78,24 +88,24 @@
 		"electron-localshortcut": "^3.2.1",
 		"electron-store": "^7.0.3",
 		"electron-unhandled": "^3.0.2",
-		"electron-updater": "^4.4.6",
+		"electron-updater": "^4.6.3",
 		"filenamify": "^4.3.0",
+		"hark": "^1.2.3",
 		"md5": "^2.3.0",
 		"mpris-service": "^2.1.2",
-		"node-fetch": "^2.6.2",
+		"node-fetch": "^2.6.6",
 		"node-notifier": "^9.0.1",
-		"ytdl-core": "^4.9.1",
+		"ytdl-core": "^4.9.2",
 		"ytpl": "^2.2.3"
 	},
 	"devDependencies": {
-		"electron": "^12.2.2",
+		"electron": "^16.0.5",
 		"electron-builder": "^22.10.5",
 		"electron-devtools-installer": "^3.1.1",
 		"electron-icon-maker": "0.0.5",
-		"get-port": "^5.1.1",
 		"jest": "^27.3.1",
+		"playwright": "^1.17.1",
 		"rimraf": "^3.0.2",
-		"spectron": "^14.0.0",
 		"xo": "^0.45.0"
 	},
 	"resolutions": {

plugins/blur-nav-bar/style.css

@@ -1,8 +1,10 @@
-#nav-bar-background, #header.ytmusic-item-section-renderer {
-    background: rgba(0, 0, 0, 0.3) !important;
-    backdrop-filter: blur(18px) !important;
+#nav-bar-background,
+#header.ytmusic-item-section-renderer,
+ytmusic-tabs {
+	background: rgba(0, 0, 0, 0.3) !important;
+	backdrop-filter: blur(8px) !important;
 }
 
 #nav-bar-divider {
-    display: none !important;
+	display: none !important;
 }

plugins/disable-autoplay/front.js

@@ -1,7 +1,14 @@
 module.exports = () => {
-	document.addEventListener('apiLoaded', () => {
-		document.querySelector('video').addEventListener('loadeddata', e => {
-			e.target.pause();
+	document.addEventListener('apiLoaded', apiEvent => {
+		apiEvent.detail.addEventListener('videodatachange', name => {
+			if (name === 'dataloaded') {
+				apiEvent.detail.pauseVideo();
+				document.querySelector('video').ontimeupdate = e => {
+					e.target.pause();
+				}
+			} else {
+				document.querySelector('video').ontimeupdate = null;
+		   }
 		})
 	}, { once: true, passive: true })
 };

plugins/discord/back.js

@@ -1,6 +1,6 @@
 const Discord = require("discord-rpc");
 const { dev } = require("electron-is");
-const { dialog } = require("electron");
+const { dialog, app } = require("electron");
 
 const registerCallback = require("../../providers/song-info");
 
@@ -70,7 +70,7 @@ let clearActivity;
  */
 let updateActivity;
 
-module.exports = (win, {activityTimoutEnabled, activityTimoutTime, listenAlong}) => {
+module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong }) => {
 	window = win;
 	// We get multiple events
 	// Next song: PAUSE(n), PAUSE(n+1), PLAY(n+1)
@@ -103,7 +103,7 @@ module.exports = (win, {activityTimoutEnabled, activityTimoutTime, listenAlong})
 			type: 2, // Listening, addressed in https://github.com/discordjs/RPC/pull/149
 			details: songInfo.title,
 			state: songInfo.artist,
-			largeImageKey: "logo",
+			largeImageKey: songInfo.imageSrc,
 			largeImageText: [
 				songInfo.uploadDate,
 				songInfo.views.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " views",
@@ -136,7 +136,7 @@ module.exports = (win, {activityTimoutEnabled, activityTimoutTime, listenAlong})
 		registerCallback(updateActivity);
 		connect();
 	});
-	win.on("close", () => module.exports.clear());
+	app.on('window-all-closed', module.exports.clear)
 };
 
 module.exports.clear = () => {

plugins/downloader/menu.js

@@ -1,25 +1,23 @@
 const { existsSync, mkdirSync } = require("fs");
 const { join } = require("path");
-const { URL } = require("url");
 
-const { dialog } = require("electron");
+const { dialog, ipcMain } = require("electron");
 const is = require("electron-is");
 const ytpl = require("ytpl");
 const chokidar = require('chokidar');
 
 const { setOptions } = require("../../config/plugins");
-const registerCallback = require("../../providers/song-info");
 const { sendError } = require("./back");
-const { defaultMenuDownloadLabel, getFolder } = require("./utils");
+const { defaultMenuDownloadLabel, getFolder, presets } = require("./utils");
 
 let downloadLabel = defaultMenuDownloadLabel;
-let metadataURL = undefined;
+let playingPlaylistId = undefined;
 let callbackIsRegistered = false;
 
 module.exports = (win, options) => {
 	if (!callbackIsRegistered) {
-		registerCallback((info) => {
-			metadataURL = info.url;
+		ipcMain.on("video-src-changed", async (_, data) => {
+			playingPlaylistId = JSON.parse(data)?.videoDetails?.playlistId;
 		});
 		callbackIsRegistered = true;
 	}
@@ -28,17 +26,17 @@ module.exports = (win, options) => {
 		{
 			label: downloadLabel,
 			click: async () => {
-				const currentURL = metadataURL || win.webContents.getURL();
-				const playlistID = new URL(currentURL).searchParams.get("list");
-				if (!playlistID) {
+				const currentPagePlaylistId = new URL(win.webContents.getURL()).searchParams.get("list");
+				const playlistId = currentPagePlaylistId || playingPlaylistId;
+				if (!playlistId) {
 					sendError(win, new Error("No playlist ID found"));
 					return;
 				}
 
-				console.log(`trying to get playlist ID: '${playlistID}'`);
+				console.log(`trying to get playlist ID: '${playlistId}'`);
 				let playlist;
 				try {
-					playlist = await ytpl(playlistID, {
+					playlist = await ytpl(playlistId, {
 						limit: options.playlistMaxItems || Infinity,
 					});
 				} catch (e) {
@@ -111,5 +109,17 @@ module.exports = (win, options) => {
 				} // else = user pressed cancel
 			},
 		},
+		{
+			label: "Presets",
+			submenu: Object.keys(presets).map((preset) => ({
+				label: preset,
+				type: "radio",
+				click: () => {
+					options.preset = preset;
+					setOptions("downloader", options);
+				},
+				checked: options.preset === preset || presets[preset] === undefined,
+			})),
+		},
 	];
 };

plugins/downloader/utils.js

@@ -1,7 +1,6 @@
 const electron = require("electron");
 
-module.exports.getFolder = (customFolder) =>
-	customFolder || (electron.app || electron.remote.app).getPath("downloads");
+module.exports.getFolder = customFolder => customFolder || electron.app.getPath("downloads");
 module.exports.defaultMenuDownloadLabel = "Download playlist";
 
 const orderedQualityList = ["maxresdefault", "hqdefault", "mqdefault", "sdddefault"];
@@ -29,3 +28,12 @@ module.exports.cropMaxWidth = (image) => {
 	}
 	return image;
 }
+
+// Presets for FFmpeg
+module.exports.presets = {
+	"None (defaults to mp3)": undefined,
+	opus: {
+		extension: "opus",
+		ffmpegArgs: ["-acodec", "libopus"],
+	},
+};

plugins/downloader/youtube-dl.js

@@ -3,6 +3,7 @@ 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");
 
@@ -14,7 +15,7 @@ const ytdl = require("ytdl-core");
 
 const { triggerAction, triggerActionSync } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
-const { getFolder, urlToJPG } = require("./utils");
+const { presets, urlToJPG } = require("./utils");
 const { cleanupName } = require("../../providers/song-info");
 
 const { createFFmpeg } = FFmpeg;
@@ -112,8 +113,9 @@ const toMP3 = async (
 	existingMetadata = undefined,
 	subfolder = ""
 ) => {
+	const convertOptions = { ...presets[options.preset], ...options };
 	const safeVideoName = randomBytes(32).toString("hex");
-	const extension = options.extension || "mp3";
+	const extension = convertOptions.extension || "mp3";
 	const releaseFFmpegMutex = await ffmpegMutex.acquire();
 
 	try {
@@ -131,11 +133,11 @@ const toMP3 = async (
 			"-i",
 			safeVideoName,
 			...getFFmpegMetadataArgs(metadata),
-			...(options.ffmpegArgs || []),
+			...(convertOptions.ffmpegArgs || []),
 			safeVideoName + "." + extension
 		);
 
-		const folder = getFolder(options.downloadFolder);
+		const folder = options.downloadFolder || remote.app.getPath("downloads");
 		const name = metadata.title
 			? `${metadata.artist ? `${metadata.artist} - ` : ""}${metadata.title}`
 			: videoName;

plugins/exponential-volume/front.js

@@ -0,0 +1,47 @@
+// "Youtube Music fix volume ratio 0.4" by Marco Pfeiffer
+// https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/
+
+const exponentialVolume = () => {
+	// manipulation exponent, higher value = lower volume
+	// 3 is the value used by pulseaudio, which Barteks2x figured out this gist here: https://gist.github.com/Barteks2x/a4e189a36a10c159bb1644ffca21c02a
+	// 0.05 (or 5%) is the lowest you can select in the UI which with an exponent of 3 becomes 0.000125 or 0.0125%
+	const EXPONENT = 3;
+
+	const storedOriginalVolumes = new WeakMap();
+	const { get, set } = Object.getOwnPropertyDescriptor(
+		HTMLMediaElement.prototype,
+		"volume"
+	);
+	Object.defineProperty(HTMLMediaElement.prototype, "volume", {
+		get() {
+			const lowVolume = get.call(this);
+			const calculatedOriginalVolume = lowVolume ** (1 / EXPONENT);
+
+			// The calculated value has some accuracy issues which can lead to problems for implementations that expect exact values.
+			// To avoid this, I'll store the unmodified volume to return it when read here.
+			// This mostly solves the issue, but the initial read has no stored value and the volume can also change though external influences.
+			// To avoid ill effects, I check if the stored volume is somewhere in the same range as the calculated volume.
+			const storedOriginalVolume = storedOriginalVolumes.get(this);
+			const storedDeviation = Math.abs(
+				storedOriginalVolume - calculatedOriginalVolume
+			);
+
+			const originalVolume =
+				storedDeviation < 0.01
+					? storedOriginalVolume
+					: calculatedOriginalVolume;
+			return originalVolume;
+		},
+		set(originalVolume) {
+			const lowVolume = originalVolume ** EXPONENT;
+			storedOriginalVolumes.set(this, originalVolume);
+			set.call(this, lowVolume);
+		},
+	});
+};
+
+module.exports = () =>
+	document.addEventListener("apiLoaded", exponentialVolume, {
+		once: true,
+		passive: true,
+	});

plugins/in-app-menu/front.js

@@ -1,4 +1,6 @@
-const { remote, ipcRenderer } = require("electron");
+const { ipcRenderer } = require("electron");
+const { Menu } = require("@electron/remote");
+
 
 const customTitlebar = require("custom-electron-titlebar");
 function $(selector) { return document.querySelector(selector); }
@@ -12,7 +14,7 @@ module.exports = () => {
 	document.title = "Youtube Music";
 
 	ipcRenderer.on("updateMenu", function (_event, showMenu) {
-		bar.updateMenu(showMenu ? remote.Menu.getApplicationMenu() : null);
+		bar.updateMenu(showMenu ? Menu.getApplicationMenu() : null);
 	});
 
 	// Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)

plugins/in-app-menu/style.css

@@ -4,10 +4,13 @@
 	font-size: 14px !important;
 }
 
-/* fixes nav-bar-background opacity bug and allows clicking scrollbar through it */
+/* fixes nav-bar-background opacity bug, reposition it, and allows clicking scrollbar through it */
 #nav-bar-background {
 	opacity: 1 !important;
-	pointer-events: none;
+	pointer-events: none !important;
+	position: sticky !important;
+	top: 0 !important;
+	height: 75px !important;
 }
 
 /* remove window dragging for nav bar (conflict with titlebar drag) */
@@ -17,9 +20,10 @@ ytmusic-pivot-bar-item-renderer {
 	-webkit-app-region: unset !important;
 }
 
-/* move up item selection renderer by 13 px */
-ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer {
-    top: calc(var(--ytmusic-nav-bar-height) - 13px) !important;
+/* move up item selection renderers */
+ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer,
+ytmusic-tabs.stuck {
+	top: calc(var(--ytmusic-nav-bar-height) - 15px) !important;
 }
 
 /* fix weird positioning in search screen*/
@@ -28,8 +32,7 @@ ytmusic-header-renderer.ytmusic-search-page {
 }
 
 /* Move navBar downwards */
-ytmusic-nav-bar[slot="nav-bar"],
-#nav-bar-background {
+ytmusic-nav-bar[slot="nav-bar"] {
 	top: 17px !important;
 }
 

plugins/lyrics-genius/style.css

@@ -5,3 +5,8 @@
 	pointer-events: none;
 	text-decoration: none;
 }
+
+#contents.genius-lyrics {
+    font-size: 1vw;
+    opacity: 0.9;
+}

plugins/playback-speed/front.js

@@ -5,15 +5,13 @@ function $(selector) { return document.querySelector(selector); }
 
 const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
 
-const roundToTwo = (n) => Math.round(n * 1e2) / 1e2;
+const roundToTwo = n => Math.round(n * 1e2) / 1e2;
 
 const MIN_PLAYBACK_SPEED = 0.07;
 const MAX_PLAYBACK_SPEED = 16;
 
 let playbackSpeed = 1;
 
-const computePlayBackSpeed = (playbackSpeedPercentage) => playbackSpeedPercentage || MIN_PLAYBACK_SPEED;
-
 const updatePlayBackSpeed = () => {
 	$('video').playbackRate = playbackSpeed;
 
@@ -49,7 +47,7 @@ const observePopupContainer = () => {
 
 const observeVideo = () => {
 	$('video').addEventListener('ratechange', forcePlaybackRate)
-	$('video').addEventListener('loadeddata', forcePlaybackRate)
+	$('video').addEventListener('srcChanged', forcePlaybackRate)
 }
 
 const setupWheelListener = () => {
@@ -71,8 +69,8 @@ const setupWheelListener = () => {
 }
 
 function setupSliderListener() {
-	$('#playback-speed-slider').addEventListener('immediate-value-changed', () => {
-		playbackSpeed = computePlayBackSpeed($('#playback-speed-slider #sliderBar').value);
+	$('#playback-speed-slider').addEventListener('immediate-value-changed', e => {
+		playbackSpeed = e.detail.value || MIN_PLAYBACK_SPEED;
 		if (isNaN(playbackSpeed)) {
 			playbackSpeed = 1;
 		}

plugins/precise-volume/front.js

@@ -1,4 +1,5 @@
-const { ipcRenderer, remote } = require("electron");
+const { ipcRenderer } = require("electron");
+const { globalShortcut } = require('@electron/remote');
 
 const { setOptions } = require("../../config/plugins");
 
@@ -34,18 +35,26 @@ function firstRun(options) {
 	if (!noVid) {
 		setupVideoPlayerOnwheel(options);
 	}
+
+	// Change options from renderer to keep sync
+	ipcRenderer.on("setOptions", (_event, newOptions = {}) => {
+		for (option in newOptions) {
+			options[option] = newOptions[option];
+		}
+		setOptions("precise-volume", options);
+	});
 }
 
 function injectVolumeHud(noVid) {
 	if (noVid) {
 		const position = "top: 18px; right: 60px; z-index: 999; position: absolute;";
-		const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1s";
+		const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1s; pointer-events: none;";
 
 		$(".center-content.ytmusic-nav-bar").insertAdjacentHTML("beforeend",
 			`<span id="volumeHud" style="${position + mainStyle}"></span>`)
 	} else {
 		const position = `top: 10px; left: 10px; z-index: 999; position: absolute;`;
-		const mainStyle = "font-size: xxx-large; padding: 10px; transition: opacity 0.6s; webkit-text-stroke: 1px black; font-weight: 600;";
+		const mainStyle = "font-size: xxx-large; padding: 10px; transition: opacity 0.6s; webkit-text-stroke: 1px black; font-weight: 600; pointer-events: none;";
 
 		$("#song-video").insertAdjacentHTML('afterend',
 			`<span id="volumeHud" style="${position + mainStyle}"></span>`)
@@ -93,7 +102,7 @@ function writeOptions(options) {
 	writeTimeout = setTimeout(() => {
 		setOptions("precise-volume", options);
 		writeTimeout = null;
-	}, 1500)
+	}, 1000)
 }
 
 /** Add onwheel event to play bar and also track if play bar is hovered*/
@@ -142,7 +151,7 @@ function setupSliderObserver(options) {
 /** if (toIncrease = false) then volume decrease */
 function changeVolume(toIncrease, options) {
 	// Apply volume change if valid
-	const steps = (options.steps || 1);
+	const steps = Number(options.steps || 1);
 	api.setVolume(toIncrease ?
 		Math.min(api.getVolume() + steps, 100) :
 		Math.max(api.getVolume() - steps, 0));
@@ -202,48 +211,26 @@ function setTooltip(volume) {
 
 function setupGlobalShortcuts(options) {
 	if (options.globalShortcuts.volumeUp) {
-		remote.globalShortcut.register((options.globalShortcuts.volumeUp), () => changeVolume(true, options));
+		globalShortcut.register((options.globalShortcuts.volumeUp), () => changeVolume(true, options));
 	}
 	if (options.globalShortcuts.volumeDown) {
-		remote.globalShortcut.register((options.globalShortcuts.volumeDown), () => changeVolume(false, options));
+		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) {
-		switch (event.code) {
-			case "ArrowUp":
-				event.preventDefault();
-				changeVolume(true, options);
-				break;
-			case "ArrowDown":
-				event.preventDefault();
-				changeVolume(false, options);
-				break;
-		}
+		window.addEventListener('keydown', (event) => {
+			switch (event.code) {
+				case "ArrowUp":
+					event.preventDefault();
+					changeVolume(true, options);
+					break;
+				case "ArrowDown":
+					event.preventDefault();
+					changeVolume(false, options);
+					break;
+			}
+		});
 	}
 }

plugins/precise-volume/menu.js

@@ -3,6 +3,17 @@ const { setOptions } = require("../../config/plugins");
 const prompt = require("custom-electron-prompt");
 const promptOptions = require("../../providers/prompt-options");
 
+function changeOptions(changedOptions, options, win) {
+	for (option in changedOptions) {
+		options[option] = changedOptions[option];
+	}
+	// Dynamically change setting if plugin is enabled
+	if (enabled()) {
+		win.webContents.send("setOptions", changedOptions);
+	} else { // Fallback to usual method if disabled
+		setOptions("precise-volume", options);
+	}
+}
 
 module.exports = (win, options) => [
 	{
@@ -10,13 +21,7 @@ module.exports = (win, options) => [
 		type: "checkbox",
 		checked: !!options.arrowsShortcut,
 		click: item => {
-			// Dynamically change setting if plugin is enabled
-			if (enabled()) {
-				win.webContents.send("setArrowsShortcut", item.checked);
-			} else { // Fallback to usual method if disabled
-				options.arrowsShortcut = item.checked;
-				setOptions("precise-volume", options);
-			}
+			changeOptions({ arrowsShortcut: item.checked }, options, win);
 		}
 	},
 	{
@@ -46,8 +51,7 @@ async function promptVolumeSteps(win, options) {
 	}, win)
 
 	if (output || output === 0) { // 0 is somewhat valid
-		options.steps = output;
-		setOptions("precise-volume", options);
+		changeOptions({ steps: output}, options, win);
 	}
 }
 
@@ -64,11 +68,11 @@ async function promptGlobalShortcuts(win, options, item) {
 	}, win)
 
 	if (output) {
+		let newGlobalShortcuts = {};
 		for (const { value, accelerator } of output) {
-			options.globalShortcuts[value] = accelerator;
+			newGlobalShortcuts[value] = accelerator;
 		}
-
-		setOptions("precise-volume", options);
+		changeOptions({ globalShortcuts: newGlobalShortcuts }, options, win);
 
 		item.checked = !!options.globalShortcuts.volumeUp || !!options.globalShortcuts.volumeDown;
 	} else {

plugins/quality-changer/front.js

@@ -1,5 +1,5 @@
 const { ElementFromFile, templatePath } = require("../utils");
-const dialog = require('electron').remote.dialog
+const { dialog } = require('@electron/remote');
 
 function $(selector) { return document.querySelector(selector); }
 

plugins/shortcuts/back.js

@@ -2,10 +2,7 @@ const { globalShortcut } = require("electron");
 const is = require("electron-is");
 const electronLocalshortcut = require("electron-localshortcut");
 const getSongControls = require("../../providers/song-controls");
-const { setupMPRIS } = require("./mpris");
-const registerCallback = require("../../providers/song-info");
-
-let player;
+const registerMPRIS = require("./mpris");
 
 function _registerGlobalShortcut(webContents, shortcut, action) {
 	globalShortcut.register(shortcut, () => {
@@ -31,54 +28,8 @@ function registerShortcuts(win, options) {
 
 	_registerLocalShortcut(win, "CommandOrControl+F", search);
 	_registerLocalShortcut(win, "CommandOrControl+L", search);
-	registerCallback(songInfo => {
-		if (player) {
-			player.metadata = {
-				'mpris:length': songInfo.songDuration * 60 * 1000 * 1000, // In microseconds
-				'mpris:artUrl': songInfo.imageSrc,
-				'xesam:title': songInfo.title,
-				'xesam:artist': songInfo.artist
-			};
-			if (!songInfo.isPaused) {
-				player.playbackStatus = "Playing"
-			}
-		}
-	}
-	)
 
-	if (is.linux()) {
-		try {
-			const MPRISPlayer = setupMPRIS();
-
-			MPRISPlayer.on("raise", () => {
-				win.setSkipTaskbar(false);
-				win.show();
-			});
-			MPRISPlayer.on("play", () => {
-				if (MPRISPlayer.playbackStatus !== 'Playing') {
-					MPRISPlayer.playbackStatus = 'Playing';
-					playPause()
-				}
-			});
-			MPRISPlayer.on("pause", () => {
-				if (MPRISPlayer.playbackStatus !== 'Paused') {
-					MPRISPlayer.playbackStatus = 'Paused';
-					playPause()
-				}
-			});
-			MPRISPlayer.on("next", () => {
-				next()
-			});
-			MPRISPlayer.on("previous", () => {
-				previous()
-			});
-
-			player = MPRISPlayer
-
-		} catch (e) {
-			console.warn("Error in MPRIS", e);
-		}
-	}
+	if (is.linux()) registerMPRIS(win);
 
 	const { global, local } = options;
 	const shortcutOptions = { global, local };

plugins/shortcuts/mpris.js

@@ -1,4 +1,7 @@
 const mpris = require("mpris-service");
+const { ipcMain } = require("electron");
+const registerCallback = require("../../providers/song-info");
+const getSongControls = require("../../providers/song-controls");
 
 function setupMPRIS() {
 	const player = mpris({
@@ -14,6 +17,69 @@ function setupMPRIS() {
 	return player;
 }
 
-module.exports = {
-	setupMPRIS,
-};
+function registerMPRIS(win) {
+	const songControls = getSongControls(win);
+	const { playPause, next, previous } = songControls;
+	try {
+		const secToMicro = n => Math.round(Number(n) * 1e6);
+		const microToSec = n => Math.round(Number(n) / 1e6);
+
+		const seekTo = e => win.webContents.send("seekTo", microToSec(e.position));
+		const seekBy = o => win.webContents.send("seekBy", microToSec(o));
+
+		const player = setupMPRIS();
+
+		ipcMain.on('seeked', (_, t) => player.seeked(secToMicro(t)));
+
+		let currentSeconds = 0;
+		ipcMain.on('timeChanged', (_, t) => currentSeconds = t);
+
+		player.getPosition = () => secToMicro(currentSeconds)
+
+		player.on("raise", () => {
+			win.setSkipTaskbar(false);
+			win.show();
+		});
+
+		player.on("play", () => {
+			if (player.playbackStatus !== 'Playing') {
+				player.playbackStatus = 'Playing';
+				playPause()
+			}
+		});
+		player.on("pause", () => {
+			if (player.playbackStatus !== 'Paused') {
+				player.playbackStatus = 'Paused';
+				playPause()
+			}
+		});
+
+		player.on("playpause", playPause);
+		player.on("next", next);
+		player.on("previous", previous);
+
+		player.on('seek', seekBy);
+		player.on('position', seekTo);
+
+		registerCallback(songInfo => {
+			if (player) {
+				const data = {
+					'mpris:length': secToMicro(songInfo.songDuration),
+					'mpris:artUrl': songInfo.imageSrc,
+					'xesam:title': songInfo.title,
+					'xesam:artist': songInfo.artist,
+					'mpris:trackid': '/'
+				};
+				if (songInfo.album) data['xesam:album'] = songInfo.album;
+				player.metadata = data;
+				player.seeked(secToMicro(songInfo.elapsedSeconds))
+				player.playbackStatus = songInfo.isPaused ? "Paused" : "Playing"
+			}
+		})
+
+	} catch (e) {
+		console.warn("Error in MPRIS", e);
+	}
+}
+
+module.exports = registerMPRIS;

plugins/skip-silences/front.js

@@ -0,0 +1,37 @@
+const hark = require("hark/hark.bundle.js");
+
+module.exports = () => {
+	let isSilent = false;
+
+	document.addEventListener("apiLoaded", (apiEvent) => {
+		const video = document.querySelector("video");
+		const speechEvents = hark(video, {
+			threshold: -100, // dB (-100 = absolute silence, 0 = loudest)
+			interval: 2, // ms
+		});
+		const skipSilence = () => {
+			if (isSilent && !video.paused) {
+				video.currentTime += 0.2; // in s
+			}
+		};
+
+		speechEvents.on("speaking", function () {
+			isSilent = false;
+		});
+
+		speechEvents.on("stopped_speaking", function () {			
+			if (!(video.paused || video.seeking || video.ended)) {
+				isSilent = true;
+				skipSilence();
+			}
+		});
+
+		video.addEventListener("play", function () {
+			skipSilence();
+		});
+
+		video.addEventListener("seeked", function () {
+			skipSilence();
+		});
+	});
+};

plugins/sponsorblock/back.js

@@ -1,8 +1,8 @@
 const fetch = require("node-fetch");
 const is = require("electron-is");
+const { ipcMain } = require("electron");
 
 const defaultConfig = require("../../config/defaults");
-const registerCallback = require("../../providers/song-info");
 const { sortSegments } = require("./segments");
 
 let videoID;
@@ -13,15 +13,10 @@ module.exports = (win, options) => {
 		...options,
 	};
 
-	registerCallback(async (info) => {
-		const newURL = info.url || win.webContents.getURL();
-		const newVideoID = new URL(newURL).searchParams.get("v");
-
-		if (videoID !== newVideoID) {
-			videoID = newVideoID;
-			const segments = await fetchSegments(apiURL, categories);
-			win.webContents.send("sponsorblock-skip", segments);
-		}
+	ipcMain.on("video-src-changed", async (_, data) => {
+		videoID = JSON.parse(data)?.videoDetails?.videoId;
+		const segments = await fetchSegments(apiURL, categories);
+		win.webContents.send("sponsorblock-skip", segments);
 	});
 };
 

plugins/tuna-obs/back.js

@@ -1,33 +1,52 @@
-const { ipcRenderer } = require("electron");
+const { ipcMain } = require("electron");
 const fetch = require('node-fetch');
 
 const registerCallback = require("../../providers/song-info");
 
-const post = (data) => {
+const secToMilisec = t => Math.round(Number(t) * 1e3);
+const data = {
+	cover_url: '',
+	title: '',
+	artists: [],
+	status: '',
+	progress: 0,
+	duration: 0,
+	album_url: '',
+	album: undefined
+};
+
+const post = async (data) => {
 	const port = 1608;
-	headers = {'Content-Type': 'application/json',
+	headers = {
+		'Content-Type': 'application/json',
 		'Accept': 'application/json',
 		'Access-Control-Allow-Headers': '*',
-		'Access-Control-Allow-Origin': '*'}
+		'Access-Control-Allow-Origin': '*'
+	}
 	const url = `http://localhost:${port}/`;
-	fetch(url, {method: 'POST', headers, body:JSON.stringify({data})});
+	fetch(url, { method: 'POST', headers, body: JSON.stringify({ data }) }).catch(e => console.log(`Error: '${e.code || e.errno}' - when trying to access obs-tuna webserver at port ${port}`));
 }
 
 module.exports = async (win) => {
-	registerCallback((songInfo) => {
+	ipcMain.on('timeChanged', async (_, t) => {
+		if (!data.title) return;
+		data.progress = secToMilisec(t);
+		post(data);
+	});
 
-		// Register the callback
-		if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
+	registerCallback((songInfo) => {
+		if (!songInfo.title && !songInfo.artist) {
 			return;
 		}
 
-		const duration =  Number(songInfo.songDuration)*1000
-		const progress = Number(songInfo.elapsedSeconds)*1000
-		const cover_url = songInfo.imageSrc
-		const album_url = songInfo.imageSrc
-		const title = songInfo.title
-		const artists = [songInfo.artist]
-		const status = !songInfo.isPaused ? 'Playing': 'Paused'
-		post({ cover_url, title, artists, status, progress, duration, album_url});
+		data.duration = secToMilisec(songInfo.songDuration)
+		data.progress = secToMilisec(songInfo.elapsedSeconds)
+		data.cover_url = songInfo.imageSrc;
+		data.album_url = songInfo.imageSrc;
+		data.title = songInfo.title;
+		data.artists = [songInfo.artist];
+		data.status = songInfo.isPaused ? 'stopped' : 'playing';
+		data.album = songInfo.album;
+		post(data);
 	})
 }

plugins/video-toggle/front.js

@@ -4,28 +4,33 @@ const { setOptions } = require("../../config/plugins");
 
 function $(selector) { return document.querySelector(selector); }
 
-let options;
+let options, player, video, api;
 
 const switchButtonDiv = ElementFromFile(
     templatePath(__dirname, "button_template.html")
 );
 
-
 module.exports = (_options) => {
     if (_options.forceHide) return;
     options = _options;
     document.addEventListener('apiLoaded', setup, { once: true, passive: true });
 }
 
-function setup() {
+function setup(e) {
+    api = e.detail;
+    player = $('ytmusic-player');
+    video = $('video');
+
     $('ytmusic-player-page').prepend(switchButtonDiv);
 
-    $('#song-image.ytmusic-player').style.display = "block"
+    $('#song-image.ytmusic-player').style.display = "block";
 
     if (options.hideVideo) {
         $('.video-switch-button-checkbox').checked = false;
         changeDisplay(false);
         forcePlaybackMode();
+        // fix black video
+        video.style.height = "auto";
     }
 
     // button checked = show video
@@ -34,52 +39,78 @@ function setup() {
         changeDisplay(e.target.checked);
         setOptions("video-toggle", options);
     })
+  
+    video.addEventListener('srcChanged', videoStarted);
 
-    $('video').addEventListener('loadedmetadata', videoStarted);
+    observeThumbnail();
 }
 
 function changeDisplay(showVideo) {
-    if (!showVideo && $('ytmusic-player').getAttribute('playback-mode') !== "ATV_PREFERRED") {
-        $('video').style.top = "0";
-        $('ytmusic-player').style.margin = "auto 21.5px";
-        $('ytmusic-player').setAttribute('playback-mode', "ATV_PREFERRED");
+    player.style.margin = showVideo ? '' : 'auto 0px';
+    player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
+    $('#song-video.ytmusic-player').style.display = showVideo ? 'unset' : 'none';
+    if (showVideo && !video.style.top) {
+        video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
     }
-
-    showVideo ?
-        $('#song-video.ytmusic-player').style.display = "unset" :
-        $('#song-video.ytmusic-player').style.display = "none";
+    moveVolumeHud(showVideo);
 }
 
 function videoStarted() {
-    if (videoExist()) {
-        const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails;
-        if (thumbnails && thumbnails.length > 0) {
-            $('#song-image img').src = thumbnails[thumbnails.length-1].url;
-        }
+    if (api.getPlayerResponse().videoDetails.musicVideoType !== 'MUSIC_VIDEO_TYPE_ATV') {
+        // switch to high res thumbnail
+        forceThumbnail($('#song-image img'));
+        // show toggle button
         switchButtonDiv.style.display = "initial";
+        // change display to video mode if video exist & video is hidden & option.hideVideo = false
         if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") {
             changeDisplay(true);
+        } else {
+            moveVolumeHud(!options.hideVideo);
         }
     } else {
+        // video doesn't exist -> switch to song mode
         changeDisplay(false);
+        // hide toggle button
         switchButtonDiv.style.display = "none";
     }
 }
 
-function videoExist() {
-    return $('#player').videoMode_;
-}
-
 // on load, after a delay, the page overrides the playback-mode to 'OMV_PREFERRED' which causes weird aspect ratio in the image container
 // this function fix the problem by overriding that override :)
 function forcePlaybackMode() {
     const playbackModeObserver = new MutationObserver(mutations => {
         mutations.forEach(mutation => {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'playback-mode' && mutation.target.getAttribute('playback-mode') !== "ATV_PREFERRED") {
+            if (mutation.target.getAttribute('playback-mode') !== "ATV_PREFERRED") {
                 playbackModeObserver.disconnect();
                 mutation.target.setAttribute('playback-mode', "ATV_PREFERRED");
             }
         });
     });
-    playbackModeObserver.observe($('ytmusic-player'), { attributeFilter: ["playback-mode"] })
+    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;
+
+        mutations.forEach(mutation => {
+            if (!mutation.target.src.startsWith('data:')) return;
+            forceThumbnail(mutation.target)
+        });
+    });
+    playbackModeObserver.observe($('#song-image img'), { attributeFilter: ["src"] })
+}
+
+function forceThumbnail(img) {
+    const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails;
+    if (thumbnails && thumbnails.length > 0) {
+        img.src = thumbnails[thumbnails.length - 1].url.split("?")[0];
+    }
 }

preload.js

@@ -1,11 +1,12 @@
 const path = require("path");
 
-const { remote } = require("electron");
+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 plugins = config.plugins.getEnabled();
 
@@ -45,6 +46,9 @@ document.addEventListener("DOMContentLoaded", () => {
 	// inject song-info provider
 	setupSongInfo();
 
+	// inject song-controls
+	setupSongControls();
+
 	// inject front logger
 	setupFrontLogger();
 

providers/song-controls-front.js

@@ -0,0 +1,13 @@
+const { ipcRenderer } = require("electron");
+const config = require("../config");
+const is = require("electron-is");
+
+module.exports.setupSongControls = () => {
+    document.addEventListener('apiLoaded', e => {
+        ipcRenderer.on("seekTo", (_, t) => e.detail.seekTo(t));
+        ipcRenderer.on("seekBy", (_, t) => e.detail.seekBy(t));
+        if (is.linux() && config.plugins.isEnabled('shortcuts')) { // MPRIS Enabled
+            document.querySelector('video').addEventListener('seeked', v => ipcRenderer.send('seeked', v.target.currentTime));
+        }
+    }, { once: true, passive: true })
+};

providers/song-controls.js

@@ -13,8 +13,8 @@ module.exports = (win) => {
 		previous: () => pressKey(win, "k"),
 		next: () => pressKey(win, "j"),
 		playPause: () => pressKey(win, "space"),
-		like: () => pressKey(win, "_"),
-		dislike: () => pressKey(win, "+"),
+		like: () => pressKey(win, "+"),
+		dislike: () => pressKey(win, "_"),
 		go10sBack: () => pressKey(win, "h"),
 		go10sForward: () => pressKey(win, "l"),
 		go1sBack: () => pressKey(win, "h", ["shift"]),
@@ -24,8 +24,6 @@ module.exports = (win) => {
 		// General
 		volumeMinus10: () => pressKey(win, "-"),
 		volumePlus10: () => pressKey(win, "="),
-		dislikeAndNext: () => pressKey(win, "-", ["shift"]),
-		like: () => pressKey(win, "=", ["shift"]),
 		fullscreen: () => pressKey(win, "f"),
 		muteUnmute: () => pressKey(win, "m"),
 		maximizeMinimisePlayer: () => pressKey(win, "q"),
@@ -38,14 +36,14 @@ module.exports = (win) => {
 			pressKey(win, "g");
 			pressKey(win, "l");
 		},
-		goToHotlist: () => {
-			pressKey(win, "g");
-			pressKey(win, "t");
-		},
 		goToSettings: () => {
 			pressKey(win, "g");
 			pressKey(win, ",");
 		},
+		goToExplore: () => {
+			pressKey(win, "g");
+			pressKey(win, "e");
+		},
 		search: () => pressKey(win, "/"),
 		showShortcuts: () => pressKey(win, "/", ["shift"]),
 	};

providers/song-info-front.js

@@ -1,19 +1,60 @@
 const { ipcRenderer } = require("electron");
-
+const is = require('electron-is');
 const { getImage } = require("./song-info");
 
+const config = require("../config");
+
 global.songInfo = {};
 
+function $(selector) { return document.querySelector(selector); }
+
 ipcRenderer.on("update-song-info", async (_, extractedSongInfo) => {
 	global.songInfo = JSON.parse(extractedSongInfo);
 	global.songInfo.image = await getImage(global.songInfo.imageSrc);
 });
 
+// used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/th-ch/youtube-music/issues/473)
+const srcChangedEvent = new CustomEvent('srcChanged');
+
 module.exports = () => {
-	document.addEventListener('apiLoaded', e => {
-		document.querySelector('video').addEventListener('loadedmetadata', () => {
-			const data = e.detail.getPlayerResponse();
-			ipcRenderer.send("song-info-request", JSON.stringify(data));
-		});
-	}, { once: true, passive: true })
+	document.addEventListener('apiLoaded', apiEvent => {
+		if (config.plugins.isEnabled('tuna-obs') ||
+			(is.linux() && config.plugins.isEnabled('shortcuts'))) {
+			setupTimeChangeListener();
+		}
+		const video = $('video');
+		// name = "dataloaded" and abit later "dataupdated"
+		apiEvent.detail.addEventListener('videodatachange', (name, _dataEvent) => {
+			if (name !== 'dataloaded') return;
+			video.dispatchEvent(srcChangedEvent);
+			sendSongInfo();
+		})
+
+		for (const status of ['playing', 'pause']) {
+			video.addEventListener(status, e => {
+				if (Math.round(e.target.currentTime) > 0) {
+					ipcRenderer.send("playPaused", {
+						isPaused: status === 'pause',
+						elapsedSeconds: Math.floor(e.target.currentTime)
+					});
+				}
+			});
+		}
+
+		function sendSongInfo() {
+			const data = apiEvent.detail.getPlayerResponse();
+			data.videoDetails.album = $('ytmusic-player-page')?.__data?.playerPageWatchMetadata?.albumName?.runs[0].text
+			data.videoDetails.elapsedSeconds = Math.floor(video.currentTime);
+			data.videoDetails.isPaused = false;
+			ipcRenderer.send("video-src-changed", JSON.stringify(data));
+		}
+	}, { once: true, passive: true });
 };
+
+function setupTimeChangeListener() {
+	const progressObserver = new MutationObserver(mutations => {
+		ipcRenderer.send('timeChanged', mutations[0].target.value);
+		global.songInfo.elapsedSeconds = mutations[0].target.value;
+	});
+	progressObserver.observe($('#progress-bar'), { attributeFilter: ["value"] })
+}

providers/song-info.js

@@ -4,32 +4,6 @@ const fetch = require("node-fetch");
 
 const config = require("../config");
 
-// Grab the progress using the selector
-const getProgress = async (win) => {
-	// Get current value of the progressbar element
-	return win.webContents.executeJavaScript(
-		'document.querySelector("#progress-bar").value'
-	);
-};
-
-// Grab the native image using the src
-const getImage = async (src) => {
-	const result = await fetch(src);
-	const buffer = await result.buffer();
-	const output = nativeImage.createFromBuffer(buffer);
-	if (output.isEmpty() && !src.endsWith(".jpg") && src.includes(".jpg")) { // fix hidden webp files (https://github.com/th-ch/youtube-music/issues/315)
-		return getImage(src.slice(0, src.lastIndexOf(".jpg")+4));
-	} else {
-		return output;
-	}
-};
-
-// To find the paused status, we check if the title contains `-`
-const getPausedStatus = async (win) => {
-	const title = await win.webContents.executeJavaScript("document.title");
-	return !title.includes("-");
-};
-
 // Fill songInfo with empty values
 /**
  * @typedef {songInfo} SongInfo
@@ -45,23 +19,55 @@ const songInfo = {
 	songDuration: 0,
 	elapsedSeconds: 0,
 	url: "",
+	album: undefined,
+	videoId: "",
+	playlistId: "",
+};
+
+// Grab the native image using the src
+const getImage = async (src) => {
+	const result = await fetch(src);
+	const buffer = await result.buffer();
+	const output = nativeImage.createFromBuffer(buffer);
+	if (output.isEmpty() && !src.endsWith(".jpg") && src.includes(".jpg")) { // fix hidden webp files (https://github.com/th-ch/youtube-music/issues/315)
+		return getImage(src.slice(0, src.lastIndexOf(".jpg") + 4));
+	} else {
+		return output;
+	}
 };
 
 const handleData = async (responseText, win) => {
-	let data = JSON.parse(responseText);
-	songInfo.title = cleanupName(data?.videoDetails?.title);
-	songInfo.artist =cleanupName(data?.videoDetails?.author);
-	songInfo.views = data?.videoDetails?.viewCount;
-	songInfo.imageSrc = data?.videoDetails?.thumbnail?.thumbnails?.pop()?.url;
-	songInfo.songDuration = data?.videoDetails?.lengthSeconds;
-	songInfo.image = await getImage(songInfo.imageSrc);
-	songInfo.uploadDate = data?.microformat?.microformatDataRenderer?.uploadDate;
-	songInfo.url = data?.microformat?.microformatDataRenderer?.urlCanonical?.split("&")[0];
+	const data = JSON.parse(responseText);
+	if (!data) return;
 
-	// used for options.resumeOnStart
-	config.set("url", data?.microformat?.microformatDataRenderer?.urlCanonical);
+	const microformat = data.microformat?.microformatDataRenderer;
+	if (microformat) {
+		songInfo.uploadDate = microformat.uploadDate;
+		songInfo.url = microformat.urlCanonical?.split("&")[0];
+		songInfo.playlistId = new URL(microformat.urlCanonical).searchParams.get("list");
+		// used for options.resumeOnStart
+		config.set("url", microformat.urlCanonical);
+	}
 
-	win.webContents.send("update-song-info", JSON.stringify(songInfo));
+	const videoDetails = data.videoDetails;
+	if (videoDetails) {
+		songInfo.title = cleanupName(videoDetails.title);
+		songInfo.artist = cleanupName(videoDetails.author);
+		songInfo.views = videoDetails.viewCount;
+		songInfo.songDuration = videoDetails.lengthSeconds;
+		songInfo.elapsedSeconds = videoDetails.elapsedSeconds;
+		songInfo.isPaused = videoDetails.isPaused;
+		songInfo.videoId = videoDetails.videoId;
+		songInfo.album = data?.videoDetails?.album; // Will be undefined if video exist
+
+		const oldUrl = songInfo.imageSrc;
+		songInfo.imageSrc = videoDetails.thumbnail?.thumbnails?.pop()?.url.split("?")[0];
+		if (oldUrl !== songInfo.imageSrc) {
+			songInfo.image = await getImage(songInfo.imageSrc);
+		}
+
+		win.webContents.send("update-song-info", JSON.stringify(songInfo));
+	}
 };
 
 // This variable will be filled with the callbacks once they register
@@ -81,26 +87,20 @@ const registerCallback = (callback) => {
 };
 
 const registerProvider = (win) => {
-	win.on("page-title-updated", async () => {
-		// Get and set the new data
-		songInfo.isPaused = await getPausedStatus(win);
-
-		const elapsedSeconds = await getProgress(win);
-		songInfo.elapsedSeconds = elapsedSeconds;
-
-		// Trigger the callbacks
-		callbacks.forEach((c) => {
-			c(songInfo);
-		});
-	});
-
 	// This will be called when the song-info-front finds a new request with song data
-	ipcMain.on("song-info-request", async (_, responseText) => {
+	ipcMain.on("video-src-changed", async (_, responseText) => {
 		await handleData(responseText, win);
 		callbacks.forEach((c) => {
 			c(songInfo);
 		});
 	});
+	ipcMain.on("playPaused", (_, { isPaused, elapsedSeconds }) => {
+		songInfo.isPaused = isPaused;
+		songInfo.elapsedSeconds = elapsedSeconds;
+		callbacks.forEach((c) => {
+			c(songInfo);
+		});
+	})
 };
 
 const suffixesToRemove = [
@@ -114,7 +114,7 @@ const suffixesToRemove = [
 
 function cleanupName(name) {
 	if (!name) return name;
-    const lowCaseName = name.toLowerCase();
+	const lowCaseName = name.toLowerCase();
 	for (const suffix of suffixesToRemove) {
 		if (lowCaseName.endsWith(suffix)) {
 			return name.slice(0, -suffix.length);

tests/environment.js

@@ -1,9 +1,7 @@
 const path = require("path");
 
-const getPort = require("get-port");
 const NodeEnvironment = require("jest-environment-node");
-const electronPath = require("electron");
-const { Application } = require("spectron");
+const { _electron: electron } = require("playwright");
 
 class TestEnvironment extends NodeEnvironment {
 	constructor(config) {
@@ -14,21 +12,12 @@ class TestEnvironment extends NodeEnvironment {
 		await super.setup();
 
 		const appPath = path.resolve(__dirname, "..");
-		const port = await getPort();
-
-		this.global.__APP__ = new Application({
-			path: electronPath,
-			args: [appPath],
-			port,
-		});
-		await this.global.__APP__.start();
-		const { client } = this.global.__APP__;
-		await client.waitUntilWindowLoaded();
+		this.global.__APP__ = await electron.launch({ args: [appPath] });
 	}
 
 	async teardown() {
-		if (this.global.__APP__.isRunning()) {
-			await this.global.__APP__.stop();
+		if (this.global.__APP__) {
+			await this.global.__APP__.close();
 		}
 		await super.teardown();
 	}

tests/index.test.js

@@ -6,22 +6,11 @@ describe("YouTube Music App", () => {
 	const app = global.__APP__;
 
 	test("With default settings, app is launched and visible", async () => {
-		expect(app.isRunning()).toBe(true);
-
-		const win = app.browserWindow;
-
-		const isMenuVisible = await win.isMenuBarVisible();
-		expect(isMenuVisible).toBe(true);
-
-		const isVisible = await win.isVisible();
-		expect(isVisible).toBe(true);
-
-		const { width, height } = await win.getBounds();
-		expect(width).toBeGreaterThan(0);
-		expect(height).toBeGreaterThan(0);
-
-		const { client } = app;
-		const title = await client.getTitle();
+		const window = await app.firstWindow();
+		const title = await window.title();
 		expect(title).toEqual("YouTube Music");
+
+		const url = window.url();
+		expect(url.startsWith("https://music.youtube.com")).toBe(true);
 	});
 });

youtube-music.css

@@ -34,3 +34,8 @@ img {
 	-webkit-user-select: none;
 	user-select: none;
 }
+
+/* Hide cast button which doesn't work */
+ytmusic-cast-button {
+	display: none !important;
+}