fix: Prevent app remount when VoIP license/permission changes

.changeset/voip-provider-app-remount.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/ui-voip': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where the whole app remounts when VoIP availability changes

apps/meteor/client/providers/MediaCallProvider.tsx

@@ -1,8 +1,6 @@
-import { Emitter } from '@rocket.chat/emitter';
 import { usePermission } from '@rocket.chat/ui-contexts';
-import { MediaCallProvider as MediaCallProviderBase, MediaCallInstanceContext } from '@rocket.chat/ui-voip';
+import { MediaCallProvider as MediaCallProviderBase } from '@rocket.chat/ui-voip';
 import type { ReactNode } from 'react';
-import { useMemo } from 'react';
 
 import { useHasLicenseModule } from '../hooks/useHasLicenseModule';
 
@@ -14,26 +12,9 @@ const MediaCallProvider = ({ children }: MediaCallProviderProps) => {
 
 	const { data: hasModule = false } = useHasLicenseModule('teams-voip');
 
-	const unauthorizedContextValue = useMemo(
-		() => ({
-			currentViews: [],
-			registerView: () => undefined,
-			unregisterView: () => undefined,
-			instance: undefined,
-			signalEmitter: new Emitter<any>(),
-			audioElement: undefined,
-			openRoomId: undefined,
-			setOpenRoomId: () => undefined,
-			getAutocompleteOptions: () => Promise.resolve([]),
-		}),
-		[],
-	);
+	const enabled = hasModule && (canMakeInternalCall || canMakeExternalCall);
 
-	if (!hasModule || (!canMakeInternalCall && !canMakeExternalCall)) {
-		return <MediaCallInstanceContext.Provider value={unauthorizedContextValue}>{children}</MediaCallInstanceContext.Provider>;
-	}
-
-	return <MediaCallProviderBase>{children}</MediaCallProviderBase>;
+	return <MediaCallProviderBase enabled={enabled}>{children}</MediaCallProviderBase>;
 };
 
 export default MediaCallProvider;

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

@@ -12,13 +12,14 @@ import type { Signals } from '../context/MediaCallInstanceContext';
 
 export type MediaCallInstanceProviderProps = {
 	children: ReactNode;
+	enabled?: boolean;
 };
 
-const MediaCallInstanceProvider = ({ children }: MediaCallInstanceProviderProps) => {
+const MediaCallInstanceProvider = ({ children, enabled = true }: MediaCallInstanceProviderProps) => {
 	const [openRoomId, setOpenRoomId] = useState<string | undefined>(undefined);
 	const { currentViews, registerView, unregisterView } = useAvailableViewTracker();
 	const user = useUser();
-	const instance = useMediaSessionInstance(user?._id);
+	const instance = useMediaSessionInstance(user?._id, enabled);
 	const [signalEmitter] = useState(() => new Emitter<Signals>());
 
 	const [remoteStreamRefCallback, audioElement] = useAudioStream(instance);

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

@@ -8,17 +8,22 @@ import MediaCallPopout from '../views/MediaCallPopout';
 
 export type MediaCallProviderProps = {
 	children: ReactNode;
+	enabled?: boolean;
 };
 
-const MediaCallProvider = ({ children }: MediaCallProviderProps) => {
+const MediaCallProvider = ({ children, enabled = true }: MediaCallProviderProps) => {
 	return (
-		<MediaCallInstanceProvider>
-			<MediaCallViewProvider>
-				<AnchorPortal id='rcx-media-call-widget-portal'>
-					<MediaCallWidget />
-				</AnchorPortal>
-			</MediaCallViewProvider>
-			<MediaCallPopout />
+		<MediaCallInstanceProvider enabled={enabled}>
+			{enabled && (
+				<>
+					<MediaCallViewProvider>
+						<AnchorPortal id='rcx-media-call-widget-portal'>
+							<MediaCallWidget />
+						</AnchorPortal>
+					</MediaCallViewProvider>
+					<MediaCallPopout />
+				</>
+			)}
 			{children}
 		</MediaCallInstanceProvider>
 	);

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

@@ -129,11 +129,15 @@ class MediaSessionStore extends Emitter<MediaSessionStoreEventMap> {
 		}
 	}
 
-	private makeInstance(userId: string) {
+	private cleanupInstance() {
 		if (this.sessionInstance !== null) {
 			this.sessionInstance.endSession();
 			this.sessionInstance = null;
 		}
+	}
+
+	private makeInstance(userId: string) {
+		this.cleanupInstance();
 
 		this.failedScreenShareAttempts = 0;
 
@@ -167,7 +171,12 @@ class MediaSessionStore extends Emitter<MediaSessionStoreEventMap> {
 		return this.sessionInstance;
 	}
 
-	public getInstance(userId?: string) {
+	public getInstance(userId?: string, enabled = true) {
+		if (!enabled) {
+			this.cleanupInstance();
+			return null;
+		}
+
 		if (!userId) {
 			return null;
 		}
@@ -217,7 +226,7 @@ export const useSetPopoutWindow = (popoutWindow?: Window) => {
 	});
 };
 
-export const useMediaSessionInstance = (userId?: string) => {
+export const useMediaSessionInstance = (userId?: string, enabled = true) => {
 	const { t } = useTranslation();
 	const iceServers = useIceServers();
 	const iceGatheringTimeout = useSetting('VoIP_TeamCollab_Ice_Gathering_Timeout', 5000);
@@ -263,8 +272,8 @@ export const useMediaSessionInstance = (userId?: string) => {
 			return mediaSession.onChange(callback);
 		}, []),
 		useCallback(() => {
-			return mediaSession.getInstance(userId);
-		}, [userId]),
+			return mediaSession.getInstance(userId, enabled);
+		}, [userId, enabled]),
 	);
 
 	return instance ?? undefined;