#897 keyboard shortcuts added

[dhruv-jani-0808]

Description

This PR implements comprehensive global Keyboard Shortcuts and a robust Settings History (Undo/Redo) engine inside the Reframe video editor. It delivers a premium, highly tactile desktop editing experience with full cross-platform compatibility (macOS vs. Windows/Linux) and accessibility support.

Key Changes Made:

1. Global Keyboard Shortcuts Handler (useKeyboardShortcuts.ts):

   • Centralized all keystroke listeners globally into a high-performance unified event listener.
   • Implemented filters to prevent shortcut triggers when the user is typing inside interactive text fields (INPUT, TEXTAREA, SELECT, or custom isContentEditable containers).
   • Added overrides to prevent default browser behaviors (such as page scroll on Spacebar/Arrows, browser-default undo on Ctrl/Cmd + Z, and backspace page history navigation).
   • Mapped shortcuts:
     • Spacebar → Play / Pause video.
     • Arrow Left / Arrow Right → Seek video backward/forward by 5 seconds.
     • Ctrl/Cmd + Z → Undo settings change.
     • Ctrl/Cmd + Shift + Z OR Ctrl/Cmd + Y → Redo settings change.
     • Delete / Backspace → Delete active overlay.
     • ? (Shift + /) → Toggle Shortcuts Help Modal.

2. Undo/Redo History Stack (useVideoEditor.ts):

   • Created a dynamic state stack (past, present, future) for storing Settings Recipes.
   • Smart Debouncing: Added a 400ms aggregation threshold to group rapid drag events (like adjusting brightness, contrast, saturation, or video trim ranges) into a single, cohesive history entry.
   • Discrete Flushing: Clicking on preset options or reset buttons instantly flushes pending settings changes onto the stack.

3. Selectable Overlay & Deletion (ImageOverlay.tsx):

   • Enabled focusing (tabIndex={0}) and selection highlights on the image details card.
   • Handled selected asset outline rings with a gorgeous glowing theme (border-film-500 ring-2 ring-film-500/30 bg-film-500/10).
   • Wired backspace/delete events to remove the focused overlay from the canvas.

4. Visual Controls & Help Menu Modal (VideoEditor.tsx & OnboardingTour.tsx):

   • Added modern Undo and Redo visual button controls with key hint tooltips next to the settings reset buttons.
   • Created an animated glassmorphic floating Shortcuts Help Modal that lists all command bindings.
   • Solved standard Next.js Server-Side Rendering (SSR) hydration mismatches on the initial load and safeguarded the onboarding tour steps against race condition double-taps.

---

Related Issue

Closed #897

Type of Contribution

• Bug fix
• New feature
• Documentation update
• GSSoC contribution

Participant Info

• GitHub username: dhruv-jani-0808
• Contribution level (Beginner/Intermediate/Advanced): Advanced

Screen Recording

reframe.mp4

Checklist

• I have read the contribution guidelines
• My changes follow the project structure
• I have tested my changes in Chrome
• bun run lint passes (no ESLint errors)
• bunx tsc --noEmit passes (no TypeScript errors)
• New interactive elements have aria-label / accessible names
• No console.log statements left in
• This PR is related to a valid issue
• Screen recording attached above (required for UI/feature/design changes)

[vercel]

@dhruv-jani-0808 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]

👋 Thanks for your PR, @dhruv-jani-0808!

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

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

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! 🎉

[github-actions]

⚠️ PR Format Issues — @dhruv-jani-0808

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

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

📖 CONTRIBUTING.md

[magic-peach]

@dhruv-jani-0808 please resolve conflicts

[magic-peach]

Hey @dhruv-jani-0808! This PR had merge conflicts with main — I've resolved them automatically and pushed the result. Here's what was changed:

• bun.lock: Kept main's version. This project uses bun.lock exclusively; the lockfile from main is always authoritative.

• src/components/ImageOverlay.tsx: Both branches modified the remove-overlay button's onClick. Kept the PR's e.stopPropagation() call (preserves contributor intent — prevents selection change when removing overlay) and merged in main's new aria-label="Remove overlay image" attribute. Both changes are kept.

• src/components/OnboardingTour.tsx: Three conflicts, all caused by main extracting const currentStep = TOUR_STEPS[stepIndex] to the top of the component (line 222) and then using currentStep throughout. The PR still referenced TOUR_STEPS[stepIndex] inline and also had a duplicate const currentStep declaration at the conflict site. Resolved by:

  • Removing the duplicate const currentStep declaration (already declared once by main)
  • Using currentStep variable in the early-return guard (if (!visible || !targetRect || !currentStep))
  • Using currentStep in the <Tooltip step={...}> prop

• src/hooks/useKeyboardShortcuts.ts: Conflict in the useEffect dependency array. Kept the PR's extended array which includes videoRef, undo, redo, canUndo, canRedo, and onDeleteSelected — these are all required for the new keyboard shortcut handlers this PR adds.

CI has been re-triggered. If anything looks wrong, feel free to push additional changes.

[dhruv-jani-0808]

hey @magic-peach
i've resolved all the conflicts.
please review it!

[magic-peach]

@dhruv-jani-0808 This is an impressive comprehensive implementation — keyboard shortcuts, undo/redo history, overlay selection, and a help modal all in one PR.

The build/lint/typecheck CI hasn't run on this PR yet. Please push an update to trigger full CI. Also note that PR #908 adds a similar keyboard shortcut reference panel — if both get merged, there would be duplicate UI. We'll review both and merge the best one, but we need CI to pass first.

Could you also confirm:

1. Does bun run lint pass with no errors?
2. Does bunx tsc --noEmit pass?
3. Have you tested the undo/redo with rapid slider drags and confirmed the 400ms debounce works correctly?

Once CI passes, this will be prioritized for review!

[dhruv-jani-0808]

Hi @magic-peach !

I have successfully resolved all merge conflicts locally with the latest upstream/main branch and pushed the updates. The CI has been re-triggered and should now pass perfectly:

1. Does bun run lint pass with no errors?

   • Yes! Resolved the static backdrop click warnings, and upgraded the ImageOverlay details card to a fully accessible role="button" with keyboard triggers.

2. Does bunx tsc --noEmit pass?

   • Yes! Added strict defensive bounds checks to the history stack to fully comply with the new noUncheckedIndexedAccess: true compilation flag.

3. Have you tested the undo/redo with rapid slider drags and confirmed the 400ms debounce works correctly?

   • Yes! The 400ms debounced aggregation operates perfectly, committing a single clean state on slider release while discrete clicks commit immediately.

---

✅ Genuinely New Features Added in this PR:

• ✅ Undo & Redo Settings History Stack: Full Ctrl+Z / Ctrl+Y (and Ctrl+Shift+Z) settings history stack with visual sidebar buttons and tooltips.
• ✅ Frame-by-Frame Playback Navigation: Precise scrubbing by stepping backward/forward by exactly 1 frame (1/30s) using the , (comma) and . (period) keys (automatically pauses playback for precision).
• ✅ Accessible Overlay Deletion: Keyboard-accessible details card (tabIndex={0}) glows red when focused/clicked, and supports deletion via Delete / Backspace.
• ✅ Glassmorphic Helper Modal: An animated floating modal listing all shortcuts, accessible via global keyboard trigger ? or panel link.

Please let me know if you need any other adjustments once you review!