byGalax/ChatApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/context/CallContext.tsx
+126 -4
View File
@@ -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<RealtimeChannel | null>(null);
const ringTimerRef = useRef<number | null>(null);
const soloTimerRef = useRef<number | null>(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<number | null>(null);
const roomRef = useRef<Room | null>(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<boolean>(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<boolean | null>(null);
const stateRef = useRef<CallState>(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);