From e93babd4f7cdcf8a15126b17ba058267ff7e70aa Mon Sep 17 00:00:00 2001
From: wiiiii123 <hong95402@st.vimaru.edu.vn>
Date: Fri, 10 Jul 2026 18:52:54 +0700
Subject: [PATCH] fix(export): preserve cropped native aspect ratio

---
 src/components/video-editor/VideoEditor.tsx    | 18 +++++++++---------
 .../video-editor/exportDimensions.test.ts      | 12 ++++++++++++
 .../video-editor/exportDimensions.ts           | 10 ++++++++--
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 0b23fb69..b13559c6 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -1485,15 +1485,15 @@ export default function VideoEditor() {
 		[gifSizePreset],
 	);
 
-	const desiredMp4SourceDimensions = useMemo(
-		() =>
-			calculateMp4SourceDimensions(
-				videoPlaybackRef.current?.video?.videoWidth || 1920,
-				videoPlaybackRef.current?.video?.videoHeight || 1080,
-				aspectRatio,
-			),
-		[aspectRatio],
-	);
+	const desiredMp4SourceDimensions = useMemo(() => {
+		const sourceVideo = isPreviewReady ? videoPlaybackRef.current?.video : null;
+		return calculateMp4SourceDimensions(
+			sourceVideo?.videoWidth || 1920,
+			sourceVideo?.videoHeight || 1080,
+			aspectRatio,
+			cropRegion,
+		);
+	}, [aspectRatio, cropRegion, isPreviewReady]);
 
 	const mp4OutputDimensions = useMemo(() => {
 		const baseWidth = supportedMp4SourceDimensions.encoderPath
diff --git a/src/components/video-editor/exportDimensions.test.ts b/src/components/video-editor/exportDimensions.test.ts
index 7c79f4ed..d939cf6a 100644
--- a/src/components/video-editor/exportDimensions.test.ts
+++ b/src/components/video-editor/exportDimensions.test.ts
@@ -9,6 +9,18 @@ describe("calculateMp4SourceDimensions", () => {
 		});
 	});
 
+	it("uses the cropped source bounds for native exports", () => {
+		expect(
+			calculateMp4SourceDimensions(320, 180, "native", {
+				width: 1,
+				height: 0.8,
+			}),
+		).toEqual({
+			width: 320,
+			height: 144,
+		});
+	});
+
 	it("uses the rotated source bounds for 9:16 original exports", () => {
 		expect(calculateMp4SourceDimensions(1920, 1080, "9:16")).toEqual({
 			width: 1080,
diff --git a/src/components/video-editor/exportDimensions.ts b/src/components/video-editor/exportDimensions.ts
index 8c36d895..45e0f54e 100644
--- a/src/components/video-editor/exportDimensions.ts
+++ b/src/components/video-editor/exportDimensions.ts
@@ -30,9 +30,15 @@ export function calculateMp4SourceDimensions(
 	sourceWidth: number,
 	sourceHeight: number,
 	aspectRatio: AspectRatio,
+	cropRegion?: { width: number; height: number },
 ): { width: number; height: number } {
-	const safeSourceWidth = normalizeEvenDimension(sourceWidth);
-	const safeSourceHeight = normalizeEvenDimension(sourceHeight);
+	const useCroppedBounds = aspectRatio === "native";
+	const safeSourceWidth = normalizeEvenDimension(
+		sourceWidth * (useCroppedBounds ? (cropRegion?.width ?? 1) : 1),
+	);
+	const safeSourceHeight = normalizeEvenDimension(
+		sourceHeight * (useCroppedBounds ? (cropRegion?.height ?? 1) : 1),
+	);
 	const sourceAspectRatio = safeSourceHeight > 0 ? safeSourceWidth / safeSourceHeight : 16 / 9;
 	const aspectRatioValue = getAspectRatioValue(aspectRatio, sourceAspectRatio);