Regression: Unavailable devices in unsupported browsers

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

@@ -1,6 +1,8 @@
 import { DeviceContext, Device, IExperimentalHTMLAudioElement } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
 
+import { isSetSinkIdAvailable } from './lib/isSetSinkIdAvailable';
+
 type DeviceProviderProps = {
 	children?: ReactNode | undefined;
 };
@@ -26,6 +28,9 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement
 		outputDevice: Device;
 		HTMLAudioElement: IExperimentalHTMLAudioElement;
 	}): void => {
+		if (!isSetSinkIdAvailable()) {
+			throw new Error('setSinkId is not available in this browser');
+		}
 		setSelectedAudioOutputDevice(outputDevice);
 		HTMLAudioElement.setSinkId(outputDevice.id);
 	};

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

@@ -0,0 +1,6 @@
+import { IExperimentalHTMLAudioElement } from '@rocket.chat/ui-contexts';
+
+export const isSetSinkIdAvailable = (): boolean => {
+	const audio = new Audio() as IExperimentalHTMLAudioElement;
+	return !!audio.setSinkId;
+};

apps/meteor/client/providers/MeteorProvider.tsx

@@ -6,7 +6,7 @@ import AvatarUrlProvider from './AvatarUrlProvider';
 import { CallProvider } from './CallProvider';
 import ConnectionStatusProvider from './ConnectionStatusProvider';
 import CustomSoundProvider from './CustomSoundProvider';
-import { DeviceProvider } from './DeviceProvider';
+import { DeviceProvider } from './DeviceProvider/DeviceProvider';
 import LayoutProvider from './LayoutProvider';
 import ModalProvider from './ModalProvider';
 import OmnichannelProvider from './OmnichannelProvider';

apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx

@@ -1,9 +1,10 @@
-import { Modal, Field, Select, ButtonGroup, Button, SelectOption } from '@rocket.chat/fuselage';
+import { Modal, Field, Select, ButtonGroup, Button, SelectOption, Box } from '@rocket.chat/fuselage';
 import { useTranslation, useAvailableDevices, useToastMessageDispatch, useSetModal, useSelectedDevices } from '@rocket.chat/ui-contexts';
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 
 import { useChangeAudioInputDevice, useChangeAudioOutputDevice } from '../../../../client/contexts/CallContext';
+import { isSetSinkIdAvailable } from '../../../../client/providers/DeviceProvider/lib/isSetSinkIdAvailable';
 
 type FieldValues = {
 	inputDevice: string;
@@ -23,7 +24,7 @@ const DeviceSettingsModal = (): ReactElement => {
 			outputDevice: selectedAudioDevices?.audioOutput?.id || '',
 		},
 	});
-
+	const [setSinkIdAvailable] = useState(() => isSetSinkIdAvailable());
 	const availableDevices = useAvailableDevices();
 	const changeAudioInputDevice = useChangeAudioInputDevice();
 	const changeAudioOutputDevice = useChangeAudioOutputDevice();
@@ -51,13 +52,23 @@ const DeviceSettingsModal = (): ReactElement => {
 				<Modal.Close onClick={onCancel} />
 			</Modal.Header>
 			<Modal.Content fontScale='p2'>
+				{!setSinkIdAvailable && (
+					<Box color='danger-600' display='flex' flexDirection='column'>
+						{t('Device_Changes_Not_Available')}
+						<Box is='a' href='https://rocket.chat/download' target='_blank' rel='noopener noreferrer'>
+							{t('Download_Destkop_App')}
+						</Box>
+					</Box>
+				)}
 				<Field>
 					<Field.Label>{t('Microphone')}</Field.Label>
 					<Field.Row w='full' display='flex' flexDirection='column' alignItems='stretch'>
 						<Controller
 							name='inputDevice'
 							control={control}
-							render={({ field }): ReactElement => <Select {...field} options={availableInputDevices || []} />}
+							render={({ field }): ReactElement => (
+								<Select disabled={!setSinkIdAvailable} {...field} options={availableInputDevices || []} />
+							)}
 						/>
 					</Field.Row>
 				</Field>
@@ -67,15 +78,17 @@ const DeviceSettingsModal = (): ReactElement => {
 						<Controller
 							name='outputDevice'
 							control={control}
-							render={({ field }): ReactElement => <Select {...field} options={availableOutputDevices || []} />}
+							render={({ field }): ReactElement => (
+								<Select disabled={!setSinkIdAvailable} {...field} options={availableOutputDevices || []} />
+							)}
 						/>
 					</Field.Row>
 				</Field>
 			</Modal.Content>
 			<Modal.Footer>
 				<ButtonGroup stretch w='full'>
 					<Button onClick={(): void => setModal()}>{t('Cancel')}</Button>
-					<Button primary onClick={handleSubmit(onSubmit)}>
+					<Button disabled={!setSinkIdAvailable} primary onClick={handleSubmit(onSubmit)}>
 						{t('Save')}
 					</Button>
 				</ButtonGroup>

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1485,6 +1485,7 @@
   "Desktop_Notifications_Enabled": "Desktop Notifications are Enabled",
   "Desktop_Notifications_Not_Enabled": "Desktop Notifications are Not Enabled",
   "Details": "Details",
+  "Device_Changes_Not_Available": "Device changes not available in this browser. For guaranteed availability, please use Rocket.Chat's official desktop app.",
   "Device_Management": "Device management",
   "Device_ID": "Device ID",
   "Device_Info": "Device Info",
@@ -1574,6 +1575,7 @@
   "Dont_ask_me_again": "Don't ask me again!",
   "Dont_ask_me_again_list": "Don't ask me again list",
   "Download": "Download",
+  "Download_Destkop_App": "Download Desktop App",
   "Download_Info": "Download Info",
   "Download_My_Data": "Download My Data (HTML)",
   "Download_Pending_Avatars": "Download Pending Avatars",

apps/meteor/packages/rocketchat-i18n/i18n/pt-BR.i18n.json

@@ -1437,6 +1437,7 @@
   "Desktop_Notifications_Enabled": "Notificações da área de trabalho estão habilitadas",
   "Desktop_Notifications_Not_Enabled": "Notificações da área de trabalho estão desabilitadas",
   "Details": "Detalhes",
+  "Device_Changes_Not_Available": "Mudanças de dispositivo não estão disponíveis neste navegador, para disponíbilidade garantida, use o aplicativo desktop oficial do Rocket.Chat.",
   "Different_Style_For_User_Mentions": "Estilo diferente para as menções do usuário",
   "Direct_Message": "Mensagem direta",
   "Direct_message_creation_description": "Você está prestes a criar uma conversa com vários usuários. Adicione os usuários com quem gostaria de conversar, todos no mesmo local, utilizando mensagens diretas.",
@@ -1509,6 +1510,7 @@
   "Dont_ask_me_again": "Não perguntar de novo!",
   "Dont_ask_me_again_list": "Lista Não perguntar de novo",
   "Download": "Baixar",
+  "Download_Destkop_App": "Baixar aplicativo para desktop",
   "Download_Info": "Baixar informações",
   "Download_My_Data": "Baixar meus dados (HTML)",
   "Download_Pending_Avatars": "Baixar avatares pendentes",