Feature/save load localstorage

[Flux07-gezz]

Description

This PR introduces a client-side project state serialization and restoration framework utilizing browser localStorage under the versioned key reframe-projects-v1. Because Reframe functions as a static export application, this enables persistent timeline editing progress across browser reloads without requiring an external database backend.

Key Changes:

• src/hooks/useVideoEditor.ts: Created saveProject(), listProjects(), loadProject(), and deleteProject() hooks wrapped in safe error boundaries to avoid browser storage quota crashes.
• src/components/VideoEditor.tsx: Constructed clean, responsive Save and Load action modals matching Reframe's structural design language.
• Accessibility & Linting Fixes: Refactored layout container rows inside the modal loops to use semantically accurate html interactive buttons to pass strict jsx-a11y/click-events-have-key-events and no-static-element-interactions checks. Removed autoFocus hooks to maintain cross-device usability.

Note: Due to standard browser memory limitations, raw video binary files/blobs are intentionally not stringified. A dynamic UX callout banner has been integrated into the restoration modal to remind users to re-select their source file after state hydration.

Related Issue

Closes #688
Closes #686

Type of Contribution

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

Participant Info

• GitHub username: saurabh19304
• Contribution level (Beginner/Intermediate/Advanced): Intermediate

Screen Recording

Recording / Loom link: ## 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) — Verified clean locally with npm run lint
• bunx tsc --noEmit passes (no TypeScript errors) — Verified clean locally with npx tsc --noEmit
• 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]

@Flux07-gezz 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 — @Flux07-gezz

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

[github-actions]

👋 Thanks for your PR, @Flux07-gezz!

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

[Flux07-gezz]

Hey @magic-peach! 👋

Just wanted to give you a heads-up that PR #754 is ready for review — it implements the save/load project state feature using localStorage (closes #686 and #688) .

Here's a quick summary of what's in it:

• saveProject(), listProjects(), loadProject(), deleteProject() added to useVideoEditor.ts
• Modal-based Save and Load UI in VideoEditor.tsx
• SSR-safe localStorage access with typeof window guards
• Full error handling for private browsing / quota exceeded
• Schema versioning (schemaVersion: "v1") and savedAt timestamps for future migrations
• Warning shown to users that the video file needs to be re-selected after loading

All CI checks are passing. Would love to get your feedback whenever you get a chance! 🙏

[magic-peach]

@Flux07-gezz please fix the conflicts

[Flux07-gezz]

Hey @magic-peach! 👋

While working on PR #754, I noticed 5 bugs in the current main branch that are unrelated to my changes. Flagging them here so they can be tracked:

---

Bug 1 — Quality slider is inverted (ExportSettings.tsx)
The 48 - recipe.quality transform maps the slider's 18–30 range inversely. When the slider is at 18 (intended best quality), recipe.quality becomes 30 (worst). Moving the slider right makes quality worse instead of better. The range labels were swapped to compensate but the calculation is fundamentally broken.

Bug 2 — M key mute shortcut removed from AudioSpeedControl.tsx
The useEffect handling the M key audio mute toggle was removed from the component. While it was moved to useVideoEditor.ts, removing it from the component breaks the architectural pattern where components handle their own keyboard shortcuts independently.

Bug 3 — VideoPreview.tsx drastically simplified
Several features were removed: (1) frame export via T key, (2) framing overlay showing safe crop areas, (3) play/pause via Space key, (4) loading states and error handling, (5) keyboard shortcuts documentation. The component also now directly mutates videoRef.current.muted and playbackRate via useEffect, duplicating logic with the HTML muted prop.

Bug 4 — Missing useAudioWaveform hook in TrimControl.tsx
The component now depends on useAudioWaveform(file) but this hook doesn't exist in the codebase, which will cause a runtime error whenever a file is loaded.

Bug 5 — DEFAULT_RECIPE mismatch between types.ts and constants.ts
types.ts defines contrast: 0 and saturation: 0, but constants.ts defines them as contrast: 1 and saturation: 1 (the correct neutral values). The UI reset buttons use 1, so the initial default state starts at 0 instead of the neutral state.

---

None of these are introduced by my PR — happy to open individual GitHub issues for each one if that's easier to track! 🙏

[magic-peach]

Hey @Flux07-gezz! This PR has merge conflicts with main. Please rebase to resolve them:

git fetch origin
git rebase origin/main
# resolve any conflicts
git push --force-with-lease

Once rebased and CI passes, this can be reviewed for merge.

[Flux07-gezz]

@magic-peach please check .. if done please merge