From 14c651dfbd5271bc6b780e4da6bcf8ab081de1f6 Mon Sep 17 00:00:00 2001
From: shivashanker123 <psshanker381@gmail.com>
Date: Tue, 19 May 2026 14:15:00 +0530
Subject: [PATCH] feat: enable crop and aspect ratio overlays in video preview

---
 src/components/VideoEditor.tsx  | 2 +-
 src/components/VideoPreview.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index f89872d5..d43f5d18 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -130,7 +130,7 @@ export default function VideoEditor() {
 
               {file && (
                 <div className="mt-4 animate-fade-in">
-                  <VideoPreview file={file} videoRef={videoRef} />
+                  <VideoPreview file={file} recipe={recipe} videoRef={videoRef} />
 
                   <div className="mt-3">
                     <ThumbnailStrip
diff --git a/src/components/VideoPreview.tsx b/src/components/VideoPreview.tsx
index ff9d71e2..0e3b2753 100644
--- a/src/components/VideoPreview.tsx
+++ b/src/components/VideoPreview.tsx
@@ -235,7 +235,7 @@ export default function VideoPreview({ file, recipe, videoRef }: Props) {
         <button
           type="button"
           onClick={() => setShowOverlay((v) => !v)}
-          className={`absolute bottom-10 right-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
+          className={`absolute top-2 left-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
             showOverlay
               ? "bg-film-600 text-white"
               : "bg-black/60 text-white/70 hover:bg-black/80"