diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 1001d4b..1b37499 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -230,6 +230,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;
@@ -359,6 +361,8 @@ export function SettingsPanel({
selectedZoomCustomScale,
onZoomCustomScaleChange,
onZoomCustomScaleCommit,
+ onZoomPreviewStart,
+ onZoomPreviewEnd,
selectedZoomFocusMode,
onZoomFocusModeChange,
selectedZoomFocus,
@@ -940,6 +944,18 @@ export function SettingsPanel({
)}
+ {zoomEnabled && (onZoomPreviewStart || onZoomPreviewEnd) && (
+
+ )}
{zoomEnabled &&
selectedZoomFocusMode !== "auto" &&
selectedZoomFocus &&
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 15d582d..818f663 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -194,6 +194,7 @@ export default function VideoEditor() {
const durationRef = useRef(duration);
durationRef.current = duration;
const [selectedZoomId, setSelectedZoomId] = useState(null);
+ const [isPreviewingZoom, setIsPreviewingZoom] = useState(false);
const [selectedTrimId, setSelectedTrimId] = useState(null);
const [selectedSpeedId, setSelectedSpeedId] = useState(null);
const [selectedAnnotationId, setSelectedAnnotationId] = useState(null);
@@ -2112,6 +2113,7 @@ export default function VideoEditor() {
cursorMotionBlur={cursorMotionBlur}
cursorClickBounce={cursorClickBounce}
cursorClipToBounds={cursorClipToBounds}
+ isPreviewingZoom={isPreviewingZoom}
/>
@@ -2147,6 +2149,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")
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 45ca9df..0c58572 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -149,6 +149,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 {
@@ -270,6 +273,7 @@ const VideoPlayback = forwardRef(
cursorMotionBlur = DEFAULT_CURSOR_MOTION_BLUR,
cursorClickBounce = DEFAULT_CURSOR_CLICK_BOUNCE,
cursorClipToBounds = false,
+ isPreviewingZoom = false,
},
ref,
) => {
@@ -341,6 +345,7 @@ const VideoPlayback = forwardRef(
const cursorMotionBlurRef = useRef(cursorMotionBlur);
const cursorClickBounceRef = useRef(cursorClickBounce);
const cursorClipToBoundsRef = useRef(cursorClipToBounds);
+ const isPreviewingZoomRef = useRef(isPreviewingZoom);
const motionBlurStateRef = useRef(createMotionBlurState());
const onTimeUpdateRef = useRef(onTimeUpdate);
const onPlayStateChangeRef = useRef(onPlayStateChange);
@@ -832,6 +837,10 @@ const VideoPlayback = forwardRef(
cursorClipToBoundsRef.current = cursorClipToBounds;
}, [cursorClipToBounds]);
+ useEffect(() => {
+ isPreviewingZoomRef.current = isPreviewingZoom;
+ }, [isPreviewingZoom]);
+
// Sync cursor overlay config when settings change
useEffect(() => {
const overlay = cursorOverlayRef.current;
@@ -1309,7 +1318,8 @@ const VideoPlayback = forwardRef(
// 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];
diff --git a/src/i18n/locales/ar/settings.json b/src/i18n/locales/ar/settings.json
index 1b4907c..4578927 100644
--- a/src/i18n/locales/ar/settings.json
+++ b/src/i18n/locales/ar/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "اضغط مع الاستمرار للمعاينة",
"level": "مستوى التكبير",
"selectRegion": "حدد منطقة التكبير للتعديل",
"deleteZoom": "حذف التكبير",
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 9877d21..b5fc2db 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "Hold to preview",
"level": "Zoom Level",
"customScale": "Custom Zoom",
"selectRegion": "Select a zoom region to adjust",
diff --git a/src/i18n/locales/es/settings.json b/src/i18n/locales/es/settings.json
index d03c0c7..6401db8 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "Mantener para previsualizar",
"level": "Nivel de zoom",
"selectRegion": "Selecciona una región de zoom para ajustar",
"deleteZoom": "Eliminar zoom",
diff --git a/src/i18n/locales/fr/settings.json b/src/i18n/locales/fr/settings.json
index 8a53d44..5af8691 100644
--- a/src/i18n/locales/fr/settings.json
+++ b/src/i18n/locales/fr/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "Maintenir pour prévisualiser",
"level": "Niveau de zoom",
"selectRegion": "Sélectionnez une région de zoom à ajuster",
"deleteZoom": "Supprimer le zoom",
diff --git a/src/i18n/locales/ja-JP/settings.json b/src/i18n/locales/ja-JP/settings.json
index e7e15fa..5e2ee8b 100644
--- a/src/i18n/locales/ja-JP/settings.json
+++ b/src/i18n/locales/ja-JP/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "押している間プレビュー",
"level": "ズーム倍率",
"selectRegion": "ズーム範囲を選択して調整",
"deleteZoom": "ズームを削除",
diff --git a/src/i18n/locales/ko-KR/settings.json b/src/i18n/locales/ko-KR/settings.json
index c56df1d..5e0c376 100644
--- a/src/i18n/locales/ko-KR/settings.json
+++ b/src/i18n/locales/ko-KR/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "누르고 있으면 미리보기",
"level": "줌 레벨",
"selectRegion": "조정할 줌 구간을 선택하세요",
"deleteZoom": "줌 삭제",
diff --git a/src/i18n/locales/ru/settings.json b/src/i18n/locales/ru/settings.json
index 3e77999..f781ce5 100644
--- a/src/i18n/locales/ru/settings.json
+++ b/src/i18n/locales/ru/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "Удерживайте для предпросмотра",
"level": "Уровень масштабирования",
"selectRegion": "Выберите область масштабирования для настройки",
"deleteZoom": "Удалить масштабирование",
diff --git a/src/i18n/locales/tr/settings.json b/src/i18n/locales/tr/settings.json
index 8d998c3..a5fb9f6 100644
--- a/src/i18n/locales/tr/settings.json
+++ b/src/i18n/locales/tr/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "Önizlemek için basılı tutun",
"level": "Yakınlaştırma Seviyesi",
"selectRegion": "Ayarlamak için bir yakınlaştırma bölgesi seçin",
"deleteZoom": "Yakınlaştırmayı Sil",
diff --git a/src/i18n/locales/vi/settings.json b/src/i18n/locales/vi/settings.json
index 8449762..76e2708 100644
--- a/src/i18n/locales/vi/settings.json
+++ b/src/i18n/locales/vi/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "Giữ để xem trước",
"level": "Mức độ thu phóng",
"selectRegion": "Chọn vùng thu phóng để điều chỉnh",
"deleteZoom": "Xóa thu phóng",
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index 62dcae7..4c5ea2d 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "按住预览",
"level": "缩放级别",
"selectRegion": "选择要调整的缩放区域",
"deleteZoom": "删除缩放",
diff --git a/src/i18n/locales/zh-TW/settings.json b/src/i18n/locales/zh-TW/settings.json
index 100c756..decda1b 100644
--- a/src/i18n/locales/zh-TW/settings.json
+++ b/src/i18n/locales/zh-TW/settings.json
@@ -1,5 +1,6 @@
{
"zoom": {
+ "previewHold": "按住預覽",
"level": "縮放級別",
"selectRegion": "選擇要調整的縮放區域",
"deleteZoom": "刪除縮放",