feat: wait until call signaling is confirmed before playing the "calling" sound effect - #41224

Author: pierre-lehnen-rc

packages/media-signaling/src/definition/call/CallEvents.ts

@@ -25,6 +25,8 @@ export type CallEvents = {
 	active: void;
 	/* Triggered when this client puts the call on the ignore list, either because the call was accepted on a different client or because you called `call.ignore()` */
 	hidden: void;
+	/* Triggered when the call has reached the other user and started ringing */
+	ringing: void;
 
 	/* Triggered when the call's state on the server changes to 'hangup' */
 	ended: void;

packages/media-signaling/src/definition/call/callStates/IDirectMediaCallData.ts

@@ -11,6 +11,7 @@ export interface IDirectMediaCallData {
 	readonly features: readonly CallFeature[];
 	readonly state: CallState;
 	readonly hidden: boolean;
+	readonly ringing: boolean;
 
 	readonly transferredBy: CallContact | null;
 

packages/media-signaling/src/lib/Call.ts

@@ -158,6 +158,23 @@ export class ClientMediaCall implements IClientMediaCall {
 		return !this.isPendingAcceptance() && !this.isOver();
 	}
 
+	public get ringing(): boolean {
+		if (this.hidden) {
+			return false;
+		}
+
+		if (this._state !== 'ringing' || !this.hasRemoteData) {
+			return false;
+		}
+
+		if (this.role === 'caller' && this._contact?.type === 'sip') {
+			// On SIP Calls, the caller should start ringing only after the offer is sent to the server
+			return this.sentLocalSdp;
+		}
+
+		return true;
+	}
+
 	public get confirmed(): boolean {
 		return this.hasRemoteData;
 	}
@@ -202,6 +219,8 @@ export class ClientMediaCall implements IClientMediaCall {
 
 	private oldClientState: ClientState;
 
+	private hasFiredRingingEvent: boolean;
+
 	private serviceStates: Map<string, string>;
 
 	private stateReporterTimeoutHandler: ReturnType<typeof setTimeout> | null;
@@ -279,6 +298,7 @@ export class ClientMediaCall implements IClientMediaCall {
 			activeTimestamp: this.activeTimestamp,
 			tempCallId: this.tempCallId,
 			hidden: this.hidden,
+			ringing: this.ringing,
 
 			localParticipant: this.localParticipant,
 			remoteParticipant: this.remoteParticipant,
@@ -319,6 +339,7 @@ export class ClientMediaCall implements IClientMediaCall {
 		this._role = 'callee';
 		this._state = 'none';
 		this.oldClientState = 'none';
+		this.hasFiredRingingEvent = false;
 		this._ignored = false;
 		this._contact = null;
 		this._transferredBy = null;
@@ -465,6 +486,7 @@ export class ClientMediaCall implements IClientMediaCall {
 			}
 			this.emitter.emit('contactUpdate');
 			this.emitter.emit('confirmed');
+			this.updateRingingEvent();
 		}
 
 		await this.processEarlySignals();
@@ -947,6 +969,7 @@ export class ClientMediaCall implements IClientMediaCall {
 		this._state = newState;
 		this.maybeStopWebRTC();
 		this.updateClientState();
+		this.updateRingingEvent();
 
 		this.emitter.emit('stateChange', oldState);
 		this.requestStateReport();
@@ -991,6 +1014,15 @@ export class ClientMediaCall implements IClientMediaCall {
 		this.emitter.emit('clientStateChange', oldClientState);
 	}
 
+	private updateRingingEvent(): void {
+		if (this.hasFiredRingingEvent || !this.ringing) {
+			return;
+		}
+
+		this.hasFiredRingingEvent = true;
+		this.emitter.emit('ringing');
+	}
+
 	private maybeStopWebRTC(): void {
 		if (!this.webrtcProcessor) {
 			return;
@@ -1101,6 +1133,7 @@ export class ClientMediaCall implements IClientMediaCall {
 		}
 
 		this.updateClientState();
+		this.updateRingingEvent();
 	}
 
 	protected getLocalStreamIds(): MediaStreamIdentification[] {

packages/media-signaling/src/lib/Session.ts

@@ -679,6 +679,7 @@ export class MediaSignalingSession extends Emitter<MediaSignalingEvents> {
 		call.emitter.on('accepting', () => this.onAcceptingCall(call));
 		call.emitter.on('hidden', () => this.onHiddenCall(call));
 		call.emitter.on('active', () => this.onActiveCall(call));
+		call.emitter.on('ringing', () => this.onRingingCall());
 		call.emitter.on('ended', () => this.onEndedCall(call));
 		call.emitter.on('screenShareRequestChange', (requested: boolean) => this.onScreenShareRequestChange(call, requested));
 		call.emitter.on('streamChange', () => this.onSessionStateChange());
@@ -742,6 +743,11 @@ export class MediaSignalingSession extends Emitter<MediaSignalingEvents> {
 		this.onSessionStateChange();
 	}
 
+	private onRingingCall(): void {
+		this.config.logger?.debug('MediaSignalingSession.onRingingCall');
+		this.emit('sessionStateChange');
+	}
+
 	private async onScreenShareRequestChange(call: ClientMediaCall, requested: boolean): Promise<void> {
 		this.config.logger?.debug('MediaSignalingSession.onScreenShareRequestChange');
 

packages/ui-voip/src/context/definitions.d.ts

@@ -33,6 +33,7 @@ interface IBaseSession {
 	remoteHeld: boolean;
 	startedAt?: Date;
 	hidden: boolean;
+	ringing?: boolean;
 	supportedFeatures: readonly CallFeature[];
 }
 

packages/ui-voip/src/providers/MediaCallViewProvider.tsx

@@ -60,7 +60,7 @@ const MediaCallViewProvider = ({ children }: MediaCallViewProviderProps) => {
 	}, [audioInput?.id, controls, sessionState.hidden]);
 
 	useCallSounds(
-		sessionState.hidden ? 'none' : sessionState.state,
+		sessionState.hidden || !sessionState.ringing ? 'none' : sessionState.state,
 		useCallback(
 			(callback) => {
 				if (!instance) {

packages/ui-voip/src/providers/useMediaSession.ts

@@ -124,6 +124,7 @@ export const useMediaSession = (instance?: MediaSignalingSession): SessionState
 				features: supportedFeatures,
 				transferredBy: callTransferredBy,
 				remoteParticipant: { muted: remoteMuted, held: remoteHeld, contact },
+				ringing,
 			} = instanceState;
 
 			const transferredBy = callTransferredBy?.displayName || callTransferredBy?.username || undefined;
@@ -160,6 +161,7 @@ export const useMediaSession = (instance?: MediaSignalingSession): SessionState
 					callId,
 					startedAt,
 					supportedFeatures,
+					ringing,
 				},
 			});
 		};