Skip to content

Feat/video edit widget - #14138

Closed
jtydhr88 wants to merge 2 commits into
mainfrom
feat/video-edit-widget
Closed

Feat/video edit widget#14138
jtydhr88 wants to merge 2 commits into
mainfrom
feat/video-edit-widget

Conversation

@jtydhr88

Copy link
Copy Markdown
Collaborator

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:

  • 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

jtydhr88 added 2 commits July 27, 2026 14:51
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
@jtydhr88
jtydhr88 requested a review from a team July 27, 2026 19:10
@dosubot dosubot Bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label Jul 27, 2026
@jtydhr88 jtydhr88 closed this Jul 27, 2026
@jtydhr88
jtydhr88 deleted the feat/video-edit-widget branch July 27, 2026 19:11
@github-actions

github-actions Bot commented Jul 27, 2026

Copy link
Copy Markdown

🎭 Playwright: ✅ 1730 passed, 0 failed · 2 flaky

📊 Browser Reports
  • chromium: View Report (✅ 1709 / ❌ 0 / ⚠️ 2 / ⏭️ 5)
  • chromium-2x: View Report (✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
  • chromium-0.5x: View Report (✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
  • mobile-chrome: View Report (✅ 18 / ❌ 0 / ⚠️ 0 / ⏭️ 0)

🎨 Storybook: ✅ Built — View Storybook

Details

⏰ Completed at: 07/27/2026, 07:12:50 PM UTC

Links

@github-actions

github-actions Bot commented Jul 27, 2026

Copy link
Copy Markdown

🌐 Website E2E

Tip

All tests passed.

Status ✅ Passed
Report View Report

@coderabbitai

coderabbitai Bot commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 33350ca5-fa7e-42df-b5b0-9b3efab9a398

📥 Commits

Reviewing files that changed from the base of the PR and between 312ede8 and 58a8034.

📒 Files selected for processing (25)
  • packages/design-system/src/css/style.css
  • src/components/videoEdit/VideoEditPanel.test.ts
  • src/components/videoEdit/VideoEditPanel.vue
  • src/components/videoEdit/VideoFilmstripTrim.test.ts
  • src/components/videoEdit/VideoFilmstripTrim.vue
  • src/components/videoEdit/WidgetVideoEdit.test.ts
  • src/components/videoEdit/WidgetVideoEdit.vue
  • src/composables/video/useTimelineScrub.ts
  • src/composables/video/useTrimPlayback.test.ts
  • src/composables/video/useTrimPlayback.ts
  • src/composables/video/useVideoEditFormats.test.ts
  • src/composables/video/useVideoEditFormats.ts
  • src/composables/video/useVideoEditModel.test.ts
  • src/composables/video/useVideoEditModel.ts
  • src/lib/litegraph/src/types/widgets.ts
  • src/lib/litegraph/src/widgets/VideoEditWidget.ts
  • src/lib/litegraph/src/widgets/widgetMap.ts
  • src/locales/en/main.json
  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
  • src/renderer/extensions/vueNodes/widgets/composables/useVideoEditWidget.test.ts
  • src/renderer/extensions/vueNodes/widgets/composables/useVideoEditWidget.ts
  • src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
  • src/schemas/nodeDef/nodeDefSchemaV2.ts
  • src/scripts/widgets.ts

📝 Walkthrough

Walkthrough

Adds a VIDEO_EDIT widget with schema and registry support, reactive trim/crop state, filmstrip scrubbing, bounded playback, localized controls, and a Vue editing panel connected to video metadata and widget models.

Changes

Video edit widget foundation

Layer / File(s) Summary
VIDEO_EDIT contracts and widget registration
src/schemas/nodeDef/..., src/lib/litegraph/..., src/renderer/extensions/vueNodes/widgets/..., src/scripts/widgets.ts, src/locales/en/main.json
Defines VIDEO_EDIT input/value schemas, Litegraph widget types, widget construction and registry wiring, localization strings, and default feature handling.

Editing behavior

Layer / File(s) Summary
Edit model and formatting state
src/composables/video/useVideoEditModel.ts, src/composables/video/useVideoEditFormats.ts, src/composables/video/*test.ts
Maps trim frames and crop bounds to the widget model, manages feature toggles, and formats duration and file-size metadata with tests.
Timeline scrubbing and trim playback
src/composables/video/useTimelineScrub.ts, src/composables/video/useTrimPlayback.ts, src/components/videoEdit/VideoFilmstripTrim.vue, src/components/videoEdit/VideoFilmstripTrim.test.ts
Adds pointer scrubbing, bounded playback, filmstrip selection, playhead movement, tooltips, and interaction coverage.

Panel integration

Layer / File(s) Summary
Editing panel and widget integration
src/components/videoEdit/VideoEditPanel.vue, src/components/videoEdit/WidgetVideoEdit.vue, src/components/videoEdit/*test.ts, src/renderer/extensions/vueNodes/components/LGraphNode.vue, packages/design-system/src/css/style.css
Renders video preview, trim/crop controls, metadata, and loading states; binds widget models and video metadata; adds trim colors and prevents duplicate node video media rendering.

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
Loading

Possibly related PRs

Suggested reviewers: christian-byrne

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/video-edit-widget

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.css

File 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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Jul 27, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 89.28571% with 48 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
src/components/videoEdit/VideoEditPanel.vue 79.68% 26 Missing ⚠️
src/components/videoEdit/VideoFilmstripTrim.vue 83.13% 14 Missing ⚠️
src/composables/video/useTrimPlayback.ts 95.71% 3 Missing ⚠️
src/composables/video/useVideoEditModel.ts 97.36% 2 Missing ⚠️
...erer/extensions/vueNodes/components/LGraphNode.vue 66.66% 1 Missing ⚠️
...vueNodes/widgets/composables/useVideoEditWidget.ts 92.30% 1 Missing ⚠️
...nsions/vueNodes/widgets/registry/widgetRegistry.ts 50.00% 1 Missing ⚠️
@@            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     
Flag Coverage Δ
unit 68.51% <89.28%> (+0.11%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
src/components/videoEdit/WidgetVideoEdit.vue 100.00% <100.00%> (ø)
src/composables/video/useTimelineScrub.ts 100.00% <100.00%> (ø)
src/composables/video/useVideoEditFormats.ts 100.00% <100.00%> (ø)
src/lib/litegraph/src/types/widgets.ts 83.33% <ø> (ø)
src/lib/litegraph/src/widgets/widgetMap.ts 54.28% <ø> (ø)
...nsions/vueNodes/widgets/components/layout/index.ts 100.00% <100.00%> (ø)
src/schemas/nodeDef/nodeDefSchemaV2.ts 90.90% <100.00%> (+0.43%) ⬆️
src/scripts/widgets.ts 71.42% <ø> (ø)
...erer/extensions/vueNodes/components/LGraphNode.vue 79.36% <66.66%> (-0.12%) ⬇️
...vueNodes/widgets/composables/useVideoEditWidget.ts 92.30% <92.30%> (ø)
... and 5 more

... and 6 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XXL This PR changes 1000+ lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant