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

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../types/Attachment';\n/* @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  insertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  insertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  insertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  insertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  insertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  insertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  insertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  deleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  deleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  deleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  deleteTableMenu: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active attachment uploads where each object has attributes\n   * of a attachment upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeAttachmentUploads?: AttachmentMetadata[];\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    autoFocus,\n    onSendMessage,\n    onTyping,\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    onCancelAttachmentUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n    }\n    editorComponentRef.current?.focus();\n  }, [\n    contentValue,\n    contentValueOverflow,\n    disabled,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()?.uploadError\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(attachment-upload) */\n          hasAttachment: false,\n          hasErrorMessage: hasErrorMessage,\n          defaultTextColor: theme.palette.neutralSecondary,\n          disabled: disabled\n        })}\n      />\n    ),\n    [contentValue, disabled, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadError: activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()\n        ?.uploadError,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={activeAttachmentUploads}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted,\n              attachmentMoreMenu: strings.attachmentMoreMenu\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeAttachmentUploads,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploadCompleted,\n    strings.uploading,\n    strings.attachmentMoreMenu,\n    theme\n  ]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n      />\n    );\n  }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const hasAttachmentUploads = useMemo(() => {\n    return (\n      hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads)\n    );\n  }, [activeAttachmentUploads]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        // in case when format bar is shown, the editor is re-rendered that causes the content to be lost\n        // setting the content will ensure that the latest content is used when editor is re-rendered\n        content={contentValue}\n        placeholderText={strings.placeholderText}\n        autoFocus={autoFocus}\n        onChange={setContent}\n        onEnterKeyDown={sendMessageOnClick}\n        onTyping={onTyping}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(attachment-upload) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(attachment-upload) */\n        hasAttachments={hasAttachmentUploads}\n      />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../types/Attachment';\n/* @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  insertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  insertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  insertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  insertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  insertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  insertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  insertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  deleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  deleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  deleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  deleteTableMenu: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active attachment uploads where each object has attributes\n   * of a attachment upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeAttachmentUploads?: AttachmentMetadata[];\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    autoFocus,\n    onSendMessage,\n    onTyping,\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    onCancelAttachmentUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\n    // get plain text content from the editor to check if the message is empty\n    // as the content may contain tags even when the content is empty\n    const plainTextContent = editorComponentRef.current?.getPlainContent();\n    const hasContent = !isContentEmpty({\n      plainTextContent,\n      content: message,\n      placeholder: strings.placeholderText\n    });\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      hasContent ||\n      /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n    }\n    editorComponentRef.current?.focus();\n  }, [\n    contentValue,\n    contentValueOverflow,\n    disabled,\n    onSendMessage,\n    strings.placeholderText,\n    /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()?.uploadError\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => {\n      // get plain text content from the editor to check if the message is empty\n      // as the content may contain tags even when the content is empty\n      const plainTextContent = editorComponentRef.current?.getPlainContent();\n      const hasContent = !isContentEmpty({\n        plainTextContent: plainTextContent,\n        content: contentValue,\n        placeholder: strings.placeholderText\n      });\n      return (\n        <Icon\n          iconName={isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend'}\n          className={sendIconStyle({\n            theme,\n            hasText: hasContent,\n            /* @conditional-compile-remove(attachment-upload) */\n            hasAttachment: false,\n            hasErrorMessage: hasErrorMessage,\n            defaultTextColor: theme.palette.neutralSecondary,\n            disabled: disabled\n          })}\n        />\n      );\n    },\n    [contentValue, disabled, hasErrorMessage, strings.placeholderText, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadError: activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()\n        ?.uploadError,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={activeAttachmentUploads}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted,\n              attachmentMoreMenu: strings.attachmentMoreMenu\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeAttachmentUploads,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploadCompleted,\n    strings.uploading,\n    strings.attachmentMoreMenu,\n    theme\n  ]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n      />\n    );\n  }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const hasAttachmentUploads = useMemo(() => {\n    return (\n      hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads)\n    );\n  }, [activeAttachmentUploads]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        // in case when format bar is shown, the editor is re-rendered that causes the content to be lost\n        // setting the content will ensure that the latest content is used when editor is re-rendered\n        content={contentValue}\n        placeholderText={strings.placeholderText}\n        autoFocus={autoFocus}\n        onChange={setContent}\n        onEnterKeyDown={sendMessageOnClick}\n        onTyping={onTyping}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(attachment-upload) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(attachment-upload) */\n        hasAttachments={hasAttachmentUploads}\n      />\n    </Stack>\n  );\n};\n\n/**\n * Checks if the content of the rich text editor is empty.\n *\n * @param {Object} params - The parameters for the function.\n * @param {string | undefined} params.plainTextContent - The plain text content of the editor.\n * @param {string} params.content - The HTML content of the editor.\n * @param {string} params.placeholder - The placeholder text of the editor.\n * @returns {boolean} - True if the content is empty, false otherwise.\n */\nconst isContentEmpty = ({\n  plainTextContent,\n  content,\n  placeholder\n}: {\n  plainTextContent: string | undefined;\n  content: string;\n  placeholder: string;\n}): boolean => {\n  // RoosterJS returns placeholder text as plain text when the editor is empty and in this case,\n  // plainTextContent contains only placeholder text but content doesn't include the placeholder text\n  // this needs to be reviewed after migration to the content model packages.\n  const plainTextContainsPlaceholderOnly = plainTextContent === placeholder && !content.includes(placeholder);\n  return plainTextContainsPlaceholderOnly || sanitizeText(plainTextContent ?? '').length === 0;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js

@@ -7,7 +7,7 @@ import { isNarrowWidth } from '../utils/responsive';
 import { isShortHeight } from '../utils/responsive';
 import { rootLayoutStyle } from './styles/DefaultLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
-import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
 import { OverflowGallery } from './OverflowGallery';
 /**
  * DefaultLayout displays remote participants, local video component, and screen sharing component in
@@ -24,11 +24,12 @@ export 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 = 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)

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AASpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW,EACX,YAAY,EACZ,wBAAwB,GAAG,EAAE,EAC7B,uBAAuB,GAAG,kBAAkB;IAC5C,4CAA4C,CAAC,6BAA6B,GAAG,EAAE,EAChF,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,qFAAqF;IACrF,+GAA+G;IAC/G,iHAAiH;IACjH,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,wBAAwB,CAAC;QACjF,kBAAkB;QAClB,gBAAgB;QAChB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB;YACtD,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC,wBAAwB,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC;YAC7F,CAAC,CAAC,eAAe,CAAC,OAAO;QAC3B,wBAAwB;QACxB,MAAM,EAAE,SAAS;QACjB,4CAA4C,CAAC,6BAA6B;KAC3E,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,IAAI,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QACzC,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,IAAI,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QAClE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC3G,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,mBAAmB,EAAE,CAAC;QACxB,IAAI,oBAAoB,IAAI,4CAA4C,CAAC,6BAA6B,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClH,oBAAoB,GAAG,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,oBAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,qBAAqB,EAAE,KAAK,EAC5B,uBAAuB,EAAE,oBAAoB,EAC7C,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAClD,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,oBAAoB,EAAE,kBAAkB,EACxC,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBACrC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EACD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;IACJ,CAAC,EAAE;QACD,QAAQ;QACR,OAAO;QACP,oBAAoB;QACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;QACzB,uBAAuB;QACvB,kBAAkB;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;QACvB,WAAW;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,EAAE,uBAAuB,KAAK,eAAe,EACvD,MAAM,EAAE,eAAe,EACvB,MAAM,EAAE,qBAAqB;QAE5B,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,yCAAK;QAC3E,oBAAoB,CAAC,CAAC,CAAC,CACtB,oBAAoB,CACrB,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IACrD,SAAS,CACC,CACd;QACA,yBAAyB,CAAC,eAAe,EAAE,KAAK,CAAC,uBAAuB,CAAC,CACpE,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,OAA2B,EAC3B,eAAwE,EACpD,EAAE;IACtB,OAAO,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,yCAAK,CAAC;IAC7D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  let gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    if (screenShareComponent || /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter((p) => p.videoStream?.isAvailable).length > 0;\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  let gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    if (screenShareComponent || /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js

@@ -12,7 +12,7 @@ import { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideo
 import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
 import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
-import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
 import { OverflowGallery } from './OverflowGallery';
 /**
  * FloatingLocalVideoLayout displays remote participants and a screen sharing component in
@@ -29,10 +29,11 @@ export 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 = 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)

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EACL,6BAA6B,EAC7B,4BAA4B,EAC5B,wCAAwC,EACxC,uBAAuB,EACvB,6BAA6B,EAC9B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,8CAA8C,EAC9C,wCAAwC,EACzC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC7G,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAuBpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAe,EAAE;IAC5F,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,gCAAgC,EAChC,WAAW,EACX,YAAY,EACZ,uBAAuB,GAAG,kBAAkB,EAC5C,wBAAwB,GAAG,EAAE,EAC7B,kBAAkB;IAClB,4CAA4C,CAAC,6BAA6B,EAC3E,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,qFAAqF;IACrF,+GAA+G;IAC/G,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,wBAAwB,CAAC;QACjF,kBAAkB;QAClB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB;YACtD,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,CAAC,wBAAwB,CAAC,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC;YACvF,CAAC,CAAC,eAAe,CAAC,OAAO;QAC3B,wBAAwB;QACxB,MAAM,EAAE,oBAAoB;QAC5B,4CAA4C,CAAC,6BAA6B;KAC3E,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QAC3C,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAE5D,IAAI,CAAC,qBAAqB,IAAI,mBAAmB,EAAE,CAAC;QAClD,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACtC,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW;gBACxB,eAAe;gBACf,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC3B,kBAAkB,EAAE,GAAG,qBAAqB;YAChD,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEvC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,QAAQ,IAAI,kBAAkB,KAAK,MAAM,EAAE,CAAC;YAC9C,OAAO,6BAA6B,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;YAC7G,OAAO,QAAQ;gBACb,CAAC,CAAC,6BAA6B;gBAC/B,CAAC,CAAC,OAAO;oBACT,CAAC,CAAC,8CAA8C;oBAChD,CAAC,CAAC,wCAAwC,CAAC;QAC/C,CAAC;QACD,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,kBAAkB,EAAE,CAAC;YAChH,OAAO,kBAAkB,KAAK,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,6BAA6B,CAAC;QACpH,CAAC;QACD,OAAO,6BAA6B,CAAC;IACvC,CAAC,EAAE;QACD,oBAAoB,CAAC,MAAM;QAC3B,QAAQ;QACR,oBAAoB;QACpB,OAAO;QACP,uBAAuB;QACvB,kBAAkB;KACnB,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAC9B,CAAC,mBAAmB,IAAI,qBAAqB,CAAC,IAAI,CAAC,oBAAoB,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAChG,kGAAkG;IAClG,gCAAgC,CAAC,CAAC,CAAC,CACjC,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,wCAAwC,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE;YACzF,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,MAAM,EAAE,uBAAuB;SAChC,CAAC,IAED,mBAAmB,CACd,CACT,CAAC,CAAC,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAC5D,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CACpB,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,CACxG,IAEA,mBAAmB,CACd,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,IACjB,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,GAC1B,CACH,CACF,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,oBAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,kBAAkB,EACxC,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,CAAC,CAAC,mBAAmB,EAC5C,uBAAuB,EAAE,oBAAoB,EAC7C,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAClD,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBACrC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EACD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;IACJ,CAAC,EAAE;QACD,QAAQ;QACR,OAAO;QACP,oBAAoB;QACpB,oBAAoB;QACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;QACzB,uBAAuB;QACvB,kBAAkB;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;QACvB,WAAW;QACX,mBAAmB;KACpB,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAC3B,0BAA0B;QAC3B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK,IACJ,UAAU,EAAE,uBAAuB,KAAK,eAAe,EACvD,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,qBAAqB;YAE5B,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,yCAAK;YAC3E,oBAAoB,CAAC,CAAC,CAAC,CACtB,oBAAoB,CACrB,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IACrD,SAAS,CACC,CACd;YACA,yBAAyB,CAAC,eAAe,EAAE,KAAK,CAAC,uBAAuB,CAAC,CACpE,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,OAA2B,EAC3B,eAAwE,EACpD,EAAE;IACtB,OAAO,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,yCAAK,CAAC;IAC7D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize,\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'floatingLocalVideo',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    isShort,\n    overflowGalleryPosition,\n    localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack\n          className={mergeStyles(\n            localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)\n          )}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={!!localVideoComponent}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth,\n    localVideoComponent\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}
+{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EACL,6BAA6B,EAC7B,4BAA4B,EAC5B,wCAAwC,EACxC,uBAAuB,EACvB,6BAA6B,EAC9B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,8CAA8C,EAC9C,wCAAwC,EACzC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC7G,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,uCAAuC,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AACpH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAuBpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAe,EAAE;IAC5F,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,gCAAgC,EAChC,WAAW,EACX,YAAY,EACZ,uBAAuB,GAAG,kBAAkB,EAC5C,wBAAwB,GAAG,EAAE,EAC7B,kBAAkB;IAClB,4CAA4C,CAAC,6BAA6B,EAC3E,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,qFAAqF;IACrF,+GAA+G;IAC/G,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,cAAc,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAA,EAAA,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/F,MAAM,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,GAAG,wBAAwB,CAAC;QACjF,kBAAkB;QAClB,gBAAgB;QAChB,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uCAAuC;QACrG,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,kCAAkC,EAAE,oBAAoB;YACtD,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,CAAC,wBAAwB,CAAC,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC;YACvF,CAAC,CAAC,eAAe,CAAC,OAAO;QAC3B,wBAAwB;QACxB,MAAM,EAAE,oBAAoB;QAC5B,4CAA4C,CAAC,6BAA6B;KAC3E,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QAC3C,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAE5D,IAAI,CAAC,qBAAqB,IAAI,mBAAmB,EAAE,CAAC;QAClD,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACtC,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW;gBACxB,eAAe;gBACf,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC3B,kBAAkB,EAAE,GAAG,qBAAqB;YAChD,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEvC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,QAAQ,IAAI,kBAAkB,KAAK,MAAM,EAAE,CAAC;YAC9C,OAAO,6BAA6B,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,eAAe,EAAE,CAAC;YAC7G,OAAO,QAAQ;gBACb,CAAC,CAAC,6BAA6B;gBAC/B,CAAC,CAAC,OAAO;oBACT,CAAC,CAAC,8CAA8C;oBAChD,CAAC,CAAC,wCAAwC,CAAC;QAC/C,CAAC;QACD,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,IAAI,uBAAuB,KAAK,kBAAkB,EAAE,CAAC;YAChH,OAAO,kBAAkB,KAAK,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,6BAA6B,CAAC;QACpH,CAAC;QACD,OAAO,6BAA6B,CAAC;IACvC,CAAC,EAAE;QACD,oBAAoB,CAAC,MAAM;QAC3B,QAAQ;QACR,oBAAoB;QACpB,OAAO;QACP,uBAAuB;QACvB,kBAAkB;KACnB,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAC9B,CAAC,mBAAmB,IAAI,qBAAqB,CAAC,IAAI,CAAC,oBAAoB,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAChG,kGAAkG;IAClG,gCAAgC,CAAC,CAAC,CAAC,CACjC,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,wCAAwC,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE;YACzF,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,MAAM,EAAE,uBAAuB;SAChC,CAAC,IAED,mBAAmB,CACd,CACT,CAAC,CAAC,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAC5D,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CACpB,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,CACxG,IAEA,mBAAmB,CACd,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,IACjB,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,GAC1B,CACH,CACF,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,oBAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,kBAAkB,EACxC,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,CAAC,CAAC,mBAAmB,EAC5C,uBAAuB,EAAE,oBAAoB,EAC7C,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAClD,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,uBAAuB,EAAE,CAAC,CAAS,EAAE,EAAE;gBACrC,eAAe,CAAC,OAAO,GAAG,CAAC,CAAC;YAC9B,CAAC,EACD,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;IACJ,CAAC,EAAE;QACD,QAAQ;QACR,OAAO;QACP,oBAAoB;QACpB,oBAAoB;QACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;QACzB,uBAAuB;QACvB,kBAAkB;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;QACvB,WAAW;QACX,mBAAmB;KACpB,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAC3B,0BAA0B;QAC3B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK,IACJ,UAAU,EAAE,uBAAuB,KAAK,eAAe,EACvD,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,qBAAqB;YAE5B,KAAK,CAAC,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,yCAAK;YAC3E,oBAAoB,CAAC,CAAC,CAAC,CACtB,oBAAoB,CACrB,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IACrD,SAAS,CACC,CACd;YACA,yBAAyB,CAAC,eAAe,EAAE,KAAK,CAAC,uBAAuB,CAAC,CACpE,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,OAA2B,EAC3B,eAAwE,EACpD,EAAE;IACtB,OAAO,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,yCAAK,CAAC;IAC7D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle,\n  localVideoTileWithControlsContainerStyle,\n  LOCAL_VIDEO_TILE_ZINDEX,\n  SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport {\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    showCameraSwitcherInLocalPreview,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize,\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const remoteVideosOn = remoteParticipants.filter((p) => p.videoStream?.isAvailable).length > 0;\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'floatingLocalVideo',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    isShort,\n    overflowGalleryPosition,\n    localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (\n      // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n      showCameraSwitcherInLocalPreview ? (\n        <Stack\n          className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n            boxShadow: theme.effects.elevation8,\n            zIndex: LOCAL_VIDEO_TILE_ZINDEX\n          })}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : overflowGalleryTiles.length > 0 || screenShareComponent ? (\n        <Stack\n          className={mergeStyles(\n            localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)\n          )}\n        >\n          {localVideoComponent}\n        </Stack>\n      ) : (\n        <FloatingLocalVideo\n          localVideoComponent={localVideoComponent}\n          layerHostId={layerHostId}\n          localVideoSizeRem={localVideoSizeRem}\n          parentWidth={parentWidth}\n          parentHeight={parentHeight}\n        />\n      )\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={!!localVideoComponent}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth,\n    localVideoComponent\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/LargeGalleryLayout.js

@@ -29,7 +29,6 @@ export const LargeGalleryLayout = (props) => {
         return parentWidth && parentHeight
             ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)
             : maxRemoteVideoStreams;
-        return maxRemoteVideoStreams;
     };
     // 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.
@@ -39,7 +38,7 @@ export const LargeGalleryLayout = (props) => {
         remoteParticipants,
         localParticipant,
         dominantSpeakers,
-        maxRemoteVideoStreams: maxStreamsTrampoline(),
+        maxGridParticipants: maxStreamsTrampoline(),
         isScreenShareActive: !!screenShareComponent,
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)

package/dist/dist-esm/react-components/src/components/VideoGallery/LargeGalleryLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for {@link LargeGalleryLayout}.\n *\n * @private\n */\nexport type LargeGalleryProps = LayoutProps;\n\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\nconst REM_TO_PIXEL = 16;\nconst LARGE_GALLERY_PARTICIPANT_CAP = 48;\n/**\n * VideoGallery Layout for when user is in a large meeting and wants to see more participants\n *\n * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.\n *\n * @private\n */\nexport const LargeGalleryLayout = (props: LargeGalleryProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const maxStreamsTrampoline = (): number => {\n    return parentWidth && parentHeight\n      ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n      : maxRemoteVideoStreams;\n    return maxRemoteVideoStreams;\n  };\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(DEFAULT_CHILDREN_PER_PAGE);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams: maxStreamsTrampoline(),\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n  let activeVideoStreams = 0;\n\n  let gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    if (screenShareComponent || /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n\nconst calculateMaxTilesInLargeGrid = (parentWidth: number, parentHeight: number): number => {\n  const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));\n  const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));\n  return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP\n    ? xAxisTiles * yAxisTiles\n    : LARGE_GALLERY_PARTICIPANT_CAP;\n};\n"]}
+{"version":3,"file":"LargeGalleryLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LargeGalleryLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useRef, useState } from 'react';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { OverflowGallery } from './OverflowGallery';\nimport { GridLayout } from '../GridLayout';\nimport { Stack } from '@fluentui/react';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { VERTICAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for {@link LargeGalleryLayout}.\n *\n * @private\n */\nexport type LargeGalleryProps = LayoutProps;\n\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\nconst REM_TO_PIXEL = 16;\nconst LARGE_GALLERY_PARTICIPANT_CAP = 48;\n/**\n * VideoGallery Layout for when user is in a large meeting and wants to see more participants\n *\n * Caps the number of tiles that a participant can see in the grid to 49, Video and Audio.\n *\n * @private\n */\nexport const LargeGalleryLayout = (props: LargeGalleryProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  const maxStreamsTrampoline = (): number => {\n    return parentWidth && parentHeight\n      ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)\n      : maxRemoteVideoStreams;\n  };\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(DEFAULT_CHILDREN_PER_PAGE);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: maxStreamsTrampoline(),\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery',\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds\n  });\n  let activeVideoStreams = 0;\n\n  let gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    if (screenShareComponent || /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n\nconst calculateMaxTilesInLargeGrid = (parentWidth: number, parentHeight: number): number => {\n  const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));\n  const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));\n  return xAxisTiles * yAxisTiles < LARGE_GALLERY_PARTICIPANT_CAP\n    ? xAxisTiles * yAxisTiles\n    : LARGE_GALLERY_PARTICIPANT_CAP;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/SpeakerVideoLayout.js

@@ -29,7 +29,7 @@ export const SpeakerVideoLayout = (props) => {
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
-        maxRemoteVideoStreams,
+        maxGridParticipants: maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
         maxOverflowGalleryDominantSpeakers: screenShareComponent
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)

package/dist/dist-esm/react-components/src/components/VideoGallery/SpeakerVideoLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeakerVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { LocalVideoTileSize } from '../VideoGallery';\nimport { LayoutProps } from './Layout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { OverflowGallery } from './OverflowGallery';\nimport {\n  SMALL_FLOATING_MODAL_SIZE_REM,\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle\n} from './styles/FloatingLocalVideo.styles';\nimport {\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { GridLayout } from '../GridLayout';\nimport { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link SpeakerVideoLayout}.\n *\n * @private\n */\nexport interface SpeakerVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * Layout for the gallery mode to highlight the current dominant speaker\n *\n * @private\n */\nexport const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'speaker'\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    isShort,\n    overflowGalleryPosition,\n    localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    localVideoComponent || (screenShareComponent && localVideoComponent) ? (\n      <Stack\n        className={mergeStyles(\n          localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)\n        )}\n      >\n        {localVideoComponent}\n      </Stack>\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={!!localVideoComponent}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth,\n    localVideoComponent\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}
+{"version":3,"file":"SpeakerVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { LocalVideoTileSize } from '../VideoGallery';\nimport { LayoutProps } from './Layout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { OverflowGallery } from './OverflowGallery';\nimport {\n  SMALL_FLOATING_MODAL_SIZE_REM,\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle\n} from './styles/FloatingLocalVideo.styles';\nimport {\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { GridLayout } from '../GridLayout';\nimport { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link SpeakerVideoLayout}.\n *\n * @private\n */\nexport interface SpeakerVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * Layout for the gallery mode to highlight the current dominant speaker\n *\n * @private\n */\nexport const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'speaker'\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable &&\n            indexesToRender &&\n            indexesToRender.includes(i) &&\n            activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    isShort,\n    overflowGalleryPosition,\n    localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    localVideoComponent || (screenShareComponent && localVideoComponent) ? (\n      <Stack\n        className={mergeStyles(\n          localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)\n        )}\n      >\n        {localVideoComponent}\n      </Stack>\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={!!localVideoComponent}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth,\n    localVideoComponent\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.d.ts

@@ -9,7 +9,7 @@ export interface OrganizedParticipantsArgs {
     remoteParticipants: VideoGalleryRemoteParticipant[];
     localParticipant?: VideoGalleryParticipant;
     dominantSpeakers?: string[];
-    maxRemoteVideoStreams?: number;
+    maxGridParticipants?: number;
     maxOverflowGalleryDominantSpeakers?: number;
     isScreenShareActive?: boolean;
     pinnedParticipantUserIds?: string[];
@@ -26,6 +26,10 @@ export interface OrganizedParticipantsResult {
     gridParticipants: VideoGalleryParticipant[];
     overflowGalleryParticipants: VideoGalleryParticipant[];
 }
+/**
+ * @private
+ */
+export declare const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 /**
  * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private

package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js

@@ -4,12 +4,12 @@ import { useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const DEFAULT_MAX_VIDEO_SREAMS = 4;
-const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
+/**
+ * @private
+ */
+export 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;
@@ -17,8 +17,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])
@@ -43,14 +43,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 };
@@ -78,7 +78,7 @@ export 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;
@@ -101,12 +101,12 @@ 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);
     return args.gridParticipants.length > 0
         ? args.gridParticipants
-        : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams);
+        : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants);
 };
 const getOverflowGalleryRemoteParticipants = (args) => {
     if (args.isScreenShareActive) {
@@ -123,12 +123,12 @@ 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)
                 : [];
         return args.gridParticipants.length > 0
             ? args.overflowGalleryParticipants
-            : args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams);
+            : args.overflowGalleryParticipants.slice(args.maxGridParticipants);
     }
 };
 const putVideoParticipantsFirst = (remoteParticipants) => {