@azure/communication-react 1.14.1-alpha-202403290012 → 1.14.1-alpha-202404020012

package/dist/dist-esm/react-components/src/components/SendBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { ActiveFileUpload, _AttachmentUploadCards } from './AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from './styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedFileUploads, hasIncompleteFileUploads } from './utils/SendBoxUtils';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText } from './utils/SendBoxUtils';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Error message indicating that all attachment uploads are not complete.\n   */\n  attachmentUploadsPendingError: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user when focus is on cancel attachment upload button.\n   */\n  removeAttachment: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user attachment uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user attachment is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\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-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-download) @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  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(attachment-download) @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  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeFileUploads\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteFileUploads(activeFileUploads)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\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-download) @conditional-compile-remove(attachment-upload) */ hasCompletedFileUploads(\n        activeFileUploads\n      )\n    ) {\n      onSendMessage && onSendMessage(message);\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setTextValueOverflow(isMessageTooLong(newValue.length));\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      sendIconStyle({\n        theme,\n        hasText: !!textValue,\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFile:\n          hasCompletedFileUploads(activeFileUploads),\n        hasErrorMessage: !!errorMessage,\n        customSendIconStyle: styles?.sendMessageIcon\n      }),\n    [\n      theme,\n      textValue,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeFileUploads,\n      errorMessage,\n      styles?.sendMessageIcon\n    ]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setAttachmentUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      attachmentUploadError: activeFileUploads?.filter((attachmentUpload) => attachmentUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, attachmentUploadsPendingError]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeFileUploads={activeFileUploads}\n            onCancelFileUpload={props.onCancelFileUpload}\n            strings={{\n              removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,\n              uploading: props.strings?.uploading ?? localeStrings.uploading,\n              uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeFileUploads,\n    props,\n    theme,\n    localeStrings.removeAttachment,\n    localeStrings.uploading,\n    localeStrings.uploadCompleted\n  ]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      {\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ <SendBoxErrors\n          {...sendBoxErrorsProps}\n        />\n      }\n      <Stack\n        className={borderAndBoxShadowStyle({\n          theme,\n          hasErrorMessage: !!errorMessage,\n          disabled: !!disabled\n        })}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxComponent } from './InputBoxComponent';\nimport { InputBoxButton } from './InputBoxButton';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from './AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../types/Attachment';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from './styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from './utils/SendBoxUtils';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, isMessageTooLong, sanitizeText } from './utils/SendBoxUtils';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../theming/FluentV9ThemeProvider';\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Error message indicating that all attachment uploads are not complete.\n   */\n  attachmentUploadsPendingError: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user when focus is on cancel attachment upload button.\n   */\n  removeAttachment: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user attachment uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Aria label to notify user attachment is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\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-download) @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. Attachment uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-download) @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  /* @conditional-compile-remove(attachment-download) @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?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions,\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\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-download) @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(\n        activeAttachmentUploads\n      )\n    ) {\n      onSendMessage && onSendMessage(message);\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setTextValueOverflow(isMessageTooLong(newValue.length));\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      sendIconStyle({\n        theme,\n        hasText: !!textValue,\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ hasFile:\n          hasCompletedAttachmentUploads(activeAttachmentUploads),\n        hasErrorMessage: !!errorMessage,\n        customSendIconStyle: styles?.sendMessageIcon\n      }),\n    [\n      theme,\n      textValue,\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,\n      errorMessage,\n      styles?.sendMessageIcon\n    ]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  React.useEffect(() => {\n    if (!activeAttachmentUploads?.filter((upload) => !upload.uploadError).length) {\n      setAttachmentUploadsPendingError(undefined);\n    }\n  }, [activeAttachmentUploads]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      attachmentUploadError: activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()\n        ?.uploadError\n    };\n  }, [activeAttachmentUploads, attachmentUploadsPendingError]);\n\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    if (!activeAttachmentUploads?.filter((upload) => !upload.uploadError).length) {\n      return null;\n    }\n    return props.onRenderAttachmentUploads ? (\n      props.onRenderAttachmentUploads()\n    ) : (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={activeAttachmentUploads}\n            onCancelAttachmentUpload={props.onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: props.strings?.removeAttachment ?? localeStrings.removeAttachment,\n              uploading: props.strings?.uploading ?? localeStrings.uploading,\n              uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeAttachmentUploads,\n    props,\n    theme,\n    localeStrings.removeAttachment,\n    localeStrings.uploading,\n    localeStrings.uploadCompleted\n  ]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      {\n        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ <SendBoxErrors\n          {...sendBoxErrorsProps}\n        />\n      }\n      <Stack\n        className={borderAndBoxShadowStyle({\n          theme,\n          hasErrorMessage: !!errorMessage,\n          disabled: !!disabled\n        })}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n          onRenderAttachmentUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.d.ts

@@ -39,6 +39,14 @@ export interface _VideoBackgroundEffectsPickerProps {
      * Styles for the picker.
      */
     styles?: _VideoBackgroundEffectsPickerStyles;
+    /**
+     * Used only for jest tests. If `true`, the autofocus-on-mount will be ignored when the component mounts.
+     * If not, jest tries to cleanup after the first render pass, but the component throws an error because
+     * it tries to display a tooltip after that render pass and after the component is cleaned up.
+     *
+     * This can be removed once: https://github.com/microsoft/fluentui/issues/30896 is fixed.
+     */
+    ignoreFocusOnMount?: boolean;
 }
 /**
  * Option for the {@link _VideoBackgroundEffectsPicker}.

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js

@@ -45,7 +45,7 @@ export const _VideoBackgroundEffectsPicker = (props) => {
             return (React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
                 options.map((option, i) => {
                     if (i === 0 && rowIndex === 0) {
-                        return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, focusOnMount: true })));
+                        return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, focusOnMount: true && !props.ignoreFocusOnMount })));
                     }
                     return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
                 }),

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n    string | undefined\n  >(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n\n  return (\n    <Stack tokens={{ childrenGap: '0.5rem' }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => (\n        <Stack\n          className={mergeStyles(props.styles?.rowRoot)}\n          wrap={props.itemsPerRow === 'wrap'}\n          horizontal\n          key={rowIndex}\n          tokens={{ childrenGap: '0.5rem' }}\n          data-ui-id=\"video-effects-picker-row\"\n        >\n          {options.map((option, i) => {\n            if (i === 0 && rowIndex === 0) {\n              return (\n                <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} focusOnMount={true} />\n              );\n            }\n            return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n          })}\n          {fillCount > 0 &&\n            rowIndex === optionsByRow.length - 1 &&\n            Array.from({ length: fillCount }).map((_, index) => (\n              <Stack\n                key={index}\n                styles={hiddenVideoEffectsItemContainerStyles}\n                data-ui-id=\"video-effects-hidden-item\"\n              />\n            ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n\n  /**\n   * Used only for jest tests. If `true`, the autofocus-on-mount will be ignored when the component mounts.\n   * If not, jest tries to cleanup after the first render pass, but the component throws an error because\n   * it tries to display a tooltip after that render pass and after the component is cleaned up.\n   *\n   * This can be removed once: https://github.com/microsoft/fluentui/issues/30896 is fixed.\n   */\n  ignoreFocusOnMount?: boolean;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n    string | undefined\n  >(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n\n  return (\n    <Stack tokens={{ childrenGap: '0.5rem' }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => (\n        <Stack\n          className={mergeStyles(props.styles?.rowRoot)}\n          wrap={props.itemsPerRow === 'wrap'}\n          horizontal\n          key={rowIndex}\n          tokens={{ childrenGap: '0.5rem' }}\n          data-ui-id=\"video-effects-picker-row\"\n        >\n          {options.map((option, i) => {\n            if (i === 0 && rowIndex === 0) {\n              return (\n                <_VideoEffectsItem\n                  {...option}\n                  itemKey={option.itemKey}\n                  key={option.itemKey}\n                  focusOnMount={true && !props.ignoreFocusOnMount}\n                />\n              );\n            }\n            return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n          })}\n          {fillCount > 0 &&\n            rowIndex === optionsByRow.length - 1 &&\n            Array.from({ length: fillCount }).map((_, index) => (\n              <Stack\n                key={index}\n                styles={hiddenVideoEffectsItemContainerStyles}\n                data-ui-id=\"video-effects-hidden-item\"\n              />\n            ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}

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

@@ -3,7 +3,7 @@
 /* @conditional-compile-remove(reaction) */
 import React, { useCallback, useEffect, useState } from 'react';
 /* @conditional-compile-remove(reaction) */
-import { getEmojiResource } from './utils/videoGalleryLayoutUtils';
+import { getEmojiFrameCount, getEmojiResource } from './utils/videoGalleryLayoutUtils';
 /* @conditional-compile-remove(reaction) */
 import { Stack, mergeStyles } from '@fluentui/react';
 /* @conditional-compile-remove(reaction) */
@@ -23,7 +23,10 @@ export const ParticipantVideoTileOverlay = React.memo((props) => {
     const [isValidImageSource, setIsValidImageSource] = useState(false);
     const backgroundImageUrl = reaction !== undefined && reactionResources !== undefined
         ? getEmojiResource(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, reactionResources)
-        : '';
+        : undefined;
+    const frameCount = reaction !== undefined && reactionResources !== undefined
+        ? getEmojiFrameCount(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, reactionResources)
+        : undefined;
     const currentUnixTimeStamp = Date.now();
     const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;
     const canRenderReaction = (receivedUnixTimestamp
@@ -43,8 +46,9 @@ export const ParticipantVideoTileOverlay = React.memo((props) => {
     const spriteImageUrl = backgroundImageUrl !== null && backgroundImageUrl !== void 0 ? backgroundImageUrl : undefined;
     const reactionContainerStyles = useCallback(() => reactionRenderingStyle({
         spriteImageUrl,
-        emojiSize: emojiSize
-    }), [spriteImageUrl, emojiSize]);
+        emojiSize: emojiSize,
+        frameCount
+    }), [spriteImageUrl, emojiSize, frameCount]);
     return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
             display: 'flex',
             justifyContent: 'center',

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantVideoTileOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ParticipantVideoTileOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport React, { useCallback, useEffect, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction, ReactionResources } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(reaction) */\nimport { Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { reactionRenderingStyle, videoContainerStyles } from '../styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport {\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Reaction overlay component for Grid\n *\n * Can be used with {@link MeetingReactionOverlay}.\n *\n * @internal\n */\nexport const ParticipantVideoTileOverlay = React.memo(\n  (props: { reaction?: Reaction; reactionResources: ReactionResources; emojiSize?: number }) => {\n    const { reaction, reactionResources, emojiSize = REACTION_START_DISPLAY_SIZE } = props;\n    const [isValidImageSource, setIsValidImageSource] = useState<boolean>(false);\n\n    const backgroundImageUrl =\n      reaction !== undefined && reactionResources !== undefined\n        ? getEmojiResource(reaction?.reactionType, reactionResources)\n        : '';\n\n    const currentUnixTimeStamp = Date.now();\n    const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;\n    const canRenderReaction =\n      (receivedUnixTimestamp\n        ? currentUnixTimeStamp - receivedUnixTimestamp < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS\n        : false) && backgroundImageUrl !== undefined;\n\n    useEffect(() => {\n      if (!backgroundImageUrl || backgroundImageUrl.length === 0) {\n        return;\n      }\n\n      fetch(`${backgroundImageUrl}`)\n        .then((res) => {\n          setIsValidImageSource(res.ok);\n        })\n        .catch((warning) => console.warn(`Sprite image for animation rendering failed with warning: ${warning}`));\n\n      return () => setIsValidImageSource(false);\n    }, [backgroundImageUrl]);\n\n    const spriteImageUrl = backgroundImageUrl ?? undefined;\n    const reactionContainerStyles = useCallback(\n      () =>\n        reactionRenderingStyle({\n          spriteImageUrl,\n          emojiSize: emojiSize\n        }),\n      [spriteImageUrl, emojiSize]\n    );\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent'\n        })}\n      >\n        <div style={{ height: '33.33%' }}></div>\n        {canRenderReaction && isValidImageSource && (\n          <div style={{ minHeight: '84px', height: '84px', width: '84px' }}>\n            <div className={reactionContainerStyles()} />\n          </div>\n        )}\n      </Stack>\n    );\n  }\n);\n"]}
+{"version":3,"file":"ParticipantVideoTileOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ParticipantVideoTileOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport React, { useCallback, useEffect, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction, ReactionResources } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { getEmojiFrameCount, getEmojiResource } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(reaction) */\nimport { Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { reactionRenderingStyle, videoContainerStyles } from '../styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport {\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Reaction overlay component for Grid\n *\n * Can be used with {@link MeetingReactionOverlay}.\n *\n * @internal\n */\nexport const ParticipantVideoTileOverlay = React.memo(\n  (props: { reaction?: Reaction; reactionResources: ReactionResources; emojiSize?: number }) => {\n    const { reaction, reactionResources, emojiSize = REACTION_START_DISPLAY_SIZE } = props;\n    const [isValidImageSource, setIsValidImageSource] = useState<boolean>(false);\n\n    const backgroundImageUrl =\n      reaction !== undefined && reactionResources !== undefined\n        ? getEmojiResource(reaction?.reactionType, reactionResources)\n        : undefined;\n\n    const frameCount =\n      reaction !== undefined && reactionResources !== undefined\n        ? getEmojiFrameCount(reaction?.reactionType, reactionResources)\n        : undefined;\n\n    const currentUnixTimeStamp = Date.now();\n    const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;\n    const canRenderReaction =\n      (receivedUnixTimestamp\n        ? currentUnixTimeStamp - receivedUnixTimestamp < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS\n        : false) && backgroundImageUrl !== undefined;\n\n    useEffect(() => {\n      if (!backgroundImageUrl || backgroundImageUrl.length === 0) {\n        return;\n      }\n\n      fetch(`${backgroundImageUrl}`)\n        .then((res) => {\n          setIsValidImageSource(res.ok);\n        })\n        .catch((warning) => console.warn(`Sprite image for animation rendering failed with warning: ${warning}`));\n\n      return () => setIsValidImageSource(false);\n    }, [backgroundImageUrl]);\n\n    const spriteImageUrl = backgroundImageUrl ?? undefined;\n    const reactionContainerStyles = useCallback(\n      () =>\n        reactionRenderingStyle({\n          spriteImageUrl,\n          emojiSize: emojiSize,\n          frameCount\n        }),\n      [spriteImageUrl, emojiSize, frameCount]\n    );\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: canRenderReaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent'\n        })}\n      >\n        <div style={{ height: '33.33%' }}></div>\n        {canRenderReaction && isValidImageSource && (\n          <div style={{ minHeight: '84px', height: '84px', width: '84px' }}>\n            <div className={reactionContainerStyles()} />\n          </div>\n        )}\n      </Stack>\n    );\n  }\n);\n"]}

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

@@ -78,7 +78,7 @@ export const RemoteContentShareReactionOverlay = React.memo((props) => {
                 reaction: reaction,
                 id: combinedKey,
                 reactionMovementIndex: reactionMovementIndex,
-                styleBucket: getReactionStyleBucket(reactionMovementIndex)
+                styleBucket: getReactionStyleBucket()
             }
         ]);
         return;
@@ -119,8 +119,8 @@ export const RemoteContentShareReactionOverlay = React.memo((props) => {
     };
     const containerHeight = hostDivHeight !== null && hostDivHeight !== void 0 ? hostDivHeight : 0;
     const containerWidth = hostDivWidth !== null && hostDivWidth !== void 0 ? hostDivWidth : 0;
-    const styleBucket = (activeSprites) => getReactionStyleBucket(activeSprites);
-    const displaySizePx = (activeSprites) => REACTION_START_DISPLAY_SIZE * styleBucket(activeSprites).sizeScale;
+    const styleBucket = () => getReactionStyleBucket();
+    const displaySizePx = () => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;
     const leftPosition = (position) => generateStartPositionWave(position, containerWidth / 2, true);
     const reactionMovementStyle = (position) => getReactionMovementStyle(leftPosition(position));
     return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
@@ -143,7 +143,7 @@ export const RemoteContentShareReactionOverlay = React.memo((props) => {
                         removeVisibleReaction(reaction.reaction.reactionType, reaction.id, reaction.reactionMovementIndex);
                     }, style: opacityAnimationStyles(reaction.styleBucket.opacityMax) },
                     React.createElement("div", { style: reactionMovementStyle(reaction.reactionMovementIndex) },
-                        React.createElement("div", { style: spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, displaySizePx(visibleReactions.length), (_a = getEmojiResource(reaction === null || reaction === void 0 ? void 0 : reaction.reaction.reactionType, reactionResources)) !== null && _a !== void 0 ? _a : '') }))))))));
+                        React.createElement("div", { style: spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, displaySizePx(), (_a = getEmojiResource(reaction === null || reaction === void 0 ? void 0 : reaction.reaction.reactionType, reactionResources)) !== null && _a !== void 0 ? _a : '') }))))))));
     })));
 });
 //# sourceMappingURL=RemoteContentShareReactionOverlay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteContentShareReactionOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { videoContainerStyles } from '../styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(reaction) */\nimport {\n  IReactionStyleBucket,\n  generateStartPositionWave,\n  getReactionMovementStyle,\n  getReactionStyleBucket,\n  moveAnimationStyles,\n  opacityAnimationStyles,\n  reactionOverlayStyle,\n  spriteAnimationStyles\n} from '../styles/ReactionOverlay.style';\n/* @conditional-compile-remove(reaction) */\nimport {\n  REACTION_NUMBER_OF_ANIMATION_FRAMES,\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getCombinedKey,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\n/* @conditional-compile-remove(reaction) */\ntype VisibleReaction = {\n  reaction: Reaction;\n  id: string;\n  reactionMovementIndex: number;\n  styleBucket: IReactionStyleBucket;\n};\n\n/* @conditional-compile-remove(reaction) */\ntype ReceivedReaction = {\n  id: string;\n  status: 'animating' | 'completedAnimating' | 'ignored';\n};\n\n/* @conditional-compile-remove(reaction) */\nconst MAX_NUMBER_OF_EMOJIS = 50;\n/* @conditional-compile-remove(reaction) */\nconst NUMBER_OF_EMOJI_TYPES = 5;\n/* @conditional-compile-remove(reaction) */\nconst REACTION_POSITION_ARRAY_SIZE = 55;\n\n/* @conditional-compile-remove(reaction) */\n/**\n * The overlay responsible for rendering multiple reactions all at once in presentation mode\n * @internal\n */\nexport const RemoteContentShareReactionOverlay = React.memo(\n  (props: {\n    reactionResources: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    hostDivHeight?: number;\n    hostDivWidth?: number;\n  }) => {\n    const { reactionResources, localParticipant, remoteParticipants, hostDivHeight, hostDivWidth } = props;\n\n    // Reactions that are currently being animated\n    const [visibleReactions, setVisibleReactions] = useState<VisibleReaction[]>([]);\n\n    // Dictionary of userId to a reaction status. This is used to track the latest received reaction\n    // per user to avoid animating the same reaction multiple times and to limit the number of\n    // active reactions of a certain type.\n    const latestReceivedReaction = useRef<Record<string, ReceivedReaction>>({});\n\n    // Track the number of active reactions of each type to limit the number of active reactions\n    // of a certain type.\n    const activeTypeCount = useRef<Record<string, number>>({\n      like: 0,\n      heart: 0,\n      laugh: 0,\n      applause: 0,\n      surprised: 0\n    });\n\n    // Used to track the total number of reactions ever played. This is a helper variable\n    // to calculate the reaction movement index (i.e. the .left position of the reaction)\n    const visibleReactionPosition = useRef<boolean[]>(new Array<boolean>(REACTION_POSITION_ARRAY_SIZE).fill(false));\n\n    const remoteParticipantReactions: Reaction[] = useMemo(\n      () =>\n        remoteParticipants\n          ?.map((remoteParticipant) => remoteParticipant.reaction)\n          .filter((reaction): reaction is Reaction => !!reaction) ?? [],\n      [remoteParticipants]\n    );\n\n    const findFirstEmptyPosition = (): number => {\n      return visibleReactionPosition.current.findIndex((item) => item === false);\n    };\n\n    const updateVisibleReactions = useCallback(\n      (reaction: Reaction, userId: string): void => {\n        const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);\n\n        const alreadyHandled = latestReceivedReaction.current[userId]?.id === combinedKey;\n        if (alreadyHandled) {\n          return;\n        }\n\n        const activeCount = activeTypeCount.current[reaction.reactionType];\n\n        if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {\n          latestReceivedReaction.current[userId] = {\n            id: combinedKey,\n            status: 'ignored'\n          };\n          return;\n        }\n\n        activeTypeCount.current[reaction.reactionType] += 1;\n        latestReceivedReaction.current[userId] = {\n          id: combinedKey,\n          status: 'animating'\n        };\n        const reactionMovementIndex = findFirstEmptyPosition();\n        visibleReactionPosition.current[reactionMovementIndex] = true;\n        setVisibleReactions([\n          ...visibleReactions,\n          {\n            reaction: reaction,\n            id: combinedKey,\n            reactionMovementIndex: reactionMovementIndex,\n            styleBucket: getReactionStyleBucket(reactionMovementIndex)\n          }\n        ]);\n        return;\n      },\n      [activeTypeCount, visibleReactions]\n    );\n\n    const removeVisibleReaction = (reactionType: string, id: string, index: number): void => {\n      setVisibleReactions(visibleReactions.filter((reaction) => reaction.id !== id));\n      visibleReactionPosition.current[index] = false;\n      activeTypeCount.current[reactionType] -= 1;\n      Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {\n        if (reaction.id === id) {\n          latestReceivedReaction.current[userId].status = 'completedAnimating';\n        }\n      });\n    };\n\n    // Update visible reactions when local participant sends a reaction\n    useEffect(() => {\n      if (localParticipant?.reaction) {\n        updateVisibleReactions(localParticipant.reaction, localParticipant.userId);\n      }\n    }, [localParticipant, updateVisibleReactions]);\n\n    // Update visible reactions when remote participants send a reaction\n    useEffect(() => {\n      remoteParticipants?.map((participant) => {\n        if (participant?.reaction) {\n          updateVisibleReactions(participant.reaction, participant.userId);\n        }\n      });\n    }, [remoteParticipantReactions, remoteParticipants, updateVisibleReactions]);\n\n    // Note: canRenderReaction shouldn't be needed as we remove the animation on the onAnimationEnd event\n    const canRenderReaction = (reaction: Reaction, id: string, movementIndex: number): boolean => {\n      // compare current time to reaction.received at and see if more than 4 seconds has elapsed\n      const canRender = Date.now() - getReceivedUnixTime(reaction.receivedOn) < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS;\n\n      // Clean up the reaction if it's not in the visible reaction list\n      if (!canRender) {\n        removeVisibleReaction(reaction?.reactionType, id, movementIndex);\n      }\n\n      return canRender;\n    };\n\n    const containerHeight = hostDivHeight ?? 0;\n    const containerWidth = hostDivWidth ?? 0;\n\n    const styleBucket = (activeSprites: number): IReactionStyleBucket => getReactionStyleBucket(activeSprites);\n    const displaySizePx = (activeSprites: number): number =>\n      REACTION_START_DISPLAY_SIZE * styleBucket(activeSprites).sizeScale;\n\n    const leftPosition = (position: number): number => generateStartPositionWave(position, containerWidth / 2, true);\n    const reactionMovementStyle = (position: number): React.CSSProperties =>\n      getReactionMovementStyle(leftPosition(position));\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: 'transparent'\n        })}\n      >\n        {visibleReactions.map((reaction) => (\n          <div key={reaction.id} style={reactionOverlayStyle}>\n            <div className=\"reaction-item\">\n              {canRenderReaction(reaction.reaction, reaction.id, reaction.reactionMovementIndex) && (\n                // First div - Section that fixes the travel height and applies the movement animation\n                // Second div - Keeps track of active sprites and responsible for marking, counting\n                //              and removing reactions. Responsible for opacity controls as the sprite emoji animates\n                // Third div - Responsible for calculating the point of X axis where the reaction will start animation\n                // Fourth div - Play Animation as the other animation applies on the base play animation for the sprite\n                <div\n                  style={moveAnimationStyles(\n                    containerHeight / 2, // dividing by two because reactionOverlayStyle height is set to 50%\n                    (containerHeight / 2) * (1 - reaction.styleBucket.heightMaxScale)\n                  )}\n                >\n                  <div\n                    onAnimationEnd={() => {\n                      removeVisibleReaction(\n                        reaction.reaction.reactionType,\n                        reaction.id,\n                        reaction.reactionMovementIndex\n                      );\n                    }}\n                    style={opacityAnimationStyles(reaction.styleBucket.opacityMax)}\n                  >\n                    <div style={reactionMovementStyle(reaction.reactionMovementIndex)}>\n                      <div\n                        style={spriteAnimationStyles(\n                          REACTION_NUMBER_OF_ANIMATION_FRAMES,\n                          displaySizePx(visibleReactions.length),\n                          getEmojiResource(reaction?.reaction.reactionType, reactionResources) ?? ''\n                        )}\n                      />\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </Stack>\n    );\n  }\n);\n"]}
+{"version":3,"file":"RemoteContentShareReactionOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { videoContainerStyles } from '../styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(reaction) */\nimport {\n  IReactionStyleBucket,\n  generateStartPositionWave,\n  getReactionMovementStyle,\n  getReactionStyleBucket,\n  moveAnimationStyles,\n  opacityAnimationStyles,\n  reactionOverlayStyle,\n  spriteAnimationStyles\n} from '../styles/ReactionOverlay.style';\n/* @conditional-compile-remove(reaction) */\nimport {\n  REACTION_NUMBER_OF_ANIMATION_FRAMES,\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getCombinedKey,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\n/* @conditional-compile-remove(reaction) */\ntype VisibleReaction = {\n  reaction: Reaction;\n  id: string;\n  reactionMovementIndex: number;\n  styleBucket: IReactionStyleBucket;\n};\n\n/* @conditional-compile-remove(reaction) */\ntype ReceivedReaction = {\n  id: string;\n  status: 'animating' | 'completedAnimating' | 'ignored';\n};\n\n/* @conditional-compile-remove(reaction) */\nconst MAX_NUMBER_OF_EMOJIS = 50;\n/* @conditional-compile-remove(reaction) */\nconst NUMBER_OF_EMOJI_TYPES = 5;\n/* @conditional-compile-remove(reaction) */\nconst REACTION_POSITION_ARRAY_SIZE = 55;\n\n/* @conditional-compile-remove(reaction) */\n/**\n * The overlay responsible for rendering multiple reactions all at once in presentation mode\n * @internal\n */\nexport const RemoteContentShareReactionOverlay = React.memo(\n  (props: {\n    reactionResources: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    hostDivHeight?: number;\n    hostDivWidth?: number;\n  }) => {\n    const { reactionResources, localParticipant, remoteParticipants, hostDivHeight, hostDivWidth } = props;\n\n    // Reactions that are currently being animated\n    const [visibleReactions, setVisibleReactions] = useState<VisibleReaction[]>([]);\n\n    // Dictionary of userId to a reaction status. This is used to track the latest received reaction\n    // per user to avoid animating the same reaction multiple times and to limit the number of\n    // active reactions of a certain type.\n    const latestReceivedReaction = useRef<Record<string, ReceivedReaction>>({});\n\n    // Track the number of active reactions of each type to limit the number of active reactions\n    // of a certain type.\n    const activeTypeCount = useRef<Record<string, number>>({\n      like: 0,\n      heart: 0,\n      laugh: 0,\n      applause: 0,\n      surprised: 0\n    });\n\n    // Used to track the total number of reactions ever played. This is a helper variable\n    // to calculate the reaction movement index (i.e. the .left position of the reaction)\n    const visibleReactionPosition = useRef<boolean[]>(new Array<boolean>(REACTION_POSITION_ARRAY_SIZE).fill(false));\n\n    const remoteParticipantReactions: Reaction[] = useMemo(\n      () =>\n        remoteParticipants\n          ?.map((remoteParticipant) => remoteParticipant.reaction)\n          .filter((reaction): reaction is Reaction => !!reaction) ?? [],\n      [remoteParticipants]\n    );\n\n    const findFirstEmptyPosition = (): number => {\n      return visibleReactionPosition.current.findIndex((item) => item === false);\n    };\n\n    const updateVisibleReactions = useCallback(\n      (reaction: Reaction, userId: string): void => {\n        const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);\n\n        const alreadyHandled = latestReceivedReaction.current[userId]?.id === combinedKey;\n        if (alreadyHandled) {\n          return;\n        }\n\n        const activeCount = activeTypeCount.current[reaction.reactionType];\n\n        if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {\n          latestReceivedReaction.current[userId] = {\n            id: combinedKey,\n            status: 'ignored'\n          };\n          return;\n        }\n\n        activeTypeCount.current[reaction.reactionType] += 1;\n        latestReceivedReaction.current[userId] = {\n          id: combinedKey,\n          status: 'animating'\n        };\n        const reactionMovementIndex = findFirstEmptyPosition();\n        visibleReactionPosition.current[reactionMovementIndex] = true;\n        setVisibleReactions([\n          ...visibleReactions,\n          {\n            reaction: reaction,\n            id: combinedKey,\n            reactionMovementIndex: reactionMovementIndex,\n            styleBucket: getReactionStyleBucket()\n          }\n        ]);\n        return;\n      },\n      [activeTypeCount, visibleReactions]\n    );\n\n    const removeVisibleReaction = (reactionType: string, id: string, index: number): void => {\n      setVisibleReactions(visibleReactions.filter((reaction) => reaction.id !== id));\n      visibleReactionPosition.current[index] = false;\n      activeTypeCount.current[reactionType] -= 1;\n      Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {\n        if (reaction.id === id) {\n          latestReceivedReaction.current[userId].status = 'completedAnimating';\n        }\n      });\n    };\n\n    // Update visible reactions when local participant sends a reaction\n    useEffect(() => {\n      if (localParticipant?.reaction) {\n        updateVisibleReactions(localParticipant.reaction, localParticipant.userId);\n      }\n    }, [localParticipant, updateVisibleReactions]);\n\n    // Update visible reactions when remote participants send a reaction\n    useEffect(() => {\n      remoteParticipants?.map((participant) => {\n        if (participant?.reaction) {\n          updateVisibleReactions(participant.reaction, participant.userId);\n        }\n      });\n    }, [remoteParticipantReactions, remoteParticipants, updateVisibleReactions]);\n\n    // Note: canRenderReaction shouldn't be needed as we remove the animation on the onAnimationEnd event\n    const canRenderReaction = (reaction: Reaction, id: string, movementIndex: number): boolean => {\n      // compare current time to reaction.received at and see if more than 4 seconds has elapsed\n      const canRender = Date.now() - getReceivedUnixTime(reaction.receivedOn) < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS;\n\n      // Clean up the reaction if it's not in the visible reaction list\n      if (!canRender) {\n        removeVisibleReaction(reaction?.reactionType, id, movementIndex);\n      }\n\n      return canRender;\n    };\n\n    const containerHeight = hostDivHeight ?? 0;\n    const containerWidth = hostDivWidth ?? 0;\n\n    const styleBucket = (): IReactionStyleBucket => getReactionStyleBucket();\n    const displaySizePx = (): number => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;\n\n    const leftPosition = (position: number): number => generateStartPositionWave(position, containerWidth / 2, true);\n    const reactionMovementStyle = (position: number): React.CSSProperties =>\n      getReactionMovementStyle(leftPosition(position));\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: 'transparent'\n        })}\n      >\n        {visibleReactions.map((reaction) => (\n          <div key={reaction.id} style={reactionOverlayStyle}>\n            <div className=\"reaction-item\">\n              {canRenderReaction(reaction.reaction, reaction.id, reaction.reactionMovementIndex) && (\n                // First div - Section that fixes the travel height and applies the movement animation\n                // Second div - Keeps track of active sprites and responsible for marking, counting\n                //              and removing reactions. Responsible for opacity controls as the sprite emoji animates\n                // Third div - Responsible for calculating the point of X axis where the reaction will start animation\n                // Fourth div - Play Animation as the other animation applies on the base play animation for the sprite\n                <div\n                  style={moveAnimationStyles(\n                    containerHeight / 2, // dividing by two because reactionOverlayStyle height is set to 50%\n                    (containerHeight / 2) * (1 - reaction.styleBucket.heightMaxScale)\n                  )}\n                >\n                  <div\n                    onAnimationEnd={() => {\n                      removeVisibleReaction(\n                        reaction.reaction.reactionType,\n                        reaction.id,\n                        reaction.reactionMovementIndex\n                      );\n                    }}\n                    style={opacityAnimationStyles(reaction.styleBucket.opacityMax)}\n                  >\n                    <div style={reactionMovementStyle(reaction.reactionMovementIndex)}>\n                      <div\n                        style={spriteAnimationStyles(\n                          REACTION_NUMBER_OF_ANIMATION_FRAMES,\n                          displaySizePx(),\n                          getEmojiResource(reaction?.reaction.reactionType, reactionResources) ?? ''\n                        )}\n                      />\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </Stack>\n    );\n  }\n);\n"]}

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

@@ -35,4 +35,8 @@ export declare const useOrganizedParticipants: (props: OrganizedParticipantsArgs
  * @private
  */
 export declare const getEmojiResource: (reactionName: string, reactionResources: ReactionResources) => string | undefined;
+/**
+ * @private
+ */
+export declare const getEmojiFrameCount: (reactionName: string, reactionResources: ReactionResources) => number;
 //# sourceMappingURL=videoGalleryLayoutUtils.d.ts.map

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

@@ -164,6 +164,27 @@ export const getEmojiResource = (reactionName, reactionResources) => {
         case 'surprised':
             return (_e = reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url;
     }
-    return '';
+    return undefined;
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const getEmojiFrameCount = (reactionName, reactionResources) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    switch (reactionName) {
+        case 'like':
+            return (_b = (_a = reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.frameCount) !== null && _b !== void 0 ? _b : 0;
+        case 'heart':
+            return (_d = (_c = reactionResources.heartReaction) === null || _c === void 0 ? void 0 : _c.frameCount) !== null && _d !== void 0 ? _d : 0;
+        case 'laugh':
+            return (_f = (_e = reactionResources.laughReaction) === null || _e === void 0 ? void 0 : _e.frameCount) !== null && _f !== void 0 ? _f : 0;
+        case 'applause':
+            return (_h = (_g = reactionResources.applauseReaction) === null || _g === void 0 ? void 0 : _g.frameCount) !== null && _h !== void 0 ? _h : 0;
+        case 'surprised':
+            return (_k = (_j = reactionResources.surprisedReaction) === null || _j === void 0 ? void 0 : _j.frameCount) !== null && _k !== void 0 ? _k : 0;
+        default:
+            return 0;
+    }
 };
 //# sourceMappingURL=videoGalleryLayoutUtils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../../..';\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  layout?: VideoGalleryLayout;\n  spotlightedParticipantUserIds?: string[];\n  previousGridParticipants?: VideoGalleryRemoteParticipant[];\n  previousOverflowParticipants?: VideoGalleryRemoteParticipant[];\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    layout,\n    previousGridParticipants = [],\n    previousOverflowParticipants = []\n  } = props;\n\n  const maxRemoteVideoStreamsToUse =\n    maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY\n      ? MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY\n      : maxRemoteVideoStreams;\n\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n  const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n  const participants =\n    layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;\n\n  let newGridParticipants = smartDominantSpeakerParticipants({\n    participants: participants,\n    dominantSpeakers,\n    currentParticipants: previousGridParticipants,\n    maxDominantSpeakers: maxRemoteVideoStreamsToUse\n  }).slice(0, maxRemoteVideoStreamsToUse);\n\n  const dominantSpeakerToGrid =\n    layout === 'speaker'\n      ? dominantSpeakers && dominantSpeakers[0]\n        ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])\n        : [newGridParticipants[0]]\n      : [];\n\n  if (dominantSpeakerToGrid[0]) {\n    newGridParticipants = dominantSpeakerToGrid;\n  }\n\n  const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(\n      (p) =>\n        !gridParticipantSet.has(p.userId) &&\n        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n          p.userId\n        )\n    ),\n    dominantSpeakers: dominantSpeakers,\n    currentParticipants: previousOverflowParticipants,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n\n  const gridParticipants = getGridParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  return { gridParticipants, overflowGalleryParticipants };\n};\n\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\n}\n\n/**\n * Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {} as SortedRemoteParticipants);\n\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  const pinnedParticipantUserIds = props.pinnedParticipantUserIds ?? [];\n  // declare set of focused participant user ids as spotlighted participants user ids followed by\n  // pinned participants user ids which is deduplicated while maintaining order\n  const focusedParticipantUserIdSet = new Set(\n    spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p])\n  );\n  // get focused participants from map of remote participants in the order of the user ids\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [...focusedParticipantUserIdSet].map(\n    (p) => remoteParticipantMap[p]\n  );\n\n  const currentGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const currentOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps: OrganizedParticipantsArgs = {\n    ...props,\n    // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0\n    maxRemoteVideoStreams:\n      focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxRemoteVideoStreams,\n    remoteParticipants: unfocusedParticipants,\n    previousGridParticipants: currentGridParticipants.current,\n    previousOverflowParticipants: currentOverflowGalleryParticipants.current\n  };\n\n  const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);\n\n  currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;\n  currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;\n\n  return focusedParticipants.length > 0\n    ? {\n        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n        overflowGalleryParticipants: props.isScreenShareActive\n          ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n          : useOrganizedParticipantsResult.overflowGalleryParticipants\n      }\n    : useOrganizedParticipantsResult;\n};\n\nconst getGridParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxRemoteVideoStreams: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    return [];\n  }\n  // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n  // we will use the max streams provided to the function to find the max participants that can go in the grid\n  // if there are less participants than max streams then we will use all participants including joining in the grid\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams\n    ? args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams)\n    : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams).concat(args.callingParticipants);\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams);\n};\n\nconst getOverflowGalleryRemoteParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxRemoteVideoStreams: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    // If screen sharing is active, assign video and audio participants as overflow gallery participants\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));\n    return args.gridParticipants.concat(args.overflowGalleryParticipants);\n  } else {\n    // If screen sharing is not active, then assign all video tiles as grid tiles.\n    // If there are no video tiles, then assign audio tiles as grid tiles.\n    // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n    // overflow should be empty if total participants including calling participants is less than max streams\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants.concat(args.callingParticipants)\n      : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams\n      ? args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams).concat(args.callingParticipants)\n      : [];\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants\n      : args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams);\n  }\n};\n\nconst putVideoParticipantsFirst = (\n  remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach((p) => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string | undefined => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.url;\n    case 'heart':\n      return reactionResources.heartReaction?.url;\n    case 'laugh':\n      return reactionResources.laughReaction?.url;\n    case 'applause':\n      return reactionResources.applauseReaction?.url;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.url;\n  }\n  return '';\n};\n"]}
+{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../../..';\nimport { VideoGalleryLayout } from '../../VideoGallery';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  localParticipant?: VideoGalleryParticipant;\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxOverflowGalleryDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  pinnedParticipantUserIds?: string[];\n  layout?: VideoGalleryLayout;\n  spotlightedParticipantUserIds?: string[];\n  previousGridParticipants?: VideoGalleryRemoteParticipant[];\n  previousOverflowParticipants?: VideoGalleryRemoteParticipant[];\n}\n\n/**\n * A result that defines grid participants and overflow gallery participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;\nconst DEFAULT_MAX_VIDEO_SREAMS = 4;\nconst MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;\n\nconst getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers = [],\n    maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS,\n    maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,\n    isScreenShareActive = false,\n    layout,\n    previousGridParticipants = [],\n    previousOverflowParticipants = []\n  } = props;\n\n  const maxRemoteVideoStreamsToUse =\n    maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY\n      ? MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY\n      : maxRemoteVideoStreams;\n\n  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);\n  const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);\n  const participants =\n    layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;\n\n  let newGridParticipants = smartDominantSpeakerParticipants({\n    participants: participants,\n    dominantSpeakers,\n    currentParticipants: previousGridParticipants,\n    maxDominantSpeakers: maxRemoteVideoStreamsToUse\n  }).slice(0, maxRemoteVideoStreamsToUse);\n\n  const dominantSpeakerToGrid =\n    layout === 'speaker'\n      ? dominantSpeakers && dominantSpeakers[0]\n        ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])\n        : [newGridParticipants[0]]\n      : [];\n\n  if (dominantSpeakerToGrid[0]) {\n    newGridParticipants = dominantSpeakerToGrid;\n  }\n\n  const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({\n    participants: remoteParticipantsOrdered.filter(\n      (p) =>\n        !gridParticipantSet.has(p.userId) &&\n        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n          p.userId\n        )\n    ),\n    dominantSpeakers: dominantSpeakers,\n    currentParticipants: previousOverflowParticipants,\n    maxDominantSpeakers: maxOverflowGalleryDominantSpeakers\n  });\n\n  const gridParticipants = getGridParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({\n    isScreenShareActive,\n    gridParticipants: newGridParticipants,\n    overflowGalleryParticipants: newOverflowGalleryParticipants,\n    maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants\n  });\n\n  return { gridParticipants, overflowGalleryParticipants };\n};\n\ninterface SortedRemoteParticipants {\n  [key: string]: VideoGalleryRemoteParticipant;\n}\n\n/**\n * Hook to determine which participants should be in grid and overflow gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {} as SortedRemoteParticipants);\n\n  const spotlightedParticipantUserIds = props.spotlightedParticipantUserIds ?? [];\n  const pinnedParticipantUserIds = props.pinnedParticipantUserIds ?? [];\n  // declare set of focused participant user ids as spotlighted participants user ids followed by\n  // pinned participants user ids which is deduplicated while maintaining order\n  const focusedParticipantUserIdSet = new Set(\n    spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p])\n  );\n  // get focused participants from map of remote participants in the order of the user ids\n  const focusedParticipants: VideoGalleryRemoteParticipant[] = [...focusedParticipantUserIdSet].map(\n    (p) => remoteParticipantMap[p]\n  );\n\n  const currentGridParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const currentOverflowGalleryParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps: OrganizedParticipantsArgs = {\n    ...props,\n    // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0\n    maxRemoteVideoStreams:\n      focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxRemoteVideoStreams,\n    remoteParticipants: unfocusedParticipants,\n    previousGridParticipants: currentGridParticipants.current,\n    previousOverflowParticipants: currentOverflowGalleryParticipants.current\n  };\n\n  const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);\n\n  currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;\n  currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;\n\n  return focusedParticipants.length > 0\n    ? {\n        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,\n        overflowGalleryParticipants: props.isScreenShareActive\n          ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)\n          : useOrganizedParticipantsResult.overflowGalleryParticipants\n      }\n    : useOrganizedParticipantsResult;\n};\n\nconst getGridParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxRemoteVideoStreams: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    return [];\n  }\n  // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid\n  // we will use the max streams provided to the function to find the max participants that can go in the grid\n  // if there are less participants than max streams then we will use all participants including joining in the grid\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams\n    ? args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams)\n    : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams).concat(args.callingParticipants);\n  return args.gridParticipants.length > 0\n    ? args.gridParticipants\n    : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams);\n};\n\nconst getOverflowGalleryRemoteParticipants = (args: {\n  isScreenShareActive: boolean;\n  gridParticipants: VideoGalleryParticipant[];\n  overflowGalleryParticipants: VideoGalleryParticipant[];\n  maxRemoteVideoStreams: number;\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];\n}): VideoGalleryRemoteParticipant[] => {\n  if (args.isScreenShareActive) {\n    // If screen sharing is active, assign video and audio participants as overflow gallery participants\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));\n    return args.gridParticipants.concat(args.overflowGalleryParticipants);\n  } else {\n    // If screen sharing is not active, then assign all video tiles as grid tiles.\n    // If there are no video tiles, then assign audio tiles as grid tiles.\n    // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow\n    // overflow should be empty if total participants including calling participants is less than max streams\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants.concat(args.callingParticipants)\n      : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams\n      ? args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams).concat(args.callingParticipants)\n      : [];\n    return args.gridParticipants.length > 0\n      ? args.overflowGalleryParticipants\n      : args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams);\n  }\n};\n\nconst putVideoParticipantsFirst = (\n  remoteParticipants: VideoGalleryRemoteParticipant[]\n): VideoGalleryRemoteParticipant[] => {\n  const videoParticipants: VideoGalleryRemoteParticipant[] = [];\n  const audioParticipants: VideoGalleryRemoteParticipant[] = [];\n  remoteParticipants.forEach((p) => {\n    if (p.videoStream?.isAvailable) {\n      videoParticipants.push(p);\n    } else {\n      audioParticipants.push(p);\n    }\n  });\n  const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);\n  return remoteParticipantSortedByVideo;\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const getEmojiResource = (reactionName: string, reactionResources: ReactionResources): string | undefined => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.url;\n    case 'heart':\n      return reactionResources.heartReaction?.url;\n    case 'laugh':\n      return reactionResources.laughReaction?.url;\n    case 'applause':\n      return reactionResources.applauseReaction?.url;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.url;\n  }\n  return undefined;\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const getEmojiFrameCount = (reactionName: string, reactionResources: ReactionResources): number => {\n  switch (reactionName) {\n    case 'like':\n      return reactionResources.likeReaction?.frameCount ?? 0;\n    case 'heart':\n      return reactionResources.heartReaction?.frameCount ?? 0;\n    case 'laugh':\n      return reactionResources.laughReaction?.frameCount ?? 0;\n    case 'applause':\n      return reactionResources.applauseReaction?.frameCount ?? 0;\n    case 'surprised':\n      return reactionResources.surprisedReaction?.frameCount ?? 0;\n    default:\n      return 0;\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/index.d.ts

@@ -16,7 +16,6 @@ export type { RichTextSendBoxProps, RichTextSendBoxStrings } from './RichTextEdi
 export type { _MentionPopoverProps, MentionLookupOptions, MentionDisplayOptions, MentionOptions, Mention, MentionPopoverStrings } from './MentionPopover';
 export type { ImageOverlayProps } from './ImageOverlay';
 export type { InlineImageOptions, InlineImage } from './ChatMessage/ChatMessageContent';
-export type { ActiveFileUpload } from './AttachmentUploadCards';
 export { MessageStatusIndicator } from './MessageStatusIndicator';
 export type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';
 export { MessageThread } from './MessageThread';
@@ -78,7 +77,7 @@ export * from './AttachmentCardGroup';
 export * from './ModalClone/ModalClone';
 export * from './AttachmentDownloadCards';
 export type { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';
-export type { AttachmentOptions, AttachmentUploadOptions, AttachmentUploadHandler, AttachmentMetadata, AttachmentUploadStatus, AttachmentUploadManager, FileUploadHandler, FileUploadManager, FileUploadState, FileUploadError } from '../types/Attachment';
+export type { AttachmentOptions, AttachmentUploadOptions, AttachmentMetadata, AttachmentUploadStatus, AttachmentUploadHandler, AttachmentUploadManager } from '../types/Attachment';
 export type { AttachmentMenuAction, AttachmentDownloadOptions } from '../types/Attachment';
 export { _useContainerHeight, _useContainerWidth } from './utils/responsive';
 export { _ComplianceBanner } from './ComplianceBanner';