Merge pull request #241 from marcusschiesser/codex/add-multiple-layout-presets-for-video

Add selectable webcam layout presets (Picture in Picture, Vertical Stack)

Author: siddharthvaddem

.nvmrc

@@ -0,0 +1 @@
+22.22.1

package-lock.json

@@ -3,6 +3,11 @@
 	"private": true,
 	"version": "1.2.0",
 	"type": "module",
+	"packageManager": "npm@10.9.4",
+	"engines": {
+		"node": "22.22.1",
+		"npm": "10.9.4"
+	},
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build && electron-builder",

package.json

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { LaunchWindow } from "./components/launch/LaunchWindow";
 import { SourceSelector } from "./components/launch/SourceSelector";
+import { Toaster } from "./components/ui/sonner";
 import { TooltipProvider } from "./components/ui/tooltip";
 import { ShortcutsConfigDialog } from "./components/video-editor/ShortcutsConfigDialog";
 import VideoEditor from "./components/video-editor/VideoEditor";
@@ -48,5 +49,10 @@ export default function App() {
 		}
 	})();
 
-	return <TooltipProvider>{content}</TooltipProvider>;
+	return (
+		<TooltipProvider>
+			{content}
+			<Toaster theme="dark" className="pointer-events-auto" />
+		</TooltipProvider>
+	);
 }

src/App.tsx

@@ -19,6 +19,7 @@ import { RxDragHandleDots2 } from "react-icons/rx";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
 import { useScreenRecorder } from "../../hooks/useScreenRecorder";
+import { requestCameraAccess } from "../../lib/requestCameraAccess";
 import { formatTimePadded } from "../../utils/timeUtils";
 import { AudioLevelMeter } from "../ui/audio-level-meter";
 import { Tooltip } from "../ui/tooltip";
@@ -110,6 +111,16 @@ export function LaunchWindow() {
 		};
 	}, [recording, recordingStart]);
 
+	useEffect(() => {
+		if (!import.meta.env.DEV) {
+			return;
+		}
+
+		void requestCameraAccess().catch((error) => {
+			console.warn("Failed to trigger camera access request during development:", error);
+		});
+	}, []);
+
 	const [selectedSource, setSelectedSource] = useState("Screen");
 	const [hasSelectedSource, setHasSelectedSource] = useState(false);
 
@@ -251,8 +262,8 @@ export function LaunchWindow() {
 						</button>
 						<button
 							className={`${hudIconBtnClasses} ${webcamEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
-							onClick={() => {
-								void setWebcamEnabled(!webcamEnabled);
+							onClick={async () => {
+								await setWebcamEnabled(!webcamEnabled);
 							}}
 							title={webcamEnabled ? "Disable webcam" : "Enable webcam"}
 						>

src/components/launch/LaunchWindow.tsx

@@ -25,10 +25,18 @@ import {
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { Slider } from "@/components/ui/slider";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getAssetPath } from "@/lib/assetPath";
+import { WEBCAM_LAYOUT_PRESETS } from "@/lib/compositeLayout";
 import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
 import { GIF_FRAME_RATES, GIF_SIZE_PRESETS } from "@/lib/exporter";
 import { cn } from "@/lib/utils";
@@ -43,6 +51,7 @@ import type {
 	CropRegion,
 	FigureData,
 	PlaybackSpeed,
+	WebcamLayoutPreset,
 	ZoomDepth,
 } from "./types";
 import { SPEED_OPTIONS } from "./types";
@@ -132,6 +141,9 @@ interface SettingsPanelProps {
 	selectedSpeedValue?: PlaybackSpeed | null;
 	onSpeedChange?: (speed: PlaybackSpeed) => void;
 	onSpeedDelete?: (id: string) => void;
+	hasWebcam?: boolean;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	onWebcamLayoutPresetChange?: (preset: WebcamLayoutPreset) => void;
 }
 
 export default SettingsPanel;
@@ -197,6 +209,9 @@ export function SettingsPanel({
 	selectedSpeedValue,
 	onSpeedChange,
 	onSpeedDelete,
+	hasWebcam = false,
+	webcamLayoutPreset = "picture-in-picture",
+	onWebcamLayoutPresetChange,
 }: SettingsPanelProps) {
 	const [wallpaperPaths, setWallpaperPaths] = useState<string[]>([]);
 	const [customImages, setCustomImages] = useState<string[]>([]);
@@ -567,7 +582,47 @@ export function SettingsPanel({
 					)}
 				</div>
 
-				<Accordion type="multiple" defaultValue={["effects", "background"]} className="space-y-1">
+				<Accordion
+					type="multiple"
+					defaultValue={hasWebcam ? ["layout", "effects", "background"] : ["effects", "background"]}
+					className="space-y-1"
+				>
+					{hasWebcam && (
+						<AccordionItem
+							value="layout"
+							className="border-white/5 rounded-xl bg-white/[0.02] px-3"
+						>
+							<AccordionTrigger className="py-2.5 hover:no-underline">
+								<div className="flex items-center gap-2">
+									<Sparkles className="w-4 h-4 text-[#34B27B]" />
+									<span className="text-xs font-medium">Layout</span>
+								</div>
+							</AccordionTrigger>
+							<AccordionContent className="pb-3">
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<div className="text-[10px] font-medium text-slate-300 mb-1.5">Preset</div>
+									<Select
+										value={webcamLayoutPreset}
+										onValueChange={(value: WebcamLayoutPreset) =>
+											onWebcamLayoutPresetChange?.(value)
+										}
+									>
+										<SelectTrigger className="h-8 bg-black/20 border-white/10 text-xs">
+											<SelectValue placeholder="Select preset" />
+										</SelectTrigger>
+										<SelectContent>
+											{WEBCAM_LAYOUT_PRESETS.map((preset) => (
+												<SelectItem key={preset.value} value={preset.value} className="text-xs">
+													{preset.label}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+								</div>
+							</AccordionContent>
+						</AccordionItem>
+					)}
+
 					<AccordionItem value="effects" className="border-white/5 rounded-xl bg-white/[0.02] px-3">
 						<AccordionTrigger className="py-2.5 hover:no-underline">
 							<div className="flex items-center gap-2">

src/components/video-editor/SettingsPanel.tsx

@@ -2,7 +2,6 @@ import type { Span } from "dnd-timeline";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { toast } from "sonner";
-import { Toaster } from "@/components/ui/sonner";
 import { useShortcuts } from "@/contexts/ShortcutsContext";
 import { INITIAL_EDITOR_STATE, useEditorHistory } from "@/hooks/useEditorHistory";
 import {
@@ -76,6 +75,7 @@ export default function VideoEditor() {
 		borderRadius,
 		padding,
 		aspectRatio,
+		webcamLayoutPreset,
 	} = editorState;
 
 	// ── Non-undoable state
@@ -173,6 +173,7 @@ export default function VideoEditor() {
 				speedRegions: normalizedEditor.speedRegions,
 				annotationRegions: normalizedEditor.annotationRegions,
 				aspectRatio: normalizedEditor.aspectRatio,
+				webcamLayoutPreset: normalizedEditor.webcamLayoutPreset,
 			});
 			setExportQuality(normalizedEditor.exportQuality);
 			setExportFormat(normalizedEditor.exportFormat);
@@ -240,6 +241,7 @@ export default function VideoEditor() {
 				speedRegions,
 				annotationRegions,
 				aspectRatio,
+				webcamLayoutPreset,
 				exportQuality,
 				exportFormat,
 				gifFrameRate,
@@ -261,6 +263,7 @@ export default function VideoEditor() {
 		speedRegions,
 		annotationRegions,
 		aspectRatio,
+		webcamLayoutPreset,
 		exportQuality,
 		exportFormat,
 		gifFrameRate,
@@ -352,6 +355,7 @@ export default function VideoEditor() {
 				speedRegions,
 				annotationRegions,
 				aspectRatio,
+				webcamLayoutPreset,
 				exportQuality,
 				exportFormat,
 				gifFrameRate,
@@ -404,6 +408,7 @@ export default function VideoEditor() {
 			speedRegions,
 			annotationRegions,
 			aspectRatio,
+			webcamLayoutPreset,
 			exportQuality,
 			exportFormat,
 			gifFrameRate,
@@ -1021,6 +1026,7 @@ export default function VideoEditor() {
 						videoPadding: padding,
 						cropRegion,
 						annotationRegions,
+						webcamLayoutPreset,
 						previewWidth,
 						previewHeight,
 						onProgress: (progress: ExportProgress) => {
@@ -1148,6 +1154,7 @@ export default function VideoEditor() {
 						padding,
 						cropRegion,
 						annotationRegions,
+						webcamLayoutPreset,
 						previewWidth,
 						previewHeight,
 						onProgress: (progress: ExportProgress) => {
@@ -1212,6 +1219,7 @@ export default function VideoEditor() {
 			annotationRegions,
 			isPlaying,
 			aspectRatio,
+			webcamLayoutPreset,
 			exportQuality,
 			handleExportSaved,
 		],
@@ -1351,6 +1359,7 @@ export default function VideoEditor() {
 												ref={videoPlaybackRef}
 												videoPath={videoPath || ""}
 												webcamVideoPath={webcamVideoPath || undefined}
+												webcamLayoutPreset={webcamLayoutPreset}
 												onDurationChange={setDuration}
 												onTimeUpdate={setCurrentTime}
 												currentTime={currentTime}
@@ -1474,6 +1483,9 @@ export default function VideoEditor() {
 							cropRegion={cropRegion}
 							onCropChange={(r) => pushState({ cropRegion: r })}
 							aspectRatio={aspectRatio}
+							hasWebcam={Boolean(webcamVideoPath)}
+							webcamLayoutPreset={webcamLayoutPreset}
+							onWebcamLayoutPresetChange={(preset) => pushState({ webcamLayoutPreset: preset })}
 							videoElement={videoPlaybackRef.current?.video || null}
 							exportQuality={exportQuality}
 							onExportQualityChange={setExportQuality}
@@ -1521,8 +1533,6 @@ export default function VideoEditor() {
 				</PanelGroup>
 			</div>
 
-			<Toaster theme="dark" className="pointer-events-auto" />
-
 			<ExportDialog
 				isOpen={showExportDialog}
 				onClose={() => setShowExportDialog(false)}