feat(call): Discord-style polish pass (groups A-C)

A — Call core:
- Deafen now implies mute + remembers pre-deafen mic state so un-deafen
  restores it (Discord-parity). Peers still see the headphones-off +
  mic-off badges in sync via the existing data-channel broadcast.
- Self-join sound fires on the local peer's r.connect() too, not just
  on remote ParticipantConnected, so the user gets the "I'm in" cue.
- New CallState.reconnecting holds the UI steady when LiveKit drops the
  signaling socket and retries; duration keeps ticking, status label
  switches to "Verbinde neu…". Full teardown only on terminal
  Disconnected (after LK gives up).
- joinActiveCall falls back to connected after 5s if no peer arrived —
  avoids hanging in "Verbinde…" when peers left the room mid-rejoin.

B — Ringtone:
- Oscillator base gain up (incoming 0.22 -> 0.4, outgoing 0.14 -> 0.22)
  so the default pattern survives laptop speakers + background music.
- New ringtoneVolume slider in Settings, default 0.9, live-applies to
  both the oscillator fallback and the custom-file <audio> element.

C — Participant tile:
- Split the speaking indicator: video tiles get the emerald border +
  inset glow; audio tiles rely on the existing avatar pulse. No more
  double-chrome when someone talks in grid/focus view.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
byGalax
2026-04-22 19:53:58 +02:00
parent 6301ebb392
commit 1c67a5c97f
7 changed files with 237 additions and 22 deletions
+36 -10
View File
@@ -7,6 +7,7 @@
// back to the generated oscillator pattern so ringing never misses an
// incoming call due to an IO failure.
import { getAudioSettings, subscribeAudioSettings } from './audioSettings';
import { getIncomingRingtone } from './ringtoneStorage';
type Pattern = 'outgoing' | 'incoming';
@@ -21,6 +22,15 @@ class Ringtone {
private customUrl: string | null = null;
// Sequence token to ignore slow IO completing after user changed state.
private startSeq = 0;
// Live-subscribe so settings-slider changes reflect while the ringtone
// is playing (user can hear the effect of their slider immediately).
private unsubVolume: (() => void) | null = null;
private get volume(): number {
const v = getAudioSettings().ringtoneVolume;
if (!Number.isFinite(v)) return 0.9;
return Math.min(1, Math.max(0, v));
}
start(pattern: Pattern): void {
if (this.pattern === pattern) return; // already playing this pattern
@@ -28,6 +38,12 @@ class Ringtone {
this.pattern = pattern;
const seq = ++this.startSeq;
// Track live slider moves so the user can dial in the volume while a
// call is ringing and hear the change immediately.
this.unsubVolume = subscribeAudioSettings(() => {
if (this.audioEl) this.audioEl.volume = this.volume;
});
if (pattern === 'incoming') {
// Kick off oscillator immediately so we never miss ringing feedback
// while the custom file (if any) loads asynchronously. Once the blob
@@ -44,6 +60,10 @@ class Ringtone {
this.stopOscillator();
this.stopCustom();
this.pattern = null;
if (this.unsubVolume) {
this.unsubVolume();
this.unsubVolume = null;
}
}
// --- Custom file path (incoming only) ----------------------------------
@@ -61,7 +81,7 @@ class Ringtone {
const url = URL.createObjectURL(stored.blob);
const el = new Audio(url);
el.loop = true;
el.volume = 0.85;
el.volume = this.volume;
// Chrome/WKWebView autoplay policy: muted playback is always allowed,
// but ringtones must be audible, so play() may reject the first time
// before the user interacted. If it rejects, we keep the oscillator.
@@ -132,25 +152,31 @@ class Ringtone {
osc.connect(g);
g.connect(ctx.destination);
const t0 = ctx.currentTime + delaySec;
// Volume slider multiplies the base gain so the fallback tone tracks
// the user's preference. A flat user-setting of 0 keeps the pattern
// running visually (oscillator nodes alive) but inaudible.
const effectiveGain = gain * this.volume;
g.gain.setValueAtTime(0, t0);
g.gain.linearRampToValueAtTime(gain, t0 + 0.02);
g.gain.linearRampToValueAtTime(effectiveGain, t0 + 0.02);
g.gain.exponentialRampToValueAtTime(0.001, t0 + durationSec);
osc.start(t0);
osc.stop(t0 + durationSec + 0.02);
}
private playOutgoing(): void {
// Soft calling tone — single warm note.
this.beep(440, 0.4, 0, 0.14);
this.beep(440, 0.4, 0.6, 0.14);
// Soft calling tone — single warm note. Slightly bumped from 0.14 so
// it's audible on laptop speakers without blasting.
this.beep(440, 0.4, 0, 0.22);
this.beep(440, 0.4, 0.6, 0.22);
}
private playIncoming(): void {
// Classic double-ring "ring ring".
this.beep(880, 0.18, 0, 0.22);
this.beep(660, 0.18, 0.22, 0.22);
this.beep(880, 0.18, 0.6, 0.22);
this.beep(660, 0.18, 0.82, 0.22);
// Classic double-ring "ring ring". Bumped from 0.22 → 0.4 so it's
// unmissable through music / background noise.
this.beep(880, 0.18, 0, 0.4);
this.beep(660, 0.18, 0.22, 0.4);
this.beep(880, 0.18, 0.6, 0.4);
this.beep(660, 0.18, 0.82, 0.4);
}
}