Export frames as video

pipes/rewind/src/app/api/export-video/route.ts

@@ -0,0 +1,37 @@
+import { pipe, Settings } from "@screenpipe/js";
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+	try {
+		const { frameIds } = await request.json();
+		const settings = (await pipe.settings.getAll()) as Settings & {
+			fps: number;
+		};
+
+		console.log(settings.fps);
+
+		if (!frameIds || !Array.isArray(frameIds)) {
+			return NextResponse.json({ error: "Invalid frame IDs" }, { status: 400 });
+		}
+
+		const response = await fetch("http://localhost:3030/frames/export", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ frame_ids: frameIds, fps: settings.fps ?? 0.5 }),
+		});
+
+		if (!response.ok) {
+			throw new Error("Failed to export video");
+		}
+
+		const data = await response.json();
+		return NextResponse.json(data);
+	} catch (error) {
+		return NextResponse.json(
+			{ error: "Failed to export video" },
+			{ status: 500 },
+		);
+	}
+}

pipes/rewind/src/app/layout.tsx

@@ -5,6 +5,7 @@ import { SearchCommand } from "@/components/search-command";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { getScreenpipeAppSettings } from "@/lib/actions/get-screenpipe-app-settings";
 import { SettingsProvider } from "@/components/settings-provider";
+import { Toaster } from "@/components/ui/toaster";
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -62,6 +63,7 @@ export default async function RootLayout({
 							<NuqsAdapter>
 								<SearchCommand />
 								{children}
+								<Toaster />
 							</NuqsAdapter>
 						</>
 					)}

pipes/rewind/src/components/export-button.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import { Loader2, Video } from "lucide-react";
+import { useTimelineSelection } from "@/lib/hooks/use-timeline-selection";
+import { toast } from "./ui/use-toast";
+
+export function ExportButton() {
+	const [isExporting, setIsExporting] = useState(false);
+	const { selectionRange } = useTimelineSelection();
+
+	const handleExport = async () => {
+		if (!selectionRange?.frameIds.length) {
+			toast({
+				title: "No frames selected",
+				description: "Please select frames to export",
+				variant: "destructive",
+			});
+			return;
+		}
+
+		setIsExporting(true);
+		try {
+			const response = await fetch("/api/export-video", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					frameIds: selectionRange.frameIds,
+					fps: 30,
+				}),
+			});
+
+			if (!response.ok) {
+				throw new Error("Failed to export video");
+			}
+
+			const data = await response.json();
+			toast({
+				title: "Video exported",
+				description:
+					"Your video has been exported successfully. check your desktop",
+			});
+		} catch (error) {
+			toast({
+				title: "Export failed",
+				description: "Failed to export video. Please try again.",
+				variant: "destructive",
+			});
+		} finally {
+			setIsExporting(false);
+		}
+	};
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "l") {
+				e.preventDefault();
+				if (!isExporting && selectionRange?.frameIds?.length) {
+					handleExport();
+				}
+			}
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isExporting, selectionRange]);
+
+	return (
+		<Button
+			variant="outline"
+			onClick={handleExport}
+			className="h-auto px-3 py-1 bg-background hover:bg-accent border text-foreground text-xs rounded flex items-center gap-2 transition-colors"
+			disabled={isExporting || !selectionRange?.frameIds.length}
+		>
+			{isExporting ? (
+				<Loader2 className="h-4 w-4 animate-spin mr-2" />
+			) : (
+				<Video className="h-4 w-4 mr-2" />
+			)}
+			Export Video
+		</Button>
+	);
+}

pipes/rewind/src/components/timeline/ai-panel.tsx

@@ -18,6 +18,7 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useSettings } from "@/lib/hooks/use-settings";
+import { ExportButton } from "../export-button";
 
 interface AIPanelProps {
 	position: { x: number; y: number };
@@ -288,7 +289,7 @@ export function AIPanel({
 				left: position.x,
 				top: position.y,
 				width: chatWindowSize.width,
-				height: isExpanded ? chatWindowSize.height : 120,
+				height: isExpanded ? chatWindowSize.height : "auto",
 				cursor: isDraggingPanel ? "grabbing" : "default",
 			}}
 		>
@@ -326,7 +327,7 @@ export function AIPanel({
 				</div>
 
 				{!isExpanded && (
-					<div className="p-4">
+					<div className="p-4 space-y-2">
 						<button
 							className="px-3 py-1 bg-background hover:bg-accent border text-foreground text-xs rounded flex items-center gap-2 transition-colors"
 							onClick={(e) => {
@@ -342,6 +343,7 @@ export function AIPanel({
 								{osType === "macos" ? "⌘K" : "Ctrl+K"}
 							</span>
 						</button>
+						<ExportButton />
 					</div>
 				)}
 			</div>

pipes/rewind/src/components/timeline/timeline-dock-section.tsx

@@ -399,6 +399,7 @@ export function TimelineIconsSection({
                   setSelectionRange({
                     start: selectedApp.timestamp,
                     end: new Date(selectedApp.timestamp.getTime() + 60000),
+                    frameIds: [],
                   });
                 }}
               >

pipes/rewind/src/components/timeline/timeline-selection.tsx

@@ -33,7 +33,7 @@ export function TimelineSelection({
 		setStartChunk(chunkIndex);
 		setCurrentChunk(chunkIndex);
 		const date = getDateFromChunk(chunkIndex);
-		setSelectionRange({ start: date, end: date });
+		setSelectionRange({ start: date, end: date, frameIds: [] });
 	};
 
 	const handleMouseMove = (e: MouseEvent, chunkIndex: number) => {
@@ -46,6 +46,7 @@ export function TimelineSelection({
 		setSelectionRange({
 			start: getDateFromChunk(start),
 			end: getDateFromChunk(end + 1), // +1 to include the full chunk
+			frameIds: [],
 		});
 	};
 

pipes/rewind/src/components/timeline/timeline.tsx

@@ -146,7 +146,7 @@ export const TimelineSlider = ({
 
 		// Set initial selection range
 		const startDate = new Date(frames[index].timestamp);
-		setSelectionRange({ start: startDate, end: startDate });
+		setSelectionRange({ start: startDate, end: startDate, frameIds: [] });
 	};
 
 	// Handle drag over
@@ -162,13 +162,18 @@ export const TimelineSlider = ({
 
 			setSelectedIndices(newSelection);
 
-			// Update selection range
+			// Get frame IDs for the selection
+			const selectedFrameIds = Array.from(newSelection).map(
+				(i) => frames[i].devices[0].frame_id,
+			);
+
+			// Update selection range with frame IDs
 			setSelectionRange({
 				end: new Date(frames[start].timestamp),
 				start: new Date(frames[end].timestamp),
+				frameIds: selectedFrameIds,
 			});
 
-			// Notify parent of selection change
 			if (onSelectionChange) {
 				const selectedFrames = Array.from(newSelection).map((i) => frames[i]);
 				onSelectionChange(selectedFrames);

pipes/rewind/src/lib/hooks/use-timeline-selection.tsx

@@ -1,33 +1,35 @@
-import { createContext, useContext, ReactNode, useState } from "react";
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface TimelineSelection {
+	start: Date;
+	end: Date;
+	frameIds: string[];
+}
 
 interface TimelineContextType {
-  selectionRange: { start: Date; end: Date } | null;
-  setSelectionRange: (range: { start: Date; end: Date } | null) => void;
+	selectionRange: TimelineSelection | null;
+	setSelectionRange: (range: TimelineSelection | null) => void;
 }
 
-const TimelineContext = createContext<TimelineContextType | undefined>(
-  undefined
-);
+const TimelineContext = createContext<TimelineContextType | null>(null);
 
 export function TimelineProvider({ children }: { children: ReactNode }) {
-  const [selectionRange, setSelectionRange] = useState<{
-    start: Date;
-    end: Date;
-  } | null>(null);
+	const [selectionRange, setSelectionRange] =
+		useState<TimelineSelection | null>(null);
 
-  return (
-    <TimelineContext.Provider value={{ selectionRange, setSelectionRange }}>
-      {children}
-    </TimelineContext.Provider>
-  );
+	return (
+		<TimelineContext.Provider value={{ selectionRange, setSelectionRange }}>
+			{children}
+		</TimelineContext.Provider>
+	);
 }
 
 export function useTimelineSelection() {
-  const context = useContext(TimelineContext);
-  if (!context) {
-    throw new Error(
-      "useTimelineSelection must be used within a TimelineProvider"
-    );
-  }
-  return context;
+	const context = useContext(TimelineContext);
+	if (!context) {
+		throw new Error(
+			"useTimelineSelection must be used within a TimelineProvider",
+		);
+	}
+	return context;
 }