From 97ebb0de11d8d20c0f1e379907eea67b37a286dc Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Tue, 17 Mar 2026 10:42:37 +1100
Subject: [PATCH] feat(ui): add Remove background toggle to effects panel

---
 src/components/video-editor/SettingsPanel.tsx | 15 +++++++++++++++
 src/components/video-editor/VideoEditor.tsx   |  1 +
 src/i18n/locales/en/settings.json             |  3 ++-
 src/i18n/locales/es/settings.json             |  3 ++-
 src/i18n/locales/zh-CN/settings.json          |  3 ++-
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 87f63798..5dd0a51b 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -139,6 +139,7 @@ interface SettingsPanelProps {
 	cropRegion?: CropRegion;
 	onCropChange?: (region: CropRegion) => void;
 	aspectRatio: AspectRatio;
+	onAspectRatioChange?: (ratio: AspectRatio) => void;
 	videoElement?: HTMLVideoElement | null;
 	exportQuality?: ExportQuality;
 	onExportQualityChange?: (quality: ExportQuality) => void;
@@ -217,6 +218,7 @@ export function SettingsPanel({
 	cropRegion,
 	onCropChange,
 	aspectRatio,
+	onAspectRatioChange,
 	videoElement,
 	exportQuality = "good",
 	onExportQualityChange,
@@ -744,6 +746,19 @@ export function SettingsPanel({
 										parseInput={(t) => parseFloat(t.replace(/%$/, ""))}
 									/>
 								</div>
+								<div className="col-span-2 flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
+									<div className="text-[10px] font-medium text-slate-300">{tSettings("effects.removeBackground")}</div>
+									<Switch
+										checked={aspectRatio === 'native' && padding === 0}
+										onCheckedChange={(checked) => {
+											if (checked) {
+												onAspectRatioChange?.('native');
+												onPaddingChange?.(0);
+											}
+										}}
+										className="data-[state=checked]:bg-[#2563EB] scale-90"
+									/>
+								</div>
 							</div>
 
 							<Button
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index b79b2c99..116e37de 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -2172,6 +2172,7 @@ export default function VideoEditor() {
 					cropRegion={cropRegion}
 					onCropChange={setCropRegion}
 					aspectRatio={aspectRatio}
+					onAspectRatioChange={setAspectRatio}
 					videoElement={videoPlaybackRef.current?.video || null}
 					exportQuality={exportQuality}
 					onExportQualityChange={setExportQuality}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 5496efa1..c8f1e34b 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -27,7 +27,8 @@
 		"cursorSway": "Cursor Sway",
 		"shadow": "Shadow",
 		"roundness": "Roundness",
-		"padding": "Padding"
+		"padding": "Padding",
+		"removeBackground": "Remove background"
 	},
 	"crop": {
 		"title": "Crop Video",
diff --git a/src/i18n/locales/es/settings.json b/src/i18n/locales/es/settings.json
index d71a9714..4b61a525 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -27,7 +27,8 @@
 		"cursorSway": "Balanceo del cursor",
 		"shadow": "Sombra",
 		"roundness": "Redondez",
-		"padding": "Relleno"
+		"padding": "Relleno",
+		"removeBackground": "Quitar fondo"
 	},
 	"crop": {
 		"title": "Recortar video",
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index ab202354..12919e21 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -27,7 +27,8 @@
 		"cursorSway": "光标摆动",
 		"shadow": "阴影",
 		"roundness": "圆角",
-		"padding": "内边距"
+		"padding": "内边距",
+		"removeBackground": "移除背景"
 	},
 	"crop": {
 		"title": "裁剪视频",