Add audio/video device options in call interface
Detect audio and video devices and show the options in the expand menus of the calling buttons in the call interface.
The options are not clickable for now, this will be implemented in https://git.jami.net/savoirfairelinux/jami-web/-/issues/146
GitLab: #98
Change-Id: I51ebf9ec90820db37e0d36b4ac9f57f119119da3
diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index 79d5485..dbaef70 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -17,7 +17,7 @@
*/
import { styled } from '@mui/material/styles';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
import { Trans } from 'react-i18next';
import { WebRTCContext } from '../contexts/WebRTCProvider';
@@ -129,19 +129,29 @@
);
};
+const useMediaDeviceExpandMenuOptions = (kind: MediaDeviceKind) => {
+ const { mediaDevices } = useContext(WebRTCContext);
+
+ return useMemo(
+ () =>
+ mediaDevices[kind].map((device) => ({
+ key: device.deviceId,
+ description: device.label,
+ })),
+ [mediaDevices, kind]
+ );
+};
+
export const CallingVolumeButton = (props: ExpandableButtonProps) => {
+ const options = useMediaDeviceExpandMenuOptions('audiooutput');
+
return (
<CallButton
aria-label="volume options"
Icon={VolumeIcon}
expandMenuOptions={[
{
- options: [
- {
- key: '0',
- description: <Trans i18nKey="dummy_option_string" />,
- },
- ],
+ options,
},
]}
{...props}
@@ -151,10 +161,16 @@
export const CallingMicButton = (props: ExpandableButtonProps) => {
const { isAudioOn, setAudioStatus } = useContext(WebRTCContext);
+ const options = useMediaDeviceExpandMenuOptions('audioinput');
return (
<CallButton
aria-label="microphone options"
+ expandMenuOptions={[
+ {
+ options,
+ },
+ ]}
IconButtonComp={(props) => (
<ToggleIconButton
IconOn={MicroIcon}
@@ -171,9 +187,16 @@
export const CallingVideoCameraButton = (props: ExpandableButtonProps) => {
const { isVideoOn, setVideoStatus } = useContext(WebRTCContext);
+ const options = useMediaDeviceExpandMenuOptions('videoinput');
+
return (
<CallButton
aria-label="camera options"
+ expandMenuOptions={[
+ {
+ options,
+ },
+ ]}
IconButtonComp={(props) => (
<ToggleIconButton
IconOn={VideoCameraIcon}