2 files changed, 130 insertions, 1 deletions

diff --git a/apps/web/src/preview/components/toolbar.tsx b/apps/web/src/preview/components/toolbar.tsx
index 1a5ce1bc..5f50e581 100644
--- a/apps/web/src/preview/components/toolbar.tsx
+++ b/apps/web/src/preview/components/toolbar.tsx
@@ -1,13 +1,15 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useSyncExternalStore } from "react";
 import { useEditor } from "@/editor/use-editor";
 import { formatTimecode } from "opencut-wasm";
 import { invokeAction } from "@/actions";
 import { EditableTimecode } from "@/components/editable-timecode";
 import { Button } from "@/components/ui/button";
 import {
+	ArrowExpandDiagonal01Icon,
 	FullScreenIcon,
+	Minimize01Icon,
 	PauseIcon,
 	PlayIcon,
 } from "@hugeicons/core-free-icons";
@@ -21,6 +23,12 @@ import {
 	SelectSeparator,
 } from "@/components/ui/select";
 import { PREVIEW_ZOOM_PRESETS } from "@/preview/zoom";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { usePreviewPopoutStore } from "@/preview/popout-store";
 import { usePreviewViewport } from "./preview-viewport";
 import { GridPopover } from "./guide-popover";
 import { usePreviewStore } from "@/preview/preview-store";
@@ -51,6 +59,7 @@ export function PreviewToolbar({
 						)}
 					</Button>
 				</GridPopover> */}
+				<PopoutButton />
 				<Button variant="text" onClick={onToggleFullscreen}>
 					<HugeiconsIcon icon={FullScreenIcon} />
 				</Button>
@@ -59,6 +68,50 @@ export function PreviewToolbar({
 	);
 }
 
+function PopoutButton() {
+	const isPoppedOut = usePreviewPopoutStore(
+		(state) => state.container !== null,
+	);
+	const openPopout = usePreviewPopoutStore((state) => state.openPopout);
+	const dockPopout = usePreviewPopoutStore((state) => state.dockPopout);
+	const isSupported = useSyncExternalStore(
+		() => () => {},
+		() => "documentPictureInPicture" in window,
+		() => false,
+	);
+
+	if (!isSupported) {
+		return null;
+	}
+
+	const togglePopout = () => {
+		if (isPoppedOut) {
+			dockPopout();
+		} else {
+			openPopout();
+		}
+	};
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					variant="text"
+					onClick={togglePopout}
+					aria-label={isPoppedOut ? "Dock preview" : "Pop out preview"}
+				>
+					<HugeiconsIcon
+						icon={isPoppedOut ? Minimize01Icon : ArrowExpandDiagonal01Icon}
+					/>
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>
+				{isPoppedOut ? "Dock preview" : "Pop out preview"}
+			</TooltipContent>
+		</Tooltip>
+	);
+}
+
 function TimecodeDisplay() {
 	const editor = useEditor();
 	const totalDuration = useEditor((e) => e.timeline.getTotalDuration());
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 });
+		},
+	}),
+);