@azure/communication-react 1.4.2-alpha-202211080016.0 → 1.4.2-alpha-202211100016.0

package/dist/communication-react.d.ts

@@ -4336,7 +4336,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     SendBoxSend: JSX.Element;
     SendBoxSendHovered: JSX.Element;
     VideoTileMicOff: JSX.Element;
-    BackSpace: JSX.Element;
+    DialpadBackspace: JSX.Element;
     DomainPermissionsSparkle: JSX.Element;
     DomainPermissionCamera: JSX.Element;
     DomainPermissionMic: JSX.Element;
@@ -4431,7 +4431,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     HoldCallContextualMenuItem: JSX.Element;
     HoldCallButton: JSX.Element;
     ResumeCall: JSX.Element;
-    BackSpace: JSX.Element;
+    DialpadBackspace: JSX.Element;
     DomainPermissionsSparkle: JSX.Element;
     DomainPermissionCamera: JSX.Element;
     DomainPermissionMic: JSX.Element;

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-202211080016.0';
+var telemetryVersion = '1.4.2-alpha-202211100016.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -219,6 +219,16 @@ const sanitize = (version) => {
 };
 /**
  * Application ID to be included in telemetry data from the UI library.
+ * Template: acXYYY/<version>
+ * Where:
+ * - X describes a platform, [r: web, i: iOS, a: Android]
+ * - YYY describes what's running on this platform (optional, currently unused by this library):
+ *    Y[0] is high-level artifact,
+ *      [0: undefined, 1: AzureCommunicationLibrary, 2: ACS SampleApp]
+ *    Y[1] is specific implementation,
+ *      [0: undefined, 1: Call Composite, 2: Chat Composite, 3: CallWithChatComposite, 4: UI Components]
+ *    Y[2] is reserved for implementation details,
+ *      [0: undefined]
  *
  * @internal
  */
@@ -2137,7 +2147,7 @@ const DEFAULT_COMPONENT_ICONS = {
     SendBoxSendHovered: React__default['default'].createElement(reactIcons.Send20Filled, null),
     VideoTileMicOff: React__default['default'].createElement(reactIcons.MicOff16Filled, null),
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    BackSpace: React__default['default'].createElement(reactIcons.Backspace20Regular, null),
+    DialpadBackspace: React__default['default'].createElement(reactIcons.Backspace20Regular, null),
     /* @conditional-compile-remove(call-readiness) */
     DomainPermissionsSparkle: React__default['default'].createElement(DomainPermissionSparkle20Filled, null),
     /* @conditional-compile-remove(call-readiness) */
@@ -8337,7 +8347,7 @@ const DialpadContainer = (props) => {
                 setText(e.target.value);
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
-                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'BackSpace' } }))));
+                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
             } }),
         React__default['default'].createElement(react.FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
             return (React__default['default'].createElement(react.Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch" }, rows.map((button, columnIndex) => (React__default['default'].createElement(DialpadButton, { key: `button_${columnIndex}`, 
@@ -8500,7 +8510,6 @@ const messageBarStyle = (theme, errorType) => ({
     innerText: {
         paddingTop: errorType === react.MessageBarType.warning ? '0.15rem' : '0.1rem',
         lineHeight: 'none',
-        color: theme.palette.black,
         alignSelf: 'center',
         whiteSpace: 'normal'
     },
@@ -8516,16 +8525,6 @@ const messageBarStyle = (theme, errorType) => ({
         paddingTop: '0.8rem'
     }
 });
-/**
- * @private
- */
-const linkStyle = (theme) => ({
-    root: {
-        span: {
-            color: theme.palette.black
-        }
-    }
-});
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -8551,14 +8550,14 @@ const _TroubleshootingGuideErrorBar = (props) => {
         const devicePermissionErrorBar = (React__default['default'].createElement("div", null,
             strings[error.type],
             ' ',
-            onPermissionsTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkStyle(theme), onClick: () => {
+            onPermissionsTroubleshootingClick && (React__default['default'].createElement(react.Link, { onClick: () => {
                     onPermissionsTroubleshootingClick(permissionsState);
                 }, underline: true },
                 React__default['default'].createElement("span", null, troubleshootingGuideStrings.devicePermissionLinkText)))));
         const networkErrorBar = (React__default['default'].createElement("div", null,
             strings[error.type],
             ' ',
-            onNetworkingTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkStyle(theme), onClick: onNetworkingTroubleshootingClick, underline: true },
+            onNetworkingTroubleshootingClick && (React__default['default'].createElement(react.Link, { onClick: onNetworkingTroubleshootingClick, underline: true },
                 React__default['default'].createElement("span", null, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
         return (React__default['default'].createElement(react.MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React__default['default'].createElement(react.MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
                     setDismissedErrors(dismissError(dismissedErrors, error));
@@ -13614,8 +13613,8 @@ const coffeeIconStyle = {
  * @public
  */
 const COMPOSITE_ONLY_ICONS = {
-    ChevronLeft: React__default['default'].createElement(react.FontIcon, { iconName: "ChevronLeft" }),
-    Link: React__default['default'].createElement(react.FontIcon, { iconName: "Link" }),
+    ChevronLeft: undefined,
+    Link: undefined,
     LobbyScreenConnectingToCall: React__default['default'].createElement(CoffeeIcon, null),
     LobbyScreenWaitingToBeAdmitted: React__default['default'].createElement(CoffeeIcon, null),
     LocalDeviceSettingsCamera: React__default['default'].createElement(reactIcons.Video20Filled, null),
@@ -14583,11 +14582,20 @@ const BaseProvider = (props) => {
     if (alreadyWrapped) {
         return React__default['default'].createElement(React__default['default'].Fragment, null, props.children);
     }
+    /**
+     * Before registering fluent icons, we should check DEFAULT_COMPOSITE_ICONS and strip out the key value pairs where value is undefined
+     */
+    const iconsToRegister = {};
+    Object.entries(DEFAULT_COMPOSITE_ICONS).forEach(([key, value]) => {
+        if (value) {
+            iconsToRegister[key] = value;
+        }
+    });
     /**
      * We register the default icon mappings merged with custom icons provided through props
      * to ensure all icons render correctly.
      */
-    react.registerIcons({ icons: Object.assign(Object.assign({}, DEFAULT_COMPOSITE_ICONS), props.icons) });
+    react.registerIcons({ icons: Object.assign(Object.assign({}, iconsToRegister), props.icons) });
     // we use Customizer to override default LayerHost injected to <body />
     // which stop polluting global dom tree and increase compatibility with react-full-screen
     const CompositeElement = (React__default['default'].createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
@@ -15552,6 +15560,32 @@ const isDisabled$2 = (option) => {
     }
     return option.disabled;
 };
+/* @conditional-compile-remove(call-readiness) */
+/**
+ *
+ * This function uses permission API to determine if device permission state is granted, prompt or denied
+ * @returns whether device permission state is granted, prompt or denied
+ * If permission API is not supported on this browser, do nothing and log out error
+ * @private
+ */
+const getDevicePermissionState = (setVideoState, setAudioState) => {
+    navigator.permissions
+        .query({ name: 'camera' })
+        .then((result) => {
+        setVideoState(result.state);
+    })
+        .catch((error) => {
+        console.log(error);
+    });
+    navigator.permissions
+        .query({ name: 'microphone' })
+        .then((result) => {
+        setAudioState(result.state);
+    })
+        .catch((error) => {
+        console.log(error);
+    });
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -18216,6 +18250,13 @@ const ConfigurationPage = (props) => {
     const options = useAdaptedSelector(getSelector$1(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers();
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector$1(devicePermissionSelector);
+    /* @conditional-compile-remove(call-readiness) */
+    // use permission API to get video and audio permission state
+    const [videoState, setVideoState] = React.useState(undefined);
+    /* @conditional-compile-remove(call-readiness) */
+    const [audioState, setAudioState] = React.useState(undefined);
+    /* @conditional-compile-remove(call-readiness) */
+    getDevicePermissionState(setVideoState, setAudioState);
     let errorBarProps = usePropsFor$1(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
@@ -18252,8 +18293,9 @@ const ConfigurationPage = (props) => {
     mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
     /* @conditional-compile-remove(call-readiness) */
     const permissionsState = {
-        camera: cameraPermissionGranted ? 'granted' : 'denied',
-        microphone: microphonePermissionGranted ? 'granted' : 'denied'
+        // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported
+        camera: videoState !== null && videoState !== void 0 ? videoState : (cameraPermissionGranted ? 'granted' : 'denied'),
+        microphone: audioState !== null && audioState !== void 0 ? audioState : (microphonePermissionGranted ? 'granted' : 'denied')
     };
     /* @conditional-compile-remove(call-readiness) */
     const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');