@azure/communication-react 1.3.3-alpha-202210250024.0 → 1.3.3-alpha-202210260016.0

package/dist/communication-react.d.ts

@@ -7072,6 +7072,7 @@ export declare interface StatefulCallClient extends CallClient {
      * @param stream - The LocalVideoStreamState or RemoteVideoStreamState to dispose.
      */
     disposeView(callId: string | undefined, participantId: CommunicationIdentifier | undefined, stream: LocalVideoStreamState | RemoteVideoStreamState): void;
+    /** @conditional-compile-remove(one-to-n-calling) */
     /**
      * The CallAgent is used to handle calls.
      * To create the CallAgent, pass a CommunicationTokenCredential object provided from SDK.

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.3.3-alpha-202210250024.0';
+var telemetryVersion = '1.3.3-alpha-202210260016.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -525,14 +525,17 @@ const screenShareButtonSelector = reselect__namespace.createSelector([getIsScree
  */
 const devicesButtonSelector = reselect__namespace.createSelector([getDeviceManager$1], (deviceManager) => {
     return {
-        microphones: deviceManager.microphones,
-        speakers: deviceManager.speakers,
-        cameras: deviceManager.cameras,
+        microphones: removeBlankNameDevices(deviceManager.microphones),
+        speakers: removeBlankNameDevices(deviceManager.speakers),
+        cameras: removeBlankNameDevices(deviceManager.cameras),
         selectedMicrophone: deviceManager.selectedMicrophone,
         selectedSpeaker: deviceManager.selectedSpeaker,
         selectedCamera: deviceManager.selectedCamera
     };
 });
+function removeBlankNameDevices(devices) {
+    return devices.filter((device) => device.name !== '');
+}
 /* @conditional-compile-remove(PSTN-calls) */
 /**
  * Selector for the {@link HoldButton} component.
@@ -8345,6 +8348,102 @@ const UnsupportedBrowser = (props) => {
     return React__default['default'].createElement(UnsupportedBrowserContainer, Object.assign({}, props, { strings: strings }));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const dismissButtonStyle = (theme) => ({
+    root: {
+        padding: '0.375rem 1.25rem',
+        width: '3.75rem',
+        height: '2rem',
+        background: theme.palette.white,
+        border: `1px solid ${theme.palette.neutralQuaternaryAlt}`,
+        borderRadius: '0.063rem',
+        color: theme.palette.black
+    }
+});
+/**
+ * @private
+ */
+const messageBarStyle = (theme, errorType) => ({
+    innerText: {
+        paddingTop: errorType === react.MessageBarType.warning ? '0.15rem' : '0.1rem',
+        lineHeight: 'none',
+        color: theme.palette.black,
+        alignSelf: 'center',
+        whiteSpace: 'normal'
+    },
+    icon: {
+        marginTop: '0.375rem',
+        marginBottom: '0.375rem'
+    },
+    content: {
+        lineHeight: 'inherit'
+    },
+    dismissal: {
+        height: 0,
+        paddingTop: '0.8rem'
+    }
+});
+/**
+ * @private
+ */
+const linkStyle = (theme) => ({
+    root: {
+        span: {
+            color: theme.palette.black
+        }
+    }
+});
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide
+ */
+const _TroubleshootingGuideErrorBar = (props) => {
+    var _a;
+    const theme = react.useTheme();
+    // error bar strings
+    const localeStrings = useLocale$1().strings.errorBar;
+    const strings = (_a = props.strings) !== null && _a !== void 0 ? _a : localeStrings;
+    const [dismissedErrors, setDismissedErrors] = React.useState([]);
+    const { onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick, permissionsState = {
+        camera: 'denied',
+        microphone: 'denied'
+    }, troubleshootingGuideStrings } = props;
+    // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.
+    // Without this behaviour, this `useEffect` block would cause a render loop.
+    React.useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
+    const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => {
+        const devicePermissionErrorBar = (React__default['default'].createElement("div", null,
+            strings[error.type],
+            ' ',
+            onPermissionsTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkStyle(theme), 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 },
+                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));
+                }, ariaLabel: strings.dismissButtonAriaLabel }), isMultiline: false }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
+    })));
+};
+const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
+    if (errorType === 'callNetworkQualityLow') {
+        return networkErrorBar;
+    }
+    else {
+        return devicePermissionErrorBar;
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * A dropdown to trigger device permission prompt
@@ -17620,13 +17719,43 @@ const startCallButtonStyleMobile = react.mergeStyles({
     maxWidth: 'unset'
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const ConfigurationpageErrorBar = (props) => {
+    const { errorBarProps, 
+    /* @conditional-compile-remove(call-readiness) */
+    showTroubleShootingErrorBar = false, 
+    /* @conditional-compile-remove(call-readiness) */
+    onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    onNetworkingTroubleShootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    permissionsState } = props;
+    /* @conditional-compile-remove(call-readiness) */
+    const permissionTroubleshootingGuideStrings = {
+        devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
+        networkTroubleshootingLinkText: 'Troubleshooting Network Connection',
+        dismissButtonText: 'OK'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    if (showTroubleShootingErrorBar) {
+        return (React__default['default'].createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps)));
+    }
+    return React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
 const ConfigurationPage = (props) => {
     var _a, _b;
-    const { startCallHandler, mobileView, /* @conditional-compile-remove(call-readiness) */ devicePermissions } = props;
+    const { startCallHandler, mobileView, 
+    /* @conditional-compile-remove(call-readiness) */ devicePermissions, 
+    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
     const options = useAdaptedSelector(getSelector$1(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers();
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector$1(devicePermissionSelector);
@@ -17664,9 +17793,28 @@ const ConfigurationPage = (props) => {
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
     mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
+    /* @conditional-compile-remove(call-readiness) */
+    const permissionsState = {
+        camera: cameraPermissionGranted ? 'granted' : 'denied',
+        microphone: microphonePermissionGranted ? 'granted' : 'denied'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
     return (React__default['default'].createElement(react.Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
-            React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps))),
+            React__default['default'].createElement(ConfigurationpageErrorBar
+            /* @conditional-compile-remove(call-readiness) */
+            // show trouble shooting error bar when encountering network error/ permission error
+            , { 
+                /* @conditional-compile-remove(call-readiness) */
+                // show trouble shooting error bar when encountering network error/ permission error
+                showTroubleShootingErrorBar: !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0, 
+                /* @conditional-compile-remove(call-readiness) */
+                permissionsState: permissionsState, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
         React__default['default'].createElement(react.Stack, { grow: true, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
             mobileWithPreview && (React__default['default'].createElement(react.Stack.Item, null,
                 title,
@@ -18077,7 +18225,7 @@ var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 const MainScreen = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
     const page = useSelector$1(getPage);
     const adapter = useAdapter();
@@ -18098,7 +18246,11 @@ const MainScreen = (props) => {
                     adapter.joinCall();
                 }, 
                 /* @conditional-compile-remove(call-readiness) */
-                devicePermissions: (_a = props.options) === null || _a === void 0 ? void 0 : _a.devicePermissions }));
+                devicePermissions: (_a = props.options) === null || _a === void 0 ? void 0 : _a.devicePermissions, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick }));
             break;
         case 'accessDeniedTeamsMeeting':
             pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -18130,7 +18282,7 @@ const MainScreen = (props) => {
         case unsupportedEnvironmentPageTrampoline():
             pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onEnvironmentInfoTroubleshootingClick })));
+            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_d = props.options) === null || _d === void 0 ? void 0 : _d.onEnvironmentInfoTroubleshootingClick })));
     }
     if (!pageElement) {
         throw new Error('Invalid call composite page');