fix: reset to default button audio slider

[aryanm9026]

Description

Fixed the Cumulative Layout Shift (CLS) and UI jitter in the AudioSpeedControl component.

• Layout Shift Fix: Reserved a permanent h-10 space for the "Reset to Default" button so it no longer pushes elements down when it appears.
• Smooth Transition: Added a smooth opacity and transform transition (duration-300) with a slight delay (delay-200) so the button eases in smoothly rather than snapping instantly when sliding fast.
• Performance/Drag Fix: Decoupled the slider's visual state (localSpeedIndex) from the heavy FFmpeg parent update (onChange). The slider now updates locally on drag for buttery smooth movement, and only triggers the heavy parent state update on release (onPointerUp) and keyboard navigation (onKeyUp).

Related Issue

Closes #759

Type of Contribution

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

Participant Info

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

Screen Recording

Screen.Recording.2026-05-22.150008.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]

@aryanm9026 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 — @aryanm9026

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, @aryanm9026!

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