fix: voip calls not ringing after temporary disconnection

.changeset/hot-beers-glow.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/ui-voip': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue causing VoIP calls to no longer reach the client after a temporary disconnection

apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/hooks/useVoipItemsSection.tsx

@@ -10,7 +10,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const { clientError, isEnabled, isReady, isRegistered } = useVoipState();
+	const { clientError, isEnabled, isReady, isRegistered, isReconnecting } = useVoipState();
 	const { register, unregister, onRegisteredOnce, onUnregisteredOnce } = useVoipAPI();
 
 	const toggleVoip = useMutation({
@@ -44,8 +44,12 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 			return t('Loading');
 		}
 
+		if (isReconnecting) {
+			return t('Reconnecting');
+		}
+
 		return '';
-	}, [clientError, isReady, toggleVoip.isPending, t]);
+	}, [clientError, isReady, toggleVoip.isPending, t, isReconnecting]);
 
 	return useMemo(() => {
 		if (!isEnabled) {
@@ -57,7 +61,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 				{
 					id: 'toggle-voip',
 					icon: isRegistered ? 'phone-disabled' : 'phone',
-					disabled: !isReady || toggleVoip.isPending,
+					disabled: !isReady || toggleVoip.isPending || isReconnecting,
 					onClick: () => toggleVoip.mutate(),
 					content: (
 						<Box is='span' title={tooltip}>
@@ -67,7 +71,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 				},
 			],
 		};
-	}, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]);
+	}, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip, isReconnecting]);
 };
 
 export default useVoipItemsSection;

apps/meteor/client/sidebar/header/hooks/useVoipItemsSection.tsx

@@ -10,7 +10,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const { clientError, isEnabled, isReady, isRegistered } = useVoipState();
+	const { clientError, isEnabled, isReady, isRegistered, isReconnecting } = useVoipState();
 	const { register, unregister, onRegisteredOnce, onUnregisteredOnce } = useVoipAPI();
 
 	const toggleVoip = useMutation({
@@ -44,8 +44,12 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 			return t('Loading');
 		}
 
+		if (isReconnecting) {
+			return t('Reconnecting');
+		}
+
 		return '';
-	}, [clientError, isReady, toggleVoip.isPending, t]);
+	}, [clientError, isReady, toggleVoip.isPending, t, isReconnecting]);
 
 	return useMemo(() => {
 		if (!isEnabled) {
@@ -57,7 +61,7 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 				{
 					id: 'toggle-voip',
 					icon: isRegistered ? 'phone-disabled' : 'phone',
-					disabled: !isReady || toggleVoip.isPending,
+					disabled: !isReady || toggleVoip.isPending || isReconnecting,
 					onClick: () => toggleVoip.mutate(),
 					content: (
 						<Box is='span' title={tooltip}>
@@ -67,5 +71,5 @@ export const useVoipItemsSection = (): { items: GenericMenuItemProps[] } | undef
 				},
 			],
 		};
-	}, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip]);
+	}, [isEnabled, isRegistered, isReady, tooltip, t, toggleVoip, isReconnecting]);
 };

packages/i18n/src/locales/en.i18n.json

@@ -4162,6 +4162,7 @@
   "Missing_configuration": "Missing configuration",
   "Recent_Import_History": "Recent Import History",
   "Record": "Record",
+  "Reconnecting": "Reconnecting",
   "Mobex_sms_gateway_address": "Mobex SMS Gateway Address",
   "Mobex_sms_gateway_address_desc": "IP or Host of your Mobex service with specified port. E.g. `http://192.168.1.1:1401` or `https://www.example.com:1401`",
   "Mobex_sms_gateway_from_number": "From",

packages/ui-voip/src/hooks/useVoipState.tsx

@@ -1,7 +1,7 @@
 import { useContext, useMemo } from 'react';
 
-import { VoipContext } from '../contexts/VoipContext';
 import { useVoipEffect } from './useVoipEffect';
+import { VoipContext } from '../contexts/VoipContext';
 
 export type VoipState = {
 	isEnabled: boolean;
@@ -15,6 +15,7 @@ export type VoipState = {
 	isError: boolean;
 	error?: Error | null;
 	clientError?: Error | null;
+	isReconnecting: boolean;
 };
 
 const DEFAULT_STATE = {
@@ -26,6 +27,7 @@ const DEFAULT_STATE = {
 	isOngoing: false,
 	isOutgoing: false,
 	isError: false,
+	isReconnecting: false,
 };
 
 export const useVoipState = (): VoipState => {

packages/ui-voip/src/lib/VoipClient.ts

@@ -46,6 +46,8 @@ class VoipClient extends Emitter<VoipEvents> {
 
 	private contactInfo: ContactInfo | null = null;
 
+	private reconnecting = false;
+
 	constructor(private readonly config: VoIPUserConfiguration) {
 		super();
 
@@ -400,9 +402,17 @@ class VoipClient extends Emitter<VoipEvents> {
 		}
 
 		if (connectionRetryCount !== -1 && reconnectionAttempt > connectionRetryCount) {
+			console.error('VoIP reconnection limit reached.');
+			this.reconnecting = false;
+			this.emit('stateChanged');
 			return;
 		}
 
+		if (!this.reconnecting) {
+			this.reconnecting = true;
+			this.emit('stateChanged');
+		}
+
 		const reconnectionDelay = Math.pow(2, reconnectionAttempt % 4);
 
 		console.error(`Attempting to reconnect with backoff due to network loss. Backoff time [${reconnectionDelay}]`);
@@ -521,6 +531,10 @@ class VoipClient extends Emitter<VoipEvents> {
 		return !!this.error;
 	}
 
+	public isReconnecting(): boolean {
+		return this.reconnecting;
+	}
+
 	public isOnline(): boolean {
 		return this.online;
 	}
@@ -604,6 +618,7 @@ class VoipClient extends Emitter<VoipEvents> {
 			isOutgoing: this.isOutgoing(),
 			isInCall: this.isInCall(),
 			isError: this.isError(),
+			isReconnecting: this.isReconnecting(),
 		};
 	}
 
@@ -760,15 +775,51 @@ class VoipClient extends Emitter<VoipEvents> {
 	}
 
 	private onUserAgentConnected = (): void => {
+		console.log('VoIP user agent connected.');
+
+		const wasReconnecting = this.reconnecting;
+
+		this.reconnecting = false;
 		this.networkEmitter.emit('connected');
 		this.emit('stateChanged');
+
+		if (!this.isReady() || !wasReconnecting) {
+			return;
+		}
+
+		this.register()
+			.then(() => {
+				this.emit('stateChanged');
+			})
+			.catch((error?: any) => {
+				console.error('VoIP failed to register after user agent connection.');
+				if (error) {
+					console.error(error);
+				}
+			});
 	};
 
 	private onUserAgentDisconnected = (error: any): void => {
+		console.log('VoIP user agent disconnected.');
+
+		this.reconnecting = !!error;
 		this.networkEmitter.emit('disconnected');
 		this.emit('stateChanged');
 
 		if (error) {
+			if (this.isRegistered()) {
+				this.unregister()
+					.then(() => {
+						this.emit('stateChanged');
+					})
+					.catch((error?: any) => {
+						console.error('VoIP failed to unregister after user agent disconnection.');
+						if (error) {
+							console.error(error);
+						}
+					});
+			}
+
 			this.networkEmitter.emit('connectionerror', error);
 			this.attemptReconnection();
 		}