feat: add frame-by-frame keyboard scrubbing with side overlay indicators

[Soujanya-Mctrl]

Description

This PR adds precise keyboard-based timeline scrubbing for video preview and updates the shortcut panel.

What changed

• Added frame-by-frame keyboard seeking in video preview:
  • Left Arrow: previous 1 frame
  • Right Arrow: next 1 frame
  • Shift + Left Arrow: previous 5 frames
  • Shift + Right Arrow: next 5 frames
• Added FPS-aware stepping (uses measured frame timing when available, fallback to 30 FPS).
• Prevented native large browser seek jumps so keyboard controls stay frame-accurate.
• Added side overlay indicators while scrubbing (left/right with frame count).
• Added Space key support for Play/Pause.
• Updated the Keyboard Shortcuts panel to include:
  • Play / Pause
  • Previous 1 frame / Next 1 frame
  • Previous 5 frames / Next 5 frames

Related Issue

Closes #825

Type of Contribution

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

Participant Info

• GitHub username: @Soujanya-Mctrl
• Contribution level (Beginner/Intermediate/Advanced): Intermediate

Screen Recording

Recording / Loom link:

Screen.Recording.2026-05-21.014351.mp4

Checklist

• I have read the contribution guidelines
• My changes follow the project structure
• I have tested my changes in Chrome, Firefox, and Safari
• 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]

@Soujanya-Mctrl 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 Check Passed — @Soujanya-Mctrl

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[github-actions]

👋 Thanks for your PR, @Soujanya-Mctrl!

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

[Soujanya-Mctrl]

@magic-peach please review the PR

[magic-peach]

Hey @Soujanya-Mctrl! CI hasn't run on this PR yet. Please rebase on main to trigger the build/lint/typecheck checks:

git fetch origin
git rebase origin/main
git push --force-with-lease

Also, please attach a screen recording showing your change working in the browser (see CONTRIBUTING.md for instructions). Both CI and a recording are required before a PR can be merged.

[Soujanya-Mctrl]

Hi @magic-peach — CI/workflow approval is required to run the full build & Vercel deploy. Could you please approve the workflows for this PR so checks can run? Recording attached:

Screen.Recording.2026-05-21.014351.mp4