[bugfix] Mobile configuration page enable devices button when camera or microphone is available (#3944)

* Mobile configuration page enable device button when either microphone or camera is available

Author: edwardlee-msft

change-beta/@azure-communication-react-edeccae0-dcdf-4a87-b2ca-465f6367ffc6.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "LocalPreview",
+  "comment": "Mobile configuration page enable device button when either microphone or camera is available",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-edeccae0-dcdf-4a87-b2ca-465f6367ffc6.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "LocalPreview",
+  "comment": "Mobile configuration page enable device button when either microphone or camera is available",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/components/LocalPreview.tsx

@@ -54,6 +54,7 @@ export const LocalPreview = (props: LocalPreviewProps): JSX.Element => {
     isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
   }, [adapter, isLocalMicrophoneEnabled]);
 
+  const hasNoSpeakers = !devicesButtonProps.speakers.length;
   const hasNoDevices =
     devicesButtonProps.cameras.length === 0 &&
     devicesButtonProps.microphones.length === 0 &&
@@ -149,7 +150,7 @@ export const LocalPreview = (props: LocalPreviewProps): JSX.Element => {
               data-ui-id="call-composite-local-device-settings-options-button"
               {...devicesButtonProps}
               // disable button whilst all other buttons are disabled
-              disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices}
+              disabled={(!microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers) || hasNoDevices}
               showLabel={true}
               // disable tooltip as it obscures list of devices on mobile
               strings={props.mobileView ? { tooltipContent: '' } : {}}