Feature/drag and drop timeline 1074

[Rucha0901]

📝 Summary of Changes

This pull request introduces a state-of-the-art interactive Non-Linear Editing (NLE) Timeline Editor at the bottom of the video preview player, bringing high-fidelity visual desktop editing controls to Reframe.

Specifically, it implements:

1. Interactive NLE Timeline UI: Seamlessly integrated a fully responsive NLE timeline directly below the video player.
2. Visual Frame Strip Backing: Implemented asynchronous local metadata/canvas frame extraction in the background, showing a high-fidelity visual filmstrip track representing the video frames.
3. Interactive Aspect Ruler: Generated clean tick marks and timing stamps at the top ruler of the timeline, dynamically scale-calculated to match the video duration.
4. Draggable Active Clip Overlay: Rendered a modern semi-transparent glassmorphic box highlighting the active [trimStart, trimEnd] range.
5. Interactive Left/Right Trim Handles: Added absolute col-resize grip handles at the bounds of the active clip, allowing the user to precisely trim start and end bounds visually.
6. Draggable Clip Body Sliding: Added dragging support directly on the active clip capsule body. Dragging the clip body shifts/slides the entire trimmed window left or right while keeping the clip duration perfectly constant.
7. Snapping Guides: Implemented an evolutionary snapping engine that snaps handles and the clip body to grid marks (1s, 2s, 5s intervals) and renders a beautiful vertical dashed snap line upon alignment.
8. Real-time Playhead Sync: Added a vertical playhead scrubber that tracks playback (currentTime) and allows dragging/clicking to seek/scrub through the video in real-time.
9. Sidebar Interface Streamlining: Streamlined the "Trim" sidebar panel by removing redundant slider tracks, keeping the layout focused on precise numerical second entries.
10. Accessibility & Keyboard Navigation Support (JSX-A11y): Added absolute keyboard accessibility across the timeline, conforming to strict WCAG standard rules:
    • Added appropriate ARIA roles (role="slider" and role="button"), labels, bounds, and values.
    • Configured correct tab-focus indexing (tabIndex={0}) on the interactive elements.
    • Bound responsive arrow-key keydown handlers. Pressing left/right arrow keys trims handles by 0.1s, slides the clip range by 0.1s, or scrubs the playhead/time ruler by 1.0s.

---

🛠️ Technical Details & Files Changed

• src/components/TimelineEditor.tsx [NEW]: Implemented absolute rulers, frames, mouse/touch drag scrubbers, collision thresholds, grid-snapping, and fully accessible ARIA / keydown event support.
• src/components/VideoEditor.tsx [MODIFY]: Replaced static frame strip with the newly designed timeline, and synchronized all seeking/preview states.
• src/components/TrimControl.tsx [MODIFY]: Removed pre-existing slider tracks from the side panel to keep the interface focused and cohesive.

---

🧪 Verification & Testing

1. TypeScript Compilation: Checked by running npx tsc --noEmit and confirmed zero type safety or syntax errors.
2. ESLint Verification: Checked by running npm run lint and confirmed zero ESLint warnings or errors (✔ No ESLint warnings or errors).
3. Next.js Production Build: Checked by running npm run build and confirmed successful static page generations and client-side bundler trace collections (✓ Compiled successfully).
4. Unit Tests: Ran the Vitest test suites using npx vitest run and ensured all pre-existing tests pass successfully.
5. Manual Interaction Verification:
   • Dragging trim handles changes start/end limits smoothly.
   • Sliding the clip body shifts start/end bounds simultaneously while checking boundaries.
   • Dragging the playhead scrubs the preview frame immediately.
   • Moving elements close to increments snaps them and triggers the vertical snapping guides.
   • Tabbing and focusing on the ruler, handles, clip, and playhead works perfectly, and arrow-key adjustments operate accurately in real-time.

---

☑️ Checklist

• My code compiles successfully with no TypeScript errors
• I have tested the changes locally and verified they work as expected
• All unit tests pass successfully
• I have verified the changes on multiple file formats
• Code conforms to strict JSX-A11y guidelines and lints cleanly

[vercel]

@Rucha0901 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

⚠️ PR Format Issues — @Rucha0901

Please fix the following before your PR can be reviewed:

• ⚠️ Use a conventional PR title. Examples:
  • feat: add dark mode support
  • fix: resolve aria label missing on slider
  • docs: add deployment guide to README
• ⚠️ No linked issue found. Add Closes #<issue-number> to your PR description.

Push new commits after fixing — this comment will update automatically.

📖 CONTRIBUTING.md

[github-actions]

👋 Thanks for your PR, @Rucha0901!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉