feat: Voice call device permission flow

.changeset/weak-windows-doubt.md

@@ -0,0 +1,10 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+"@rocket.chat/mock-providers": minor
+"@rocket.chat/ui-client": minor
+"@rocket.chat/ui-contexts": minor
+"@rocket.chat/ui-voip": minor
+---
+
+Introduces a new flow for requesting device permissions for Voice Calling, prompting the user before the request. Also solves a few issues with the device selection menu.

apps/meteor/client/hooks/roomActions/useVoiceCallRoomAction.tsx

@@ -1,23 +1,22 @@
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { usePermission, useUserId } from '@rocket.chat/ui-contexts';
-import { useVoipAPI, useVoipState } from '@rocket.chat/ui-voip';
+import { useMediaDeviceMicrophonePermission, usePermission, useUserId } from '@rocket.chat/ui-contexts';
+import { useVoipAPI, useVoipState, useDevicePermissionPrompt } from '@rocket.chat/ui-voip';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { useMediaPermissions } from '../../views/room/composer/messageBox/hooks/useMediaPermissions';
 import { useRoom } from '../../views/room/contexts/RoomContext';
 import type { RoomToolboxActionConfig } from '../../views/room/contexts/RoomToolboxContext';
 import { useUserInfoQuery } from '../useUserInfoQuery';
 import { useVoipWarningModal } from '../useVoipWarningModal';
 
 export const useVoiceCallRoomAction = () => {
-	const { t } = useTranslation();
 	const { uids = [] } = useRoom();
 	const ownUserId = useUserId();
 	const canStartVoiceCall = usePermission('view-user-voip-extension');
 	const dispatchWarning = useVoipWarningModal();
 
-	const [isMicPermissionDenied] = useMediaPermissions('microphone');
+	const { state: micPermissionState } = useMediaDeviceMicrophonePermission();
+
+	const isMicPermissionDenied = micPermissionState === 'denied';
 
 	const { isEnabled, isRegistered, isInCall } = useVoipState();
 	const { makeCall } = useVoipAPI();
@@ -36,19 +35,26 @@ export const useVoiceCallRoomAction = () => {
 
 	const tooltip = useMemo(() => {
 		if (isMicPermissionDenied) {
-			return t('Microphone_access_not_allowed');
+			return 'Microphone_access_not_allowed';
 		}
 
 		if (isInCall) {
-			return t('Unable_to_make_calls_while_another_is_ongoing');
+			return 'Unable_to_make_calls_while_another_is_ongoing';
 		}
 
-		return disabled ? t('Voice_calling_disabled') : '';
-	}, [disabled, isInCall, isMicPermissionDenied, t]);
+		return disabled ? 'Voice_calling_disabled' : '';
+	}, [disabled, isInCall, isMicPermissionDenied]);
+
+	const promptPermission = useDevicePermissionPrompt({
+		actionType: 'outgoing',
+		onAccept: () => {
+			makeCall(remoteUser?.freeSwitchExtension as string);
+		},
+	});
 
 	const handleOnClick = useEffectEvent(() => {
 		if (canMakeVoipCall) {
-			return makeCall(remoteUser?.freeSwitchExtension as string);
+			return promptPermission();
 		}
 		dispatchWarning();
 	});
@@ -60,14 +66,13 @@ export const useVoiceCallRoomAction = () => {
 
 		return {
 			id: 'start-voice-call',
-			title: 'Voice_Call',
+			title: tooltip || 'Voice_Call',
 			icon: 'phone',
 			featured: true,
 			action: handleOnClick,
 			groups: ['direct'] as const,
 			order: 2,
 			disabled,
-			tooltip,
 		};
 	}, [allowed, disabled, handleOnClick, tooltip]);
 };

apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx

@@ -1,6 +1,7 @@
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { Device, DeviceContextValue } from '@rocket.chat/ui-contexts';
 import { DeviceContext } from '@rocket.chat/ui-contexts';
+import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/react-query';
 import type { ReactElement, ReactNode } from 'react';
 import { useEffect, useState, useMemo } from 'react';
 
@@ -10,20 +11,27 @@ type DeviceProviderProps = {
 	children?: ReactNode | undefined;
 };
 
-export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement => {
-	const [enabled] = useState(typeof isSecureContext && isSecureContext);
-	const [availableAudioOutputDevices, setAvailableAudioOutputDevices] = useState<Device[]>([]);
-	const [availableAudioInputDevices, setAvailableAudioInputDevices] = useState<Device[]>([]);
-	const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] = useState<Device>({
-		id: 'default',
+const defaultDevices = {
+	audioInput: [],
+	audioOutput: [],
+	defaultAudioOutputDevice: {
+		id: '',
 		label: '',
-		type: 'audio',
-	});
-	const [selectedAudioInputDevice, setSelectedAudioInputDevice] = useState<Device>({
-		id: 'default',
+		type: 'audiooutput',
+	},
+	defaultAudioInputDevice: {
+		id: '',
 		label: '',
-		type: 'audio',
-	});
+		type: 'audioinput',
+	},
+};
+
+const devicesQueryKey = ['media-devices-list'];
+
+export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement => {
+	const [enabled] = useState(typeof isSecureContext && isSecureContext);
+	const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] = useState<Device | undefined>(undefined);
+	const [selectedAudioInputDevice, setSelectedAudioInputDevice] = useState<Device | undefined>(undefined);
 
 	const setAudioInputDevice = (device: Device): void => {
 		if (!isSecureContext) {
@@ -45,62 +53,108 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement
 		},
 	);
 
+	const queryClient = useQueryClient();
+
+	const { data } = useQuery({
+		queryKey: devicesQueryKey,
+		enabled,
+		queryFn: async () => {
+			const devices = await navigator.mediaDevices?.enumerateDevices();
+			if (!devices || devices.length === 0) {
+				return defaultDevices;
+			}
+
+			const mappedDevices: Device[] = devices.map((device) => ({
+				id: device.deviceId,
+				label: device.label,
+				type: device.kind,
+			}));
+
+			const audioInput = mappedDevices.filter((device) => device.type === 'audioinput');
+
+			const audioOutput = mappedDevices.filter((device) => device.type === 'audiooutput');
+
+			return {
+				audioInput,
+				audioOutput,
+				defaultAudioOutputDevice: audioOutput[0],
+				defaultAudioInputDevice: audioInput[0],
+			};
+		},
+		initialData: defaultDevices,
+		placeholderData: keepPreviousData,
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+		refetchOnMount: true,
+		staleTime: 0,
+	});
+
+	const { data: permissionStatus } = useQuery({
+		queryKey: [...devicesQueryKey, 'permission-status'],
+		queryFn: async () => {
+			if (!navigator.permissions) {
+				return;
+			}
+			const result = await navigator.permissions.query({ name: 'microphone' as PermissionName });
+			return result;
+		},
+		initialData: undefined,
+		placeholderData: undefined,
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+		refetchOnMount: true,
+	});
+
 	useEffect(() => {
-		if (!enabled) {
+		if (!permissionStatus) {
 			return;
 		}
-		const setMediaDevices = (): void => {
-			navigator.mediaDevices?.enumerateDevices().then((devices) => {
-				const audioInput: Device[] = [];
-				const audioOutput: Device[] = [];
-				devices.forEach((device) => {
-					const mediaDevice: Device = {
-						id: device.deviceId,
-						label: device.label,
-						type: device.kind,
-					};
-					if (device.kind === 'audioinput') {
-						audioInput.push(mediaDevice);
-					} else if (device.kind === 'audiooutput') {
-						audioOutput.push(mediaDevice);
-					}
-				});
-				setAvailableAudioOutputDevices(audioOutput);
-				setAvailableAudioInputDevices(audioInput);
-			});
+		const invalidateQueries = (): void => {
+			queryClient.invalidateQueries({ queryKey: devicesQueryKey });
 		};
 
-		navigator.mediaDevices?.addEventListener('devicechange', setMediaDevices);
-		setMediaDevices();
+		permissionStatus.addEventListener('change', invalidateQueries);
 
 		return (): void => {
-			navigator.mediaDevices?.removeEventListener('devicechange', setMediaDevices);
+			permissionStatus.removeEventListener('change', invalidateQueries);
 		};
-	}, [enabled]);
+	}, [permissionStatus, queryClient]);
+
+	useEffect(() => {
+		if (!enabled || !navigator.mediaDevices) {
+			return;
+		}
+
+		const invalidateQuery = (): void => {
+			queryClient.invalidateQueries({ queryKey: devicesQueryKey, exact: true });
+		};
+
+		navigator.mediaDevices.addEventListener('devicechange', invalidateQuery);
+
+		return (): void => {
+			navigator.mediaDevices.removeEventListener('devicechange', invalidateQuery);
+		};
+	}, [enabled, queryClient]);
 
 	const contextValue = useMemo((): DeviceContextValue => {
 		if (!enabled) {
 			return {
 				enabled,
 			};
 		}
+		const { audioInput, audioOutput, defaultAudioOutputDevice, defaultAudioInputDevice } = data;
 
 		return {
 			enabled,
-			availableAudioOutputDevices,
-			availableAudioInputDevices,
-			selectedAudioOutputDevice,
-			selectedAudioInputDevice,
+			permissionStatus,
+			availableAudioOutputDevices: audioOutput,
+			availableAudioInputDevices: audioInput,
+			selectedAudioOutputDevice: selectedAudioOutputDevice || defaultAudioOutputDevice,
+			selectedAudioInputDevice: selectedAudioInputDevice || defaultAudioInputDevice,
 			setAudioOutputDevice,
 			setAudioInputDevice,
 		};
-	}, [
-		availableAudioInputDevices,
-		availableAudioOutputDevices,
-		enabled,
-		selectedAudioInputDevice,
-		selectedAudioOutputDevice,
-		setAudioOutputDevice,
-	]);
+	}, [enabled, data, permissionStatus, selectedAudioOutputDevice, selectedAudioInputDevice, setAudioOutputDevice]);
+
 	return <DeviceContext.Provider value={contextValue}>{children}</DeviceContext.Provider>;
 };

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

@@ -5635,6 +5635,11 @@
   "VoIP_TeamCollab_Ice_Servers_Description": "A list of Ice Servers (STUN and/or TURN), separated by comma.  \n Username, password and port are allowed in the format `username:password@stun:host:port` or `username:password@turn:host:port`.  \n Both username and password may be html-encoded.",
   "VoIP_Toggle": "Enable/Disable VoIP",
   "VoIP_available_setup_freeswitch_server_details": "VoIP is available but the FreeSwitch server details need to be set up from the team voice call settings.",
+  "VoIP_device_permission_required": "Mic/speaker access required",
+  "VoIP_device_permission_required_description": "Your web browser stopped {{workspaceUrl}} from using your microphone and/or speaker.\n\nAllow speaker and microphone access in your browser settings to prevent seeing this message again.",
+  "VoIP_allow_and_call": "Allow and call",
+  "VoIP_allow_and_accept": "Allow and accept",
+  "VoIP_cancel_and_reject": "Cancel and reject",
   "Voice_Call": "Voice Call",
   "Voice_Call_Extension": "Voice Call Extension",
   "Voice_and_omnichannel": "Voice and omnichannel",

packages/mock-providers/src/MockedAppRootBuilder.tsx

@@ -16,6 +16,7 @@ import { createPredicateFromFilter } from '@rocket.chat/mongo-adapter';
 import type { Method, OperationParams, OperationResult, PathPattern, UrlParams } from '@rocket.chat/rest-typings';
 import type {
 	Device,
+	DeviceContext,
 	LoginService,
 	ModalContextValue,
 	ServerContextValue,
@@ -213,9 +214,16 @@ export class MockedAppRootBuilder {
 
 	private events = new Emitter<MockedAppRootEvents>();
 
-	private audioInputDevices: Device[] = [];
-
-	private audioOutputDevices: Device[] = [];
+	private deviceContext: Partial<ContextType<typeof DeviceContext>> = {
+		enabled: true,
+		availableAudioOutputDevices: [],
+		availableAudioInputDevices: [],
+		selectedAudioOutputDevice: undefined,
+		selectedAudioInputDevice: undefined,
+		setAudioOutputDevice: () => undefined,
+		setAudioInputDevice: () => undefined,
+		permissionStatus: undefined,
+	};
 
 	wrap(wrapper: (children: ReactNode) => ReactNode): this {
 		this.wrappers.push(wrapper);
@@ -489,12 +497,29 @@ export class MockedAppRootBuilder {
 	}
 
 	withAudioInputDevices(devices: Device[]): this {
-		this.audioInputDevices = devices;
+		if (!this.deviceContext.enabled) {
+			throw new Error('DeviceContext is not enabled');
+		}
+
+		this.deviceContext.availableAudioInputDevices = devices;
 		return this;
 	}
 
 	withAudioOutputDevices(devices: Device[]): this {
-		this.audioOutputDevices = devices;
+		if (!this.deviceContext.enabled) {
+			throw new Error('DeviceContext is not enabled');
+		}
+
+		this.deviceContext.availableAudioOutputDevices = devices;
+		return this;
+	}
+
+	withMicrophonePermissionState(status: PermissionStatus): this {
+		if (!this.deviceContext.enabled) {
+			throw new Error('DeviceContext is not enabled');
+		}
+
+		this.deviceContext.permissionStatus = status;
 		return this;
 	}
 
@@ -542,20 +567,7 @@ export class MockedAppRootBuilder {
 			},
 		});
 
-		const {
-			server,
-			router,
-			settings,
-			user,
-			userPresence,
-			videoConf,
-			i18n,
-			authorization,
-			wrappers,
-			audioInputDevices,
-			audioOutputDevices,
-			authentication,
-		} = this;
+		const { server, router, settings, user, userPresence, videoConf, i18n, authorization, wrappers, deviceContext, authentication } = this;
 
 		const reduceTranslation = (translation?: ContextType<typeof TranslationContext>): ContextType<typeof TranslationContext> => {
 			return {
@@ -630,10 +642,7 @@ export class MockedAppRootBuilder {
 																				<CustomSoundProvider> */}
 										<UserContext.Provider value={user}>
 											<AuthenticationContext.Provider value={authentication}>
-												<MockedDeviceContext
-													availableAudioInputDevices={audioInputDevices}
-													availableAudioOutputDevices={audioOutputDevices}
-												>
+												<MockedDeviceContext {...deviceContext}>
 													<ModalContext.Provider value={modal}>
 														<AuthorizationContext.Provider value={authorization}>
 															{/* <EmojiPickerProvider>