feat: implement video editor timeline components with interactive zoom, trim, and speed region controls.

src/components/video-editor/VideoEditor.tsx

@@ -64,6 +64,7 @@ import {
 	type ZoomRegion,
 } from "./types";
 import VideoPlayback, { VideoPlaybackRef } from "./VideoPlayback";
+import { TRANSITION_WINDOW_MS, ZOOM_IN_TRANSITION_WINDOW_MS } from "./videoPlayback/constants";
 
 export default function VideoEditor() {
 	const {
@@ -848,6 +849,19 @@ export default function VideoEditor() {
 		[pushState],
 	);
 
+	const handleZoomDurationChange = useCallback(
+		(id: string, zoomIn: number, zoomOut: number) => {
+			pushState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((region) =>
+					region.id === id
+						? { ...region, zoomInDurationMs: zoomIn, zoomOutDurationMs: zoomOut }
+						: region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
 	const handleAnnotationSpanChange = useCallback(
 		(id: string, span: Span) => {
 			pushState((prev) => ({
@@ -1629,6 +1643,7 @@ export default function VideoEditor() {
 									onZoomAdded={handleZoomAdded}
 									onZoomSuggested={handleZoomSuggested}
 									onZoomSpanChange={handleZoomSpanChange}
+									onZoomDurationChange={handleZoomDurationChange}
 									onZoomDelete={handleZoomDelete}
 									selectedZoomId={selectedZoomId}
 									onSelectZoom={handleSelectZoom}
@@ -1745,7 +1760,6 @@ export default function VideoEditor() {
 						onAnnotationStyleChange={handleAnnotationStyleChange}
 						onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
 						onAnnotationDelete={handleAnnotationDelete}
-						selectedSpeedId={selectedSpeedId}
 						selectedSpeedValue={
 							selectedSpeedId
 								? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
@@ -1755,6 +1769,21 @@ export default function VideoEditor() {
 						onSpeedDelete={handleSpeedDelete}
 						unsavedExport={unsavedExport}
 						onSaveUnsavedExport={handleSaveUnsavedExport}
+						selectedZoomInDuration={
+							selectedZoomId
+								? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomInDurationMs ??
+									ZOOM_IN_TRANSITION_WINDOW_MS)
+								: undefined
+						}
+						selectedZoomOutDuration={
+							selectedZoomId
+								? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomOutDurationMs ??
+									TRANSITION_WINDOW_MS)
+								: undefined
+						}
+						onZoomDurationChange={(zoomIn, zoomOut) =>
+							selectedZoomId && handleZoomDurationChange(selectedZoomId, zoomIn, zoomOut)
+						}
 					/>
 				</div>
 			</div>