fix(audio-mixer): make volume faders drag with the pointer

[LegionaryLeader]

What & why

The in-player audio mixer's volume faders only jumped to where you clicked and never followed the mouse on drag. Dragging the Song fader also stuttered playback.

Root cause

Two stacked, engine-specific problems:

1. Vertical native sliders don't drag in this Electron/Chromium build. The faders were vertical <input type="range"> elements. This engine renders a writing-mode: vertical-lr range but neither tracks the pointer on drag nor reflects programmatic .value changes. (The original transform: rotate(-90deg) fallback failed for the same underlying reason — hit-testing ran on the un-rotated geometry.) Horizontal native ranges work fine here; only vertical ones are broken.
2. The popover rebuilt itself mid-drag. Each committed value emits audio-mix:fader-value-changed, whose handler re-renders the entire popover — destroying the slider under the pointer after one step. The Song fader additionally re-registers itself on every change (_applySongVolume → participant-registered), so it broke even after the value-changed guard.

Fix

• Replace the native range with a custom div fader (track / fill / thumb) driven directly from the pointer's Y position, backed by a hidden <input type="range"> so the existing set-fader-value commit path is reused unchanged.
• Guard re-renders while interacting (fader-value-changed, fader-unavailable, participant-registered, participant-removed) so a drag isn't torn down by its own commits.
• Throttle commits to ~20/sec while painting the thumb every move, so dragging Song no longer stutters playback (each commit re-runs the full _applySongVolume path incl. native gain IPC).
• Defensive numeric coercion of fader min/max/step, and a guard so a late value-sync can't yank the thumb back mid-drag.
• Cache-bust the audio-mixer.js include (?v=2) so clients load the new script instead of a stale cached copy.

Files

• static/audio-mixer.js — custom fader, throttle, re-render guards
• static/style.css — fader visuals (track / fill / thumb)
• static/index.html, static/v3/index.html — ?v=2 cache-bust

Testing

• npm run test:js — 955/955 pass
• Manual: dragged every fader top↔bottom, click-to-position, Song fader during playback (no stutter), negative-dB and decimal faders, keyboard (arrows / Home / End).

Summary by CodeRabbit

• Enhancements
  • Improved audio mixer fader controls with smoother dragging and keyboard adjustments.
  • Added clearer visual feedback for fader position, focus, disabled controls, and unavailable channels.
  • Prevented mixer updates from interrupting active adjustments.
  • Improved synchronization when volume changes are made elsewhere.
  • Updated the mixer resources to ensure the latest interface is loaded.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1bd3232b-21e0-47f3-ae8b-536b1a5f3a5b

📥 Commits

Reviewing files that changed from the base of the PR and between 508829c and d9475c0.

📒 Files selected for processing (4)

• static/audio-mixer.js
• static/index.html
• static/style.css
• static/v3/index.html

---

📝 Walkthrough

Walkthrough

The audio mixer now uses a custom vertical fader with throttled drag commits, interaction-aware rendering, committed-value synchronization, updated visual states, and cache-busted script URLs.

Changes

Mixer fader interaction

Layer / File(s)	Summary
Custom vertical fader control static/audio-mixer.js, static/style.css	Adds pointer- and keyboard-driven fader visuals, throttled drag commits, committed-value application, focus styling, and disabled/failed states.
Popover synchronization and loading static/audio-mixer.js, static/index.html, static/v3/index.html	Prevents event-driven re-renders during interaction, resets interaction state when opening or closing, and loads the mixer script with ?v=2.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant CustomFader
  participant setFaderValue
  User->>CustomFader: Adjust fader
  CustomFader->>setFaderValue: Commit value
  setFaderValue-->>CustomFader: Return commit outcome

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main user-facing change: audio mixer faders now drag with the pointer.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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