@azure/communication-react 1.4.2-alpha-202211020017.0 → 1.4.2-alpha-202211030017.0

package/dist/communication-react.d.ts

@@ -365,7 +365,7 @@ export declare interface BrowserPermissionDeniedIOSProps extends BrowserPermissi
     /**
      * Localization strings for BrowserPermissionDeniedIOS component.
      */
-    strings: BrowserPermissionDeniedIOSStrings;
+    strings?: BrowserPermissionDeniedIOSStrings;
     /**
      * Link to image source.
      *
@@ -433,15 +433,15 @@ export declare interface BrowserPermissionDeniedProps {
     /**
      * 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 try again primary button.
      */
-    onTryAgainClick: () => void;
+    onTryAgainClick?: () => void;
     /**
      * Localization strings for BrowserPermissionDenied component.
      */
-    strings: BrowserPermissionDeniedStrings;
+    strings?: BrowserPermissionDeniedStrings;
     /**
      * Allows users to pass in an object contains custom CSS styles.
      * @Example
@@ -4427,6 +4427,10 @@ export declare interface _DevicePermissionDropdownProps {
      * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }
      */
     askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;
+    /**
+     * Optional callback when component is clicked
+     */
+    onClick?: () => void;
     /**
      * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }
      */

package/dist/dist-cjs/communication-react/index.js

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.2-alpha-202211020017.0';
+var telemetryVersion = '1.4.2-alpha-202211030017.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1510,6 +1510,13 @@ const customIconName = {
     callVideoRecoveredBySystem: 'ErrorBarCallVideoRecoveredBySystem',
     callMacOsCameraAccessDenied: 'ErrorBarCallMacOsCameraAccessDenied'
 };
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * @private
+ */
+const isValidString = (string) => {
+    return !!string && string.length > 0;
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7263,10 +7270,6 @@ const DomainPermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     return React__default['default'].createElement(DomainPermissionsContainer, Object.assign({}, props, { strings: props.strings ? props.strings : locale }));
 };
-/* @conditional-compile-remove(call-readiness) */
-const isValidString = (string) => {
-    return !!string && string.length > 0;
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -8478,7 +8481,7 @@ const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
  * @internal
  */
 const _DevicePermissionDropdown = (props) => {
-    const { icon, askDevicePermission, constrain, strings, options, styles } = props;
+    const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;
     const onRenderPlaceholder = () => {
         return (React__default['default'].createElement(react.Stack, { horizontal: true, verticalAlign: "center" },
             icon,
@@ -8487,10 +8490,11 @@ const _DevicePermissionDropdown = (props) => {
     const onRenderCaretDown = () => {
         return React__default['default'].createElement(react.Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent);
     };
-    return (React__default['default'].createElement(react.Dropdown, { placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
+    return (React__default['default'].createElement(react.Dropdown, { "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
             if (askDevicePermission) {
                 askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : { video: true, audio: true });
             }
+            onClick === null || onClick === void 0 ? void 0 : onClick();
         }, options: options !== null && options !== void 0 ? options : [], styles: styles }));
 };
 
@@ -17392,7 +17396,7 @@ const ConfigurationpageCameraDropdown = (props) => {
         actionButtonContent: 'Allow'
     };
     /* @conditional-compile-remove(call-readiness) */
-    const cameraBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }) }, props.dropdownProps)));
+    const cameraBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission }, props.dropdownProps)));
     /* @conditional-compile-remove(call-readiness) */
     if (props.callReadinessOptedIn) {
         return React__default['default'].createElement(React__default['default'].Fragment, null, props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown);
@@ -17413,7 +17417,7 @@ const ConfigurationpageMicDropdown = (props) => {
         actionButtonContent: 'Allow'
     };
     /* @conditional-compile-remove(call-readiness) */
-    const microphoneBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }) }, props.dropdownProps)));
+    const microphoneBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission }, props.dropdownProps)));
     /* @conditional-compile-remove(call-readiness) */
     if (props.callReadinessOptedIn) {
         return React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -17527,7 +17531,9 @@ const LocalDeviceSettings = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 dropdownProps: dropdownProps, 
                 /* @conditional-compile-remove(call-readiness) */
-                callReadinessOptedIn: (_b = props.callReadinessOptedIn) !== null && _b !== void 0 ? _b : false }))),
+                callReadinessOptedIn: (_b = props.callReadinessOptedIn) !== null && _b !== void 0 ? _b : false, 
+                /* @conditional-compile-remove(call-readiness) */
+                onClickEnableDevicePermission: props.onClickEnableDevicePermission }))),
         React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !micPermissionGranted }, soundLabel),
             React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
@@ -17535,7 +17541,9 @@ const LocalDeviceSettings = (props) => {
                     /* @conditional-compile-remove(call-readiness) */
                     dropdownProps: dropdownProps, 
                     /* @conditional-compile-remove(call-readiness) */
-                    callReadinessOptedIn: (_c = props.callReadinessOptedIn) !== null && _c !== void 0 ? _c : false }),
+                    callReadinessOptedIn: (_c = props.callReadinessOptedIn) !== null && _c !== void 0 ? _c : false, 
+                    /* @conditional-compile-remove(call-readiness) */
+                    onClickEnableDevicePermission: props.onClickEnableDevicePermission }),
                 React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
                         props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
                     }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })))));
@@ -17891,6 +17899,8 @@ const ConfigurationPage = (props) => {
         // do nothing here
         // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
     };
+    /* @conditional-compile-remove(call-readiness) */
+    const [isModalShowing, setIsModalShowing] = React.useState(false);
     return (React__default['default'].createElement(react.Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
             React__default['default'].createElement(ConfigurationpageErrorBar
@@ -17909,6 +17919,17 @@ const ConfigurationPage = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 callReadinessOptedIn: callReadinessOptedIn })),
         /* @conditional-compile-remove(call-readiness) */
+        //show this when clicking on enable camera button or enable mic button on desktop for the first time
+        //does not show if user has already grant mic or camera access
+        !mobileView && !cameraPermissionGranted && !microphonePermissionGranted && callReadinessOptedIn && (React__default['default'].createElement(react.Modal, { isOpen: isModalShowing, isBlocking: false, onDismiss: () => {
+                setIsModalShowing(false);
+            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
+            React__default['default'].createElement(DomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                    ? () => {
+                        onPermissionsTroubleshootingClick(permissionsState);
+                    }
+                    : undefined }))),
+        /* @conditional-compile-remove(call-readiness) */
         mobileView && isDrawerShowing && callReadinessOptedIn && (React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
             React__default['default'].createElement(DomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
                     ? () => {
@@ -17934,7 +17955,11 @@ const ConfigurationPage = (props) => {
                         callDescription),
                     React__default['default'].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGranted, microphonePermissionGranted: microphonePermissionGranted, 
                         /* @conditional-compile-remove(call-readiness) */
-                        callReadinessOptedIn: callReadinessOptedIn })))),
+                        callReadinessOptedIn: callReadinessOptedIn, 
+                        /* @conditional-compile-remove(call-readiness) */
+                        onClickEnableDevicePermission: () => {
+                            setIsModalShowing(true);
+                        } })))),
                 React__default['default'].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
                     React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton }))))));
 };