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

package/dist/communication-react.d.ts

@@ -6028,6 +6028,8 @@ export declare interface MessageThreadStyles extends BaseCustomStyles {
     chatItemMessageContainer?: ComponentSlotStyle;
     /** Styles for my chat message container. */
     myChatMessageContainer?: ComponentSlotStyle;
+    /** Styles for my chat message container in case of failure. */
+    failedMyChatMessageContainer?: ComponentSlotStyle;
     /** Styles for chat message container. */
     chatMessageContainer?: ComponentSlotStyle;
     /** Styles for system message container. */
@@ -7072,6 +7074,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-202210270017.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.
@@ -3923,7 +3926,7 @@ const DefaultSystemMessage = (props) => {
     return React__default['default'].createElement(React__default['default'].Fragment, null);
 };
 const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
     const messageProps = {
         message,
         strings,
@@ -3934,10 +3937,10 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
     };
     switch (message.messageType) {
         case 'chat': {
-            const myChatMessageStyle = (styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) || message.status === 'failed'
-                ? FailedMyChatMessageContainer
-                : defaultMyChatMessageContainer;
-            const chatMessageStyle = (styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) || defaultChatMessageContainer;
+            const myChatMessageStyle = message.status === 'failed'
+                ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer
+                : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
+            const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer;
             messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
             const chatMessageComponent = onRenderMessage === undefined
                 ? defaultChatMessageRenderer(messageProps)
@@ -3954,14 +3957,14 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
             return {
                 gutter: {
                     styles: chatGutterStyles,
-                    content: message.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_a = message.senderId) !== null && _a !== void 0 ? _a : '', personaOptions)) : (React__default['default'].createElement(react.Persona, Object.assign({}, personaOptions)))
+                    content: message.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_e = message.senderId) !== null && _e !== void 0 ? _e : '', personaOptions)) : (React__default['default'].createElement(react.Persona, Object.assign({}, personaOptions)))
                 },
                 contentPosition: message.mine ? 'end' : 'start',
                 message: {
                     styles: chatItemMessageStyle,
                     content: (React__default['default'].createElement(reactNorthstar.Flex, { hAlign: message.mine ? 'end' : undefined, vAlign: "end" },
                         chatMessageComponent,
-                        React__default['default'].createElement("div", { className: react.mergeStyles(messageStatusContainerStyle((_b = message.mine) !== null && _b !== void 0 ? _b : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_c = message.mine) !== null && _c !== void 0 ? _c : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(message, statusToRender, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0))) : (React__default['default'].createElement("div", { className: react.mergeStyles(noMessageStatusStyle) })))))
+                        React__default['default'].createElement("div", { className: react.mergeStyles(messageStatusContainerStyle((_f = message.mine) !== null && _f !== void 0 ? _f : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_g = message.mine) !== null && _g !== void 0 ? _g : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(message, statusToRender, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0))) : (React__default['default'].createElement("div", { className: react.mergeStyles(noMessageStatusStyle) })))))
                 },
                 attached: message.attached,
                 key: _messageKey
@@ -4990,14 +4993,15 @@ const displayNameStyle = {
 /**
  * @private
  */
-const iconContainerStyle = (theme) => ({
+const iconContainerStyle = {
     margin: 'auto',
     alignItems: 'center',
     '& svg': {
         display: 'block',
-        color: theme.palette.neutralPrimary
+        // Similar to text color, icon color will be inherited from parent container
+        color: 'inherit'
     }
-});
+};
 /**
  * @private
  */
@@ -5094,7 +5098,7 @@ const VideoTile = (props) => {
                 React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
                     canShowLabel && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' } }, displayName)),
                     participantStateString && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
-                    showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle(theme)) },
+                    showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" })))))),
             children && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
 };
@@ -8345,6 +8349,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
@@ -15489,7 +15589,6 @@ const themedDialpadStyle$1 = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem ',
-            direction: 'rtl',
             textAlign: 'center',
             ':active': {
                 padding: '0 0.5rem'
@@ -15554,7 +15653,12 @@ const SendDtmfDialpad = (props) => {
     };
     const [textFieldValue, setTextFieldValue] = React.useState();
     const onChange = (input) => {
-        setTextFieldValue(input);
+        if (input.length > 25) {
+            setTextFieldValue(input.slice(1));
+        }
+        else {
+            setTextFieldValue(input);
+        }
     };
     const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle$1(theme), [theme]);
     const dialpadStyle = React.useMemo(() => themedDialpadStyle$1(isMobile, theme), [theme, isMobile]);
@@ -16467,7 +16571,7 @@ const PeoplePaneContent = (props) => {
     const setDrawerMenuItemsForParticipant = React.useMemo(() => {
         return (participant) => {
             if (participant) {
-                let contextualMenuItems = createDefaultContextualMenuItems(participant, strings, removeButtonAllowed ? participantListDefaultProps.onRemoveParticipant : undefined, participantListDefaultProps.myUserId);
+                let contextualMenuItems = createDefaultContextualMenuItems(participant, strings, removeButtonAllowed && participant.isRemovable ? participantListDefaultProps.onRemoveParticipant : undefined, participantListDefaultProps.myUserId);
                 if (onFetchParticipantMenuItems) {
                     contextualMenuItems = onFetchParticipantMenuItems(participant.userId, participantListDefaultProps.myUserId, contextualMenuItems);
                 }
@@ -17620,13 +17724,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 +17798,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,
@@ -17785,7 +17938,7 @@ const LobbyTile = (props) => {
     const handlers = useHandlers();
     return (React__default['default'].createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? (React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: react.mergeStyles(overlayContainerStyle), "aria-atomic": true },
             React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle(palette, isVideoReady)) }, props.overlayProps.overlayIcon),
-            React__default['default'].createElement(react.Text, { className: react.mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.title),
+            React__default['default'].createElement(react.Text, { className: react.mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive", "data-ui-id": "lobbyScreenTitle" }, props.overlayProps.title),
             props.overlayProps.moreDetails && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)))) : undefined }, handlers)));
 };
 
@@ -18077,7 +18230,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 +18251,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 +18287,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');