Merge branch 'master' of github.com:th-ch/youtube-music into native-pip

* 'master' of github.com:th-ch/youtube-music:
  fix PiP hotkey active in searchbox
  remove titlebar from in-app-menu+PiP
  Bump "@cliqz/adblocker-electron" version
  Only run the release stage if it is the main repo
  Only build without release if it is a fork
  Use del-cli instead of del (for windows)
  Replace electron-icon-maker by a more up-to-date fork
  Adapt CI to yarn v3
  Migrate to yarn v3
  Track transitioning status
  Fixed recursive volume changes that caused cpu spike, Switched Repeat Modes to NONE|ONE|ALL
  Remove references to rimraf
  Add first version for crossfade plugin
  removed unnecessary if and used better Repeat change detection
  connected mpris shuffle, fixed volume, mpris volumes allowed 0.0-1.0
  fixed 'repeatChanged' modes being different depending on selected youtube music language
  fix precise-volume+searchbox interaction
  fix navbar position

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,5 +1,8 @@
 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");
 
@@ -71,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_) {
@@ -81,12 +87,14 @@ 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";
 		}
 	});
 }
@@ -97,9 +105,9 @@ function observeMenu(options) {
 		"apiLoaded",
 		() => {
 			listenForToggle();
-			// remove native listeners
+
 			cloneButton(".player-minimize-button").onclick = async () => {
-				const isUsingNativePiP = await global.togglePictureInPicture();
+				await global.togglePictureInPicture();
 				setTimeout(() => $("#player").click());
 			};
 
@@ -115,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/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;