From 8a9a3fc69dfd1ad5d7e10fb54998db50628d6e2e Mon Sep 17 00:00:00 2001
From: TC <th-ch@users.noreply.github.com>
Date: Wed, 1 Feb 2023 22:25:33 +0100
Subject: [PATCH 1/4] Add option `useNativePiP` in PiP plugin to use native PiP

---
 plugins/picture-in-picture/front.js | 34 ++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/plugins/picture-in-picture/front.js b/plugins/picture-in-picture/front.js
index 788a908e..5d0bf302 100644
--- a/plugins/picture-in-picture/front.js
+++ b/plugins/picture-in-picture/front.js
@@ -5,6 +5,7 @@ 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 +40,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 = () => {
@@ -75,19 +92,24 @@ const listenForToggle = () => {
 }
 
 function observeMenu(options) {
+	useNativePiP = options.useNativePiP;
 	document.addEventListener(
 		"apiLoaded",
 		() => {
-			listenForToggle();
+			if (!useNativePiP) {
+				listenForToggle();
+			}
 			// remove native listeners
-			cloneButton(".player-minimize-button").onclick = () =>  {
-				global.togglePictureInPicture();
-				setTimeout(() => $('#player').click());
+			cloneButton(".player-minimize-button").onclick = async () => {
+				const isUsingNativePiP = await global.togglePictureInPicture();
+				if (!isUsingNativePiP) {
+					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,

From 0b49d57969dad31734c0552da4f4d3588eaae393 Mon Sep 17 00:00:00 2001
From: TC <th-ch@users.noreply.github.com>
Date: Wed, 8 Feb 2023 23:46:24 +0100
Subject: [PATCH 2/4] Always listen for toggle

---
 plugins/picture-in-picture/front.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/plugins/picture-in-picture/front.js b/plugins/picture-in-picture/front.js
index 5d0bf302..88cc1bfb 100644
--- a/plugins/picture-in-picture/front.js
+++ b/plugins/picture-in-picture/front.js
@@ -96,9 +96,7 @@ function observeMenu(options) {
 	document.addEventListener(
 		"apiLoaded",
 		() => {
-			if (!useNativePiP) {
-				listenForToggle();
-			}
+			listenForToggle();
 			// remove native listeners
 			cloneButton(".player-minimize-button").onclick = async () => {
 				const isUsingNativePiP = await global.togglePictureInPicture();

From 781a726f4bede4cbfe8768cfdedc01451aebca70 Mon Sep 17 00:00:00 2001
From: TC <th-ch@users.noreply.github.com>
Date: Wed, 8 Feb 2023 23:46:43 +0100
Subject: [PATCH 3/4] Add menu option for native PiP

---
 plugins/picture-in-picture/menu.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/plugins/picture-in-picture/menu.js b/plugins/picture-in-picture/menu.js
index bdbc1cee..61014c22 100644
--- a/plugins/picture-in-picture/menu.js
+++ b/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 });
+        },
     }
 ];

From 97c6cad5038968b5bc165c48b7406e13e049a7eb Mon Sep 17 00:00:00 2001
From: th-ch <th-ch@users.noreply.github.com>
Date: Thu, 9 Feb 2023 22:33:07 +0100
Subject: [PATCH 4/4] Avoid video pause

Co-authored-by: Araxeus <oaeben@gmail.com>
---
 plugins/picture-in-picture/front.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/plugins/picture-in-picture/front.js b/plugins/picture-in-picture/front.js
index 88cc1bfb..05f8ee57 100644
--- a/plugins/picture-in-picture/front.js
+++ b/plugins/picture-in-picture/front.js
@@ -100,9 +100,7 @@ function observeMenu(options) {
 			// remove native listeners
 			cloneButton(".player-minimize-button").onclick = async () => {
 				const isUsingNativePiP = await global.togglePictureInPicture();
-				if (!isUsingNativePiP) {
-					setTimeout(() => $("#player").click());
-				}
+				setTimeout(() => $("#player").click());
 			};
 
 			// allows easily closing the menu by programmatically clicking outside of it