feat: add warning before losing editor progress (magic-peach#1117)

Author: Oddelectron

src/components/VideoEditor.tsx

@@ -225,6 +225,19 @@ export default function VideoEditor() {
 
   const [copied, setCopied] = useState(false);
   const [shareCopied, setShareCopied] = useState(false);
+  useEffect(() => {
+  if (!file) return;
+
+  localStorage.setItem(
+    "editorState",
+    JSON.stringify({
+      recipe,
+      overlayPosition,
+      overlaySize,
+      overlayOpacity,
+    })
+  );
+}, [recipe, overlayPosition, overlaySize, overlayOpacity, file]);
   const [selectedTextId, setSelectedTextId] = useState<string | null>(null);
   const [openSections, setOpenSections] = useState({
     resize: true,
@@ -234,6 +247,33 @@ export default function VideoEditor() {
     audio: false,
     export: false,
   });
+  useEffect(() => {
+  const saved = localStorage.getItem("editorState");
+
+  if (!saved) return;
+
+  try {
+    const parsed = JSON.parse(saved);
+
+    if (parsed.recipe) {
+      updateRecipe(parsed.recipe);
+    }
+
+    if (parsed.overlayPosition) {
+      setOverlayPosition(parsed.overlayPosition);
+    }
+
+    if (parsed.overlaySize) {
+      setOverlaySize(parsed.overlaySize);
+    }
+
+    if (parsed.overlayOpacity) {
+      setOverlayOpacity(parsed.overlayOpacity);
+    }
+  } catch (err) {
+    console.error("Failed to restore editor state", err);
+  }
+}, []);
 
   const toggleSection = (key: keyof typeof openSections) =>
     setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
@@ -263,13 +303,28 @@ export default function VideoEditor() {
 
   useEffect(() => {
     if (status === "done" && downloadRef.current) {
+      
       const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
       downloadRef.current.scrollIntoView({
         behavior: prefersReducedMotion ? "instant" : "smooth",
         block: "center",
       });
     }
   }, [status]);
+  useEffect(() => {
+const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+  if (file) {
+    e.preventDefault();
+    e.returnValue = "";
+  }
+};
+
+window.addEventListener("beforeunload", handleBeforeUnload);
+
+return () => {
+  window.removeEventListener("beforeunload", handleBeforeUnload);
+};
+}, [file]);
 
   const isProcessing = status === "loading-engine" || status === "exporting";
   const isMac = typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);