v3

plugins/in-app-menu/front.js

@@ -1,6 +1,7 @@
 const { ipcRenderer } = require("electron");
 const config = require("../../config");
 const { Titlebar, Color } = require("custom-electron-titlebar");
+const { isEnabled } = require("../../config/plugins");
 function $(selector) { return document.querySelector(selector); }
 
 module.exports = () => {
@@ -25,6 +26,12 @@ module.exports = () => {
 		}
 	});
 
+	if (isEnabled("picture-in-picture")) {
+		ipcRenderer.on("pip-toggle", (_, pipEnabled) => {
+			bar.refreshMenu();
+		});
+	}
+
 	// Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
 	document.addEventListener('apiLoaded', () => {
 		setNavbarMargin();

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

@@ -0,0 +1,37 @@
+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

@@ -2,7 +2,7 @@ const path = require("path");
 
 const { app, ipcMain } = require("electron");
 
-const { setOptions } = require("../../config/plugins");
+const { setOptions, isEnabled } = require("../../config/plugins");
 const { injectCSS } = require("../utils");
 
 let isInPiP = false;
@@ -22,6 +22,15 @@ 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 });
@@ -38,44 +47,24 @@ const togglePiP = async () => {
 		win.webContents.on("before-input-event", blockShortcutsInPiP);
 
 		win.setFullScreenable(false);
-		await win.webContents.executeJavaScript(
-			// Go fullscreen
-			`
-			var exitButton = document.querySelector(".exit-fullscreen-button");
-			exitButton.replaceWith(exitButton.cloneNode(true));
-			document.querySelector(".exit-fullscreen-button").onclick = () => togglePictureInPicture();
 
-			var onPlayerDblClick = document.querySelector('#player').onDoubleClick_
+		runAdaptors();
-			document.querySelector('#player').onDoubleClick_ = () => {};
+		win.webContents.send("pip-toggle", true);
-			document.querySelector('#expanding-menu').onmouseleave = () => document.querySelector('.middle-controls').click();
-			if (!document.querySelector("ytmusic-player-page").playerPageOpen_) {
-  				document.querySelector(".toggle-player-page-button").click();
-			}
-			document.querySelector(".fullscreen-button").click();
-			document.querySelector("ytmusic-player-bar").classList.add("pip");
-			`
-		);
-		win.setFullScreenable(true);
 
 		app.dock?.hide();
 		win.setVisibleOnAllWorkspaces(true, {
 			visibleOnFullScreen: true,
 		});
 		app.dock?.show();
-		win.setAlwaysOnTop(true, "screen-saver", 1);
+		if (options.alwaysOnTop) {
+			win.setAlwaysOnTop(true, "screen-saver", 1);
+		}
 	} else {
 		win.webContents.removeListener("before-input-event", blockShortcutsInPiP);
+		win.setFullScreenable(true);
 
-		await win.webContents.executeJavaScript(
+		runAdaptors();
-			// Exit fullscreen
+		win.webContents.send("pip-toggle", false);
-			`
-			document.querySelector('#player').onDoubleClick_ = onPlayerDblClick;
-			document.querySelector('#expanding-menu').onmouseleave = undefined;
-			document.querySelector(".exit-fullscreen-button").replaceWith(exitButton);
-			document.querySelector(".exit-fullscreen-button").click();
-			document.querySelector("ytmusic-player-bar").classList.remove("pip");
-			`
-		);
 
 		win.setVisibleOnAllWorkspaces(false);
 		win.setAlwaysOnTop(false);
@@ -114,4 +103,3 @@ module.exports = (_win, _options) => {
 };
 
 module.exports.setOptions = setLocalOptions;
-

plugins/picture-in-picture/front.js

@@ -28,10 +28,46 @@ global.togglePictureInPicture = () => {
 	ipcRenderer.send("picture-in-picture");
 };
 
+const listenForToggle = () => {
+	const originalExitButton = $(".exit-fullscreen-button");
+	const clonedExitButton = originalExitButton.cloneNode(true);
+	clonedExitButton.onclick = () => togglePictureInPicture();
+
+	const player = $('#player');
+	const onPlayerDblClick = player.onDoubleClick_;
+
+	const playerBar = $("ytmusic-player-bar");
+	const expandMenu = $('#expanding-menu');
+	const middleControls = $('.middle-controls');
+	const playerPage = $("ytmusic-player-page");
+	const togglePlayerPageButton = $(".toggle-player-page-button");
+	const fullScreenButton = $(".fullscreen-button");
+
+	ipcRenderer.on('pip-toggle', (_, isPip) => {
+		if (isPip) {
+			$(".exit-fullscreen-button").replaceWith(clonedExitButton);
+			player.onDoubleClick_ = () => {};
+			expandMenu.onmouseleave = () => middleControls.click();
+			if (!playerPage.playerPageOpen_) {
+				togglePlayerPageButton.click();
+			}
+			fullScreenButton.click();
+			playerBar.classList.add("pip");
+		} else {
+			$(".exit-fullscreen-button").replaceWith(originalExitButton);
+			player.onDoubleClick_ = onPlayerDblClick;
+			expandMenu.onmouseleave = undefined;
+			originalExitButton.click();
+			playerBar.classList.remove("pip");
+		}
+	});
+}
+
 function observeMenu(options) {
 	document.addEventListener(
 		"apiLoaded",
 		() => {
+			listenForToggle();
 			const minButton = $(".player-minimize-button");
 			// remove native listeners
 			minButton.replaceWith(minButton.cloneNode(true)); 

plugins/picture-in-picture/menu.js

@@ -1,6 +1,15 @@
 const { setOptions } = require("./back.js");
 
-module.exports = (_win, options) => [
+module.exports = (win, options) => [
+    {
+        label: "Always on top",
+        type: "checkbox",
+        checked: options.alwaysOnTop,
+        click: (item) => {
+            setOptions({ alwaysOnTop: item.checked });
+            win.setAlwaysOnTop(item.checked);
+        },
+    },
     {
         label: "Save window position",
         type: "checkbox",