Feat : Added undo/redo for recipe setting changes

src/components/VideoEditor.tsx

@@ -113,6 +113,7 @@ export default function VideoEditor() {
     file, duration, recipe, status, progress,
     result, error, updateRecipe,
     handleFileSelect, fileError, handleExport, cancelExport, reset, resetSettings,
+    undo,redo,canUndo,canRedo,
     videoRef,
     seekTo,
     overlayFile, setOverlayFile,
@@ -142,7 +143,7 @@ export default function VideoEditor() {
       });
     }
   }, [status]);
-
+  
   const isProcessing = status === "loading-engine" || status === "exporting";
 
   const videoSrc = useMemo(
@@ -158,7 +159,7 @@ export default function VideoEditor() {
 
   return (
     <div className="min-h-screen relative flex flex-col" style={{ background: "var(--bg)" }}>
-      <ExportOverlay status={status} progress={progress} onCancel={cancelExport} />
+      <ExportOverlay status={status} progress={progress} />
       <OnboardingTour />
 
       <div aria-live="polite" aria-atomic="true" className="sr-only">
@@ -430,7 +431,37 @@ export default function VideoEditor() {
                 </button>
               </div>
             </div>
-
+            <div className="flex gap-3">
+              <button
+                type="button"
+                onClick={undo}
+                disabled={!canUndo || isProcessing}
+                className={cn(
+                  "flex-1 py-3 rounded-xl border transition-all duration-200",
+                  "font-heading text-xs uppercase tracking-widest",
+                  canUndo && !isProcessing
+                    ? "border-[var(--border)] bg-[var(--surface)] hover:border-film-500 hover:text-film-600"
+                    : "border-[var(--border)] text-[var(--muted)] cursor-not-allowed opacity-50"
+                )}
+              >
+                Undo
+              </button>
+
+              <button
+                type="button"
+                onClick={redo}
+                disabled={!canRedo || isProcessing}
+                className={cn(
+                  "flex-1 py-3 rounded-xl border transition-all duration-200",
+                  "font-heading text-xs uppercase tracking-widest",
+                  canRedo && !isProcessing
+                    ? "border-[var(--border)] bg-[var(--surface)] hover:border-film-500 hover:text-film-600"
+                    : "border-[var(--border)] text-[var(--muted)] cursor-not-allowed opacity-50"
+                )}
+              >
+                Redo
+              </button>
+            </div>
             <KeyboardShortcutsPanel />
 
             <button

src/hooks/useVideoEditor.ts

@@ -28,6 +28,7 @@ export function extractMetadata(file: File): Promise<{ width: number; height: nu
       });
       URL.revokeObjectURL(url);
     };
+
     video.onerror = () => {
       clearTimeout(timeout)
       URL.revokeObjectURL(url);
@@ -117,6 +118,10 @@ function validateRecipe(recipe: EditRecipe, duration: number ): string | null {
 export function useVideoEditor() {
   const [file, setFile] = useState<File | null>(null);
   const [duration, setDuration] = useState<number>(0);
+
+  const [history, setHistory] = useState<EditRecipe[]>([DEFAULT_RECIPE]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+
   const [videoMetadata, setVideoMetadata] = useState<{
     width: number;
     height: number;
@@ -128,6 +133,7 @@ export function useVideoEditor() {
       typeof window !== "undefined" &&
       localStorage.getItem("soundOnCompletion") === "true",
   });
+
   const [status, setStatus] = useState<ExportStatus>("idle");
   const [progress, setProgress] = useState(0);
   const [result, setResult] = useState<ExportResult | null>(null);
@@ -147,16 +153,27 @@ export function useVideoEditor() {
   const [overlaySize, setOverlaySize] = useState(150);
   const [overlayOpacity, setOverlayOpacity] = useState(100);
 
- const updateRecipe = useCallback((patch: Partial<EditRecipe>) => {
-  setRecipe((prev) => {
-    const next = { ...prev, ...patch };
-    // GIF has no audio — force keepAudio off
-    if (next.format === "gif") {
-      next.keepAudio = false;
-    }
-    return next;
-  });
-}, []);
+  const updateRecipe = useCallback((patch: Partial<EditRecipe>) => {
+    setHistory((prevHistory) => {
+      const trimmedHistory = prevHistory.slice(0, historyIndex + 1);
+
+      const newRecipe = {
+        ...trimmedHistory[historyIndex],
+        ...patch,
+      };
+      if (newRecipe.format === "gif") {
+        newRecipe.keepAudio = false;
+      }
+      const updatedHistory = [...trimmedHistory, newRecipe];
+
+      return updatedHistory.length > 20
+        ? updatedHistory.slice(-20)
+        : updatedHistory;
+    });
+
+    setHistoryIndex((prev) => Math.min(prev + 1, 19));
+  }, [historyIndex]);
+
   const isValidValue = (key: keyof EditRecipe, val: any): boolean => {
     switch (key) {
       case "preset":
@@ -190,6 +207,13 @@ export function useVideoEditor() {
     }
   };
 
+  const undo = useCallback(() => {
+    setHistoryIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const redo = useCallback(() => {
+    setHistoryIndex((prev) => Math.min(history.length - 1, prev + 1));
+  }, [history.length]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     try {
@@ -292,6 +316,10 @@ export function useVideoEditor() {
     return getPresetById(suggestPreset(videoMetadata.width, videoMetadata.height)) ?? null;
   }, [videoMetadata]);
 
+  useEffect(() => {
+    setRecipe(history[historyIndex]);
+  }, [historyIndex, history]);
+
   const handleFileSelect = useCallback(async (selectedFile: File) => {
     setResult(null);
     setStatus("idle");
@@ -303,6 +331,16 @@ export function useVideoEditor() {
       return;
     }
 
+    setHistory([
+      {
+        ...DEFAULT_RECIPE,
+        trimStart: 0,
+        trimEnd: null,
+      },
+    ]);
+
+    setHistoryIndex(0);
+
     setFileError("");
 
     // LAYER 0: Size check
@@ -312,6 +350,7 @@ export function useVideoEditor() {
       return;
     }
 
+    // LAYER 1: Extension check
     const validExtensions = ['.mp4', '.mov', '.avi', '.webm', '.mkv'];
     const filename = selectedFile.name.toLowerCase();
     const hasValidExtension = validExtensions.some(ext => filename.endsWith(ext));
@@ -443,6 +482,7 @@ export function useVideoEditor() {
     } else {
       document.title = DEFAULT_TITLE;
     }
+
     return () => {
       document.title = DEFAULT_TITLE;
     };
@@ -466,22 +506,43 @@ export function useVideoEditor() {
 
   useEffect(() => {
     const handleKeydown = (e: KeyboardEvent) => {
+      const isModifier = e.ctrlKey || e.metaKey;
+
       if (
-        (e.ctrlKey || e.metaKey) &&
+        isModifier &&
         e.key === "Enter" &&
         file &&
         status !== "loading-engine" &&
         status !== "exporting"
       ) {
+        e.preventDefault();
         handleExport();
+        return;
+      }
+
+      if (isModifier && e.key.toLowerCase() === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+        return;
+      }
+
+      if (
+        isModifier &&
+        (
+          (e.key.toLowerCase() === "z" && e.shiftKey) ||
+          e.key.toLowerCase() === "y"
+        )
+      ) {
+        e.preventDefault();
+        redo();
       }
     };
 
     document.addEventListener("keydown", handleKeydown);
     return () => {
       document.removeEventListener("keydown", handleKeydown);
     };
-  }, [file, status, handleExport]);
+  }, [file, status, handleExport,undo, redo]);
 
   // M key: toggle audio mute — only when a file is loaded and focus isn't in a text field
   useEffect(() => {
@@ -517,7 +578,7 @@ export function useVideoEditor() {
    },[result?.blobUrl])
 
   const resetSettings = useCallback(() => {
-    setRecipe(DEFAULT_RECIPE);
+    updateRecipe(DEFAULT_RECIPE);
   }, []);
 
   const cancelExport = useCallback(() => {
@@ -530,13 +591,13 @@ export function useVideoEditor() {
     setError(null);
   }, []);
 
-
   const reset = useCallback(() => {
     if (result?.blobUrl) URL.revokeObjectURL(result.blobUrl);
     setFile(null);
     setVideoMetadata(null);
     setDuration(0);
-    setRecipe(DEFAULT_RECIPE);
+    setHistory([DEFAULT_RECIPE]);
+    setHistoryIndex(0);
     setStatus("idle");
     setProgress(0);
     setResult(null);
@@ -577,11 +638,15 @@ export function useVideoEditor() {
     videoRef,
     seekTo,
     updateRecipe,
+    undo,
+    redo,
+    canUndo: historyIndex > 0,
+    canRedo: historyIndex < history.length - 1,
     handleFileSelect,
     fileError,
     handleExport,
-    cancelExport,
     reset,
+    cancelExport,
     resetSettings,
     musicFile,
     setMusicFile,
@@ -601,4 +666,4 @@ export function useVideoEditor() {
     setOverlayOpacity,
     recommendedPreset,
   };
-}
+}