feat(video): filmstrip trim timeline and playback composables

[jtydhr88]

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

[github-actions]

🌐 Website E2E

Note

Tests are running… View workflow run

[github-actions]

🎨 Storybook: ✅ Built — View Storybook

Details

⏰ Completed at: 07/27/2026, 07:11:11 PM UTC

Links

• 📊 View Workflow Run

🎭 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)

[coderabbitai]

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: b0224ab0-8b95-4aa4-8a12-2ed12a84d5f7

📥 Commits

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

📒 Files selected for processing (9)

• packages/design-system/src/css/style.css
• src/components/videoEdit/VideoFilmstripTrim.test.ts
• src/components/videoEdit/VideoFilmstripTrim.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/locales/en/main.json

---

📝 Walkthrough

Walkthrough

Adds a video filmstrip trim component with pointer scrubbing, trim-bound playback, localized formatting, theme tokens, translations, and comprehensive composable and component tests.

Changes

Video trim editing

Layer / File(s)	Summary
Video edit presentation support src/composables/video/useVideoEditFormats.ts, src/composables/video/useVideoEditFormats.test.ts, src/locales/en/main.json, packages/design-system/src/css/style.css	Adds localized duration and file-size formatters, video editing translations, and filmstrip trim color tokens.
Trimmed preview playback src/composables/video/useTrimPlayback.ts, src/composables/video/useTrimPlayback.test.ts	Adds trimmed seeking and playback handling, including seek synchronization, end-of-range restart, playhead clamping, and timeupdate processing.
Pointer-based timeline scrubbing src/composables/video/useTimelineScrub.ts	Adds pointer-to-frame conversion, bounded scrubbing, pointer capture, drag cleanup, and disposal handling.
Filmstrip trim component and interaction tests src/components/videoEdit/VideoFilmstripTrim.vue, src/components/videoEdit/VideoFilmstripTrim.test.ts	Adds the filmstrip trim UI with handles, playhead, overlays, tooltips, playback control, trim-aware scrubbing, and interaction tests.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

• Comfy-Org/ComfyUI_frontend#14118: Adds the same video trim design-system color variables and theme mappings.

Suggested reviewers: christian-byrne

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant VideoFilmstripTrim
  participant useTimelineScrub
  User->>VideoFilmstripTrim: Pointer interaction on trim track
  VideoFilmstripTrim->>useTimelineScrub: startScrubDrag(pointer event)
  useTimelineScrub->>VideoFilmstripTrim: Update playheadFrame
  useTimelineScrub->>VideoFilmstripTrim: Invoke scrub callback
  VideoFilmstripTrim-->>User: Emit scrub(frame)

Loading

✨ 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-trim-timeline

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

❌ Patch coverage is 91.86603% with 17 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/components/videoEdit/VideoFilmstripTrim.vue	83.13%	14 Missing ⚠️
src/composables/video/useTrimPlayback.ts	95.71%	3 Missing ⚠️

@@            Coverage Diff             @@
##             main   #14137      +/-   ##
==========================================
+ Coverage   79.24%   79.28%   +0.04%     
==========================================
  Files        1730     1734       +4     
  Lines       96155    96361     +206     
  Branches    30905    30957      +52     
==========================================
+ Hits        76197    76399     +202     
- Misses      19578    19584       +6     
+ Partials      380      378       -2     

Flag	Coverage Δ
unit	68.46% <91.86%> (+0.06%)	⬆️

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

Files with missing lines	Coverage Δ
src/composables/video/useTimelineScrub.ts	100.00% <100.00%> (ø)
src/composables/video/useVideoEditFormats.ts	100.00% <100.00%> (ø)
src/composables/video/useTrimPlayback.ts	95.71% <95.71%> (ø)
src/components/videoEdit/VideoFilmstripTrim.vue	83.13% <83.13%> (ø)

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