feat(editor): add audio region volume control

[meiiie]

Description

Add a volume control for the currently selected added-audio region in the editor settings footer, and keep timeline row hit targets visible so added-audio regions can be selected reliably.

Motivation

Issue #187 reports that added background audio can overpower the original recording, but there is no in-app way to lower that added audio after inserting it. #360 also reports a volume-control problem in the new multi-audio-track editor flow.

Recordly already stores AudioRegion.volume, applies it during preview playback, persists it in projects, and uses it during export. This PR keeps the change focused on exposing that existing control path in the UI and making the selected-audio row target reachable.

Type of Change

• Bug Fix
• New Feature
• Refactor / Code Cleanup
• Documentation Update
• Other (please specify)

Related Issue(s)

• Volume control for added audio #187
• Multiple issues with audio in editor #360 (volume-control sub-issue only)

Changes Made

• show an Audio Volume panel when an added audio region is selected on the timeline
• add a 0-100% slider backed by the existing AudioRegion.volume field
• clamp UI updates to the existing [0, 1] volume range
• ignore invalid/non-finite volume input so the existing region volume is preserved instead of jumping to 100%
• keep the existing delete-audio action available from the same selected-audio panel
• keep timeline row content at the same minimum hit height as the row wrapper, so selected audio items are clickable instead of being covered by adjacent rows
• include the missing smoke-export config dependencies in the export callback dependency list

Scope Note

This PR only addresses added-audio volume control and the small timeline hit-target issue needed to make that control reachable. The audio-track scrolling fix is handled by #361, and the 1.5x export speed fix is handled by #362.

Testing Guide

1. Open a project in the editor.
2. Add an audio file from the timeline toolbar.
3. Select the added audio region on the timeline.
4. Verify the Audio Volume panel appears in the settings footer.
5. Move the slider and verify preview volume changes for that added audio region.
6. Export and verify the added audio volume matches the selected level.

Checklist

• I have performed a self-review of my code.
• I have tested the changes locally.
• I have completed focused runtime preview and export smoke tests.
• I have linked screenshots or videos where helpful.

Local checks run:

• vitest run src/components/video-editor/audio.test.ts src/components/video-editor/timeline/timelineLayout.test.ts
• tsc --noEmit
• biome check --formatter-enabled=false src/components/video-editor/VideoEditor.tsx src/components/video-editor/SettingsPanel.tsx src/components/video-editor/timeline/Row.tsx
• git diff --check
• vite build --config vite.config.ts

Runtime UI smoke:

• production Electron editor loaded through vite preview on a clean port
• fixture: 5s silent video plus 5s generated tone as an added audio region
• selected the tone audio region on the timeline
• Audio Volume panel appeared in the settings footer
• slider set to 25%
• UI badge updated to 25%
• preview audio element observed with volume = 0.25

Runtime export smoke:

• combined local Multiple issues with audio in editor #360 smoke fixture, native/modern export path
• source: 5s silent video plus 5s generated tone as an added audio region
• volume 100% export: success, 5.00s output, AAC audio, mean_volume: -21.1 dB
• volume 0% export: success, 5.00s output, AAC audio, mean_volume: -91.0 dB

Summary by CodeRabbit

• New Features

  • Added audio volume control slider (0–100%) for individual tracks in the settings panel
  • Added ability to delete audio tracks directly from the settings interface
  • Settings panel remains accessible when an audio track is selected for streamlined editing

• Bug Fixes

  • Export now respects updated export FPS and quality settings

• Style/UI

  • Timeline rows maintain a minimum content height for more consistent spacing

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: cf84186a-2b5f-481e-b9f8-5360429be578

📥 Commits

Reviewing files that changed from the base of the PR and between bd12ab2 and d67c153.

📒 Files selected for processing (1)

• src/components/video-editor/VideoEditor.tsx

---

📝 Walkthrough

Walkthrough

Adds per-audio-region volume controls and delete support: SettingsPanel exposes optional audio props and renders a volume slider plus delete button when an audio region is selected; VideoEditor implements/clamps/persists audio-volume updates and wires the new props. Minor timeline layout change for row minimum height.

Changes

Cohort / File(s)	Summary
Settings UI src/components/video-editor/SettingsPanel.tsx	Adds optional props: selectedAudioId, selectedAudioVolume, onAudioVolumeChange, onAudioDelete. Prevents header hiding when audio selected. Conditionally renders a 0–1 (step 0.01) percentage-formatted volume slider and a destructive delete button that calls onAudioDelete(selectedAudioId).
Editor logic & wiring src/components/video-editor/VideoEditor.tsx	Adds handleAudioVolumeChange that ignores absent selection, validates/clamps non-finite values to [0,1], and persists volume to matching audioRegions entry. Passes selectedAudioId, selectedAudioVolume, onAudioVolumeChange, and onAudioDelete to SettingsPanel. Updates handleExport deps to include smokeExportConfig.fps and smokeExportConfig.quality.
Timeline layout src/components/video-editor/timeline/Row.tsx	Changes inner container minimum height from min-h-0 to min-h-[26px], keeping same ref and style bindings; JSX formatting adjusted.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: Advanced Video Editor Implementation, Native WGC Integration, and AI Auto-Captions #122: Overlaps the same SettingsPanel/VideoEditor audio selection and volume-control props and handler wiring.
• Revert "feat: Advanced Video Editor Implementation, Native WGC Integration, and AI Auto-Captions" #124: Directly touches the same audio-related props (selectedAudioId, selectedAudioVolume, onAudioVolumeChange, onAudioDelete) and related handlers.

Poem

🐰 I hopped to the slider, gave a gentle tug,
Numbers turned to percent and hummed like a mug,
I nudged the volume, clipped it right in tune,
Deleted a track with a thump and a swoon,
Timeline stands twenty-six — a jaunty little rug.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main feature being added: audio region volume control in the editor.
Description check	✅ Passed	The description comprehensively covers all required template sections with detailed context, motivation, changes, testing, and verification results.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/video-editor/VideoEditor.tsx`:
- Around line 3260-3271: The handler handleAudioVolumeChange currently treats
non-finite volume as 1, which can spike audio; change it to ignore invalid input
instead of defaulting to 100%: inside handleAudioVolumeChange (and before
calling setAudioRegions) validate Number.isFinite(volume) and if it's false
simply return (no state update) so the existing region.volume is preserved for
the selectedAudioId; locate the update logic that maps regions
(setAudioRegions(prev) => prev.map(...)) and only run that when the sanitized
nextVolume is a finite number within [0,1].

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 6167c514-7659-4d2d-9898-0e6b922219f8

📥 Commits

Reviewing files that changed from the base of the PR and between 5238dd7 and bd12ab2.

📒 Files selected for processing (3)

• src/components/video-editor/SettingsPanel.tsx
• src/components/video-editor/VideoEditor.tsx
• src/components/video-editor/timeline/Row.tsx