From 6049ebc712a5b7fd36587d0ecdc06009f81f8a8d Mon Sep 17 00:00:00 2001 From: Martin Date: Thu, 28 Jul 2022 15:04:36 -0300 Subject: [PATCH 1/6] [FIX] MediaDevices Error on non TLS access --- .../DeviceProvider/DeviceProvider.tsx | 21 +++++++++++++++---- .../voip/modals/DeviceSettingsModal.tsx | 5 +++++ .../rocketchat-i18n/i18n/en.i18n.json | 1 + .../rocketchat-i18n/i18n/pt-BR.i18n.json | 1 + 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx b/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx index e695691f19df..9dad72667085 100644 --- a/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx +++ b/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx @@ -21,6 +21,13 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement type: 'audio', }); + const setAudioInputDevice = (device: Device): void => { + if (!isSecureContext) { + throw new Error('Device Changes are not available on insecure contexts'); + } + setSelectedAudioInputDevice(device); + }; + const setAudioOutputDevice = ({ outputDevice, HTMLAudioElement, @@ -31,13 +38,19 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement if (!isSetSinkIdAvailable()) { throw new Error('setSinkId is not available in this browser'); } + if (!isSecureContext) { + throw new Error('Device Changes are not available on insecure contexts'); + } setSelectedAudioOutputDevice(outputDevice); HTMLAudioElement.setSinkId(outputDevice.id); }; useEffect(() => { + if (!isSecureContext) { + return; + } const setMediaDevices = (): void => { - navigator.mediaDevices.enumerateDevices().then((devices) => { + navigator.mediaDevices?.enumerateDevices().then((devices) => { const audioInput: Device[] = []; const audioOutput: Device[] = []; devices.forEach((device) => { @@ -57,11 +70,11 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement }); }; - navigator.mediaDevices.addEventListener('devicechange', setMediaDevices); + navigator.mediaDevices?.addEventListener('devicechange', setMediaDevices); setMediaDevices(); return (): void => { - navigator.mediaDevices.removeEventListener('devicechange', setMediaDevices); + navigator.mediaDevices?.removeEventListener('devicechange', setMediaDevices); }; }, []); @@ -71,7 +84,7 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement selectedAudioOutputDevice, selectedAudioInputDevice, setAudioOutputDevice, - setAudioInputDevice: setSelectedAudioInputDevice, + setAudioInputDevice, }; return {children}; }; diff --git a/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx b/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx index d29f238e5987..dd6ed0ff930c 100644 --- a/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx +++ b/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx @@ -60,6 +60,11 @@ const DeviceSettingsModal = (): ReactElement => { )} + {!isSecureContext && ( + + {t('Device_Changes_Not_Available_Insecure_Context')} + + )} {t('Microphone')} diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index fd245398d31b..81177d35e747 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json @@ -1486,6 +1486,7 @@ "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_Changes_Not_Available_Insecure_Context": "Device changes are only available on secure contexts (e.g. https://)", "Device_Management": "Device management", "Device_ID": "Device ID", "Device_Info": "Device Info", diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/pt-BR.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/pt-BR.i18n.json index c5298d15632f..e05394a481e5 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/pt-BR.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/pt-BR.i18n.json @@ -1438,6 +1438,7 @@ "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.", + "Device_Changes_Not_Available_Insecure_Context": "Mudanças de dispositivo somente estão disponíveis em contextos seguros. (https://)", "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.", From a4aa9f06b6d43959ad04d42cb5c8ddc5048005df Mon Sep 17 00:00:00 2001 From: Martin Date: Thu, 28 Jul 2022 16:40:48 -0300 Subject: [PATCH 2/6] Use context --- .../DeviceProvider/DeviceProvider.tsx | 64 +++++++++++-------- .../voip/modals/DeviceSettingsModal.tsx | 11 +++- packages/ui-contexts/src/DeviceContext.ts | 30 ++++----- .../src/hooks/useAvailableDevices.ts | 18 ++++-- .../src/hooks/useDeviceConstraints.ts | 10 ++- .../src/hooks/useIsDeviceManagementEnabled.ts | 5 ++ .../src/hooks/useSelectedDevices.ts | 18 ++++-- .../src/hooks/useSetInputMediaDevice.ts | 9 ++- .../src/hooks/useSetOutputMediaDevice.ts | 10 ++- 9 files changed, 114 insertions(+), 61 deletions(-) create mode 100644 packages/ui-contexts/src/hooks/useIsDeviceManagementEnabled.ts diff --git a/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx b/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx index 9dad72667085..8ab12e850b32 100644 --- a/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx +++ b/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx @@ -1,5 +1,6 @@ -import { DeviceContext, Device, IExperimentalHTMLAudioElement } from '@rocket.chat/ui-contexts'; -import React, { ReactElement, ReactNode, useEffect, useState } from 'react'; +import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { DeviceContext, Device, IExperimentalHTMLAudioElement, DeviceContextValue } from '@rocket.chat/ui-contexts'; +import React, { ReactElement, ReactNode, useEffect, useState, useMemo } from 'react'; import { isSetSinkIdAvailable } from './lib/isSetSinkIdAvailable'; @@ -8,6 +9,7 @@ type DeviceProviderProps = { }; export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement => { + const [enabled] = useState(typeof isSecureContext && isSecureContext); const [availableAudioOutputDevices, setAvailableAudioOutputDevices] = useState([]); const [availableAudioInputDevices, setAvailableAudioInputDevices] = useState([]); const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] = useState({ @@ -28,25 +30,21 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement setSelectedAudioInputDevice(device); }; - const setAudioOutputDevice = ({ - outputDevice, - HTMLAudioElement, - }: { - outputDevice: Device; - HTMLAudioElement: IExperimentalHTMLAudioElement; - }): void => { - if (!isSetSinkIdAvailable()) { - throw new Error('setSinkId is not available in this browser'); - } - if (!isSecureContext) { - throw new Error('Device Changes are not available on insecure contexts'); - } - setSelectedAudioOutputDevice(outputDevice); - HTMLAudioElement.setSinkId(outputDevice.id); - }; + const setAudioOutputDevice = useMutableCallback( + ({ outputDevice, HTMLAudioElement }: { outputDevice: Device; HTMLAudioElement: IExperimentalHTMLAudioElement }): void => { + if (!isSetSinkIdAvailable()) { + throw new Error('setSinkId is not available in this browser'); + } + if (!enabled) { + throw new Error('Device Changes are not available on insecure contexts'); + } + setSelectedAudioOutputDevice(outputDevice); + HTMLAudioElement.setSinkId(outputDevice.id); + }, + ); useEffect(() => { - if (!isSecureContext) { + if (!enabled) { return; } const setMediaDevices = (): void => { @@ -76,15 +74,31 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement return (): void => { navigator.mediaDevices?.removeEventListener('devicechange', setMediaDevices); }; - }, []); + }, [enabled]); - const contextValue = { - availableAudioOutputDevices, + const contextValue = useMemo((): DeviceContextValue => { + if (!enabled) { + return { + enabled, + }; + } + + return { + enabled, + availableAudioOutputDevices, + availableAudioInputDevices, + selectedAudioOutputDevice, + selectedAudioInputDevice, + setAudioOutputDevice, + setAudioInputDevice, + }; + }, [ availableAudioInputDevices, - selectedAudioOutputDevice, + availableAudioOutputDevices, + enabled, selectedAudioInputDevice, + selectedAudioOutputDevice, setAudioOutputDevice, - setAudioInputDevice, - }; + ]); return {children}; }; diff --git a/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx b/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx index dd6ed0ff930c..931b0616fa65 100644 --- a/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx +++ b/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx @@ -1,5 +1,12 @@ import { Modal, Field, Select, ButtonGroup, Button, SelectOption, Box } from '@rocket.chat/fuselage'; -import { useTranslation, useAvailableDevices, useToastMessageDispatch, useSetModal, useSelectedDevices } from '@rocket.chat/ui-contexts'; +import { + useTranslation, + useAvailableDevices, + useToastMessageDispatch, + useSetModal, + useSelectedDevices, + useIsDeviceManagementEnabled, +} from '@rocket.chat/ui-contexts'; import React, { ReactElement, useState } from 'react'; import { useForm, Controller, SubmitHandler } from 'react-hook-form'; @@ -60,7 +67,7 @@ const DeviceSettingsModal = (): ReactElement => { )} - {!isSecureContext && ( + {!useIsDeviceManagementEnabled && ( {t('Device_Changes_Not_Available_Insecure_Context')} diff --git a/packages/ui-contexts/src/DeviceContext.ts b/packages/ui-contexts/src/DeviceContext.ts index 545bb4353375..03b09be91136 100644 --- a/packages/ui-contexts/src/DeviceContext.ts +++ b/packages/ui-contexts/src/DeviceContext.ts @@ -10,7 +10,10 @@ export interface IExperimentalHTMLAudioElement extends HTMLAudioElement { setSinkId: (sinkId: string) => void; } -type DeviceContextValue = { +export type DeviceContextValue = EnabledDeviceContextValue | DisabledDeviceContextValue; + +type EnabledDeviceContextValue = { + enabled: true; availableAudioOutputDevices: Device[]; availableAudioInputDevices: Device[]; // availableVideoInputDevices: Device[] @@ -22,22 +25,13 @@ type DeviceContextValue = { // setVideoInputDevice: (device: Device) => void; }; +type DisabledDeviceContextValue = { + enabled: false; +}; + +export const isDeviceContextEnabled = (context: DeviceContextValue): context is EnabledDeviceContextValue => + (context as EnabledDeviceContextValue).enabled; + export const DeviceContext = createContext({ - availableAudioOutputDevices: [], - availableAudioInputDevices: [], - // availableVideoInputDevices: [], - selectedAudioOutputDevice: { - id: 'default', - label: '', - type: 'audio', - }, - selectedAudioInputDevice: { - id: 'default', - label: '', - type: 'audio', - }, - // selectedVideoInputDevice: undefined, - setAudioOutputDevice: () => undefined, - setAudioInputDevice: () => undefined, - // setVideoInputDevice: () => undefined, + enabled: false, }); diff --git a/packages/ui-contexts/src/hooks/useAvailableDevices.ts b/packages/ui-contexts/src/hooks/useAvailableDevices.ts index 5824c02e6374..7e4a4604d12d 100644 --- a/packages/ui-contexts/src/hooks/useAvailableDevices.ts +++ b/packages/ui-contexts/src/hooks/useAvailableDevices.ts @@ -1,13 +1,21 @@ import { useContext } from 'react'; -import { DeviceContext, Device } from '../DeviceContext'; +import { DeviceContext, Device, isDeviceContextEnabled } from '../DeviceContext'; type AvailableDevices = { audioInput?: Device[]; audioOutput?: Device[]; }; -export const useAvailableDevices = (): AvailableDevices => ({ - audioInput: useContext(DeviceContext).availableAudioInputDevices, - audioOutput: useContext(DeviceContext).availableAudioOutputDevices, -}); +export const useAvailableDevices = (): AvailableDevices => { + const context = useContext(DeviceContext); + + if (!isDeviceContextEnabled(context)) { + throw new Error('useAvailableDevices only if Device management is enabled'); + } + + return { + audioInput: context.availableAudioInputDevices, + audioOutput: context.availableAudioOutputDevices, + }; +}; diff --git a/packages/ui-contexts/src/hooks/useDeviceConstraints.ts b/packages/ui-contexts/src/hooks/useDeviceConstraints.ts index e21e318204b1..c18b3532f8ef 100644 --- a/packages/ui-contexts/src/hooks/useDeviceConstraints.ts +++ b/packages/ui-contexts/src/hooks/useDeviceConstraints.ts @@ -1,8 +1,14 @@ import { useContext } from 'react'; -import { DeviceContext } from '../DeviceContext'; +import { DeviceContext, isDeviceContextEnabled } from '../DeviceContext'; export const useDeviceConstraints = (): MediaStreamConstraints => { - const selectedAudioInputDeviceId = useContext(DeviceContext).selectedAudioInputDevice?.id; + const context = useContext(DeviceContext); + + if (!isDeviceContextEnabled(context)) { + throw new Error('useDeviceConstraints only if Device management is enabled'); + } + + const selectedAudioInputDeviceId = context.selectedAudioInputDevice?.id; return { audio: selectedAudioInputDeviceId === 'default' ? true : { deviceId: { exact: selectedAudioInputDeviceId } } }; }; diff --git a/packages/ui-contexts/src/hooks/useIsDeviceManagementEnabled.ts b/packages/ui-contexts/src/hooks/useIsDeviceManagementEnabled.ts new file mode 100644 index 000000000000..a453b5169542 --- /dev/null +++ b/packages/ui-contexts/src/hooks/useIsDeviceManagementEnabled.ts @@ -0,0 +1,5 @@ +import { useContext } from 'react'; + +import { DeviceContext } from '../DeviceContext'; + +export const useIsDeviceManagementEnabled = (): boolean => useContext(DeviceContext).enabled; diff --git a/packages/ui-contexts/src/hooks/useSelectedDevices.ts b/packages/ui-contexts/src/hooks/useSelectedDevices.ts index ce26b658b1c1..b5097b3b5d98 100644 --- a/packages/ui-contexts/src/hooks/useSelectedDevices.ts +++ b/packages/ui-contexts/src/hooks/useSelectedDevices.ts @@ -1,13 +1,21 @@ import { useContext } from 'react'; -import { DeviceContext, Device } from '../DeviceContext'; +import { DeviceContext, Device, isDeviceContextEnabled } from '../DeviceContext'; type SelectedDevices = { audioInput?: Device; audioOutput?: Device; }; -export const useSelectedDevices = (): SelectedDevices => ({ - audioInput: useContext(DeviceContext).selectedAudioInputDevice, - audioOutput: useContext(DeviceContext).selectedAudioOutputDevice, -}); +export const useSelectedDevices = (): SelectedDevices => { + const context = useContext(DeviceContext); + + if (!isDeviceContextEnabled(context)) { + throw new Error('useSelectedDevices only if Device management is enabled'); + } + + return { + audioInput: context.selectedAudioInputDevice, + audioOutput: context.selectedAudioOutputDevice, + }; +}; diff --git a/packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts b/packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts index 801cf014802e..bc65f4fcdef4 100644 --- a/packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts +++ b/packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts @@ -1,9 +1,14 @@ import { useContext } from 'react'; -import { DeviceContext, Device } from '../DeviceContext'; +import { DeviceContext, Device, isDeviceContextEnabled } from '../DeviceContext'; type setInputMediaDevice = (inputDevice: Device) => void; export const useSetInputMediaDevice = (): setInputMediaDevice => { - return useContext(DeviceContext).setAudioInputDevice; + const context = useContext(DeviceContext); + + if (!isDeviceContextEnabled(context)) { + throw new Error('useSetInputMediaDevice only if Device management is enabled'); + } + return context.setAudioInputDevice; }; diff --git a/packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts b/packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts index 531ad1607a00..edad42d0187d 100644 --- a/packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts +++ b/packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { DeviceContext, Device, IExperimentalHTMLAudioElement } from '../DeviceContext'; +import { DeviceContext, Device, IExperimentalHTMLAudioElement, isDeviceContextEnabled } from '../DeviceContext'; // This allows different places to set the output device by providing a HTMLAudioElement @@ -13,5 +13,11 @@ type setOutputMediaDevice = ({ }) => void; export const useSetOutputMediaDevice = (): setOutputMediaDevice => { - return useContext(DeviceContext).setAudioOutputDevice; + const context = useContext(DeviceContext); + + if (!isDeviceContextEnabled(context)) { + throw new Error('useSetOutputMediaDevice only if Device management is enabled'); + } + + return context.setAudioOutputDevice; }; From e709d5132253a772b4ad54b37a2451936582e1dc Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 1 Aug 2022 10:15:09 -0300 Subject: [PATCH 3/6] Warn instead of throw --- packages/ui-contexts/src/hooks/useAvailableDevices.ts | 7 +++++-- packages/ui-contexts/src/hooks/useDeviceConstraints.ts | 7 +++++-- packages/ui-contexts/src/hooks/useSelectedDevices.ts | 7 +++++-- packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts | 5 ++++- packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts | 5 ++++- 5 files changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/ui-contexts/src/hooks/useAvailableDevices.ts b/packages/ui-contexts/src/hooks/useAvailableDevices.ts index 7e4a4604d12d..59f43db533fc 100644 --- a/packages/ui-contexts/src/hooks/useAvailableDevices.ts +++ b/packages/ui-contexts/src/hooks/useAvailableDevices.ts @@ -7,11 +7,14 @@ type AvailableDevices = { audioOutput?: Device[]; }; -export const useAvailableDevices = (): AvailableDevices => { +export const useAvailableDevices = (): AvailableDevices | null => { const context = useContext(DeviceContext); if (!isDeviceContextEnabled(context)) { - throw new Error('useAvailableDevices only if Device management is enabled'); + console.warn( + 'Device Management is disabled on unsecure contexts, see https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts', + ); + return null; } return { diff --git a/packages/ui-contexts/src/hooks/useDeviceConstraints.ts b/packages/ui-contexts/src/hooks/useDeviceConstraints.ts index c18b3532f8ef..c7320159e426 100644 --- a/packages/ui-contexts/src/hooks/useDeviceConstraints.ts +++ b/packages/ui-contexts/src/hooks/useDeviceConstraints.ts @@ -2,11 +2,14 @@ import { useContext } from 'react'; import { DeviceContext, isDeviceContextEnabled } from '../DeviceContext'; -export const useDeviceConstraints = (): MediaStreamConstraints => { +export const useDeviceConstraints = (): MediaStreamConstraints | null => { const context = useContext(DeviceContext); if (!isDeviceContextEnabled(context)) { - throw new Error('useDeviceConstraints only if Device management is enabled'); + console.warn( + 'Device Management is disabled on unsecure contexts, see https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts', + ); + return null; } const selectedAudioInputDeviceId = context.selectedAudioInputDevice?.id; diff --git a/packages/ui-contexts/src/hooks/useSelectedDevices.ts b/packages/ui-contexts/src/hooks/useSelectedDevices.ts index b5097b3b5d98..2a682d4ce8d2 100644 --- a/packages/ui-contexts/src/hooks/useSelectedDevices.ts +++ b/packages/ui-contexts/src/hooks/useSelectedDevices.ts @@ -7,11 +7,14 @@ type SelectedDevices = { audioOutput?: Device; }; -export const useSelectedDevices = (): SelectedDevices => { +export const useSelectedDevices = (): SelectedDevices | null => { const context = useContext(DeviceContext); if (!isDeviceContextEnabled(context)) { - throw new Error('useSelectedDevices only if Device management is enabled'); + console.warn( + 'Device Management is disabled on unsecure contexts, see https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts', + ); + return null; } return { diff --git a/packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts b/packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts index bc65f4fcdef4..619c1899054b 100644 --- a/packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts +++ b/packages/ui-contexts/src/hooks/useSetInputMediaDevice.ts @@ -8,7 +8,10 @@ export const useSetInputMediaDevice = (): setInputMediaDevice => { const context = useContext(DeviceContext); if (!isDeviceContextEnabled(context)) { - throw new Error('useSetInputMediaDevice only if Device management is enabled'); + console.warn( + 'Device Management is disabled on unsecure contexts, see https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts', + ); + return () => undefined; } return context.setAudioInputDevice; }; diff --git a/packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts b/packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts index edad42d0187d..a7832b52bc55 100644 --- a/packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts +++ b/packages/ui-contexts/src/hooks/useSetOutputMediaDevice.ts @@ -16,7 +16,10 @@ export const useSetOutputMediaDevice = (): setOutputMediaDevice => { const context = useContext(DeviceContext); if (!isDeviceContextEnabled(context)) { - throw new Error('useSetOutputMediaDevice only if Device management is enabled'); + console.warn( + 'Device Management is disabled on unsecure contexts, see https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts', + ); + return () => undefined; } return context.setAudioOutputDevice; From 3f1b4adff85e08ab7567cf8c0fe35b4eff535a28 Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 1 Aug 2022 14:59:14 -0300 Subject: [PATCH 4/6] Fix missing export --- packages/ui-contexts/src/DeviceContext.ts | 4 ++-- packages/ui-contexts/src/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui-contexts/src/DeviceContext.ts b/packages/ui-contexts/src/DeviceContext.ts index 03b09be91136..483f03707f95 100644 --- a/packages/ui-contexts/src/DeviceContext.ts +++ b/packages/ui-contexts/src/DeviceContext.ts @@ -10,8 +10,6 @@ export interface IExperimentalHTMLAudioElement extends HTMLAudioElement { setSinkId: (sinkId: string) => void; } -export type DeviceContextValue = EnabledDeviceContextValue | DisabledDeviceContextValue; - type EnabledDeviceContextValue = { enabled: true; availableAudioOutputDevices: Device[]; @@ -29,6 +27,8 @@ type DisabledDeviceContextValue = { enabled: false; }; +export type DeviceContextValue = EnabledDeviceContextValue | DisabledDeviceContextValue; + export const isDeviceContextEnabled = (context: DeviceContextValue): context is EnabledDeviceContextValue => (context as EnabledDeviceContextValue).enabled; diff --git a/packages/ui-contexts/src/index.ts b/packages/ui-contexts/src/index.ts index bb57ddd38bb9..b67dace60c74 100644 --- a/packages/ui-contexts/src/index.ts +++ b/packages/ui-contexts/src/index.ts @@ -13,7 +13,7 @@ export { ToastMessagesContext, ToastMessagesContextValue } from './ToastMessages export { TooltipContext, TooltipContextValue } from './TooltipContext'; export { TranslationContext, TranslationContextValue } from './TranslationContext'; export { UserContext, UserContextValue } from './UserContext'; -export { DeviceContext, Device, IExperimentalHTMLAudioElement } from './DeviceContext'; +export { DeviceContext, Device, IExperimentalHTMLAudioElement, DeviceContextValue } from './DeviceContext'; export { useAbsoluteUrl } from './hooks/useAbsoluteUrl'; export { useAllPermissions } from './hooks/useAllPermissions'; From fd4edd13543a019bd73118bf456d84781b20bc5e Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 1 Aug 2022 15:14:27 -0300 Subject: [PATCH 5/6] more exports --- packages/ui-contexts/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui-contexts/src/index.ts b/packages/ui-contexts/src/index.ts index b67dace60c74..0e456969d1c8 100644 --- a/packages/ui-contexts/src/index.ts +++ b/packages/ui-contexts/src/index.ts @@ -76,6 +76,7 @@ export { useUserSubscriptions } from './hooks/useUserSubscriptions'; export { useSelectedDevices } from './hooks/useSelectedDevices'; export { useDeviceConstraints } from './hooks/useDeviceConstraints'; export { useAvailableDevices } from './hooks/useAvailableDevices'; +export { useIsDeviceManagementEnabled } from './hooks/useIsDeviceManagementEnabled'; export { useSetOutputMediaDevice } from './hooks/useSetOutputMediaDevice'; export { useSetInputMediaDevice } from './hooks/useSetInputMediaDevice'; From 00e56415dcb198f985069f69453f5f40a4fa63bd Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 2 Aug 2022 16:48:35 -0300 Subject: [PATCH 6/6] check for hook value :| --- apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx b/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx index 931b0616fa65..74b5ae009bb6 100644 --- a/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx +++ b/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx @@ -21,6 +21,7 @@ type FieldValues = { const DeviceSettingsModal = (): ReactElement => { const setModal = useSetModal(); const onCancel = (): void => setModal(); + const isDeviceManagementEnabled = useIsDeviceManagementEnabled(); const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); const selectedAudioDevices = useSelectedDevices(); @@ -67,7 +68,7 @@ const DeviceSettingsModal = (): ReactElement => { )} - {!useIsDeviceManagementEnabled && ( + {!isDeviceManagementEnabled && ( {t('Device_Changes_Not_Available_Insecure_Context')}