Picture in Picture

features/features.json

@@ -1,7 +1,7 @@
 [
   {
     "version": 2,
-    "id": "video-recorder",
+    "id": "picture-in-picture",
     "versionAdded": "v4.0.0"
   },
   {

features/picture-in-picture/data.json

@@ -0,0 +1,23 @@
+{
+  "title": "Picture in Picture",
+  "description": "Adds a button to the project page that allows you to open the stage up and continue to view it while using other tabs or apps.",
+  "credits": [
+    {
+      "username": "stio_studio",
+      "url": "https://stio.studio/"
+    }
+  ],
+  "type": ["Website"],
+  "tags": ["New", "Featured"],
+  "dynamic": true,
+  "scripts": [
+    {
+      "file": "picture-in-picture.js",
+      "runOn": "/projects/*"
+    }
+  ],
+  "components": [{
+    "type": "info",
+    "content": "Picture in Picture will not allow you to interact with the project. You must be on the project page to interact with it."
+  }]
+}

features/picture-in-picture/picture-in-picture.js

@@ -0,0 +1,56 @@
+export default async function ({ feature, console }) {
+	const canvas = feature.traps.vm.renderer.canvas;
+
+	let video = document.createElement("video");
+	// video.setAttribute("controls", "controls");
+	video.setAttribute("autoplay", "autoplay");
+	video.setAttribute("style", "width: 100%; height: 100%");
+	// document.querySelector(".preview .inner").append(video);
+
+	video.srcObject = canvas.captureStream(30)
+
+	await new Promise(async (resolve, reject) => {
+		(async () => {
+			const rem = await ScratchTools.waitForElement(".preview .inner .flex-row.action-buttons")
+			resolve(rem);
+		})();
+		(async () => {
+			const rem = await ScratchTools.waitForElement(".menu-bar_account-info-group_MeJZP")
+			resolve(rem);
+		})();
+	})
+
+	let openPopup = document.createElement("button");
+
+	ScratchTools.waitForElements(".preview .inner .flex-row.action-buttons", async function (row) {
+		if (row.querySelector(".ste-picture-in-picture")) return;
+		openPopup = document.createElement("button");
+		openPopup.className = "button action-button ste-picture-in-picture";
+		openPopup.textContent = "Picture in Picture";
+		row.insertAdjacentElement("afterbegin", openPopup);
+		openPopup.addEventListener('click', () => {
+			popup()
+		})
+	})
+	ScratchTools.waitForElements(".menu-bar_account-info-group_MeJZP", async function (row) {
+		if (row.querySelector(".ste-picture-in-picture")) return;
+		openPopup = document.createElement("div");
+		openPopup.className = "menu-bar_menu-bar-item_oLDa- menu-bar_hoverable_c6WFB";
+		let rem = document.createElement("div");
+		rem.textContent = "Picture in Picture";
+		openPopup.append(rem);
+		row.insertAdjacentElement("afterbegin", openPopup);
+		openPopup.addEventListener('click', () => {
+			popup()
+		})
+	})
+
+	function popup() {
+		try {
+			video.requestPictureInPicture()
+		}
+		catch {
+			console.log("Picture in Picture not supported or failed to request")
+		}
+	}
+}