[bugfix] Hide speaker dropdown for safari browser (#3964)

* Remove speaker dropdown for Safari browsers as speaker enumeration is not available for Safari browsers

Author: edwardlee-msft

change-beta/@azure-communication-react-1bf7172e-6fd9-4a95-ab5e-ef8282dbc682.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Remove speaker dropdown for Safari browsers as speaker enumeration is not available for Safari browsers",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-1bf7172e-6fd9-4a95-ab5e-ef8282dbc682.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Remove speaker dropdown for Safari browsers as speaker enumeration is not available for Safari browsers",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -117,6 +117,7 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
 
   const cameraPermissionGranted = props.cameraPermissionGranted;
   const micPermissionGranted = props.microphonePermissionGranted;
+
   let roleCanUseCamera = true;
   let roleCanUseMic = true;
 
@@ -145,6 +146,9 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
   const hasCameras = props.cameras.length > 0;
   const hasMicrophones = props.microphones.length > 0;
   const hasSpeakers = props.speakers.length > 0;
+  /* @conditional-compile-remove(unsupported-browser) */
+  const isSafariWithNoSpeakers =
+    adapter.getState().environmentInfo?.environment.browser.toLowerCase() === 'safari' && !hasSpeakers;
 
   const cameraGrantedDropdown = (
     <Dropdown
@@ -209,6 +213,33 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
     </>
   );
 
+  const speakerDropdown = (
+    <Dropdown
+      aria-labelledby={'call-composite-local-sound-settings-label'}
+      placeholder={hasSpeakers ? defaultPlaceHolder : noSpeakersLabel}
+      styles={dropDownStyles(theme)}
+      disabled={props.speakers.length === 0}
+      options={getDropDownList(props.speakers)}
+      defaultSelectedKey={props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers)}
+      onChange={(
+        event: React.FormEvent<HTMLDivElement>,
+        option?: IDropdownOption | undefined,
+        index?: number | undefined
+      ) => {
+        props.onSelectSpeaker(props.speakers[index ?? 0]);
+      }}
+      onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Speaker', props)}
+    />
+  );
+
+  const SafariBrowserSpeakerDropdownTrampoline = (): JSX.Element => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    if (isSafariWithNoSpeakers) {
+      return <></>;
+    }
+    return speakerDropdown;
+  };
+
   return (
     <Stack data-ui-id="call-composite-device-settings" tokens={mainStackTokens}>
       {roleCanUseCamera && (
@@ -262,22 +293,7 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
             /* @conditional-compile-remove(call-readiness) */
             onClickEnableDevicePermission={props.onClickEnableDevicePermission}
           />
-          <Dropdown
-            aria-labelledby={'call-composite-local-sound-settings-label'}
-            placeholder={hasSpeakers ? defaultPlaceHolder : noSpeakersLabel}
-            styles={dropDownStyles(theme)}
-            disabled={props.speakers.length === 0}
-            options={getDropDownList(props.speakers)}
-            defaultSelectedKey={props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers)}
-            onChange={(
-              event: React.FormEvent<HTMLDivElement>,
-              option?: IDropdownOption | undefined,
-              index?: number | undefined
-            ) => {
-              props.onSelectSpeaker(props.speakers[index ?? 0]);
-            }}
-            onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Speaker', props)}
-          />
+          <SafariBrowserSpeakerDropdownTrampoline />
         </Stack>
       </Stack>
     </Stack>

packages/react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx

@@ -60,6 +60,7 @@ import { localVideoSelector } from '../../CallComposite/selectors/localVideoStre
 /* @conditional-compile-remove(capabilities) */
 import { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';
 import { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';
+import { EnvironmentInfo } from '@azure/communication-calling';
 
 /**
  * @private
@@ -362,7 +363,18 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
             )}
             <Stack styles={mobileView ? undefined : configurationSectionStyle}>
               {!mobileWithPreview && (
-                <Stack className={mobileView ? undefined : selectionContainerStyle(theme)}>
+                <Stack
+                  className={
+                    mobileView
+                      ? undefined
+                      : selectionContainerStyle(
+                          theme,
+                          isSafariBrowserEnvironmentTrampoline(
+                            /* @conditional-compile-remove(unsupported-browser) */ environmentInfo
+                          )
+                        )
+                  }
+                >
                   <LocalDeviceSettings
                     {...options}
                     {...localDeviceSettingsHandlers}
@@ -456,3 +468,10 @@ const Logo = (props: { logo?: { url: string; alt?: string; shape?: 'unset' | 'ci
   }
   return <Image styles={logoStyles(props.logo.shape)} src={props.logo.url} alt={props.logo.alt} />;
 };
+
+const isSafariBrowserEnvironmentTrampoline = (environmentInfo?: EnvironmentInfo): boolean | undefined => {
+  /* @conditional-compile-remove(unsupported-browser) */
+  return environmentInfo && environmentInfo?.environment.browser.toLowerCase() === 'safari';
+
+  return false;
+};

packages/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts

@@ -91,10 +91,10 @@ export const configurationSectionStyle: IStackStyles = {
 /**
  * @private
  */
-export const selectionContainerStyle = (theme: ITheme): string =>
+export const selectionContainerStyle = (theme: ITheme, noSpeakerDropdownShown?: boolean): string =>
   mergeStyles({
     width: '100%',
-    height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
+    height: noSpeakerDropdownShown ? 'auto' : `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
     padding: '1rem',
     borderRadius: theme.effects.roundedCorner6,
     border: `0.0625rem solid ${theme.palette.neutralLight}`,