Merge pull request #174 from FabLrc/feature/undo-redo

feat: implement undo/redo functionality in video editor

Author: siddharthvaddem

electron/electron-env.d.ts

@@ -27,8 +27,9 @@ interface Window {
 		getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>;
 		switchToEditor: () => Promise<void>;
 		openSourceSelector: () => Promise<void>;
-		selectSource: (source: any) => Promise<any>;
-		getSelectedSource: () => Promise<any>;
+		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
+		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;
+		getAssetBasePath: () => Promise<string | null>;
 		storeRecordedVideo: (
 			videoData: ArrayBuffer,
 			fileName: string,

electron/preload.ts

@@ -20,7 +20,7 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	openSourceSelector: () => {
 		return ipcRenderer.invoke("open-source-selector");
 	},
-	selectSource: (source: any) => {
+	selectSource: (source: ProcessedDesktopSource) => {
 		return ipcRenderer.invoke("select-source", source);
 	},
 	getSelectedSource: () => {

src/components/video-editor/CropControl.tsx

@@ -108,7 +108,9 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont
 		if (isDragging) {
 			try {
 				e.currentTarget.releasePointerCapture(e.pointerId);
-			} catch {}
+			} catch {
+				// Pointer may already be released; ignore.
+			}
 		}
 		setIsDragging(null);
 	};

src/components/video-editor/KeyboardShortcutsHelp.tsx

@@ -1,24 +1,10 @@
 import { HelpCircle, Settings2 } from "lucide-react";
-import { useEffect, useState } from "react";
 import { useShortcuts } from "@/contexts/ShortcutsContext";
-import { formatBinding, SHORTCUT_ACTIONS, SHORTCUT_LABELS } from "@/lib/shortcuts";
-import { formatShortcut } from "@/utils/platformUtils";
+import { FIXED_SHORTCUTS, formatBinding, SHORTCUT_ACTIONS, SHORTCUT_LABELS } from "@/lib/shortcuts";
 
 export function KeyboardShortcutsHelp() {
 	const { shortcuts, isMac, openConfig } = useShortcuts();
 
-	const [scrollLabels, setScrollLabels] = useState({
-		pan: "Shift + Ctrl + Scroll",
-		zoom: "Ctrl + Scroll",
-	});
-
-	useEffect(() => {
-		Promise.all([
-			formatShortcut(["shift", "mod", "Scroll"]),
-			formatShortcut(["mod", "Scroll"]),
-		]).then(([pan, zoom]) => setScrollLabels({ pan, zoom }));
-	}, []);
-
 	return (
 		<div className="relative group">
 			<HelpCircle className="w-4 h-4 text-slate-500 hover:text-[#34B27B] transition-colors cursor-help" />
@@ -47,25 +33,20 @@ export function KeyboardShortcutsHelp() {
 						</div>
 					))}
 
-					<div className="pt-1 border-t border-white/5 mt-1">
-						<div className="flex items-center justify-between">
-							<span className="text-slate-400">Pan Timeline</span>
-							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
-								{scrollLabels.pan}
-							</kbd>
-						</div>
-						<div className="flex items-center justify-between mt-1.5">
-							<span className="text-slate-400">Zoom Timeline</span>
-							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
-								{scrollLabels.zoom}
-							</kbd>
-						</div>
-						<div className="flex items-center justify-between mt-1.5">
-							<span className="text-slate-400">Cycle Annotations</span>
-							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
-								Tab
-							</kbd>
-						</div>
+					<div className="pt-1 border-t border-white/5 mt-1 space-y-1.5">
+						{FIXED_SHORTCUTS.map((fixed) => (
+							<div key={fixed.label} className="flex items-center justify-between">
+								<span className="text-slate-400">{fixed.label}</span>
+								<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
+									{isMac
+										? fixed.display
+												.replace(/Ctrl/g, "⌘")
+												.replace(/Shift/g, "⇧")
+												.replace(/Alt/g, "⌥")
+										: fixed.display}
+								</kbd>
+							</div>
+						))}
 					</div>
 				</div>
 			</div>

src/components/video-editor/SettingsPanel.tsx

@@ -38,6 +38,7 @@ import type {
 	AnnotationRegion,
 	AnnotationType,
 	CropRegion,
+	FigureData,
 	PlaybackSpeed,
 	ZoomDepth,
 } from "./types";
@@ -86,14 +87,17 @@ interface SettingsPanelProps {
 	onTrimDelete?: (id: string) => void;
 	shadowIntensity?: number;
 	onShadowChange?: (intensity: number) => void;
+	onShadowCommit?: () => void;
 	showBlur?: boolean;
 	onBlurChange?: (showBlur: boolean) => void;
 	motionBlurEnabled?: boolean;
 	onMotionBlurChange?: (enabled: boolean) => void;
 	borderRadius?: number;
 	onBorderRadiusChange?: (radius: number) => void;
+	onBorderRadiusCommit?: () => void;
 	padding?: number;
 	onPaddingChange?: (padding: number) => void;
+	onPaddingCommit?: () => void;
 	cropRegion?: CropRegion;
 	onCropChange?: (region: CropRegion) => void;
 	aspectRatio: AspectRatio;
@@ -118,7 +122,7 @@ interface SettingsPanelProps {
 	onAnnotationContentChange?: (id: string, content: string) => void;
 	onAnnotationTypeChange?: (id: string, type: AnnotationType) => void;
 	onAnnotationStyleChange?: (id: string, style: Partial<AnnotationRegion["style"]>) => void;
-	onAnnotationFigureDataChange?: (id: string, figureData: any) => void;
+	onAnnotationFigureDataChange?: (id: string, figureData: FigureData) => void;
 	onAnnotationDelete?: (id: string) => void;
 	selectedSpeedId?: string | null;
 	selectedSpeedValue?: PlaybackSpeed | null;
@@ -148,14 +152,17 @@ export function SettingsPanel({
 	onTrimDelete,
 	shadowIntensity = 0,
 	onShadowChange,
+	onShadowCommit,
 	showBlur,
 	onBlurChange,
 	motionBlurEnabled = false,
 	onMotionBlurChange,
 	borderRadius = 0,
 	onBorderRadiusChange,
+	onBorderRadiusCommit,
 	padding = 50,
 	onPaddingChange,
+	onPaddingCommit,
 	cropRegion,
 	onCropChange,
 	aspectRatio,
@@ -196,7 +203,7 @@ export function SettingsPanel({
 			try {
 				const resolved = await Promise.all(WALLPAPER_RELATIVE.map((p) => getAssetPath(p)));
 				if (mounted) setWallpaperPaths(resolved);
-			} catch {
+			} catch (_err) {
 				if (mounted) setWallpaperPaths(WALLPAPER_RELATIVE.map((p) => `/${p}`));
 			}
 		})();
@@ -480,6 +487,7 @@ export function SettingsPanel({
 									<Slider
 										value={[shadowIntensity]}
 										onValueChange={(values) => onShadowChange?.(values[0])}
+										onValueCommit={() => onShadowCommit?.()}
 										min={0}
 										max={1}
 										step={0.01}
@@ -494,6 +502,7 @@ export function SettingsPanel({
 									<Slider
 										value={[borderRadius]}
 										onValueChange={(values) => onBorderRadiusChange?.(values[0])}
+										onValueCommit={() => onBorderRadiusCommit?.()}
 										min={0}
 										max={16}
 										step={0.5}
@@ -508,6 +517,7 @@ export function SettingsPanel({
 									<Slider
 										value={[padding]}
 										onValueChange={(values) => onPaddingChange?.(values[0])}
+										onValueCommit={() => onPaddingCommit?.()}
 										min={0}
 										max={100}
 										step={1}
@@ -620,7 +630,9 @@ export function SettingsPanel({
 															s.replace(/^file:\/\//, "").replace(/^\//, "");
 														if (clean(selected).endsWith(clean(path))) return true;
 														if (clean(path).endsWith(clean(selected))) return true;
-													} catch {}
+													} catch {
+														// Best-effort comparison; fallback to strict match.
+													}
 													return false;
 												})();
 												return (

src/components/video-editor/ShortcutsConfigDialog.tsx

@@ -84,7 +84,7 @@ export function ShortcutsConfigDialog() {
 
 		window.addEventListener("keydown", handleCapture, { capture: true });
 		return () => window.removeEventListener("keydown", handleCapture, { capture: true });
-	}, [captureFor]);
+	}, [captureFor, draft]);
 
 	const handleSwap = useCallback(() => {
 		if (!conflict || conflict.conflictWith.type !== "configurable") return;