1 files changed, 54 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());