feat: add timeline zoom in/out controls#510
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds timeline zoom math and helpers in the range hook, exposes zoomIn/zoomOut through the editor runtime handle, wires them into TimelineEditor, and adds toolbar zoom buttons in VideoEditor that call the runtime methods. ChangesTimeline Zoom Controls
Sequence DiagramsequenceDiagram
participant VideoEditor
participant TimelineRuntime
participant TimelineEditor
participant useTimelineRange
VideoEditor->>TimelineRuntime: call timelineRef.current?.zoomIn()/zoomOut()
TimelineRuntime->>TimelineEditor: runtime invokes zoomIn()/zoomOut()
TimelineEditor->>useTimelineRange: zoomIn()/zoomOut() handlers
useTimelineRange->>useTimelineRange: recompute range (scale, preserve center, clamp)
useTimelineRange->>TimelineEditor: updated clampedRange/range
TimelineEditor->>VideoEditor: UI reflects new timeline zoom
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/video-editor/timeline/TimelineEditor.tsx (1)
193-376:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winPass
zoomInandzoomOutintouseTimelineEditorRuntime.
zoomInandzoomOutare created viauseTimelineRangeon line 193 but not forwarded to theuseTimelineEditorRuntimecall. The hook interface requires both callbacks; they cannot be omitted without breaking the ref contract for timeline zoom controls.Suggested fix
} = useTimelineEditorRuntime({ ref, videoDuration, totalMs, @@ keyShortcuts, isTimelineFocusedRef, + zoomIn, + zoomOut, });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/video-editor/timeline/TimelineEditor.tsx` around lines 193 - 376, The hook outputs zoomIn and zoomOut from useTimelineRange but they are not passed into useTimelineEditorRuntime; update the call to useTimelineEditorRuntime to include zoomIn and zoomOut in its argument object (alongside existing props like ref, videoDuration, totalMs, etc.) so the runtime hook receives the callbacks (ensure the property names match the hook's expected params and types).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/components/video-editor/timeline/TimelineEditor.tsx`:
- Around line 193-376: The hook outputs zoomIn and zoomOut from useTimelineRange
but they are not passed into useTimelineEditorRuntime; update the call to
useTimelineEditorRuntime to include zoomIn and zoomOut in its argument object
(alongside existing props like ref, videoDuration, totalMs, etc.) so the runtime
hook receives the callbacks (ensure the property names match the hook's expected
params and types).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 1bc08b4f-b086-47c5-9f40-629db2d761cd
📒 Files selected for processing (4)
src/components/video-editor/VideoEditor.tsxsrc/components/video-editor/timeline/TimelineEditor.tsxsrc/components/video-editor/timeline/hooks/useTimelineEditorRuntime.tssrc/components/video-editor/timeline/hooks/useTimelineRange.ts
ai-linor
force-pushed
the
feat/timeline-zoom
branch
from
b79d6dd to
bc3a847
Compare
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/video-editor/timeline/TimelineEditor.tsx (1)
334-376:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winPass
zoomInandzoomOuttouseTimelineEditorRuntime— imperative handle methods are undefined.
zoomInandzoomOutare destructured fromuseTimelineRangeat line 193 and declared in theTimelineEditorHandleinterface, but they're not passed into theuseTimelineEditorRuntime({...})call. Since the runtime hook includes these methods in itsuseImperativeHandlereturn value, omitting them here meanstimelineRef.current.zoomInandtimelineRef.current.zoomOutwill be undefined. The toolbar buttons calling these methods will silently no-op, and the BiomenoUnusedVariableserrors at line 193 confirm the leak.Proposed fix
} = useTimelineEditorRuntime({ ref, videoDuration, totalMs, currentTimeMs, safeMinDurationMs, cursorTelemetry, autoSuggestZoomsTrigger, onAutoSuggestZoomsConsumed, disableSuggestedZooms, zoomRegions, onZoomAdded, onZoomSuggested, onZoomSpanChange, onZoomDelete, selectedZoomId, onSelectZoom, trimRegions, onTrimSpanChange, clipRegions, onClipSplit, onClipSpanChange, onClipDelete, selectedClipId, onSelectClip, annotationRegions, onAnnotationAdded, onAnnotationSpanChange, onAnnotationDelete, selectedAnnotationId, onSelectAnnotation, speedRegions, onSpeedSpanChange, audioRegions, onAudioAdded, onAudioSpanChange, onAudioDelete, selectedAudioId, onSelectAudio, isMac, keyShortcuts, isTimelineFocusedRef, + zoomIn, + zoomOut, });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/video-editor/timeline/TimelineEditor.tsx` around lines 334 - 376, The runtime hook call to useTimelineEditorRuntime is missing the zoomIn and zoomOut functions (which are destructured from useTimelineRange and expected by the TimelineEditorHandle), so timelineRef.current.zoomIn/zoomOut end up undefined; fix this by including zoomIn and zoomOut in the object passed into useTimelineEditorRuntime so the hook can wire them into its useImperativeHandle return (ensure the properties are named zoomIn and zoomOut to match the TimelineEditorHandle and toolbar callers).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/components/video-editor/timeline/TimelineEditor.tsx`:
- Around line 334-376: The runtime hook call to useTimelineEditorRuntime is
missing the zoomIn and zoomOut functions (which are destructured from
useTimelineRange and expected by the TimelineEditorHandle), so
timelineRef.current.zoomIn/zoomOut end up undefined; fix this by including
zoomIn and zoomOut in the object passed into useTimelineEditorRuntime so the
hook can wire them into its useImperativeHandle return (ensure the properties
are named zoomIn and zoomOut to match the TimelineEditorHandle and toolbar
callers).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 1b385556-ed23-4962-a8b3-f95ae52691d7
📒 Files selected for processing (4)
src/components/video-editor/VideoEditor.tsxsrc/components/video-editor/timeline/TimelineEditor.tsxsrc/components/video-editor/timeline/hooks/useTimelineEditorRuntime.tssrc/components/video-editor/timeline/hooks/useTimelineRange.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/video-editor/timeline/hooks/useTimelineRange.ts
- src/components/video-editor/VideoEditor.tsx
- src/components/video-editor/timeline/hooks/useTimelineEditorRuntime.ts
|
Hello, thanks for taking care of that feature ! Can you please link a video (edit your PR) so that we can see it in action ? please ! |
Yeah I'll see. |
2 participants
Closes #495 by adding timeline zoom in/out controls to the editor toolbar.
Summary by CodeRabbit