From a686fa012a3c132e918bbdd5aece7411ee574696 Mon Sep 17 00:00:00 2001
From: auberginewly <3127221787@qq.com>
Date: Tue, 19 May 2026 11:02:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(zoom):=20address=20PR=20review=20=E2=80=94?=
 =?UTF-8?q?=20preview=20selected=20zoom=20+=20keyboard=20a11y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- VideoPlayback: while holding Preview, render the SELECTED zoom at full
  strength regardless of the playhead, instead of whatever findDominantRegion
  returns at currentTime (which is none/another zoom when the playhead is
  outside the selection). Uses getZoomScale/getRotation3D for the region's
  configured scale and 3D preset.
- SettingsPanel: require both onZoomPreviewStart && onZoomPreviewEnd to render
  the button (full lifecycle), and add keyboard support — Space/Enter keydown
  (repeat-guarded) starts preview, keyup/blur ends it.
---
 src/components/video-editor/SettingsPanel.tsx | 23 +++++++++++++++----
 src/components/video-editor/VideoPlayback.tsx | 19 ++++++++++++++-
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 1b37499..383fc48 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -944,13 +944,26 @@ export function SettingsPanel({
 									</div>
 								</div>
 							)}
-							{zoomEnabled && (onZoomPreviewStart || onZoomPreviewEnd) && (
+							{zoomEnabled && onZoomPreviewStart && onZoomPreviewEnd && (
 								<Button
 									type="button"
-									onPointerDown={() => onZoomPreviewStart?.()}
-									onPointerUp={() => onZoomPreviewEnd?.()}
-									onPointerLeave={() => onZoomPreviewEnd?.()}
-									onPointerCancel={() => onZoomPreviewEnd?.()}
+									onPointerDown={() => onZoomPreviewStart()}
+									onPointerUp={() => onZoomPreviewEnd()}
+									onPointerLeave={() => onZoomPreviewEnd()}
+									onPointerCancel={() => onZoomPreviewEnd()}
+									onKeyDown={(e) => {
+										if ((e.key === " " || e.key === "Enter") && !e.repeat) {
+											e.preventDefault();
+											onZoomPreviewStart();
+										}
+									}}
+									onKeyUp={(e) => {
+										if (e.key === " " || e.key === "Enter") {
+											e.preventDefault();
+											onZoomPreviewEnd();
+										}
+									}}
+									onBlur={() => onZoomPreviewEnd()}
 									className="h-7 w-full select-none rounded-md border border-white/[0.08] bg-white/[0.04] text-[10px] font-semibold text-slate-300 transition-all duration-150 ease-out hover:bg-white/[0.08] hover:text-slate-100 active:border-[#34B27B]/50 active:bg-[#34B27B] active:text-white cursor-pointer"
 								>
 									{t("zoom.previewHold")}
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 0c58572..5243ff5 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -59,6 +59,8 @@ import {
 	DEFAULT_CURSOR_SIZE,
 	DEFAULT_CURSOR_SMOOTHING,
 	DEFAULT_ROTATION_3D,
+	getRotation3D,
+	getZoomScale,
 	isRotation3DIdentity,
 	lerpRotation3D,
 	rotation3DPerspective,
@@ -1301,7 +1303,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			let lastTransformIsIdentity = true;
 			let lastPerspectiveValue = 0;
 			const ticker = () => {
-				const { region, strength, blendedScale, rotation3D, transition } = findDominantRegion(
+				let { region, strength, blendedScale, rotation3D, transition } = findDominantRegion(
 					zoomRegionsRef.current,
 					currentTimeRef.current,
 					{
@@ -1310,6 +1312,21 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					},
 				);
 
+				// While holding Preview, show the SELECTED zoom (what the settings panel
+				// is editing) at full strength, independent of the playhead — otherwise
+				// the preview reflects whatever region sits at currentTime, which may be
+				// none or a different zoom when the playhead isn't inside the selection.
+				if (isPreviewingZoomRef.current && selectedZoomIdRef.current) {
+					const sel = zoomRegionsRef.current.find((r) => r.id === selectedZoomIdRef.current);
+					if (sel) {
+						region = sel;
+						strength = 1;
+						blendedScale = getZoomScale(sel);
+						rotation3D = getRotation3D(sel);
+						transition = null;
+					}
+				}
+
 				const defaultFocus = DEFAULT_FOCUS;
 				let targetScaleFactor = 1;
 				let targetFocus = defaultFocus;