(() => getAudioSettings().ringtoneVolume);
+
+ // Subscribe so cross-tab / in-call slider moves stay in sync here too.
+ useEffect(() => subscribeAudioSettings((s) => setVolume(s.ringtoneVolume)), []);
const refresh = useCallback(async () => {
try {
@@ -128,7 +137,7 @@ export function RingtoneSettings({ disabled = false }: Props) {
const url = URL.createObjectURL(current.blob);
const el = new Audio(url);
el.loop = false;
- el.volume = 0.85;
+ el.volume = volume;
el.onended = () => stopPreview();
el.onerror = () => {
setError(
@@ -233,6 +242,36 @@ export function RingtoneSettings({ disabled = false }: Props) {
)}
+
+
+ {
+ const v = Number(e.target.value);
+ setVolume(v);
+ updateAudioSettings({ ringtoneVolume: v });
+ // Apply to the currently-playing preview so the user hears the
+ // slider effect immediately while dragging.
+ if (previewRef.current) previewRef.current.volume = v;
+ }}
+ aria-label={t('app:settings.ringtone_volume', { defaultValue: 'Lautstärke' })}
+ className="flex-1 accent-accent"
+ />
+
+ {Math.round(volume * 100)}%
+
+
+
{t('app:settings.ringtone_hint', {
defaultValue:
diff --git a/apps/desktop/src/context/CallContext.tsx b/apps/desktop/src/context/CallContext.tsx
index ed51b25..369c1ff 100644
--- a/apps/desktop/src/context/CallContext.tsx
+++ b/apps/desktop/src/context/CallContext.tsx
@@ -101,6 +101,17 @@ export type CallState =
mediaKind: CallKind;
startedAt: string;
}
+ | {
+ // LiveKit dropped the signaling socket but is actively retrying. The
+ // room + tracks stay alive — the user's mic + speakers keep working —
+ // they just can't reach peers until we're back. Distinct from
+ // `connecting` so the UI can show "Verbinde neu…" vs "Verbinde…".
+ kind: 'reconnecting';
+ callId: string;
+ conversationId: string;
+ mediaKind: CallKind;
+ startedAt: string;
+ }
| { kind: 'error'; message: string };
export interface RemoteScreenShare {
@@ -213,6 +224,11 @@ export function CallProvider({ children }: { children: ReactNode }) {
const presenceChannelRef = useRef(null);
const ringTimerRef = useRef(null);
const soloTimerRef = useRef(null);
+ // Fallback for joinActiveCall: if a rejoin lands in an empty room (peers
+ // left between "call still live" and our connect), force the transition
+ // to `connected` after a few seconds so the UI doesn't hang in "Verbinde…"
+ // indefinitely. The solo-timeout will then cleanly close if nobody arrives.
+ const joinFallbackTimerRef = useRef(null);
const roomRef = useRef(null);
// Web Audio graph that mixes live mic + soundboard sources into a single
// published track. Created per call in joinRoom, destroyed in disconnectRoom.
@@ -233,6 +249,10 @@ export function CallProvider({ children }: { children: ReactNode }) {
// Mirror of isMuted for use inside LiveKit-event callbacks that run outside
// the React component (ParticipantConnected rebroadcast etc).
const mutedRef = useRef(false);
+ // Remembers the pre-deafen mute state so toggling deafen off restores what
+ // the user had before. Discord-style: deafen implies mute, and un-deafen
+ // returns the user to whatever mute choice they had made pre-deafen.
+ const preDeafenMutedRef = useRef(null);
const stateRef = useRef(state);
stateRef.current = state;
// Keep latest conversations accessible from signal-channel closures without
@@ -300,6 +320,13 @@ export function CallProvider({ children }: { children: ReactNode }) {
}
}, []);
+ const clearJoinFallbackTimer = useCallback(() => {
+ if (joinFallbackTimerRef.current !== null) {
+ window.clearTimeout(joinFallbackTimerRef.current);
+ joinFallbackTimerRef.current = null;
+ }
+ }, []);
+
const disconnectRoom = useCallback(async () => {
const r = roomRef.current;
if (r) {
@@ -382,6 +409,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
if (r.remoteParticipants.size === 0) return;
clearRingTimer();
clearSoloTimer();
+ clearJoinFallbackTimer();
everConnectedRef.current = true;
setState({
kind: 'connected',
@@ -391,7 +419,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
startedAt: new Date().toISOString(),
});
},
- [clearRingTimer, clearSoloTimer],
+ [clearRingTimer, clearSoloTimer, clearJoinFallbackTimer],
);
// --- LiveKit join/leave ------------------------------------------------
@@ -459,6 +487,39 @@ export function CallProvider({ children }: { children: ReactNode }) {
setRoom(r);
r.on(RoomEvent.ConnectionStateChanged, (cs) => {
+ if (cs === ConnectionState.Reconnecting) {
+ // LiveKit lost the signaling socket and is retrying. Hold the
+ // connected state visually — the track publications stay live,
+ // so the user's mic + speakers keep working once the socket is
+ // back. Only transition from `connected`; if we were still in
+ // `connecting`/`outgoing`, LK will sort itself out on its own.
+ const cur = stateRef.current;
+ if (cur.kind === 'connected') {
+ setState({
+ kind: 'reconnecting',
+ callId: cur.callId,
+ conversationId: cur.conversationId,
+ mediaKind: cur.mediaKind,
+ startedAt: cur.startedAt,
+ });
+ }
+ return;
+ }
+ if (cs === ConnectionState.Connected) {
+ // Flip back from `reconnecting` when LK re-establishes the socket.
+ // Preserves startedAt so the duration counter doesn't reset.
+ const cur = stateRef.current;
+ if (cur.kind === 'reconnecting') {
+ setState({
+ kind: 'connected',
+ callId: cur.callId,
+ conversationId: cur.conversationId,
+ mediaKind: cur.mediaKind,
+ startedAt: cur.startedAt,
+ });
+ }
+ return;
+ }
if (cs === ConnectionState.Disconnected) {
// Server / network tore us out — reset state cleanly. Remember the
// conversation so the sidebar "still live — rejoin" widget stays
@@ -466,9 +527,14 @@ export function CallProvider({ children }: { children: ReactNode }) {
// peers, which is the only cue this side gets that a call is live.
clearRingTimer();
clearSoloTimer();
+ if (joinFallbackTimerRef.current !== null) {
+ window.clearTimeout(joinFallbackTimerRef.current);
+ joinFallbackTimerRef.current = null;
+ }
const wasInCall =
stateRef.current.kind === 'connected' ||
stateRef.current.kind === 'connecting' ||
+ stateRef.current.kind === 'reconnecting' ||
stateRef.current.kind === 'outgoing';
if (wasInCall) {
setLastCallConversationId(conversationId);
@@ -621,6 +687,10 @@ export function CallProvider({ children }: { children: ReactNode }) {
});
await r.connect(url, token);
+ // Self-join feedback sound. `playJoinBeep` is shared with the
+ // ParticipantConnected path; firing it here too gives the user a clear
+ // "I'm in the room" cue that Discord plays on self-join.
+ if (presenceRef.current !== 'dnd') void playJoinBeep();
if (e2eeBundle) {
try {
await r.setE2EEEnabled(true);
@@ -813,6 +883,24 @@ export function CallProvider({ children }: { children: ReactNode }) {
setState({ kind: 'connecting', callId, conversationId, mediaKind });
try {
await joinRoom(conversationId, mediaKind, callId);
+ // Fallback: peers may have left the room right as we joined, so
+ // ParticipantConnected never fires. Promote to `connected` after a
+ // short window so the UI doesn't sit in "Verbinde…" forever. The
+ // solo-timeout then handles the "actually alone" case cleanly.
+ clearJoinFallbackTimer();
+ joinFallbackTimerRef.current = window.setTimeout(() => {
+ joinFallbackTimerRef.current = null;
+ const cur = stateRef.current;
+ if (cur.kind !== 'connecting' || cur.callId !== callId) return;
+ everConnectedRef.current = true;
+ setState({
+ kind: 'connected',
+ callId,
+ conversationId,
+ mediaKind,
+ startedAt: new Date().toISOString(),
+ });
+ }, 5000);
} catch (err: unknown) {
setState({
kind: 'error',
@@ -821,7 +909,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
await disconnectRoom();
}
},
- [myId, joinRoom, disconnectRoom],
+ [myId, joinRoom, disconnectRoom, clearJoinFallbackTimer],
);
const acceptIncoming = useCallback(
@@ -861,6 +949,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
const s = stateRef.current;
clearRingTimer();
clearSoloTimer();
+ clearJoinFallbackTimer();
if (s.kind === 'outgoing' && myId) {
// Caller cancelled before anyone picked up — dismiss other sides' rings.
@@ -905,6 +994,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
disconnectRoom,
clearRingTimer,
clearSoloTimer,
+ clearJoinFallbackTimer,
emitCallEvent,
]);
@@ -1029,11 +1119,36 @@ export function CallProvider({ children }: { children: ReactNode }) {
els.forEach((el) => {
el.muted = next;
});
+
+ // Discord-parity: deafen implies mute. Remember the pre-deafen mute
+ // state so un-deafening restores whatever the user had before.
+ const pipeline = pipelineRef.current;
+ let nextMuted = mutedRef.current;
+ if (next) {
+ // Activating deafen → snapshot current mute + force mic off.
+ preDeafenMutedRef.current = mutedRef.current;
+ if (!mutedRef.current) {
+ pipeline?.setMicGain(0);
+ mutedRef.current = true;
+ nextMuted = true;
+ setIsMuted(true);
+ }
+ } else {
+ // Deactivating deafen → restore pre-deafen mic state (if we have a
+ // snapshot). Absent snapshot (e.g. reconnect edge), unmute.
+ const restore = preDeafenMutedRef.current ?? false;
+ preDeafenMutedRef.current = null;
+ pipeline?.setMicGain(restore ? 0 : 1);
+ mutedRef.current = restore;
+ nextMuted = restore;
+ setIsMuted(restore);
+ }
+
// Broadcast via LiveKit data channel so peers' UIs can show the
// headphones-off badge. Data channel works on any LiveKit server
// version, unlike `setAttributes` which requires a newer server.
const r = roomRef.current;
- if (r) void broadcastPresence(r, next, mutedRef.current);
+ if (r) void broadcastPresence(r, next, nextMuted);
return next;
});
}, []);
@@ -1435,6 +1550,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
const callActive =
state.kind === 'connected' ||
state.kind === 'connecting' ||
+ state.kind === 'reconnecting' ||
state.kind === 'outgoing';
void setCallWakeLock(callActive);
}, [state.kind]);
@@ -1445,7 +1561,13 @@ export function CallProvider({ children }: { children: ReactNode }) {
const onKey = (e: KeyboardEvent) => {
if (e.key !== 'Escape') return;
if (callMode !== 'fullscreen') return;
- if (state.kind !== 'connected' && state.kind !== 'connecting') return;
+ if (
+ state.kind !== 'connected' &&
+ state.kind !== 'connecting' &&
+ state.kind !== 'reconnecting'
+ ) {
+ return;
+ }
setCallModeState('grid');
};
window.addEventListener('keydown', onKey);
diff --git a/apps/desktop/src/lib/audioSettings.ts b/apps/desktop/src/lib/audioSettings.ts
index 712e7f5..618ca00 100644
--- a/apps/desktop/src/lib/audioSettings.ts
+++ b/apps/desktop/src/lib/audioSettings.ts
@@ -28,6 +28,12 @@ export interface AudioSettings {
// @livekit/track-processors + its MediaPipe selfie-segmentation model
// (~1.5MB) which downloads on first activation.
videoBackgroundBlur: boolean;
+ // Ringtone volume for both the generated oscillator fallback and the
+ // custom incoming-call audio file. 0..1; applied on top of the base
+ // oscillator gain so the fallback stays audible at 100% without being
+ // harsh at 25%. Separate from any system / call audio volume so users
+ // can have loud rings + soft in-call audio.
+ ringtoneVolume: number;
}
const DEFAULTS: AudioSettings = {
@@ -37,6 +43,7 @@ const DEFAULTS: AudioSettings = {
voiceThreshold: 0.03,
noiseSuppression: true,
videoBackgroundBlur: false,
+ ringtoneVolume: 0.9,
};
export interface AudioQualityParams {
@@ -118,6 +125,13 @@ function read(): AudioSettings {
typeof parsed.videoBackgroundBlur === 'boolean'
? parsed.videoBackgroundBlur
: DEFAULTS.videoBackgroundBlur,
+ ringtoneVolume:
+ typeof parsed.ringtoneVolume === 'number' &&
+ Number.isFinite(parsed.ringtoneVolume) &&
+ parsed.ringtoneVolume >= 0 &&
+ parsed.ringtoneVolume <= 1
+ ? parsed.ringtoneVolume
+ : DEFAULTS.ringtoneVolume,
};
return cached;
} catch {
diff --git a/apps/desktop/src/lib/ringtone.ts b/apps/desktop/src/lib/ringtone.ts
index dffed40..05be905 100644
--- a/apps/desktop/src/lib/ringtone.ts
+++ b/apps/desktop/src/lib/ringtone.ts
@@ -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);
}
}