fix: update live preview for framing and aspect ratio changes

src/app/page.tsx

@@ -1,5 +1,6 @@
 import VideoEditor from "@/components/VideoEditor";
-import Footer from "@/components/Footer"; 
+import Footer from "@/components/Footer";
+import PrivacyBanner from "@/components/PrivacyBanner";
 
 export default function Home() {
   return (
@@ -14,11 +15,12 @@ export default function Home() {
       </a>
 
       <main id="main-content" tabIndex={-1}>
+        <PrivacyBanner />
         <VideoEditor />
       </main>
 
       <Footer />
     </>
   );
 }
-    
+

src/components/PrivacyBanner.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const STORAGE_KEY = "reframe-privacy-banner-dismissed";
+
+export default function PrivacyBanner() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const dismissedAt = localStorage.getItem(STORAGE_KEY);
+
+    if (!dismissedAt) {
+      setVisible(true);
+      return;
+    }
+
+    const sevenDays = 7 * 24 * 60 * 60 * 1000;
+    const expired = Date.now() - Number(dismissedAt) > sevenDays;
+
+    if (expired) {
+      localStorage.removeItem(STORAGE_KEY);
+      setVisible(true);
+    }
+  }, []);
+
+  const handleClose = () => {
+    localStorage.setItem(STORAGE_KEY, Date.now().toString());
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className="mb-4 rounded-xl border border-[var(--border)] bg-[var(--surface)] p-4 shadow-sm">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h3 className="text-sm font-semibold text-[var(--foreground)]">
+            Your videos never leave your device.
+          </h3>
+
+          <p className="mt-1 text-sm text-[var(--muted)]">
+            Processing is done entirely in your browser using FFmpeg.wasm.
+            No server, no upload, no account required.
+          </p>
+        </div>
+
+        <button
+          type="button"
+          onClick={handleClose}
+          aria-label="Dismiss privacy banner"
+          className="rounded-md p-1 text-[var(--muted)] transition-colors hover:text-[var(--accent)]"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/VideoPreview.tsx

@@ -4,9 +4,11 @@
 import { useEffect, useRef, useState, useCallback, RefObject } from "react";
 import { EditRecipe } from "@/lib/types";
 import { getPresetById } from "@/lib/presets";
+
 import { cn } from "@/lib/utils";
 import { Camera } from "lucide-react";
 
+
 interface Props {
   file: File | null;
   recipe?: EditRecipe;
@@ -113,6 +115,40 @@ export default function VideoPreview({ file, recipe, videoRef }: Props) {
     videoRef.current.playbackRate = recipe.speed;
   }, [recipe, videoRef]);
 
+  const preset =
+    recipe.preset !== "custom"
+      ? getPresetById(recipe.preset)
+      : null;
+
+  const previewWidth =
+    recipe.preset === "custom"
+      ? recipe.customWidth || 1920
+      : preset?.width || 1920;
+
+  const previewHeight =
+    recipe.preset === "custom"
+      ? recipe.customHeight || 1080
+      : preset?.height || 1080;
+
+  const aspectRatio = `${previewWidth}/${previewHeight}`;
+  return (
+    <div
+      className="w-full rounded-lg overflow-hidden bg-[#0a0a0a]"
+      style={{
+        aspectRatio: `${previewWidth} / ${previewHeight}`,
+      }}
+    >
+
+      <video
+        ref={videoRef}
+        controls
+        className={`w-full h-full ${
+          recipe.framing === "fill"
+            ? "object-cover"
+            : "object-contain"
+        }`}
+
+
   /**
    * Compute the overlay geometry for the selected preset + framing mode.
    * The preview container always uses a 16:9 aspect-video box.
@@ -207,6 +243,7 @@ export default function VideoPreview({ file, recipe, videoRef }: Props) {
         controls
         className={cn("w-full h-full object-contain transition-opacity duration-300", isLoading ? "opacity-0" : "opacity-100")}
         onLoadedData={() => setIsLoading(false)}
+
         playsInline
         muted={!recipe?.keepAudio}
       >
@@ -276,6 +313,7 @@ export default function VideoPreview({ file, recipe, videoRef }: Props) {
           Grab frame
         </button>
       )}
+
     </div>
   );
-}
+}