1 files changed, 76 insertions, 0 deletions
diff --git a/apps/web/src/preview/popout-store.ts b/apps/web/src/preview/popout-store.ts
new file mode 100644
index 00000000..1b91f6a2
--- /dev/null
+++ b/apps/web/src/preview/popout-store.ts
@@ -0,0 +1,76 @@
+import { create } from "zustand";
+
+interface PreviewPopoutState {
+	pipWindow: Window | null;
+	container: HTMLElement | null;
+	openPopout: () => Promise<void>;
+	dockPopout: () => void;
+}
+
+function copyStylesInto({ pipWindow }: { pipWindow: Window }) {
+	const styleNodes = document.head.querySelectorAll(
+		"style, link[rel='stylesheet']",
+	);
+	for (const node of styleNodes) {
+		if (node instanceof HTMLStyleElement) {
+			pipWindow.document.head.appendChild(node.cloneNode(true));
+		} else if (node instanceof HTMLLinkElement) {
+			const link = pipWindow.document.createElement("link");
+			link.rel = "stylesheet";
+			link.href = node.href;
+			pipWindow.document.head.appendChild(link);
+		}
+	}
+}
+
+function preparePipDocument({ pipWindow }: { pipWindow: Window }) {
+	pipWindow.document.documentElement.className =
+		document.documentElement.className;
+	pipWindow.document.documentElement.style.height = "100%";
+	pipWindow.document.body.className = document.body.className;
+	pipWindow.document.body.style.margin = "0";
+	pipWindow.document.body.style.height = "100%";
+	pipWindow.document.body.style.overflow = "hidden";
+	pipWindow.document.title = "Preview";
+	copyStylesInto({ pipWindow });
+}
+
+export const usePreviewPopoutStore = create<PreviewPopoutState>()(
+	(set, get) => ({
+		pipWindow: null,
+		container: null,
+		openPopout: async () => {
+			if (get().container !== null) {
+				return;
+			}
+			if (!("documentPictureInPicture" in window)) {
+				return;
+			}
+			const pip = window.documentPictureInPicture;
+			if (!pip) {
+				return;
+			}
+			const pipWindow = await pip.requestWindow();
+			preparePipDocument({ pipWindow });
+			const container = pipWindow.document.createElement("div");
+			container.style.width = "100%";
+			container.style.height = "100%";
+			pipWindow.document.body.appendChild(container);
+			pipWindow.addEventListener(
+				"pagehide",
+				() => {
+					set({ pipWindow: null, container: null });
+				},
+				{ once: true },
+			);
+			set({ pipWindow, container });
+		},
+		dockPopout: () => {
+			const { pipWindow } = get();
+			if (pipWindow && !pipWindow.closed) {
+				pipWindow.close();
+			}
+			set({ pipWindow: null, container: null });
+		},
+	}),
+);