feat: drag-and-drop timeline trim markers — replace number inputs with an interactive scrubber

[magic-peach]

The current trim control uses number inputs for start/end time. While functional, it is slow to use — users must type exact seconds instead of dragging. A visual timeline with draggable handles is the standard UX for video editors.

What to build

Replace (or augment) the trim start/end inputs with an interactive timeline scrubber:

• A horizontal bar representing the full video duration
• Two draggable handles: left = trim start, right = trim end
• A shaded region between handles shows the selected clip
• Clicking anywhere on the timeline seeks the video preview to that position
• The existing numeric inputs remain as fine-tuning controls below the scrubber

Technical approach

• Pure CSS + mouse/touch event handlers — no new dependencies
• Represent time as a percentage of duration for positioning (trimStart / duration * 100)
• Clamp values: start ≥ 0, end ≤ duration, start < end

Files to modify

• src/components/TrimControl.tsx — add timeline scrubber above existing inputs

Acceptance criteria

• Handles can be dragged to set trim start and end
• Touch events work on mobile
• Numeric inputs below stay in sync with the drag handles
• Scrubber is keyboard-accessible (Tab to focus, arrow keys to adjust by 0.1 s)
• Works in light and dark mode

---

Screen Recording Required

Your PR for this issue must include a screen recording showing the feature working on your local machine (bun run dev → http://localhost:3000). PRs without a recording will not be merged.

See CONTRIBUTING.md for how to record.

[github-actions]

👋 Thanks for opening an issue, @magic-peach!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[github-actions]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[Pranav-IIITM]

Hi, I am a GSSoC 2026 contributor and would like to work on this issue.

/assign under GSSoC

[github-actions]

Hey @Pranav-IIITM, you already have 5 issues assigned to you. Please complete or unassign one before picking up more. 🙏

[abhinavsudhik]

Hi @magic-peach! I'd like to work on this issue as a GSSoC 2026 contributor.

My Approach:

1. In TrimControl.tsx, build the scrubber using a positioned container with two draggable handle elements, calculating handle positions as (trimStart / duration) * 100 and (trimEnd / duration) * 100 as percentages so the layout stays fluid regardless of container width

2. Attach pointermove and pointerup listeners to document on drag start rather than the handle itself, so dragging outside the scrubber bounds does not break the interaction and handles track the cursor correctly even at high speed

3. Convert the raw clientX position back to a time value using getBoundingClientRect() on the scrubber container, then clamp the result so trimStart >= 0, trimEnd <= duration, and trimStart < trimEnd are always enforced

4. Keep the existing numeric inputs fully in sync by updating the same shared state that drives both the scrubber and the inputs on every pointer move, so neither control ever goes out of sync with the other

5. Add touch action: none on the handle elements and mirror the pointer event handlers with touchmove and touchend equivalents for mobile support without any extra library

6. Make the scrubber keyboard accessible by setting tabIndex={0} on each handle and handling ArrowLeft and ArrowRight key events to adjust the value by 0.1s per press, satisfying the acceptance criteria exactly

7. Use var(--accent) for the shaded selected region and var(--muted) for the unselected track so light and dark mode are handled automatically via existing CSS variables

Will include a screen recording with the PR as required.

ETA: 2 to 3 days after assignment.

Please assign this issue to me if it's still available! 🚀

[srinidhi-2006-bit]

Hi @magic-peach

I’m a GSSoC’26 contributor and I would like to work on this issue.

I already have strong familiarity with the Reframe codebase since I’ve successfully completed and merged multiple contributions in this project, including PRs that closed assigned issues. This gives me a solid understanding of the editor workflow, state handling patterns, responsive UI structure, and interaction behavior used throughout the application.

I understand that this task involves replacing the current trim-only numeric workflow with a more intuitive interactive scrubber while ensuring synchronization with the existing trim controls and maintaining accessibility support.

My approach would include:

• implementing a draggable trim timeline with start/end handles
• synchronizing handle movement with the existing numeric inputs
• supporting mouse, touch, and keyboard interactions
• clamping trim ranges safely within the video duration
• adding timeline seeking on click interactions
• preserving responsiveness and smooth interaction performance
• using existing CSS variables to maintain light/dark mode compatibility

I’ll also ensure:

• keyboard accessibility using focusable handles and arrow-key adjustments
• touch interactions work properly on mobile devices
• no existing trim functionality is broken
• the required local screen recording is included in the PR

Looking forward to contributing to Reframe.

[rahul616sama]

Hi @magic-peach I'd love to work on this — contributing under GSSoC'26. I've already implemented this exact feature in PR #546 (visual range slider with draggable handles, shaded region, synced numeric inputs). Can I be assigned? 🙏

[github-actions]

Hey @rahul616sama, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.