@azure/communication-react 1.8.1-alpha-202309270012 → 1.8.1-alpha-202309290012

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

@@ -176,7 +176,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.8.1-alpha-202309270012';
+var telemetryVersion = '1.8.1-alpha-202309290012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -11259,12 +11259,7 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     const callingParticipant = participant;
     let presence = undefined;
     if (callingParticipant) {
-        if (callingParticipant.state === 'Connected') {
-            presence = react.PersonaPresence.online;
-        }
-        else if (callingParticipant.state === 'Idle') {
-            presence = react.PersonaPresence.away;
-        }
+        presence = react.PersonaPresence.none;
     }
     const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);
     const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) ||
@@ -24256,7 +24251,7 @@ const DesktopMoreButton = (props) => {
             }
         };
         /* @conditional-compile-remove(large-gallery) */
-        const largeGalleryOptions = {
+        const largeGalleryOption = {
             key: 'largeGallerySelectionKey',
             text: localeStrings.strings.call.moreButtonLargeGalleryDefaultLayoutLabel,
             canCheck: true,
@@ -24274,7 +24269,7 @@ const DesktopMoreButton = (props) => {
             }
         };
         /* @conditional-compile-remove(gallery-layouts) */
-        const overflowGalleryOptions = {
+        const overflowGalleryOption = {
             key: 'topKey',
             text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,
             canCheck: true,
@@ -24299,9 +24294,9 @@ const DesktopMoreButton = (props) => {
             }
         };
         /* @conditional-compile-remove(large-gallery) */
-        (_c = (_b = galleryOptions.subMenuProps) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.push(largeGalleryOptions);
+        (_c = (_b = galleryOptions.subMenuProps) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.push(largeGalleryOption);
         /* @conditional-compile-remove(gallery-layouts) */
-        (_e = (_d = galleryOptions.subMenuProps) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.push(overflowGalleryOptions);
+        (_e = (_d = galleryOptions.subMenuProps) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.push(overflowGalleryOption);
         /* @conditional-compile-remove(gallery-layouts) */
         moreButtonContextualMenuItems.push(galleryOptions);
     }
@@ -27171,7 +27166,13 @@ const networkReconnectTileSelector = reselect__namespace.createSelector([getUser
 const CallPage = (props) => {
     const { callInvitationURL, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, 
     /* @conditional-compile-remove(gallery-layouts) */
-    galleryLayout = 'floatingLocalVideo' } = props;
+    galleryLayout = 'floatingLocalVideo', 
+    /* @conditional-compile-remove(gallery-layouts) */
+    onUserSetGalleryLayoutChange, 
+    /* @conditional-compile-remove(gallery-layouts) */
+    userSetOverflowGalleryPosition = 'Responsive', 
+    /* @conditional-compile-remove(gallery-layouts) */
+    onSetUserSetOverflowGalleryPosition } = props;
     // To use useProps to get these states, we need to create another file wrapping Call,
     // It seems unnecessary in this case, so we get the updated states using this approach.
     const { callStatus } = useSelector$1(callStatusSelector);
@@ -27185,10 +27186,6 @@ const CallPage = (props) => {
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
     const drawerMenuHostId = reactHooks.useId('drawerMenuHost');
-    /* @conditional-compile-remove(gallery-layouts) */
-    const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = React.useState('Responsive');
-    /* @conditional-compile-remove(gallery-layouts) */
-    const [userSetGalleryLayout, setUserSetGalleryLayout] = React.useState(galleryLayout);
     return (React__default["default"].createElement(CallArrangement, { id: drawerMenuHostId, complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && errorBarProps, mutedNotificationProps: mutedNotificationProps, callControlProps: {
             callInvitationURL: callInvitationURL,
             onFetchParticipantMenuItems: onFetchParticipantMenuItems,
@@ -27204,13 +27201,13 @@ const CallPage = (props) => {
             /* @conditional-compile-remove(gallery-layouts) */
             userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
             /* @conditional-compile-remove(gallery-layouts) */
-            userSetGalleryLayout: userSetGalleryLayout }))) : (React__default["default"].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default["default"].createElement(React__default["default"].Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
+            userSetGalleryLayout: galleryLayout }))) : (React__default["default"].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default["default"].createElement(React__default["default"].Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
         /* @conditional-compile-remove(gallery-layouts) */
-        onUserSetOverflowGalleryPositionChange: setUserSetOverflowGalleryPosition, 
+        onUserSetOverflowGalleryPositionChange: onSetUserSetOverflowGalleryPosition, 
         /* @conditional-compile-remove(gallery-layouts) */
-        onUserSetGalleryLayoutChange: setUserSetGalleryLayout, 
+        onUserSetGalleryLayoutChange: onUserSetGalleryLayoutChange, 
         /* @conditional-compile-remove(gallery-layouts) */
-        userSetGalleryLayout: userSetGalleryLayout, 
+        userSetGalleryLayout: galleryLayout, 
         /* @conditional-compile-remove(capabilities) */
         capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps }));
 };
@@ -27242,7 +27239,7 @@ const dropDownStyles = (theme) => ({
     dropdownItem: {
         fontSize: '0.875rem',
         height: '2.5rem',
-        background: theme.palette.neutralQuaternaryAlt
+        background: theme.palette.white
     },
     dropdown: {
         height: '2.5rem',
@@ -27254,7 +27251,9 @@ const dropDownStyles = (theme) => ({
     title: {
         fontSize: '0.875rem',
         height: '2.5rem',
-        lineHeight: '2.3125rem'
+        lineHeight: '2.3125rem',
+        borderRadius: '0.25rem',
+        border: `1px solid ${theme.palette.neutralQuaternaryAlt}`
     },
     label: {
         fontWeight: 600,
@@ -27330,12 +27329,12 @@ const configurationStackTokensDesktop = {
  * @private
  */
 const configurationStackTokensMobile = {
-    childrenGap: '1rem'
+    childrenGap: '1.5rem'
 };
 const configurationContainerStyle = {
     height: '100%',
     width: '100%',
-    padding: '0.5rem'
+    padding: '2rem 1rem 2rem 1rem'
 };
 /**
  * @private
@@ -27414,7 +27413,14 @@ const startCallButtonContainerStyleMobile = {
  */
 const startCallButtonStyleMobile = react.mergeStyles({
     width: '100%',
-    maxWidth: 'unset'
+    maxWidth: 'unset',
+    borderRadius: '0.25rem'
+});
+/**
+ * @private
+ */
+const startCallButtonStyleDesktop = react.mergeStyles({
+    borderRadius: '0.25rem'
 });
 /** @private */
 const cameraAndVideoEffectsContainerStyleDesktop = {
@@ -28187,7 +28193,7 @@ const ConfigurationPage = (props) => {
                             /* @conditional-compile-remove(video-background-effects) */
                             onClickVideoEffects: toggleVideoEffectsPane })))),
                     React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                        React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCall, disabled: disableStartCallButton })))),
+                        React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton })))),
             React__default["default"].createElement(react.Panel
             /* @conditional-compile-remove(video-background-effects) */
             , { 
@@ -28234,7 +28240,8 @@ const containerItemGap = {
  */
 const rejoinCallButtonContainerStyles = {
     root: {
-        paddingTop: '1.125rem'
+        paddingTop: '1.125rem',
+        borderRadius: '0.25rem'
     }
 };
 /**
@@ -28894,7 +28901,7 @@ const isShowing = (overrideSidePane) => {
     return !!(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive);
 };
 const MainScreen = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const adapter = useAdapter();
     const { camerasCount, microphonesCount } = useSelector$1(deviceCountSelector);
     const hasCameras = camerasCount > 0;
@@ -28922,6 +28929,10 @@ const MainScreen = (props) => {
     const endedCall = useSelector$1(getEndedCall);
     const [sidePaneRenderer, setSidePaneRenderer] = React__default["default"].useState();
     const [injectedSidePaneProps, setInjectedSidePaneProps] = React__default["default"].useState();
+    /* @conditional-compile-remove(gallery-layouts) */
+    const [userSetGalleryLayout, setUserSetGalleryLayout] = React.useState((_c = (_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.galleryOptions) === null || _b === void 0 ? void 0 : _b.layout) !== null && _c !== void 0 ? _c : 'floatingLocalVideo');
+    /* @conditional-compile-remove(gallery-layouts) */
+    const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = React.useState('Responsive');
     const overridePropsRef = React.useRef(props.overrideSidePane);
     React.useEffect(() => {
         setInjectedSidePaneProps(props.overrideSidePane);
@@ -28971,11 +28982,11 @@ const MainScreen = (props) => {
                     adapter.joinCall();
                 }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, 
                 /* @conditional-compile-remove(call-readiness) */
-                deviceChecks: (_a = props.options) === null || _a === void 0 ? void 0 : _a.deviceChecks, 
+                deviceChecks: (_d = props.options) === null || _d === void 0 ? void 0 : _d.deviceChecks, 
                 /* @conditional-compile-remove(call-readiness) */
-                onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick, 
+                onPermissionsTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onPermissionsTroubleshootingClick, 
                 /* @conditional-compile-remove(call-readiness) */
-                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick, 
+                onNetworkingTroubleShootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onNetworkingTroubleShootingClick, 
                 /* @conditional-compile-remove(capabilities) */
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
@@ -28989,7 +29000,7 @@ const MainScreen = (props) => {
             pageElement = (React__default["default"].createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
             break;
         case 'leaving':
-            pageElement = (React__default["default"].createElement(NoticePage, { title: (_d = locale.strings.call.leavingCallTitle) !== null && _d !== void 0 ? _d : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
+            pageElement = (React__default["default"].createElement(NoticePage, { title: (_g = locale.strings.call.leavingCallTitle) !== null && _g !== void 0 ? _g : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
             break;
         case 'leftCall': {
             const { title, moreDetails, disableStartCallButton } = getEndedCallStrings(locale, endedCall);
@@ -29010,7 +29021,13 @@ const MainScreen = (props) => {
         case 'call':
             pageElement = (React__default["default"].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
                 /* @conditional-compile-remove(gallery-layouts) */
-                galleryLayout: ((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.galleryOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.options.galleryOptions.layout : 'floatingLocalVideo', 
+                galleryLayout: userSetGalleryLayout, 
+                /* @conditional-compile-remove(gallery-layouts) */
+                onUserSetGalleryLayoutChange: setUserSetGalleryLayout, 
+                /* @conditional-compile-remove(gallery-layouts) */
+                onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, 
+                /* @conditional-compile-remove(gallery-layouts) */
+                userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
                 /* @conditional-compile-remove(capabilities) */
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
@@ -29026,7 +29043,7 @@ const MainScreen = (props) => {
         case 'unsupportedEnvironment':
             pageElement = (React__default["default"].createElement(React__default["default"].Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React__default["default"].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_g = props.options) === null || _g === void 0 ? void 0 : _g.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
+            React__default["default"].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_h = props.options) === null || _h === void 0 ? void 0 : _h.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
             break;
     }
     if (!pageElement) {