Zoom Level
- {zoomEnabled && selectedZoomDepth && (
-
- {ZOOM_DEPTH_OPTIONS.find(o => o.depth === selectedZoomDepth)?.label} Active
-
- )}
+
+ {zoomEnabled && selectedZoomDepth && (
+
+ {ZOOM_DEPTH_OPTIONS.find(o => o.depth === selectedZoomDepth)?.label} Active
+
+ )}
+
+
+
{ZOOM_DEPTH_OPTIONS.map((option) => {
const isActive = selectedZoomDepth === option.depth;
return (
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index 6599889..6049799 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -401,24 +401,6 @@ export default function TimelineEditor({
onSelectZoom(null);
}, [selectedZoomId, onZoomDelete, onSelectZoom]);
- // Listen for F key to add keyframe, Ctrl+D to remove selected keyframe or zoom item
- useEffect(() => {
- const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === 'f' || e.key === 'F') {
- addKeyframe();
- }
- if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey)) {
- if (selectedKeyframeId) {
- deleteSelectedKeyframe();
- } else if (selectedZoomId) {
- deleteSelectedZoom();
- }
- }
- };
- window.addEventListener('keydown', handleKeyDown);
- return () => window.removeEventListener('keydown', handleKeyDown);
- }, [addKeyframe, deleteSelectedKeyframe, deleteSelectedZoom, selectedKeyframeId, selectedZoomId]);
-
useEffect(() => {
setRange(createInitialRange(totalMs));
}, [totalMs]);
@@ -484,6 +466,27 @@ export default function TimelineEditor({
onZoomAdded({ start: startPos, end: startPos + actualDuration });
}, [videoDuration, totalMs, currentTimeMs, zoomRegions, onZoomAdded]);
+ // Listen for F key to add keyframe, Z key to add zoom, Ctrl+D to remove selected keyframe or zoom item
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'f' || e.key === 'F') {
+ addKeyframe();
+ }
+ if (e.key === 'z' || e.key === 'Z') {
+ handleAddZoom();
+ }
+ if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey)) {
+ if (selectedKeyframeId) {
+ deleteSelectedKeyframe();
+ } else if (selectedZoomId) {
+ deleteSelectedZoom();
+ }
+ }
+ };
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [addKeyframe, handleAddZoom, deleteSelectedKeyframe, deleteSelectedZoom, selectedKeyframeId, selectedZoomId]);
+
const clampedRange = useMemo(() => {
if (totalMs === 0) {
return range;
@@ -543,10 +546,6 @@ export default function TimelineEditor({
⌘ + Scroll
Zoom
-
- F
- Add Keyframe
-
= {
3: 1.8,
4: 2.2,
5: 3.5,
+ 6: 5.0,
};
export const DEFAULT_ZOOM_DEPTH: ZoomDepth = 3;