Feat/video edit widget - #14138
Conversation
Timeline building blocks for the upcoming VIDEO_EDIT rich widget: - VideoFilmstripTrim: filmstrip strip with trim range handles (useRangeEditor), scrub playhead, and selected-range shading - useTimelineScrub: pointer scrubbing on the filmstrip track mapped to frame positions - useTrimPlayback: play/pause within the trimmed range, restarting from the trim start when playback reaches the trim end - useVideoEditFormats: duration and file-size display formatting - design tokens for the filmstrip/timeline surfaces
Wires the VIDEO_EDIT input type end to end and assembles the editor UI from the previously merged building blocks: - litegraph: VideoEditValue/VideoEditTrim widget value types, VideoEditWidget class and widgetMap/constructor registration - schema/registry: VIDEO_EDIT zod spec in nodeDefSchemaV2, widget registry entry rendering WidgetVideoEdit - useVideoEditModel: canonical seconds/pixels edit state with frame-based setters, enable toggles, and handle crossover clamps - VideoEditPanel: trim timeline (filmstrip + range handles + playback) and crop overlay with ratio lock, driven by backend video metadata - WidgetVideoEdit: widget shell resolving the source video via useVideoSourceUrl and suppressing the default node media preview
🎭 Playwright: ✅ 1730 passed, 0 failed · 2 flaky📊 Browser Reports
🎨 Storybook: ✅ Built — View Storybook |
🌐 Website E2ETip All tests passed.
|
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (25)
📝 WalkthroughWalkthroughAdds a ChangesVideo edit widget foundation
Editing behavior
Panel integration
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Node as VIDEO_EDIT node
participant Widget as WidgetVideoEdit
participant Panel as VideoEditPanel
participant Filmstrip as VideoFilmstripTrim
participant Video as HTMLVideoElement
Node->>Widget: provides widget value and video node
Widget->>Panel: passes metadata and v-model edit state
Panel->>Filmstrip: passes frames and trim bounds
Filmstrip->>Video: scrubs and seeks preview
Panel->>Widget: emits updated trim/crop model
Possibly related PRs
Suggested reviewers: ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Biome (2.5.3)packages/design-system/src/css/style.cssFile contains syntax errors that prevent linting: Line 9: Tailwind-specific syntax is disabled.; Line 11: Tailwind-specific syntax is disabled.; Line 13: Tailwind-specific syntax is disabled.; Line 16: Tailwind-specific syntax is disabled.; Line 19: Tailwind-specific syntax is disabled.; Line 21: Tailwind-specific syntax is disabled.; Line 23: Tailwind-specific syntax is disabled.; Line 415: Tailwind-specific syntax is disabled.; Line 568: Tailwind-specific syntax is disabled.; Line 574: Tailwind-specific syntax is disabled.; Line 580: Tailwind-specific syntax is disabled.; Line 595: Tailwind-specific syntax is disabled.; Line 1859: Tailwind-specific syntax is disabled. 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 |
Codecov Report❌ Patch coverage is @@ Coverage Diff @@
## main #14138 +/- ##
==========================================
+ Coverage 79.24% 79.30% +0.05%
==========================================
Files 1730 1738 +8
Lines 96155 96600 +445
Branches 30905 31780 +875
==========================================
+ Hits 76197 76607 +410
- Misses 19578 19615 +37
+ Partials 380 378 -2
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 6 files with indirect coverage changes 🚀 New features to boost your workflow:
|
This is seperate part for the big PR of video edit, crop, trim PR #14118
Summary
Timeline building blocks for the upcoming VIDEO_EDIT rich widget: