Merge pull request #613 from auberginewly/feat/zoom-hold-preview

feat(zoom): hold-to-preview button for zoom focus editing (prototype for #612)

Author: siddharthvaddem

src/components/video-editor/SettingsPanel.tsx

@@ -238,6 +238,8 @@ interface SettingsPanelProps {
 	selectedZoomCustomScale?: number | null;
 	onZoomCustomScaleChange?: (scale: number) => void;
 	onZoomCustomScaleCommit?: () => void;
+	onZoomPreviewStart?: () => void;
+	onZoomPreviewEnd?: () => void;
 	selectedZoomFocusMode?: ZoomFocusMode | null;
 	onZoomFocusModeChange?: (mode: ZoomFocusMode) => void;
 	selectedZoomFocus?: ZoomFocus | null;
@@ -367,6 +369,8 @@ export function SettingsPanel({
 	selectedZoomCustomScale,
 	onZoomCustomScaleChange,
 	onZoomCustomScaleCommit,
+	onZoomPreviewStart,
+	onZoomPreviewEnd,
 	selectedZoomFocusMode,
 	onZoomFocusModeChange,
 	selectedZoomFocus,
@@ -949,6 +953,31 @@ export function SettingsPanel({
 									</div>
 								</div>
 							)}
+							{zoomEnabled && onZoomPreviewStart && onZoomPreviewEnd && (
+								<Button
+									type="button"
+									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")}
+								</Button>
+							)}
 							{zoomEnabled &&
 								selectedZoomFocusMode !== "auto" &&
 								selectedZoomFocus &&

src/components/video-editor/VideoEditor.tsx

@@ -195,6 +195,7 @@ export default function VideoEditor() {
 	const durationRef = useRef(duration);
 	durationRef.current = duration;
 	const [selectedZoomId, setSelectedZoomId] = useState<string | null>(null);
+	const [isPreviewingZoom, setIsPreviewingZoom] = useState(false);
 	const [selectedTrimId, setSelectedTrimId] = useState<string | null>(null);
 	const [selectedSpeedId, setSelectedSpeedId] = useState<string | null>(null);
 	const [selectedAnnotationId, setSelectedAnnotationId] = useState<string | null>(null);
@@ -2120,6 +2121,7 @@ export default function VideoEditor() {
 												cursorMotionBlur={cursorMotionBlur}
 												cursorClickBounce={cursorClickBounce}
 												cursorClipToBounds={cursorClipToBounds}
+												isPreviewingZoom={isPreviewingZoom}
 											/>
 										</div>
 									</div>
@@ -2155,6 +2157,8 @@ export default function VideoEditor() {
 									}
 									onZoomCustomScaleChange={handleZoomCustomScaleChange}
 									onZoomCustomScaleCommit={handleZoomCustomScaleCommit}
+									onZoomPreviewStart={() => setIsPreviewingZoom(true)}
+									onZoomPreviewEnd={() => setIsPreviewingZoom(false)}
 									selectedZoomFocusMode={
 										selectedZoomId
 											? (zoomRegions.find((z) => z.id === selectedZoomId)?.focusMode ?? "manual")

src/components/video-editor/VideoPlayback.tsx

@@ -150,6 +150,9 @@ interface VideoPlaybackProps {
 	cursorMotionBlur?: number;
 	cursorClickBounce?: number;
 	cursorClipToBounds?: boolean;
+	// When true, render the selected zoom at the playhead even while paused —
+	// lets the editor preview the zoom effect without leaving the focus-edit view.
+	isPreviewingZoom?: boolean;
 }
 
 export interface VideoPlaybackRef {
@@ -271,6 +274,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			cursorMotionBlur = DEFAULT_CURSOR_SETTINGS.motionBlur,
 			cursorClickBounce = DEFAULT_CURSOR_SETTINGS.clickBounce,
 			cursorClipToBounds = DEFAULT_CURSOR_SETTINGS.clipToBounds,
+			isPreviewingZoom = false,
 		},
 		ref,
 	) => {
@@ -342,6 +346,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const cursorMotionBlurRef = useRef(cursorMotionBlur);
 		const cursorClickBounceRef = useRef(cursorClickBounce);
 		const cursorClipToBoundsRef = useRef(cursorClipToBounds);
+		const isPreviewingZoomRef = useRef(isPreviewingZoom);
 		const motionBlurStateRef = useRef<MotionBlurState>(createMotionBlurState());
 		const onTimeUpdateRef = useRef(onTimeUpdate);
 		const onPlayStateChangeRef = useRef(onPlayStateChange);
@@ -833,6 +838,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			cursorClipToBoundsRef.current = cursorClipToBounds;
 		}, [cursorClipToBounds]);
 
+		useEffect(() => {
+			isPreviewingZoomRef.current = isPreviewingZoom;
+		}, [isPreviewingZoom]);
+
 		// Sync cursor overlay config when settings change
 		useEffect(() => {
 			const overlay = cursorOverlayRef.current;
@@ -1310,7 +1319,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				// If a zoom is selected but video is not playing, show default unzoomed view
 				const selectedId = selectedZoomIdRef.current;
 				const hasSelectedZoom = selectedId !== null;
-				const shouldShowUnzoomedView = hasSelectedZoom && !isPlayingRef.current;
+				const shouldShowUnzoomedView =
+					hasSelectedZoom && !isPlayingRef.current && !isPreviewingZoomRef.current;
 
 				if (region && strength > 0 && !shouldShowUnzoomedView) {
 					const zoomScale = blendedScale ?? ZOOM_DEPTH_SCALES[region.depth];

src/i18n/locales/ar/settings.json

@@ -1,5 +1,6 @@
 {
 	"zoom": {
+		"previewHold": "اضغط مع الاستمرار لمعاينة تأثير التكبير",
 		"level": "مستوى التكبير",
 		"selectRegion": "حدد منطقة التكبير للتعديل",
 		"deleteZoom": "حذف التكبير",

src/i18n/locales/en/settings.json

@@ -1,5 +1,6 @@
 {
 	"zoom": {
+		"previewHold": "Hold to preview zoom effect",
 		"level": "Zoom Level",
 		"customScale": "Custom Zoom",
 		"selectRegion": "Select a zoom region to adjust",

src/i18n/locales/es/settings.json

@@ -1,5 +1,6 @@
 {
 	"zoom": {
+		"previewHold": "Mantener para previsualizar el efecto de zoom",
 		"level": "Nivel de zoom",
 		"selectRegion": "Selecciona una región de zoom para ajustar",
 		"deleteZoom": "Eliminar zoom",

src/i18n/locales/fr/settings.json

@@ -1,5 +1,6 @@
 {
 	"zoom": {
+		"previewHold": "Maintenir pour prévisualiser l’effet de zoom",
 		"level": "Niveau de zoom",
 		"selectRegion": "Sélectionnez une région de zoom à ajuster",
 		"deleteZoom": "Supprimer le zoom",

src/i18n/locales/ja-JP/settings.json

@@ -1,5 +1,6 @@
 {
 	"zoom": {
+		"previewHold": "押している間ズーム効果をプレビュー",
 		"level": "ズーム倍率",
 		"selectRegion": "ズーム範囲を選択して調整",
 		"deleteZoom": "ズームを削除",

src/i18n/locales/ko-KR/settings.json

@@ -1,5 +1,6 @@
 {
 	"zoom": {
+		"previewHold": "누르고 있으면 줌 효과 미리보기",
 		"level": "줌 레벨",
 		"customScale": "커스텀 줌",
 		"selectRegion": "조정할 줌 구간을 선택하세요",

src/i18n/locales/ru/settings.json

@@ -1,5 +1,6 @@
 {
 	"zoom": {
+		"previewHold": "Удерживайте для предпросмотра эффекта зума",
 		"level": "Уровень масштабирования",
 		"selectRegion": "Выберите область масштабирования для настройки",
 		"deleteZoom": "Удалить масштабирование",