feat: add audio waveform editing support (#1092)

[rajesh-puripanda]

Summary

Implements full audio waveform visualization and editing support as described in issue #1092.

Features added

• AudioWaveform component (src/components/AudioWaveform.tsx): A comprehensive waveform viewer using Canvas API with DPR-aware rendering

  • Renders waveform bars from audio buffer samples (via existing useAudioWaveform hook)
  • Zoom controls — zoom in/out buttons with zoom level display; also supports Ctrl+scroll wheel zoom and horizontal scroll
  • Trim handles — draggable start/end handles directly on the waveform; dims regions outside the trim range
  • Playhead sync — moving cursor that follows video playback, synced via currentTime prop and rendered with a RAF loop for smooth updates
  • Time ruler — adaptive tick marks and hover time indicator
  • Performance — uses requestAnimationFrame for playhead updates, useCallback for memoized handlers, selective Canvas redraws
  • Accessible via ARIA roles on trim handles

• TrimControl updated (src/components/TrimControl.tsx): Replaced old timeline/track with new AudioWaveform component; added currentTime and onSeek props

• VideoEditor updated (src/components/VideoEditor.tsx): Passes currentTime and seekTo to TrimControl for playhead sync

Acceptance criteria

• Waveforms render accurately
• Playback sync remains precise
• Audio trimming exports correctly

[vercel]

@rajesh-puripanda 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 — @rajesh-puripanda

Please fix the following before your PR can be reviewed:

• ⚠️ 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, @rajesh-puripanda!

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

[rajesh-puripanda]

@magic-peach Kindly review and merge