@azure/communication-react 1.3.3-alpha-202210070024.0 → 1.3.3-alpha-202210130020.0

package/dist/communication-react.d.ts

@@ -1142,6 +1142,19 @@ export declare type CallCompositeOptions = {
      * if this is not supplied, the composite will not show a 'network troubleshooting' link.
      */
     onNetworkingTroubleShootingClick?: () => void;
+    /**
+     * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.
+     *
+     * @example
+     * ```ts
+     * onBrowserTroubleShootingClick?: () =>
+     *  window.open('https://contoso.com/browser-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a unsupported browser page.
+     */
+    onEnvironmentInfoTroubleshootingClick?: () => void;
 };
 
 /**
@@ -1149,7 +1162,7 @@ export declare type CallCompositeOptions = {
  *
  * @public
  */
-export declare type CallCompositePage = 'accessDeniedTeamsMeeting' | 'call' | 'configuration' | /* @conditional-compile-remove(PSTN-calls) */ 'hold' | 'joinCallFailedDueToNoNetwork' | 'leftCall' | 'lobby' | /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom' | 'removedFromCall' | /* @conditional-compile-remove(rooms) */ 'roomNotFound';
+export declare type CallCompositePage = 'accessDeniedTeamsMeeting' | 'call' | 'configuration' | /* @conditional-compile-remove(PSTN-calls) */ 'hold' | 'joinCallFailedDueToNoNetwork' | 'leftCall' | 'lobby' | /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom' | 'removedFromCall' | /* @conditional-compile-remove(rooms) */ 'roomNotFound' | /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment';
 
 /**
  * Props for {@link CallComposite}.

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-202210070024.0';
+var telemetryVersion = '1.3.3-alpha-202210130020.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5155,6 +5155,7 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
     ]);
     // Handle creating, destroying and updating the video stream as necessary
     useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
+    const showLoadingIndicator = isAvailable && isReceiving === false && props.participantState !== 'Disconnected';
     const renderVideoStreamElement = React.useMemo(() => {
         // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
         // implies that, after their threshold, all streams have no child (blank video)
@@ -5162,8 +5163,8 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }));
-    }, [renderElement, isReceiving]);
+        return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' }));
+    }, [renderElement, showLoadingIndicator]);
     return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
@@ -14789,7 +14790,8 @@ const END_CALL_PAGES = [
     'leftCall',
     /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom',
     'removedFromCall',
-    /* @conditional-compile-remove(rooms) */ 'roomNotFound'
+    /* @conditional-compile-remove(rooms) */ 'roomNotFound',
+    /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment'
 ];
 
 // Copyright (c) Microsoft Corporation.
@@ -15682,7 +15684,7 @@ const CallControls = (props) => {
                 React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: !props.isMobile })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
@@ -16229,6 +16231,11 @@ const themedDialpadStyle = (isMobile, theme) => ({
             }
         }
     },
+    deleteIcon: {
+        root: {
+            backgroundColor: theme.palette.white
+        }
+    },
     digit: {
         color: theme.palette.themeDarkAlt
     }
@@ -17983,6 +17990,23 @@ const HoldPage = (props) => {
         modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(HoldPane, null), dataUiId: 'hold-page' }));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ *
+ * @internal
+ */
+const UnsupportedBrowserPage = (props) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    const { onTroubleshootingClick } = props;
+    /* @conditional-compile-remove(unsupported-browser) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(unsupported-browser) */
+    const unsupportedBrowserStrings = locale.component.strings.UnsupportedBrowser;
+    /* @conditional-compile-remove(unsupported-browser) */
+    return (React__default['default'].createElement(react.Stack, { styles: { root: { margin: 'auto', paddingTop: '3rem' } } },
+        React__default['default'].createElement(UnsupportedBrowser, { onTroubleShootingClick: onTroubleshootingClick, strings: unsupportedBrowserStrings })));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -17995,7 +18019,7 @@ var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 const MainScreen = (props) => {
-    var _a;
+    var _a, _b, _c;
     const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
     const page = useSelector$1(getPage);
     const adapter = useAdapter();
@@ -18045,6 +18069,9 @@ const MainScreen = (props) => {
             pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options })));
             break;
+        case unsupportedEnvironmentPageTrampoline():
+            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
+            /* @conditional-compile-remove(unsupported-browser) */ ((_b = props.options) === null || _b === void 0 ? void 0 : _b.onEnvironmentInfoTroubleshootingClick) && (React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onEnvironmentInfoTroubleshootingClick }))));
     }
     if (!pageElement) {
         throw new Error('Invalid call composite page');
@@ -18137,6 +18164,10 @@ const holdPageTrampoline = () => {
     /* @conditional-compile-remove(PSTN-calls) */
     return 'hold';
 };
+const unsupportedEnvironmentPageTrampoline = () => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return 'unsupportedEnvironment';
+};
 
 /**
  * @private
@@ -20002,8 +20033,9 @@ const CallWithChatComposite = (props) => {
 };
 const hasJoinedCallFn = (page, callStatus) => {
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
-    return ((page === 'call' && (callStatus === 'Connected' || callStatus === 'RemoteHold')) ||
-        (page === 'hold' && callStatus === 'LocalHold'));
+    return ((page === 'call' &&
+        (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||
+        (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting')));
 };
 const showShowChatTabHeaderButton = (callControls) => {
     if (callControls === undefined || callControls === true) {