Add allow camera and microphone access drawer to call composite mobile config screen

change/@internal-react-components-4e04756b-f2a8-428f-abac-91ecbd350452.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "change device permission component string prop to optional",
+  "packageName": "@internal/react-components",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-composites-f36db029-fbe5-41e2-9c1a-052110138500.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add device permission drawer to calling mobile config screen",
+  "packageName": "@internal/react-composites",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -1927,12 +1927,13 @@ export const DomainPermissions: (props: DomainPermissionsProps) => JSX.Element;
 export interface DomainPermissionsProps {
     appName: string;
     onAllowAccessClick?: () => void;
-    onTroubleshootingClick: () => void;
-    strings: DomainPermissionsStrings;
+    onTroubleshootingClick?: () => void;
+    strings?: DomainPermissionsStrings;
 }
 
 // @beta
 export interface DomainPermissionsStrings {
+    ariaLabel: string;
     linkText: string;
     primaryButtonText: string;
     primaryText: string;

packages/react-components/review/beta/react-components.api.md

@@ -586,12 +586,13 @@ export const DomainPermissions: (props: DomainPermissionsProps) => JSX.Element;
 export interface DomainPermissionsProps {
     appName: string;
     onAllowAccessClick?: () => void;
-    onTroubleshootingClick: () => void;
-    strings: DomainPermissionsStrings;
+    onTroubleshootingClick?: () => void;
+    strings?: DomainPermissionsStrings;
 }
 
 // @beta
 export interface DomainPermissionsStrings {
+    ariaLabel: string;
     linkText: string;
     primaryButtonText: string;
     primaryText: string;

packages/react-components/src/components/DomainPermissions.tsx

@@ -32,15 +32,15 @@ export interface DomainPermissionsProps {
   /**
    * Action to be taken by the more help link. Possible to send to external page or show other modal.
    */
-  onTroubleshootingClick: () => void;
+  onTroubleshootingClick?: () => void;
   /**
    * Action to be taken by the Allow Access button.
    */
   onAllowAccessClick?: () => void;
   /**
    * Localization strings for DomainPermissions component.
    */
-  strings: DomainPermissionsStrings;
+  strings?: DomainPermissionsStrings;
 }
 
 /**
@@ -64,14 +64,18 @@ export interface DomainPermissionsStrings {
    * Primary button text string.
    */
   primaryButtonText: string;
+  /**
+   * Aira label describing the content of the container
+   */
+  ariaLabel: string;
 }
 
 /* @conditional-compile-remove(call-readiness) */
 const DomainPermissionsContainer = (props: DomainPermissionsProps): JSX.Element => {
   const { appName, onTroubleshootingClick, onAllowAccessClick, strings } = props;
   const theme = useTheme();
   return (
-    <Stack style={{ padding: '2rem', maxWidth: '25.375rem' }}>
+    <Stack style={{ padding: '2rem', maxWidth: '25.375rem' }} aria-label={strings?.ariaLabel}>
       <Stack horizontal style={{ paddingBottom: '1rem' }} horizontalAlign={'space-between'}>
         <Stack styles={iconContainerStyles} horizontalAlign={'center'}>
           <Icon styles={iconPrimaryStyles} iconName={'DomainPermissionCamera'}></Icon>
@@ -84,14 +88,21 @@ const DomainPermissionsContainer = (props: DomainPermissionsProps): JSX.Element
         </Stack>
       </Stack>
       <Stack styles={textContainerStyles}>
-        <Text styles={primaryTextStyles}>{_formatString(strings.primaryText, { appName: appName })}</Text>
-        <Text styles={secondaryTextStyles}>{strings.secondaryText}</Text>
-        {onAllowAccessClick && (
-          <PrimaryButton styles={primaryButtonStyles} text={strings.primaryButtonText} onClick={onAllowAccessClick} />
+        {strings && isValidString(strings?.primaryText) && (
+          <Text styles={primaryTextStyles}>{_formatString(strings.primaryText, { appName: appName })}</Text>
+        )}
+        {strings && isValidString(strings?.secondaryText) && (
+          <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>
+        )}
+
+        {onAllowAccessClick && isValidString(strings?.primaryButtonText) && (
+          <PrimaryButton styles={primaryButtonStyles} text={strings?.primaryButtonText} onClick={onAllowAccessClick} />
+        )}
+        {onTroubleshootingClick && isValidString(strings?.linkText) && (
+          <Link styles={linkTextStyles} onClick={onTroubleshootingClick}>
+            {strings?.linkText}
+          </Link>
         )}
-        <Link styles={linkTextStyles} onClick={onTroubleshootingClick}>
-          {strings.linkText}
-        </Link>
       </Stack>
     </Stack>
   );
@@ -110,3 +121,8 @@ export const DomainPermissions = (props: DomainPermissionsProps): JSX.Element =>
   return <DomainPermissionsContainer {...props} strings={props.strings ? props.strings : locale} />;
   return <></>;
 };
+
+/* @conditional-compile-remove(call-readiness) */
+const isValidString = (string: string | undefined): boolean => {
+  return !!string && string.length > 0;
+};

packages/react-components/src/localization/locales/en-US/strings.json

@@ -188,7 +188,8 @@
     "primaryText": "Allow {appName} to use your camera and microphone",
     "secondaryText": "This is so participants can see and hear you.",
     "linkText": "Need help? Get troubleshooting help",
-    "primaryButtonText": "Allow Access"
+    "primaryButtonText": "Allow Access",
+    "ariaLabel": "Allow camera and microphone access"
   },
   "UnsupportedBrowser": {
     "primaryText": "Browser not supported",

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

@@ -228,6 +228,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           onPermissionsTroubleshootingClick={props.options?.onPermissionsTroubleshootingClick}
           /* @conditional-compile-remove(call-readiness) */
           onNetworkingTroubleShootingClick={props.options?.onNetworkingTroubleShootingClick}
+          /* @conditional-compile-remove(call-readiness) */
+          callReadinessOptedIn={props.options?.callReadinessOptedIn}
         />
       );
       break;

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

@@ -147,7 +147,7 @@ export const CallPane = (props: {
         </CallAdapterProvider>
       )}
       {drawerMenuItems.length > 0 && (
-        <Stack styles={drawerContainerStyles}>
+        <Stack styles={drawerContainerStyles()}>
           <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />
         </Stack>
       )}

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

@@ -22,6 +22,7 @@ export interface ConfigurationpageCameraDropdownProps {
   cameraGrantedDropdown: JSX.Element;
   cameraPermissionGranted: boolean;
   dropdownProps?: Record<string, never> & Partial<CallingHandlers>;
+  callReadinessOptedIn?: boolean;
 }
 
 /**
@@ -50,7 +51,9 @@ export const ConfigurationpageCameraDropdown = (props: ConfigurationpageCameraDr
   );
 
   /* @conditional-compile-remove(call-readiness) */
-  return <>{props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown}</>;
+  if (props.callReadinessOptedIn) {
+    return <>{props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown}</>;
+  }
 
   return props.cameraGrantedDropdown;
 };

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

@@ -31,6 +31,7 @@ export interface ConfigurationpageErrorBarProps {
     camera: PermissionState;
     microphone: PermissionState;
   };
+  callReadinessOptedIn?: boolean;
 }
 
 /**
@@ -46,7 +47,9 @@ export const ConfigurationpageErrorBar = (props: ConfigurationpageErrorBarProps)
     /* @conditional-compile-remove(call-readiness) */
     onNetworkingTroubleShootingClick,
     /* @conditional-compile-remove(call-readiness) */
-    permissionsState
+    permissionsState,
+    /* @conditional-compile-remove(call-readiness) */
+    callReadinessOptedIn = false
   } = props;
 
   /* @conditional-compile-remove(call-readiness) */
@@ -57,7 +60,7 @@ export const ConfigurationpageErrorBar = (props: ConfigurationpageErrorBarProps)
   };
 
   /* @conditional-compile-remove(call-readiness) */
-  if (showTroubleShootingErrorBar) {
+  if (showTroubleShootingErrorBar && callReadinessOptedIn) {
     return (
       <_TroubleshootingGuideErrorBar
         troubleshootingGuideStrings={permissionTroubleshootingGuideStrings}

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

@@ -22,6 +22,7 @@ export interface ConfigurationpageMicDropdownProps {
   micGrantedDropdown: JSX.Element;
   micPermissionGranted: boolean;
   dropdownProps?: Record<string, never> & Partial<CallingHandlers>;
+  callReadinessOptedIn?: boolean;
 }
 
 /**
@@ -48,6 +49,8 @@ export const ConfigurationpageMicDropdown = (props: ConfigurationpageMicDropdown
   );
 
   /* @conditional-compile-remove(call-readiness) */
-  return <> {props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown}</>;
+  if (props.callReadinessOptedIn) {
+    return <> {props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown}</>;
+  }
   return props.micGrantedDropdown;
 };

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

@@ -86,6 +86,7 @@ export interface LocalDeviceSettingsType {
   onSelectCamera: (device: VideoDeviceInfo, options?: VideoStreamOptions) => Promise<void>;
   onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;
   onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;
+  callReadinessOptedIn?: boolean;
 }
 
 /**
@@ -207,6 +208,8 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
             cameraPermissionGranted={cameraPermissionGranted ?? false}
             /* @conditional-compile-remove(call-readiness) */
             dropdownProps={dropdownProps}
+            /* @conditional-compile-remove(call-readiness) */
+            callReadinessOptedIn={props.callReadinessOptedIn ?? false}
           />
         </Stack>
       )}
@@ -224,6 +227,8 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
             micPermissionGranted={micPermissionGranted ?? false}
             /* @conditional-compile-remove(call-readiness) */
             dropdownProps={dropdownProps}
+            /* @conditional-compile-remove(call-readiness) */
+            callReadinessOptedIn={props.callReadinessOptedIn ?? false}
           />
           <Dropdown
             aria-labelledby={'call-composite-local-sound-settings-label'}

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

@@ -2,13 +2,17 @@
 // Licensed under the MIT license.
 
 import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useState } from 'react';
 import { useAdaptedSelector } from '../hooks/useAdaptedSelector';
 import { useHandlers } from '../hooks/useHandlers';
 import { LocalDeviceSettings } from '../components/LocalDeviceSettings';
 import { StartCallButton } from '../components/StartCallButton';
 import { devicePermissionSelector } from '../selectors/devicePermissionSelector';
 import { useSelector } from '../hooks/useSelector';
 import { DevicesButton, ErrorBar } from '@internal/react-components';
+/* @conditional-compile-remove(call-readiness) */
+import { DomainPermissions, _DrawerSurface, _DrawerSurfaceStyles } from '@internal/react-components';
 /* @conditional-compile-remove(rooms) */
 import { _usePermissions, _Permissions } from '@internal/react-components';
 import { getCallingSelector } from '@internal/calling-component-bindings';
@@ -36,6 +40,8 @@ import { useAdapter } from '../adapter/CallAdapterProvider';
 /* @conditional-compile-remove(call-readiness) */
 import { DevicePermissionRestrictions } from '../CallComposite';
 import { ConfigurationpageErrorBar } from '../components/ConfigurationpageErrorBar';
+/* @conditional-compile-remove(call-readiness) */
+import { drawerContainerStyles } from '../styles/CallComposite.styles';
 
 /**
  * @private
@@ -52,18 +58,23 @@ export interface ConfigurationPageProps {
   }) => void;
   /* @conditional-compile-remove(call-readiness) */
   onNetworkingTroubleShootingClick?: () => void;
+  /* @conditional-compile-remove(call-readiness) */
+  callReadinessOptedIn?: boolean;
 }
 
 /**
  * @private
  */
 export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {
+  const DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above all components
+
   const {
     startCallHandler,
     mobileView,
     /* @conditional-compile-remove(call-readiness) */ devicePermissions,
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,
-    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick
+    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick,
+    /* @conditional-compile-remove(call-readiness) */ callReadinessOptedIn = false
   } = props;
 
   const options = useAdaptedSelector(getCallingSelector(DevicesButton));
@@ -133,6 +144,14 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
   /* @conditional-compile-remove(call-readiness) */
   const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
 
+  /* @conditional-compile-remove(call-readiness) */
+  const [isDrawerShowing, setIsDrawerShowing] = useState(true);
+  /* @conditional-compile-remove(call-readiness) */
+  const onLightDismissTriggered = (): void => {
+    // do nothing here
+    // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
+  };
+
   return (
     <Stack className={mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop}>
       <Stack styles={bannerNotificationStyles}>
@@ -149,8 +168,35 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
           /* @conditional-compile-remove(call-readiness) */
           onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}
           errorBarProps={errorBarProps}
+          /* @conditional-compile-remove(call-readiness) */
+          callReadinessOptedIn={callReadinessOptedIn}
         />
       </Stack>
+
+      {
+        /* @conditional-compile-remove(call-readiness) */
+        mobileView && isDrawerShowing && callReadinessOptedIn && (
+          <_DrawerSurface onLightDismiss={onLightDismissTriggered} styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}>
+            <DomainPermissions
+              appName={'app'}
+              onTroubleshootingClick={
+                onPermissionsTroubleshootingClick
+                  ? () => {
+                      onPermissionsTroubleshootingClick(permissionsState);
+                    }
+                  : undefined
+              }
+              onAllowAccessClick={async () => {
+                await adapter.askDevicePermission({ video: true, audio: true });
+                adapter.queryCameras();
+                adapter.queryMicrophones();
+                adapter.querySpeakers();
+                setIsDrawerShowing(false);
+              }}
+            />
+          </_DrawerSurface>
+        )
+      }
       <Stack
         grow
         horizontal={!mobileWithPreview}
@@ -180,6 +226,8 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
                 {...localDeviceSettingsHandlers}
                 cameraPermissionGranted={cameraPermissionGranted}
                 microphonePermissionGranted={microphonePermissionGranted}
+                /* @conditional-compile-remove(call-readiness) */
+                callReadinessOptedIn={callReadinessOptedIn}
               />
             </>
           )}

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

@@ -3,6 +3,8 @@
 
 import { IStackStyles, IStyle, mergeStyles } from '@fluentui/react';
 
+const DEFAULT_Z_INDEX = 1;
+
 const mainScreenContainerStyle: IStyle = {
   height: '100%',
   width: '100%'
@@ -26,8 +28,12 @@ export const mainScreenContainerStyleMobile = mergeStyles({
   minHeight: '13rem' // max height of min-height of composite pages (Configuration page & Call page)
 });
 
-/** @private */
-export const drawerContainerStyles: IStackStyles = {
+/**
+ * @private
+ * Drawer styles to be used to house the _DrawerComponent on top of other content on the screen.
+ * @param zIndex: this defaults to DEFAULT_Z_INDEX if unset
+ */
+export const drawerContainerStyles = (zIndex: number = DEFAULT_Z_INDEX): IStackStyles => ({
   root: {
     position: 'absolute',
     top: 0,
@@ -36,6 +42,6 @@ export const drawerContainerStyles: IStackStyles = {
     height: '100%',
     // Any zIndex > 0 will work because this is the only absolutely
     // positioned element in the container.
-    zIndex: 1
+    zIndex: zIndex
   }
-};
+});