@azure/communication-react 1.16.0-alpha-202404160012 → 1.16.0-alpha-202404180013

package/dist/dist-cjs/communication-react/{index-CC43HCUd.js → index-BP7335hI.js}

@@ -17,9 +17,9 @@ var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var react$1 = require('@griffel/react');
 var roosterjsEditorPlugins = require('roosterjs-editor-plugins');
 var roosterjsEditorCore = require('roosterjs-editor-core');
+var roosterjsEditorTypesCompatible = require('roosterjs-editor-types-compatible');
 var roosterjsReact = require('roosterjs-react');
 var roosterjsEditorDom = require('roosterjs-editor-dom');
-var roosterjsEditorTypesCompatible = require('roosterjs-editor-types-compatible');
 var roosterjsEditorApi = require('roosterjs-editor-api');
 var reactChat = require('@fluentui-contrib/react-chat');
 var uuid = require('uuid');
@@ -176,7 +176,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.16.0-alpha-202404160012';
+var telemetryVersion = '1.16.0-alpha-202404180013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -1451,6 +1451,24 @@ class ProxyDeviceManager {
             this._deviceManager.on('audioDevicesUpdated', this.audioDevicesUpdated);
             this._deviceManager.on('selectedMicrophoneChanged', this.selectedMicrophoneChanged);
             this._deviceManager.on('selectedSpeakerChanged', this.selectedSpeakerChanged);
+            // Subscribe to browser camera permissions changes
+            try {
+                navigator.permissions.query({ name: 'camera' }).then((cameraPermissions) => {
+                    cameraPermissions.addEventListener('change', this.permissionsApiStateChangeHandler);
+                });
+            }
+            catch (e) {
+                console.info('Could not subscribe to Permissions API Camera changed events, API is not supported by browser', e);
+            }
+            // Subscribe to browser microphone permissions changes
+            try {
+                navigator.permissions.query({ name: 'microphone' }).then((micPermissions) => {
+                    micPermissions.addEventListener('change', this.permissionsApiStateChangeHandler);
+                });
+            }
+            catch (e) {
+                console.info('Could not subscribe to Permissions API Microphone changed events, API is not supported by browser', e);
+            }
         };
         /**
          * This is used to unsubscribe DeclarativeDeviceManager from the DeviceManager events.
@@ -1460,7 +1478,28 @@ class ProxyDeviceManager {
             this._deviceManager.off('audioDevicesUpdated', this.audioDevicesUpdated);
             this._deviceManager.off('selectedMicrophoneChanged', this.selectedMicrophoneChanged);
             this._deviceManager.off('selectedSpeakerChanged', this.selectedSpeakerChanged);
+            // Unsubscribe from browser camera permissions changes
+            try {
+                navigator.permissions.query({ name: 'camera' }).then((cameraPermissions) => {
+                    cameraPermissions.removeEventListener('change', this.permissionsApiStateChangeHandler);
+                });
+            }
+            catch (e) {
+                console.info('Could not Unsubscribe to Permissions API Camera changed events, API is not supported by browser', e);
+            }
+            // Unsubscribe from browser microphone permissions changes
+            try {
+                navigator.permissions.query({ name: 'microphone' }).then((micPermissions) => {
+                    micPermissions.removeEventListener('change', this.permissionsApiStateChangeHandler);
+                });
+            }
+            catch (e) {
+                console.info('Could not Unsubscribe to Permissions API Camera changed events, API is not supported by browser', e);
+            }
         };
+        this.permissionsApiStateChangeHandler = () => __awaiter$O(this, void 0, void 0, function* () {
+            yield this.updateDevicePermissionState();
+        });
         /**
          * Used to set a camera inside the proxy device manager.
          *
@@ -1485,6 +1524,32 @@ class ProxyDeviceManager {
         this.selectedSpeakerChanged = () => {
             this._context.setDeviceManagerSelectedSpeaker(this._deviceManager.selectedSpeaker);
         };
+        this.updateDevicePermissionState = (sdkDeviceAccessState) => __awaiter$O(this, void 0, void 0, function* () {
+            let hasCameraPermission = !!(sdkDeviceAccessState === null || sdkDeviceAccessState === void 0 ? void 0 : sdkDeviceAccessState.video);
+            let hasMicPermission = !!(sdkDeviceAccessState === null || sdkDeviceAccessState === void 0 ? void 0 : sdkDeviceAccessState.audio);
+            // Supplement the SDK values with values from the Permissions API to get a better understanding of the device
+            // permission state. The SDK only uses the getUserMedia API to determine the device permission state. However,
+            // this returns false if the camera is in use by another application. The Permissions API can provide more
+            // information about the device permission state, but is not supported yet in Firefox or Android WebView.
+            // Note: It also has the limitation where it cannot detect if the device is blocked by the Operating System
+            // permissions.
+            try {
+                const [cameraPermissions, micPermissions] = yield Promise.all([
+                    navigator.permissions.query({ name: 'camera' }),
+                    navigator.permissions.query({ name: 'microphone' })
+                ]);
+                hasCameraPermission = cameraPermissions.state === 'granted';
+                hasMicPermission = micPermissions.state === 'granted';
+            }
+            catch (e) {
+                console.info('Permissions API is not supported by browser', e);
+            }
+            this._context.setDeviceManagerDeviceAccess({
+                video: hasCameraPermission,
+                audio: hasMicPermission
+            });
+            this.setDeviceManager();
+        });
         this._deviceManager = deviceManager;
         this._context = context;
         this.setDeviceManager();
@@ -1535,11 +1600,10 @@ class ProxyDeviceManager {
             }
             case 'askDevicePermission': {
                 return this._context.withAsyncErrorTeedToState((...args) => {
-                    return target.askDevicePermission(...args).then((deviceAccess) => {
-                        this._context.setDeviceManagerDeviceAccess(deviceAccess);
-                        this.setDeviceManager();
+                    return target.askDevicePermission(...args).then((deviceAccess) => __awaiter$O(this, void 0, void 0, function* () {
+                        yield this.updateDevicePermissionState(deviceAccess);
                         return deviceAccess;
-                    });
+                    }));
                 }, 'DeviceManager.askDevicePermission');
             }
             default:
@@ -9915,14 +9979,14 @@ const ribbonTableButtonRootStyles = (theme, isSelected) => {
             '.ribbon-table-button-regular-icon': {
                 width: '1.25rem',
                 height: '1.25rem',
-                marginTop: '-0.25rem',
+                margin: '-0.25rem 0.25rem 0 0.25rem',
                 color: theme.palette.neutralPrimary,
                 display: isSelected ? 'none' : 'inline-block'
             },
             '.ribbon-table-button-filled-icon': {
                 width: '1.25rem',
                 height: '1.25rem',
-                marginTop: '-0.25rem',
+                margin: '-0.25rem 0.25rem 0 0.25rem',
                 color: theme.palette.themePrimary,
                 display: isSelected ? 'inline-block' : 'none'
             }
@@ -9933,22 +9997,11 @@ const ribbonTableButtonRootStyles = (theme, isSelected) => {
  * @private
  */
 const ribbonDividerStyle = (theme) => {
-    return {
-        icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },
-        root: { margin: '0', padding: '0', minWidth: 'auto' },
-        rootHovered: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.neutralQuaternaryAlt
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.neutralQuaternaryAlt
-                }
-            }
-        }
-    };
+    return react.mergeStyles({
+        color: theme.palette.neutralQuaternaryAlt,
+        margin: '0 -0.5rem',
+        paddingTop: '0.5rem'
+    });
 };
 /**
  * @private
@@ -9971,7 +10024,7 @@ const richTextFormatButtonIconStyle = (theme, isSelected) => {
 const editBoxRichTextEditorStyle = () => {
     return {
         minHeight: '2.25rem',
-        maxHeight: '2.25rem'
+        maxHeight: '8rem'
     };
 };
 /**
@@ -9979,8 +10032,8 @@ const editBoxRichTextEditorStyle = () => {
  */
 const sendBoxRichTextEditorStyle = (isExpanded) => {
     return {
-        minHeight: isExpanded ? '5rem' : '1.25rem',
-        maxHeight: '5rem'
+        minHeight: isExpanded ? '4rem' : '1.25rem',
+        maxHeight: '8rem'
     };
 };
 /**
@@ -10227,16 +10280,19 @@ const MaxColumnsNumber = 5;
 const dividerRibbonButton = (theme, key) => {
     return {
         key: key,
-        iconName: 'RichTextDividerIcon',
+        // the icon will be set in `onRender` callback
+        // this is needed to make the divider unavailable for keyboard navigation
+        iconName: '',
+        // no text is needed here as we don't want to show a tooltip for the divider
         unlocalizedText: '',
         onClick: () => { },
         isDisabled: () => true,
         commandBarProperties: {
             // show the item correctly for the overflow menu
             itemType: react.ContextualMenuItemType.Divider,
-            buttonStyles: ribbonDividerStyle(theme),
             // this is still needed to remove checkmark icon space even though it is a divider
-            canCheck: false
+            canCheck: false,
+            onRender: () => React.createElement(react.Icon, { iconName: "RichTextDividerIcon", className: ribbonDividerStyle(theme) })
         }
     };
 };
@@ -10404,13 +10460,22 @@ const getEditingTable = (editor, node) => {
  * CopyPastePlugin is a plugin for handling copy and paste events in the editor.
  */
 class CopyPastePlugin {
+    constructor() {
+        this.editor = null;
+    }
     getName() {
         return 'CopyPastePlugin';
     }
-    initialize() { }
+    initialize(editor) {
+        this.editor = editor;
+    }
     dispose() { }
     onPluginEvent(event) {
         removeImageElement(event);
+        if (this.editor !== null && !this.editor.isDisposed()) {
+            // scroll the editor to the correct position after pasting content
+            scrollToBottomAfterContentPaste(event, this.editor);
+        }
     }
 }
 /**
@@ -10432,6 +10497,38 @@ const removeImageElement = (event) => {
         });
     }
 };
+/**
+ * Scrolls the editor's scroll container to the bottom after content is pasted.
+ * @param event - The plugin event.
+ * @param editor - The editor instance.
+ */
+const scrollToBottomAfterContentPaste = (event, editor) => {
+    if (event.eventType === roosterjsEditorTypesCompatible.CompatiblePluginEventType.ContentChanged && event.source === roosterjsEditorTypesCompatible.CompatibleChangeSource.Paste) {
+        // current focused position in the editor
+        const focusedPosition = editor.getFocusedPosition();
+        // the cursor position relative to the viewport
+        const cursorRect = focusedPosition && roosterjsEditorDom.getPositionRect(focusedPosition);
+        // the scroll container of the editor
+        const scrollContainer = editor.getScrollContainer();
+        // the scrollContainer position relative to the viewport
+        const scrollContainerRect = roosterjsEditorDom.normalizeRect(scrollContainer.getBoundingClientRect());
+        if (focusedPosition !== null && cursorRect !== null && cursorRect !== undefined && scrollContainerRect !== null) {
+            const textElement = focusedPosition.element;
+            // the caret height is typically the same as the font size of the text
+            const caretHeight = parseFloat(window.getComputedStyle(textElement).fontSize);
+            // 1. scrollContainer.scrollTop represents the number of pixels that the content of scrollContainer is scrolled upward.
+            // 2. subtract the top position of the scrollContainer element (scrollContainerRect.top) to
+            // translate the scroll position from being relative to the document to being relative to the viewport.
+            // 3. add the top position of the cursor (cursorRect.top) to moves the scroll position to the cursor's position.
+            // 4. subtract a caret height to add some space between the cursor and the top edge of the scrollContainer.
+            const updatedScrollTop = scrollContainer.scrollTop - scrollContainerRect.top + cursorRect.top - caretHeight;
+            scrollContainer.scrollTo({
+                top: updatedScrollTop,
+                behavior: 'smooth'
+            });
+        }
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -10456,6 +10553,10 @@ const RichTextEditor = React.forwardRef((props, ref) => {
                 if (editor.current) {
                     editor.current.setContent('');
                 }
+            },
+            getPlainContent() {
+                var _a;
+                return (_a = editor === null || editor === void 0 ? void 0 : editor.current) === null || _a === void 0 ? void 0 : _a.getContent(roosterjsEditorTypesCompatible.CompatibleGetContentMode.PlainTextFast);
             }
         };
     }, []);
@@ -10751,7 +10852,7 @@ const RichTextSendBox = (props) => {
         setContentValue(newValue);
     }, []);
     const sendMessageOnClick = React.useCallback(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (disabled || contentValueOverflow) {
             return;
         }
@@ -10764,20 +10865,29 @@ const RichTextSendBox = (props) => {
             return;
         }
         const message = contentValue;
+        // get plain text content from the editor to check if the message is empty
+        // as the content may contain tags even when the content is empty
+        const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
+        const hasContent = !isContentEmpty({
+            plainTextContent,
+            content: message,
+            placeholder: strings.placeholderText
+        });
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
-        if (sanitizeText(message).length > 0 ||
+        if (hasContent ||
             /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
             onSendMessage(message);
             setContentValue('');
-            (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.setEmptyContent();
+            (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.setEmptyContent();
         }
-        (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        (_c = editorComponentRef.current) === null || _c === void 0 ? void 0 : _c.focus();
     }, [
         contentValue,
         contentValueOverflow,
         disabled,
         onSendMessage,
+        strings.placeholderText,
         /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
         /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError
     ]);
@@ -10797,15 +10907,26 @@ const RichTextSendBox = (props) => {
         attachmentUploadsPendingError,
         systemMessage
     ]);
-    const onRenderSendIcon = React.useCallback((isHover) => (React.createElement(react.Icon, { iconName: isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
-            theme,
-            hasText: !!contentValue,
-            /* @conditional-compile-remove(attachment-upload) */
-            hasAttachment: false,
-            hasErrorMessage: hasErrorMessage,
-            defaultTextColor: theme.palette.neutralSecondary,
-            disabled: disabled
-        }) })), [contentValue, disabled, hasErrorMessage, theme]);
+    const onRenderSendIcon = React.useCallback((isHover) => {
+        var _a;
+        // get plain text content from the editor to check if the message is empty
+        // as the content may contain tags even when the content is empty
+        const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
+        const hasContent = !isContentEmpty({
+            plainTextContent: plainTextContent,
+            content: contentValue,
+            placeholder: strings.placeholderText
+        });
+        return (React.createElement(react.Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
+                theme,
+                hasText: hasContent,
+                /* @conditional-compile-remove(attachment-upload) */
+                hasAttachment: false,
+                hasErrorMessage: hasErrorMessage,
+                defaultTextColor: theme.palette.neutralSecondary,
+                disabled: disabled
+            }) }));
+    }, [contentValue, disabled, hasErrorMessage, strings.placeholderText, theme]);
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a;
         return {
@@ -10867,6 +10988,22 @@ const RichTextSendBox = (props) => {
             /* @conditional-compile-remove(attachment-upload) */
             hasAttachments: hasAttachmentUploads })));
 };
+/**
+ * Checks if the content of the rich text editor is empty.
+ *
+ * @param {Object} params - The parameters for the function.
+ * @param {string | undefined} params.plainTextContent - The plain text content of the editor.
+ * @param {string} params.content - The HTML content of the editor.
+ * @param {string} params.placeholder - The placeholder text of the editor.
+ * @returns {boolean} - True if the content is empty, false otherwise.
+ */
+const isContentEmpty = ({ plainTextContent, content, placeholder }) => {
+    // RoosterJS returns placeholder text as plain text when the editor is empty and in this case,
+    // plainTextContent contains only placeholder text but content doesn't include the placeholder text
+    // this needs to be reviewed after migration to the content model packages.
+    const plainTextContainsPlaceholderOnly = plainTextContent === placeholder && !content.includes(placeholder);
+    return plainTextContainsPlaceholderOnly || sanitizeText(plainTextContent !== null && plainTextContent !== void 0 ? plainTextContent : '').length === 0;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -12690,7 +12827,7 @@ class ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CmrzlNzS.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-C3t87AZz.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -12698,7 +12835,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CmrzlNzS.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-C3t87AZz.js'); });
 /**
  * @private
  */
@@ -15582,12 +15719,12 @@ const participantsById = (participants) => {
 // Licensed under the MIT License.
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const DEFAULT_MAX_VIDEO_SREAMS = 4;
+/**
+ * @private
+ */
 const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const getOrganizedParticipants = (props) => {
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, layout, previousGridParticipants = [], previousOverflowParticipants = [] } = props;
-    const maxRemoteVideoStreamsToUse = maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY
-        ? MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY
-        : maxRemoteVideoStreams;
+    const { remoteParticipants = [], dominantSpeakers = [], maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, layout, previousGridParticipants = [], previousOverflowParticipants = [] } = props;
     const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const participants = layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;
@@ -15595,8 +15732,8 @@ const getOrganizedParticipants = (props) => {
         participants: participants,
         dominantSpeakers,
         currentParticipants: previousGridParticipants,
-        maxDominantSpeakers: maxRemoteVideoStreamsToUse
-    }).slice(0, maxRemoteVideoStreamsToUse);
+        maxDominantSpeakers: maxGridParticipants
+    }).slice(0, maxGridParticipants);
     const dominantSpeakerToGrid = layout === 'speaker'
         ? dominantSpeakers && dominantSpeakers[0]
             ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])
@@ -15621,14 +15758,14 @@ const getOrganizedParticipants = (props) => {
         isScreenShareActive,
         gridParticipants: newGridParticipants,
         overflowGalleryParticipants: newOverflowGalleryParticipants,
-        maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,
+        maxGridParticipants: maxGridParticipants,
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
     });
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({
         isScreenShareActive,
         gridParticipants: newGridParticipants,
         overflowGalleryParticipants: newOverflowGalleryParticipants,
-        maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,
+        maxGridParticipants: maxGridParticipants,
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
     });
     return { gridParticipants, overflowGalleryParticipants };
@@ -15656,7 +15793,7 @@ const useOrganizedParticipants = (props) => {
     const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
     const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
         // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0
-        maxRemoteVideoStreams: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxRemoteVideoStreams, remoteParticipants: unfocusedParticipants, previousGridParticipants: currentGridParticipants.current, previousOverflowParticipants: currentOverflowGalleryParticipants.current });
+        maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants, remoteParticipants: unfocusedParticipants, previousGridParticipants: currentGridParticipants.current, previousOverflowParticipants: currentOverflowGalleryParticipants.current });
     const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);
     currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;
     currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;
@@ -15679,9 +15816,9 @@ const getGridParticipants = (args) => {
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     return args.gridParticipants.length > 0
         ? args.gridParticipants
-        : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams
-            ? args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams)
-            : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams).concat(args.callingParticipants);
+        : args.overflowGalleryParticipants.length > args.maxGridParticipants
+            ? args.overflowGalleryParticipants.slice(0, args.maxGridParticipants)
+            : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants).concat(args.callingParticipants);
 };
 const getOverflowGalleryRemoteParticipants = (args) => {
     if (args.isScreenShareActive) {
@@ -15697,8 +15834,8 @@ const getOverflowGalleryRemoteParticipants = (args) => {
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         return args.gridParticipants.length > 0
             ? args.overflowGalleryParticipants.concat(args.callingParticipants)
-            : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams
-                ? args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams).concat(args.callingParticipants)
+            : args.overflowGalleryParticipants.length > args.maxGridParticipants
+                ? args.overflowGalleryParticipants.slice(args.maxGridParticipants).concat(args.callingParticipants)
                 : [];
     }
 };
@@ -17538,11 +17675,12 @@ const DefaultLayout = (props) => {
     // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
     // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
     const childrenPerPage = React.useRef(4);
+    const remoteVideosOn = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; }).length > 0;
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         localParticipant,
         dominantSpeakers,
-        maxRemoteVideoStreams,
+        maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,
         isScreenShareActive: !!screenShareComponent,
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
@@ -18370,10 +18508,11 @@ const FloatingLocalVideoLayout = (props) => {
     // This is for tracking the number of children in the first page of overflow gallery.
     // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
     const childrenPerPage = React.useRef(4);
+    const remoteVideosOn = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; }).length > 0;
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
-        maxRemoteVideoStreams,
+        maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,
         isScreenShareActive: !!screenShareComponent,
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
@@ -18489,7 +18628,7 @@ const SpeakerVideoLayout = (props) => {
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
-        maxRemoteVideoStreams,
+        maxGridParticipants: maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
@@ -18624,7 +18763,7 @@ const LargeGalleryLayout = (props) => {
         remoteParticipants,
         localParticipant,
         dominantSpeakers,
-        maxRemoteVideoStreams: maxStreamsTrampoline(),
+        maxGridParticipants: maxStreamsTrampoline(),
         isScreenShareActive: !!screenShareComponent,
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
@@ -31178,7 +31317,7 @@ const SidePaneHeader = (props) => {
         return React.createElement(SidePaneMobileHeader, Object.assign({}, props));
     }
     return (React.createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles, verticalAlign: "center" },
-        React.createElement(react.Stack.Item, { role: "heading", styles: sidePaneHeaderStyles }, props.headingText),
+        React.createElement(react.Stack.Item, { role: "heading", styles: sidePaneHeaderStyles, "aria-label": props.headingText }, props.headingText),
         React.createElement(react.Stack.Item, null,
             React.createElement(react.CommandBarButton, { ariaLabel: props.dismissSidePaneButtonAriaLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose }))));
 };
@@ -33754,14 +33893,11 @@ const LocalDeviceSettings = (props) => {
     const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     const cameraPermissionGranted = props.cameraPermissionGranted;
     const micPermissionGranted = props.microphonePermissionGranted;
-    let roleCanUseCamera = true;
-    let roleCanUseMic = true;
-    roleCanUseCamera = role === 'Consumer' ? false : true;
-    roleCanUseMic = role === 'Consumer' ? false : true;
+    const roleCanUseCamera = role !== 'Consumer';
+    const roleCanUseMic = role !== 'Consumer';
     // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
     // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for
     // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.
-    /* @conditional-compile-remove(call-readiness) */
     React.useEffect(() => {
         if (cameraPermissionGranted) {
             adapter.queryCameras();
@@ -39675,4 +39811,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-CC43HCUd.js.map
+//# sourceMappingURL=index-BP7335hI.js.map