Merge branch 'local-upstream/master' into use-ToastXML

plugins/adblocker/preload.js

@@ -1,4 +1,4 @@
 module.exports = () => {
 	// Preload adblocker to inject scripts/styles
-	require("@cliqz/adblocker-electron-preload/dist/preload.cjs");
+	require("@cliqz/adblocker-electron-preload");
 };

plugins/crossfade/front.js

@@ -6,7 +6,7 @@ require("./fader");
 
 let transitionAudio; // Howler audio used to fade out the current music
 let firstVideo = true;
-let transitioning = false;
+let waitForTransition;
 
 // Crossfade options that can be overridden in plugin options
 let crossfadeOptions = {
@@ -109,10 +109,9 @@ const syncVideoWithTransitionAudio = async () => {
 
 const onApiLoaded = () => {
 	watchVideoIDChanges(async (videoID) => {
-		if (!transitioning) {
-			const url = await getStreamURL(videoID);
-			await createAudioForCrossfade(url);
-		}
+		await waitForTransition;
+		const url = await getStreamURL(videoID);
+		await createAudioForCrossfade(url);
 	});
 };
 
@@ -121,7 +120,11 @@ const crossfade = (cb) => {
 		cb();
 		return;
 	}
-	transitioning = true;
+
+	let resolveTransition;
+	waitForTransition = new Promise(function (resolve, reject) {
+		resolveTransition = resolve;
+	});
 
 	const video = document.querySelector("video");
 
@@ -134,7 +137,7 @@ const crossfade = (cb) => {
 	// Fade out the music
 	video.volume = 0;
 	fader.fadeOut(() => {
-		transitioning = false;
+		resolveTransition();
 		cb();
 	});
 };

plugins/discord/back.js

@@ -1,4 +1,5 @@
-const Discord = require("discord-rpc");
+"use strict";
+const Discord = require("@xhayper/discord-rpc");
 const { dev } = require("electron-is");
 const { dialog, app } = require("electron");
 
@@ -9,58 +10,81 @@ const clientId = "1043858434585526382";
 
 /**
  * @typedef {Object} Info
- * @property {import('discord-rpc').Client} rpc
+ * @property {import('@xhayper/discord-rpc').Client} rpc
  * @property {boolean} ready
+ * @property {boolean} autoReconnect
  * @property {import('../../providers/song-info').SongInfo} lastSongInfo
  */
 /**
  * @type {Info}
  */
 const info = {
-	rpc: null,
+	rpc: new Discord.Client({
+		clientId
+	}),
 	ready: false,
+	autoReconnect: true,
 	lastSongInfo: null,
 };
+
 /**
  * @type {(() => void)[]}
  */
 const refreshCallbacks = [];
+
 const resetInfo = () => {
-	info.rpc = null;
 	info.ready = false;
 	clearTimeout(clearActivity);
 	if (dev()) console.log("discord disconnected");
 	refreshCallbacks.forEach(cb => cb());
 };
 
+info.rpc.on("connected", () => {
+	if (dev()) console.log("discord connected");
+	refreshCallbacks.forEach(cb => cb());
+});
+
+info.rpc.on("ready", () => {
+	info.ready = true;
+	if (info.lastSongInfo) updateActivity(info.lastSongInfo)
+});
+
+info.rpc.on("disconnected", () => {
+	resetInfo();
+
+	if (info.autoReconnect) {
+		connectTimeout();
+	}
+});
+
+const connectTimeout = () => new Promise((resolve, reject) => setTimeout(() => {
+	if (!info.autoReconnect || info.rpc.isConnected) return;
+	info.rpc.login().then(resolve).catch(reject);
+}, 5000));
+
+const connectRecursive = () => {
+	if (!info.autoReconnect || info.rpc.isConnected) return;
+	connectTimeout().catch(connectRecursive);
+}
+
 let window;
 const connect = (showErr = false) => {
-	if (info.rpc) {
+	if (info.rpc.isConnected) {
 		if (dev())
-			console.log('Attempted to connect with active RPC object');
+			console.log('Attempted to connect with active connection');
 		return;
 	}
 
-	info.rpc = new Discord.Client({
-		transport: "ipc",
-	});
 	info.ready = false;
 
-	info.rpc.once("connected", () => {
-		if (dev()) console.log("discord connected");
-		refreshCallbacks.forEach(cb => cb());
-	});
-	info.rpc.once("ready", () => {
-		info.ready = true;
-		if (info.lastSongInfo) updateActivity(info.lastSongInfo)
-	});
-	info.rpc.once("disconnected", resetInfo);
-
 	// Startup the rpc client
 	info.rpc.login({ clientId }).catch(err => {
 		resetInfo();
 		if (dev()) console.error(err);
-		if (showErr) dialog.showMessageBox(window, { title: 'Connection failed', message: err.message || String(err), type: 'error' });
+		if (info.autoReconnect) {
+			connectRecursive();
+		}
+		else if (showErr) dialog.showMessageBox(window, { title: 'Connection failed', message: err.message || String(err), type: 'error' });
 	});
 };
 
@@ -70,7 +94,9 @@ let clearActivity;
  */
 let updateActivity;
 
-module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong, hideDurationLeft }) => {
+module.exports = (win, { autoReconnect, activityTimoutEnabled, activityTimoutTime, listenAlong, hideDurationLeft }) => {
+	info.autoReconnect = autoReconnect;
+
 	window = win;
 	// We get multiple events
 	// Next song: PAUSE(n), PAUSE(n+1), PLAY(n+1)
@@ -92,7 +118,7 @@ module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong,
 
 		// clear directly if timeout is 0
 		if (songInfo.isPaused && activityTimoutEnabled && activityTimoutTime === 0) {
-			info.rpc.clearActivity().catch(console.error);
+			info.rpc.user?.clearActivity().catch(console.error);
 			return;
 		}
 
@@ -100,7 +126,6 @@ module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong,
 		// @see https://discord.com/developers/docs/topics/gateway#activity-object
 		// not all options are transfered through https://github.com/discordjs/RPC/blob/6f83d8d812c87cb7ae22064acd132600407d7d05/src/client.js#L518-530
 		const activityInfo = {
-			type: 2, // Listening, addressed in https://github.com/discordjs/RPC/pull/149
 			details: songInfo.title,
 			state: songInfo.artist,
 			largeImageKey: songInfo.imageSrc,
@@ -116,7 +141,7 @@ module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong,
 			activityInfo.smallImageText = "Paused";
 			// Set start the timer so the activity gets cleared after a while if enabled
 			if (activityTimoutEnabled)
-				clearActivity = setTimeout(() => info.rpc.clearActivity().catch(console.error), activityTimoutTime ?? 10000);
+				clearActivity = setTimeout(() => info.rpc.user?.clearActivity().catch(console.error), activityTimoutTime ?? 10000);
 		} else if (!hideDurationLeft) {
 			// Add the start and end time of the song
 			const songStartTime = Date.now() - songInfo.elapsedSeconds * 1000;
@@ -125,7 +150,7 @@ module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong,
 				songStartTime + songInfo.songDuration * 1000;
 		}
 
-		info.rpc.setActivity(activityInfo).catch(console.error);
+		info.rpc.user?.setActivity(activityInfo).catch(console.error);
 	};
 
 	// If the page is ready, register the callback
@@ -137,9 +162,10 @@ module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong,
 };
 
 module.exports.clear = () => {
-	if (info.rpc) info.rpc.clearActivity();
+	if (info.rpc) info.rpc.user?.clearActivity();
 	clearTimeout(clearActivity);
 };
+
 module.exports.connect = connect;
 module.exports.registerRefresh = (cb) => refreshCallbacks.push(cb);
 module.exports.isConnected = () => info.rpc !== null;

plugins/discord/menu.js

@@ -18,6 +18,15 @@ module.exports = (win, options, refreshMenu) => {
 			enabled: !isConnected(),
 			click: connect,
 		},
+		{
+			label: "Auto reconnect",
+			type: "checkbox",
+			checked: options.autoReconnect,
+			click: (item) => {
+				options.autoReconnect = item.checked;
+				setMenuOptions('discord', options);
+			},
+		},
 		{
 			label: "Clear activity",
 			click: clear,

plugins/downloader/youtube-dl.js

@@ -82,7 +82,7 @@ const downloadVideoToMP3 = async (
 			sendFeedback("Download: " + progress + "%", ratio);
 		})
 		.on("info", (info, format) => {
-			videoName = info.videoDetails.title.replace("|", "").toString("ascii");
+			videoName = info.videoDetails.title.replaceAll("|", "").toString("ascii");
 			if (is.dev()) {
 				console.log(
 					"Downloading video - name:",

plugins/in-app-menu/front.js

@@ -43,9 +43,18 @@ module.exports = (options) => {
 		setNavbarMargin();
 		const playPageObserver = new MutationObserver(setNavbarMargin);
 		playPageObserver.observe($('ytmusic-app-layout'), { attributeFilter: ['player-page-open_', 'playerPageOpen_'] })
+		setupSearchOpenObserver();
 	}, { once: true, passive: true })
 };
 
+function setupSearchOpenObserver() {
+	const searchOpenObserver = new MutationObserver(mutations => {
+		$('#nav-bar-background').style.webkitAppRegion =
+			mutations[0].target.opened ? 'no-drag' : 'drag';
+	});
+	searchOpenObserver.observe($('ytmusic-search-box'), { attributeFilter: ["opened"] })
+}
+
 function setNavbarMargin() {
 	$('#nav-bar-background').style.right =
 		$('ytmusic-app-layout').playerPageOpen_ ?

plugins/in-app-menu/style.css

@@ -79,3 +79,15 @@ yt-page-navigation-progress,
 .cet-menubar-menu-container .cet-action-item {
 	background-color: inherit
 }
+
+#nav-bar-background {
+    -webkit-app-region: drag;
+}
+
+ytmusic-nav-bar input,
+ytmusic-nav-bar span,
+ytmusic-nav-bar [role="button"],
+ytmusic-nav-bar yt-icon,
+tp-yt-iron-dropdown {
+    -webkit-app-region: no-drag;
+}

plugins/picture-in-picture/adaptors/in-app-menu.js

@@ -1,37 +0,0 @@
-const { Menu, app } = require("electron");
-const { setApplicationMenu } = require("../../../menu");
-
-module.exports = (win, options, setOptions, togglePip, isInPip) => {
-	if (isInPip) {
-		Menu.setApplicationMenu(Menu.buildFromTemplate([
-			{
-				label: "App",
-				submenu: [
-					{
-						label: "Exit Picture in Picture",
-						click: togglePip,
-					},
-					{
-						label: "Always on top",
-						type: "checkbox",
-						checked: options.alwaysOnTop,
-						click: (item) => {
-							setOptions({ alwaysOnTop: item.checked });
-							win.setAlwaysOnTop(item.checked);
-						},
-					},
-					{
-						label: "Restart",
-						click: () => {
-							app.relaunch();
-							app.quit();
-						},
-					},
-					{ role: "quit" },
-				],
-			},
-		]));
-	} else {
-		setApplicationMenu(win);
-	}
-};

plugins/picture-in-picture/back.js

@@ -3,7 +3,7 @@ const path = require("path");
 const { app, ipcMain } = require("electron");
 const electronLocalshortcut = require("electron-localshortcut");
 
-const { setOptions, isEnabled } = require("../../config/plugins");
+const { setOptions } = require("../../config/plugins");
 const { injectCSS } = require("../utils");
 
 let isInPiP = false;
@@ -23,15 +23,6 @@ const setLocalOptions = (_options) => {
 	setOptions("picture-in-picture", _options);
 }
 
-
-const adaptors = [];
-const runAdaptors = () => adaptors.forEach(a => a());
-
-if (isEnabled("in-app-menu")) {
-	let adaptor = require("./adaptors/in-app-menu");
-	adaptors.push(() => adaptor(win, options, setLocalOptions, togglePiP, isInPiP));
-}
-
 const togglePiP = async () => {
 	isInPiP = !isInPiP;
 	setLocalOptions({ isInPiP });
@@ -50,7 +41,6 @@ const togglePiP = async () => {
 		win.setMaximizable(false);
 		win.setFullScreenable(false);
 
-		runAdaptors();
 		win.webContents.send("pip-toggle", true);
 
 		app.dock?.hide();
@@ -66,7 +56,6 @@ const togglePiP = async () => {
 		win.setMaximizable(true);
 		win.setFullScreenable(true);
 
-		runAdaptors();
 		win.webContents.send("pip-toggle", false);
 
 		win.setVisibleOnAllWorkspaces(false);
@@ -103,9 +92,6 @@ module.exports = (_win, _options) => {
 	ipcMain.on("picture-in-picture", async () => {
 		await togglePiP();
 	});
-	if (options.hotkey) {
-		electronLocalshortcut.register(win, options.hotkey, togglePiP);
-	}
 };
 
 module.exports.setOptions = setLocalOptions;

plugins/picture-in-picture/front.js

@@ -1,10 +1,14 @@
 const { ipcRenderer } = require("electron");
 
+const { toKeyEvent } = require("keyboardevent-from-electron-accelerator");
+const keyEventAreEqual = require("keyboardevents-areequal");
+
 const { getSongMenu } = require("../../providers/dom-elements");
 const { ElementFromFile, templatePath } = require("../utils");
 
 function $(selector) { return document.querySelector(selector); }
 
+let useNativePiP = false;
 let menu = null;
 const pipButton = ElementFromFile(
 	templatePath(__dirname, "picture-in-picture.html")
@@ -39,8 +43,24 @@ const observer = new MutationObserver(() => {
 	menu.prepend(pipButton);
 });
 
-global.togglePictureInPicture = () => {
+global.togglePictureInPicture = async () => {
+	if (useNativePiP) {
+		const isInPiP = document.pictureInPictureElement !== null;
+		const video = $("video");
+		const togglePiP = () =>
+			isInPiP
+				? document.exitPictureInPicture.call(document)
+				: video.requestPictureInPicture.call(video);
+
+		try {
+			await togglePiP();
+			$("#icon").click(); // Close the menu
+			return true;
+		} catch {}
+	}
+
 	ipcRenderer.send("picture-in-picture");
+	return false;
 };
 
 const listenForToggle = () => {
@@ -54,9 +74,12 @@ const listenForToggle = () => {
 	const player = $('#player');
 	const onPlayerDblClick = player.onDoubleClick_;
 
-	ipcRenderer.on('pip-toggle', (_, isPip) => {
+	const titlebar = $(".cet-titlebar");
+
+	ipcRenderer.on("pip-toggle", (_, isPip) => {
 		if (isPip) {
-			replaceButton(".exit-fullscreen-button", originalExitButton).onclick = () => togglePictureInPicture();
+			replaceButton(".exit-fullscreen-button", originalExitButton).onclick =
+				() => togglePictureInPicture();
 			player.onDoubleClick_ = () => {};
 			expandMenu.onmouseleave = () => middleControls.click();
 			if (!playerPage.playerPageOpen_) {
@@ -64,30 +87,33 @@ const listenForToggle = () => {
 			}
 			fullScreenButton.click();
 			appLayout.classList.add("pip");
+			if (titlebar) titlebar.style.display = "none";
 		} else {
 			$(".exit-fullscreen-button").replaceWith(originalExitButton);
 			player.onDoubleClick_ = onPlayerDblClick;
 			expandMenu.onmouseleave = undefined;
 			originalExitButton.click();
 			appLayout.classList.remove("pip");
+			if (titlebar) titlebar.style.display = "flex";
 		}
 	});
 }
 
 function observeMenu(options) {
+	useNativePiP = options.useNativePiP;
 	document.addEventListener(
 		"apiLoaded",
 		() => {
 			listenForToggle();
-			// remove native listeners
-			cloneButton(".player-minimize-button").onclick = () =>  {
-				global.togglePictureInPicture();
-				setTimeout(() => $('#player').click());
+
+			cloneButton(".player-minimize-button").onclick = async () => {
+				await global.togglePictureInPicture();
+				setTimeout(() => $("#player").click());
 			};
 
 			// allows easily closing the menu by programmatically clicking outside of it
 			$("#expanding-menu").removeAttribute("no-cancel-on-outside-click");
-			// TODO: think about wether an additional button in songMenu is needed 
+			// TODO: think about wether an additional button in songMenu is needed
 			observer.observe($("ytmusic-popup-container"), {
 				childList: true,
 				subtree: true,
@@ -97,4 +123,18 @@ function observeMenu(options) {
 	);
 }
 
-module.exports = observeMenu;
+module.exports = (options) => {
+	observeMenu(options);
+
+	if (options.hotkey) {
+		const hotkeyEvent = toKeyEvent(options.hotkey);
+		window.addEventListener("keydown", (event) => {
+			if (
+				keyEventAreEqual(event, hotkeyEvent) &&
+				!$("ytmusic-search-box").opened
+			) {
+				togglePictureInPicture();
+			}
+		});
+	}
+};

plugins/picture-in-picture/menu.js

@@ -45,16 +45,24 @@ module.exports = (win, options) => [
                 }],
                 ...promptOptions()
             }, win)
-        
+
             if (output) {
                 const { value, accelerator } = output[0];
                 setOptions({ [value]: accelerator });
-        
+
                 item.checked = !!accelerator;
             } else {
                 // Reset checkbox if prompt was canceled
                 item.checked = !item.checked;
             }
         },
+    },
+    {
+        label: "Use native PiP",
+        type: "checkbox",
+        checked: options.useNativePiP,
+        click: (item) => {
+            setOptions({ useNativePiP: item.checked });
+        },
     }
 ];

plugins/picture-in-picture/style.css

@@ -3,9 +3,9 @@ ytmusic-app-layout.pip ytmusic-player-bar svg,
 ytmusic-app-layout.pip ytmusic-player-bar .time-info,
 ytmusic-app-layout.pip ytmusic-player-bar yt-formatted-string,
 ytmusic-app-layout.pip ytmusic-player-bar .yt-formatted-string {
-    filter: drop-shadow(2px 4px 6px black);
-    color: white !important;
-    fill: white !important;
+	filter: drop-shadow(2px 4px 6px black);
+	color: white !important;
+	fill: white !important;
 }
 
 /* improve the style of the player bar expanding menu */
@@ -20,6 +20,23 @@ ytmusic-app-layout.pip ytmusic-player-expanding-menu {
 	top: 22px !important;
 }
 
+/* make player-bar not draggable if in-app-menu is enabled */
+.cet-container ytmusic-app-layout.pip ytmusic-player-bar {
+	-webkit-app-region: no-drag !important;
+}
+
+/* make player draggable if in-app-menu is enabled */
+.cet-container ytmusic-app-layout.pip #player {
+	-webkit-app-region: drag !important;
+}
+
+/* remove info, thumbnail and menu from player-bar */
+ytmusic-app-layout.pip ytmusic-player-bar .content-info-wrapper,
+ytmusic-app-layout.pip ytmusic-player-bar .thumbnail-image-wrapper,
+ytmusic-app-layout.pip ytmusic-player-bar ytmusic-menu-renderer {
+	display: none !important;
+}
+
 /* disable the video-toggle button when in PiP mode */
 ytmusic-app-layout.pip .video-switch-button {
 	display: none !important;