fix: prevent memory leak and CPU overhead in thumbnail strip generato…

[Bhavy12-cell]

Summary

Fixes #1500

Root Cause

The thumbnail strip generator had these issues:

1. Offscreen canvas and video element were created fresh on every
   seek iteration instead of once per run
2. Blob URLs from cancelled runs were never revoked — memory leak
3. No cancellation guard inside the async seeked callback — stale
   runs continued seeking after a new file was uploaded or component
   unmounted, wasting CPU

Fix

src/hooks/useThumbnailStrip.ts (new)

• Single canvas + single video element created ONCE per run,
  destroyed in the useEffect cleanup function
• runIdRef increments on every new file — stale runs check
  runIdRef.current !== runId and bail out immediately
• blobUrlsRef tracks every blob URL emitted — all are revoked
  on cleanup even if run was cancelled mid-way
• Cancellation checked at three points: loop top, inside seeked
  callback, inside toBlob callback
• Object URL for source file always revoked in cleanup

src/components/ThumbnailStrip.tsx (new)

• Renders skeleton placeholders while generating
• Streams thumbnails in as they arrive
• Click-to-seek with playhead indicator
• ARIA slider role for accessibility

src/components/VideoEditor.tsx (modified)

• Added ThumbnailStrip below VideoPreview

Memory Leak Prevention

• Every blob URL is tracked in blobUrlsRef
• Cleanup revokes all of them on unmount or file change
• No orphaned canvas or video elements after cancellation

Files Changed

• src/hooks/useThumbnailStrip.ts — new hook with proper cleanup
• src/components/ThumbnailStrip.tsx — new UI component
• src/components/VideoEditor.tsx — added ThumbnailStrip

Checklist

• ✅ Single canvas + video per run
• ✅ All blob URLs revoked on cleanup
• ✅ Stale run cancellation at every async boundary
• ✅ No new dependencies
• ✅ Static export compatible
• ✅ No TypeScript errors

[vercel]

@Bhavy12-cell 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, @Bhavy12-cell!

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

[github-actions]

✅ PR Format Check Passed — @Bhavy12-cell

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.