@azure/communication-react 1.28.0-alpha-202505170018 → 1.28.0-alpha-202505240018

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  FocusZone,\n  FontIcon,\n  IFontIconProps,\n  IIconProps,\n  IRawStyle,\n  IStackStyles,\n  IStyle,\n  mergeStyles,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\n\n/**\n * Props for the DrawerMenuItem\n *\n * @internal\n */\nexport interface _DrawerMenuItemProps {\n  onItemClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, itemKey?: string) => void;\n  itemKey: string;\n  /** Text that shows at the start of the menu item after any icon supplied */\n  text?: string;\n  /** Text that shows at the end of the menu item before any secondaryIcon is supplied */\n  secondaryText?: string;\n  /** A component that shows at the end of the menu item before any secondaryIcon is supplied */\n  secondaryComponent?: JSX.Element;\n  /** Icon shown at the start of the menu item (before the menu item text) */\n  iconProps?: IIconProps;\n  /**\n   * Icon shown at the end of the menu item.\n   * By default if this component has subMenuProps, this icon is the RightChevron.\n   */\n  secondaryIconProps?: IIconProps;\n  styles?: BaseCustomStyles;\n  subMenuProps?: _DrawerMenuItemProps[];\n  /**\n   * Whether the menu item is disabled\n   * @defaultvalue false\n   */\n  disabled?: boolean;\n  /**\n   * A unique id set for the standard HTML id attibute\n   */\n  id?: string;\n  /**\n   * Property to set the focus since this is the first item in the menu\n   */\n  shouldFocusOnMount?: boolean;\n  /**\n   * Custom JSX item injection for custom mobile view button on drawers\n   */\n  onRendererContent?: () => JSX.Element;\n  /**\n   * Aria label for the menu item\n   */\n  ariaLabel?: string;\n}\n\n/**\n * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n *\n * @private\n */\nexport const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {\n  const theme = useTheme();\n  const onClick = (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void =>\n    props.onItemClick && props.onItemClick(ev, props.itemKey);\n  const onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => onClick && submitWithKeyboard(ev, onClick);\n\n  const secondaryIcon = props.secondaryIconProps ? (\n    <MenuItemIcon {...props.secondaryIconProps} />\n  ) : props.subMenuProps ? (\n    <MenuItemIcon iconName=\"ChevronRight\" />\n  ) : undefined;\n\n  return (\n    <FocusZone shouldFocusOnMount={props.shouldFocusOnMount}>\n      <Stack\n        tabIndex={0}\n        role=\"menuitem\"\n        horizontal\n        className={mergeStyles(\n          drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small),\n          props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined,\n          props.styles?.root\n        )}\n        onKeyPress={props.disabled ? undefined : onKeyPress}\n        onClick={props.disabled ? undefined : onClick}\n        tokens={menuItemChildrenGap}\n        id={props.id}\n        aria-label={props.ariaLabel}\n      >\n        {props.iconProps && (\n          <Stack.Item\n            role=\"presentation\"\n            styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}\n          >\n            <MenuItemIcon {...props.iconProps} />\n          </Stack.Item>\n        )}\n        <Stack.Item styles={drawerMenuItemTextStyles} grow>\n          <Text styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}>\n            {props.text}\n          </Text>\n        </Stack.Item>\n        {props.secondaryText && (\n          <Stack.Item styles={drawerMenuItemTextStyles} className={mergeStyles(secondaryTextStyles)}>\n            <Text\n              styles={{\n                root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }\n              }}\n            >\n              {props.secondaryText}\n            </Text>\n          </Stack.Item>\n        )}\n        {props.secondaryComponent && <Stack.Item>{props.secondaryComponent}</Stack.Item>}\n        {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n      </Stack>\n    </FocusZone>\n  );\n};\n\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => (\n  <FontIcon className={mergeStyles(iconStyles)} {...props} />\n);\n\nconst menuItemChildrenGap = { childrenGap: '0.5rem' };\n\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n  ...fontSize,\n  height: '3rem',\n  lineHeight: '3rem',\n  padding: '0rem 0.75rem',\n  cursor: 'pointer',\n  ':hover, :focus': {\n    background: hoverBackground\n  }\n});\n\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n  pointerEvents: 'none',\n  background: background,\n  ':hover, :focus': {\n    background: background\n  }\n});\n\n/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n  root: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap'\n  }\n};\n\nconst iconStyles: IStyle = {\n  // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%',\n\n  // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n  ' span': {\n    display: 'flex',\n    alignItems: 'center',\n    height: '100%'\n  }\n};\n\nconst secondaryTextStyles: IStyle = {\n  // limit width for secondaryText in the menu item so it does not overlap with text on left.\n  maxWidth: '50%'\n};\n"]}
+{"version":3,"file":"DrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  FocusZone,\n  FontIcon,\n  IFontIconProps,\n  IIconProps,\n  IRawStyle,\n  IStackStyles,\n  IStyle,\n  mergeStyles,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React from 'react';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { submitWithKeyboard } from '../utils/keyboardNavigation';\n\n/**\n * Props for the DrawerMenuItem\n *\n * @internal\n */\nexport interface _DrawerMenuItemProps {\n  onItemClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, itemKey?: string) => void;\n  itemKey: string;\n  /** Text that shows at the start of the menu item after any icon supplied */\n  text?: string;\n  /** Text that shows at the end of the menu item before any secondaryIcon is supplied */\n  secondaryText?: string;\n  /** A component that shows at the end of the menu item before any secondaryIcon is supplied */\n  secondaryComponent?: JSX.Element;\n  /** Icon shown at the start of the menu item (before the menu item text) */\n  iconProps?: IIconProps;\n  /**\n   * Icon shown at the end of the menu item.\n   * By default if this component has subMenuProps, this icon is the RightChevron.\n   */\n  secondaryIconProps?: IIconProps;\n  styles?: BaseCustomStyles;\n  subMenuProps?: _DrawerMenuItemProps[];\n  /**\n   * Whether the menu item is disabled\n   * @defaultvalue false\n   */\n  disabled?: boolean;\n  /**\n   * A unique id set for the standard HTML id attibute\n   */\n  id?: string;\n  /**\n   * Property to set the focus since this is the first item in the menu\n   */\n  shouldFocusOnMount?: boolean;\n  /**\n   * Custom JSX item injection for custom mobile view button on drawers\n   */\n  onRendererContent?: () => JSX.Element;\n  /**\n   * Aria label for the menu item\n   */\n  ariaLabel?: string;\n  /**\n   * Dismiss the drawer menu when the button is clicked\n   */\n  dismissDrawer?: boolean;\n}\n\n/**\n * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.\n *\n * @private\n */\nexport const DrawerMenuItem = (props: _DrawerMenuItemProps): JSX.Element => {\n  const theme = useTheme();\n  const onClick = (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void =>\n    props.onItemClick && props.onItemClick(ev, props.itemKey);\n  const onKeyPress = (ev: React.KeyboardEvent<HTMLElement>): void => onClick && submitWithKeyboard(ev, onClick);\n\n  const secondaryIcon = props.secondaryIconProps ? (\n    <MenuItemIcon {...props.secondaryIconProps} />\n  ) : props.subMenuProps ? (\n    <MenuItemIcon iconName=\"ChevronRight\" />\n  ) : undefined;\n\n  return (\n    <FocusZone shouldFocusOnMount={props.shouldFocusOnMount}>\n      <Stack\n        tabIndex={0}\n        role=\"menuitem\"\n        horizontal\n        className={mergeStyles(\n          drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small),\n          props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined,\n          props.styles?.root\n        )}\n        onKeyPress={props.disabled ? undefined : onKeyPress}\n        onClick={props.disabled ? undefined : onClick}\n        tokens={menuItemChildrenGap}\n        id={props.id}\n        aria-label={props.ariaLabel}\n      >\n        {props.iconProps && (\n          <Stack.Item\n            role=\"presentation\"\n            styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}\n          >\n            <MenuItemIcon {...props.iconProps} />\n          </Stack.Item>\n        )}\n        <Stack.Item styles={drawerMenuItemTextStyles} grow>\n          <Text styles={props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined}>\n            {props.text}\n          </Text>\n        </Stack.Item>\n        {props.secondaryText && (\n          <Stack.Item styles={drawerMenuItemTextStyles} className={mergeStyles(secondaryTextStyles)}>\n            <Text\n              styles={{\n                root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }\n              }}\n            >\n              {props.secondaryText}\n            </Text>\n          </Stack.Item>\n        )}\n        {props.secondaryComponent && <Stack.Item>{props.secondaryComponent}</Stack.Item>}\n        {secondaryIcon && <Stack.Item>{secondaryIcon}</Stack.Item>}\n      </Stack>\n    </FocusZone>\n  );\n};\n\nconst MenuItemIcon = (props: IFontIconProps): JSX.Element => (\n  <FontIcon className={mergeStyles(iconStyles)} {...props} />\n);\n\nconst menuItemChildrenGap = { childrenGap: '0.5rem' };\n\nconst drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({\n  ...fontSize,\n  height: '3rem',\n  lineHeight: '3rem',\n  padding: '0rem 0.75rem',\n  cursor: 'pointer',\n  ':hover, :focus': {\n    background: hoverBackground\n  }\n});\n\nconst disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({\n  pointerEvents: 'none',\n  background: background,\n  ':hover, :focus': {\n    background: background\n  }\n});\n\n/** Ensure long text entries appropriately show ellipsis instead of wrapping to a new line or showing a scrollbar */\nconst drawerMenuItemTextStyles: IStackStyles = {\n  root: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap'\n  }\n};\n\nconst iconStyles: IStyle = {\n  // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%',\n\n  // This can be removed when we upgrade to fluent-react-icons v2 (that removes the inner span element)\n  ' span': {\n    display: 'flex',\n    alignItems: 'center',\n    height: '100%'\n  }\n};\n\nconst secondaryTextStyles: IStyle = {\n  // limit width for secondaryText in the menu item so it does not overlap with text on left.\n  maxWidth: '50%'\n};\n"]}

package/dist/dist-esm/react-components/src/components/MeetingReactionOverlay.js

@@ -3,9 +3,7 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';
 import { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';
-/* @conditional-compile-remove(together-mode) */
 import { TogetherModeOverlay } from './TogetherModeOverlay';
-/* @conditional-compile-remove(together-mode) */
 import { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';
 /**
  * Emoji max size
@@ -30,8 +28,7 @@ const REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;
  * @internal
  */
 export const MeetingReactionOverlay = (props) => {
-    const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, 
-    /* @conditional-compile-remove(together-mode) */ togetherModeSeatPositions } = props;
+    const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, togetherModeSeatPositions } = props;
     const [emojiSizePx, setEmojiSizePx] = useState(0);
     const [divHeight, setDivHeight] = useState(0);
     const [divWidth, setDivWidth] = useState(0);
@@ -69,7 +66,6 @@ export const MeetingReactionOverlay = (props) => {
             React.createElement(RemoteContentShareReactionOverlay, { hostDivHeight: divHeight, hostDivWidth: divWidth, reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants })));
     }
     else if (props.overlayMode === 'together-mode') {
-        /* @conditional-compile-remove(together-mode) */
         return (React.createElement("div", { style: Object.assign({}, togetherModeMeetingOverlayStyle) },
             React.createElement(TogetherModeOverlay, { emojiSize: emojiSizePx, reactionResources: reactionResources, localParticipant: localParticipant !== null && localParticipant !== void 0 ? localParticipant : {}, remoteParticipants: remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : [], togetherModeSeatPositions: togetherModeSeatPositions !== null && togetherModeSeatPositions !== void 0 ? togetherModeSeatPositions : {} })));
         return React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  OverlayModeTypes,\n  Reaction,\n  ReactionResources,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant\n} from '../types';\n/* @conditional-compile-remove(together-mode) */\nimport { VideoGalleryTogetherModeParticipantPosition } from '../types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\n/* @conditional-compile-remove(together-mode) */\nimport { TogetherModeOverlay } from './TogetherModeOverlay';\n/* @conditional-compile-remove(together-mode) */\nimport { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';\n\n/**\n * Reaction overlay component props\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport interface MeetingReactionOverlayProps {\n  /**\n   * Reaction rendering overlay type. i.e. single reaction rendering on grid-tile, screen share mode overlay\n   */\n  overlayMode: OverlayModeTypes;\n  /**\n   * Received reaction when overlay mode is grid-tile\n   */\n  reaction?: Reaction;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources: ReactionResources;\n  /**\n   * Local participant's reaction event that comes from participant object.\n   */\n  localParticipant?: VideoGalleryLocalParticipant;\n  /**\n   * Remote participant's reaction event.\n   */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n\n  /* @conditional-compile-remove(together-mode) */\n  togetherModeSeatPositions?: VideoGalleryTogetherModeParticipantPosition;\n}\n\n/**\n * Emoji max size\n * @internal\n */\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 70;\n\n/**\n * Emoji min size\n * @internal\n */\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n\n/**\n * Emoji resize scale constant\n * @internal\n */\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\n/**\n * Reaction overlay component\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {\n  const {\n    overlayMode,\n    reaction,\n    reactionResources,\n    localParticipant,\n    remoteParticipants,\n    /* @conditional-compile-remove(together-mode) */ togetherModeSeatPositions\n  } = props;\n  const [emojiSizePx, setEmojiSizePx] = useState(0);\n  const [divHeight, setDivHeight] = useState(0);\n  const [divWidth, setDivWidth] = useState(0);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const domRect = entries.at(0)?.contentRect;\n      const width = domRect !== undefined ? domRect.width : 0;\n      const height = domRect !== undefined ? domRect.height : 0;\n      const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;\n      // we only want to set the persona size if it has changed\n      if (reactionEmojiCalcSize !== emojiSizePx) {\n        setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));\n      }\n\n      if (height !== divHeight) {\n        setDivHeight(height);\n      }\n\n      if (width !== divWidth) {\n        setDivWidth(width);\n      }\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n\n  if (overlayMode === 'grid-tiles') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>\n        <ParticipantVideoTileOverlay\n          emojiSize={emojiSizePx}\n          reaction={reaction}\n          reactionResources={reactionResources}\n        />\n      </div>\n    );\n  } else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>\n        <RemoteContentShareReactionOverlay\n          hostDivHeight={divHeight}\n          hostDivWidth={divWidth}\n          reactionResources={reactionResources}\n          localParticipant={localParticipant}\n          remoteParticipants={remoteParticipants}\n        />\n      </div>\n    );\n  } else if (props.overlayMode === 'together-mode') {\n    /* @conditional-compile-remove(together-mode) */\n    return (\n      <div\n        style={{\n          ...togetherModeMeetingOverlayStyle\n        }}\n      >\n        <TogetherModeOverlay\n          emojiSize={emojiSizePx}\n          reactionResources={reactionResources}\n          localParticipant={localParticipant ?? ({} as VideoGalleryLocalParticipant)}\n          remoteParticipants={remoteParticipants ?? ([] as VideoGalleryRemoteParticipant[])}\n          togetherModeSeatPositions={togetherModeSeatPositions ?? {}}\n        />\n      </div>\n    );\n    return <></>;\n  } else {\n    return <></>;\n  }\n};\n"]}
+{"version":3,"file":"MeetingReactionOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  OverlayModeTypes,\n  Reaction,\n  ReactionResources,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant\n} from '../types';\n\nimport { VideoGalleryTogetherModeParticipantPosition } from '../types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';\nimport { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';\nimport { TogetherModeOverlay } from './TogetherModeOverlay';\nimport { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';\n\n/**\n * Reaction overlay component props\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport interface MeetingReactionOverlayProps {\n  /**\n   * Reaction rendering overlay type. i.e. single reaction rendering on grid-tile, screen share mode overlay\n   */\n  overlayMode: OverlayModeTypes;\n  /**\n   * Received reaction when overlay mode is grid-tile\n   */\n  reaction?: Reaction;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources: ReactionResources;\n  /**\n   * Local participant's reaction event that comes from participant object.\n   */\n  localParticipant?: VideoGalleryLocalParticipant;\n  /**\n   * Remote participant's reaction event.\n   */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n\n  togetherModeSeatPositions?: VideoGalleryTogetherModeParticipantPosition;\n}\n\n/**\n * Emoji max size\n * @internal\n */\nconst DEFAULT_EMOJI_MAX_SIZE_PX = 70;\n\n/**\n * Emoji min size\n * @internal\n */\nconst DEFAULT_EMOJI_MIN_SIZE_PX = 32;\n\n/**\n * Emoji resize scale constant\n * @internal\n */\nconst REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;\n\n/**\n * Reaction overlay component\n *\n * Can be used with {@link VideoTile}.\n *\n * @internal\n */\nexport const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {\n  const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, togetherModeSeatPositions } =\n    props;\n  const [emojiSizePx, setEmojiSizePx] = useState(0);\n  const [divHeight, setDivHeight] = useState(0);\n  const [divWidth, setDivWidth] = useState(0);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const domRect = entries.at(0)?.contentRect;\n      const width = domRect !== undefined ? domRect.width : 0;\n      const height = domRect !== undefined ? domRect.height : 0;\n      const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;\n      // we only want to set the persona size if it has changed\n      if (reactionEmojiCalcSize !== emojiSizePx) {\n        setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));\n      }\n\n      if (height !== divHeight) {\n        setDivHeight(height);\n      }\n\n      if (width !== divWidth) {\n        setDivWidth(width);\n      }\n    })\n  );\n\n  useLayoutEffect(() => {\n    if (videoTileRef.current) {\n      observer.current.observe(videoTileRef.current);\n    }\n    const currentObserver = observer.current;\n    return () => currentObserver.disconnect();\n  }, [videoTileRef]);\n\n  if (overlayMode === 'grid-tiles') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>\n        <ParticipantVideoTileOverlay\n          emojiSize={emojiSizePx}\n          reaction={reaction}\n          reactionResources={reactionResources}\n        />\n      </div>\n    );\n  } else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {\n    return (\n      <div ref={videoTileRef} style={{ width: '100%', height: '100%', pointerEvents: 'none' }}>\n        <RemoteContentShareReactionOverlay\n          hostDivHeight={divHeight}\n          hostDivWidth={divWidth}\n          reactionResources={reactionResources}\n          localParticipant={localParticipant}\n          remoteParticipants={remoteParticipants}\n        />\n      </div>\n    );\n  } else if (props.overlayMode === 'together-mode') {\n    return (\n      <div\n        style={{\n          ...togetherModeMeetingOverlayStyle\n        }}\n      >\n        <TogetherModeOverlay\n          emojiSize={emojiSizePx}\n          reactionResources={reactionResources}\n          localParticipant={localParticipant ?? ({} as VideoGalleryLocalParticipant)}\n          remoteParticipants={remoteParticipants ?? ([] as VideoGalleryRemoteParticipant[])}\n          togetherModeSeatPositions={togetherModeSeatPositions ?? {}}\n        />\n      </div>\n    );\n    return <></>;\n  } else {\n    return <></>;\n  }\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/NotificationStack.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Stack } from '@fluentui/react';\n\nimport { useLocale } from '../localization';\nimport {\n  DismissedNotification,\n  NotificationIconProps,\n  dismissNotification,\n  dropDismissalsForInactiveNotifications,\n  notificationsToShow\n} from './utils';\nimport { Notification, NotificationStrings } from './Notification';\n\n/**\n * Props for {@link NotificationStack}.\n * @public\n */\nexport interface NotificationStackProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: NotificationStackStrings;\n\n  /**\n   * Currently active notifications.\n   */\n  activeNotifications: ActiveNotification[];\n\n  /**\n   * Max notifications to show at a time.\n   * @defaultValue 2\n   */\n  maxNotificationsToShow?: number;\n\n  /**\n   * Callback called when the dismiss button is triggered.\n   * Use this to control notifications shown when they dismissed by the user.\n   * Note this onDismiss function will affect all notifications in the same stack\n   */\n  onDismissNotification?: (dismissedNotification: ActiveNotification) => void;\n\n  /**\n   * If set, notifications with {@link ActiveNotification.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link NotificationStack} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore notifications from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountNotifications?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link NotificationStack}.\n *\n * @public\n */\nexport interface NotificationStackStrings {\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric?: NotificationStrings;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow?: NotificationStrings;\n  /**\n   * Message shown when poor network quality is detected during a teams meetings.\n   * Contains actions to open phone info modal.\n   */\n  teamsMeetingCallNetworkQualityLow?: NotificationStrings;\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound?: NotificationStrings;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound?: NotificationStrings;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari?: NotificationStrings;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem?: NotificationStrings;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze?: NotificationStrings;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari?: NotificationStrings;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse?: NotificationStrings;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem?: NotificationStrings;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied?: NotificationStrings;\n\n  /**\n   * Dimiss Notifications button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: NotificationStrings;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: NotificationStrings;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: NotificationStrings;\n  /**\n   * Error string letting you know remote participants see a frozen stream for you.\n   */\n  cameraFrozenForRemoteParticipants?: NotificationStrings;\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: NotificationStrings;\n  /**\n   * An error message when starting spotlight while max participants are spotlighted\n   */\n  startSpotlightWhileMaxParticipantsAreSpotlighted?: NotificationStrings;\n  /**\n   * Muted by a remote participant message\n   */\n  mutedByRemoteParticipant?: NotificationStrings;\n  /**\n   * Speaking while muted message\n   */\n  speakingWhileMuted?: NotificationStrings;\n  /**\n   * Recording started message\n   */\n  recordingStarted?: NotificationStrings;\n  /**\n   * Transcription started message\n   */\n  transcriptionStarted?: NotificationStrings;\n  /**\n   * Recording stopped message\n   */\n  recordingStopped?: NotificationStrings;\n  /**\n   * Transcription stopped message\n   */\n  transcriptionStopped?: NotificationStrings;\n  /**\n   * Recording and transcription both started message\n   */\n  recordingAndTranscriptionStarted?: NotificationStrings;\n  /**\n   * Recording and transcription both stopped message\n   */\n  recordingAndTranscriptionStopped?: NotificationStrings;\n  /**\n   * Recording stopped but transcription still going on message\n   */\n  recordingStoppedStillTranscribing?: NotificationStrings;\n  /**\n   * Transcription stopped but recording still going on message\n   */\n  transcriptionStoppedStillRecording?: NotificationStrings;\n  /**\n   * Message shown in notification when the user will be automatically to their assigned breakout room that is opened\n   */\n  assignedBreakoutRoomOpened?: NotificationStrings;\n  /**\n   * Message shown in notification when the user is prompted to join their assigned breakout room that is opened\n   */\n  assignedBreakoutRoomOpenedPromptJoin?: NotificationStrings;\n  /**\n   * Message shown in notification when the user's assigned breakout room is changed\n   */\n  assignedBreakoutRoomChanged?: NotificationStrings;\n  /**\n   * Message shown in notification when the user's assigned breakout room is closed\n   */\n  assignedBreakoutRoomClosed?: NotificationStrings;\n  /**\n   * Message shown in notification when breakout room is joined\n   */\n  breakoutRoomJoined?: NotificationStrings;\n  /**\n   * Message shown in notification when breakout room is closing soon\n   */\n  breakoutRoomClosingSoon?: NotificationStrings;\n  /**\n   * Message shown in notification when capability turnVideoOn is present\n   */\n  capabilityTurnVideoOnPresent?: NotificationStrings;\n  /**\n   * Message shown in notification when capability turnVideoOn is absent\n   */\n  capabilityTurnVideoOnAbsent?: NotificationStrings;\n  /**\n   * Message shown in notification when capability unMuteMic is present\n   */\n  capabilityUnmuteMicPresent?: NotificationStrings;\n  /**\n   * Message shown in notification when capability unMuteMic is absent\n   */\n  capabilityUnmuteMicAbsent?: NotificationStrings;\n\n  /* @conditional-compile-remove(together-mode) */\n  /**\n   * Message shown in notification when together mode is started\n   */\n  togetherModeStarted?: NotificationStrings;\n\n  /* @conditional-compile-remove(together-mode) */\n  /**\n   * Message shown in notification when together mode ends\n   */\n  togetherModeEnded?: NotificationStrings;\n  /**\n   * Message shown in notification when there was an error with transcription.\n   */\n  transcriptionError?: NotificationStrings;\n  /**\n   * Message shown when the local user starts transcription\n   */\n  transcriptionStartedByYou?: NotificationStrings;\n}\n\n/**\n * All notifications that can be shown in the {@link NotificationStack}.\n *\n * @public\n */\nexport type NotificationType = keyof NotificationStackStrings;\n\n/**\n * Active notifications to be shown via {@link NotificationStack}.\n *\n * @public\n */\nexport interface ActiveNotification {\n  /**\n   * Type of error that is active.\n   */\n  type: NotificationType;\n  /**\n   * Callback called when the primary button inside notification bar is clicked.\n   */\n  onClickPrimaryButton?: () => void;\n\n  /**\n   * Callback called when the primary button inside notification bar is clicked.\n   */\n  onClickSecondaryButton?: () => void;\n\n  /**\n   * Callback called when the notification is dismissed.\n   */\n  onDismiss?: () => void;\n\n  /**\n   * If set, notification will automatically dismiss after 5 seconds\n   */\n  autoDismiss?: boolean;\n\n  /**\n   * The latest timestamp when this notification was observed.\n   *\n   * When available, this is used to track notifications that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n\n  /**\n   * Aria-live property for the notification.\n   * @defaultValue polite\n   */\n  ariaLive?: 'assertive' | 'off' | 'polite';\n}\n\n/**\n * A component to show notifications on the UI.\n * All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.\n * Active notifications are selected by {@link NotificationStackProps.activeNotifications}.\n *\n * This component internally tracks dismissed by the user.\n *   * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.\n *   * Notifications that do not have a timestamp: The notification is dismissed until it disappears from the props.\n *         If the notification recurs, it is shown in the UI.\n *\n *\n * @public\n */\nexport const NotificationStack = (props: NotificationStackProps): JSX.Element => {\n  const localeStrings = useLocale().strings.notificationStack;\n  const strings = props.strings ?? localeStrings;\n  const maxNotificationsToShow = props.maxNotificationsToShow ?? 2;\n\n  const trackDismissedNotificationsInternally = !props.onDismissNotification;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedNotifications, setDismissedNotifications] = useState<DismissedNotification[]>([]);\n\n  // dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(() => {\n    trackDismissedNotificationsInternally &&\n      setDismissedNotifications(\n        dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications)\n      );\n  }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);\n\n  const activeNotifications = notificationsToShow(\n    props.activeNotifications,\n    dismissedNotifications,\n    props.ignorePremountNotifications ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack\n      data-ui-id=\"notifications-stack\"\n      style={{\n        width: 'fit-content'\n      }}\n    >\n      {activeNotifications.map((notification, index) => {\n        if (index < maxNotificationsToShow) {\n          const onDismiss = (): void => {\n            trackDismissedNotificationsInternally\n              ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))\n              : props.onDismissNotification?.(notification);\n            notification.onDismiss && notification.onDismiss();\n          };\n          if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {\n            // If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to\n            // onDismiss if it is not defined\n            notification.onClickSecondaryButton = notification.onClickSecondaryButton\n              ? notification.onClickSecondaryButton\n              : () => onDismiss();\n          }\n          return (\n            <div key={index} style={{ marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` }}>\n              <Notification\n                notificationStrings={strings ? strings[notification.type] : undefined}\n                notificationIconProps={NotificationIconProps(notification.type)}\n                onClickPrimaryButton={() => notification.onClickPrimaryButton?.()}\n                onClickSecondaryButton={() => notification.onClickSecondaryButton?.()}\n                onDismiss={onDismiss}\n                showStackedEffect={\n                  index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow\n                }\n                autoDismiss={notification.autoDismiss}\n                ariaLive={notification.ariaLive}\n              />\n            </div>\n          );\n        } else {\n          return <></>;\n        }\n      })}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"NotificationStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/NotificationStack.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Stack } from '@fluentui/react';\n\nimport { useLocale } from '../localization';\nimport {\n  DismissedNotification,\n  NotificationIconProps,\n  dismissNotification,\n  dropDismissalsForInactiveNotifications,\n  notificationsToShow\n} from './utils';\nimport { Notification, NotificationStrings } from './Notification';\n\n/**\n * Props for {@link NotificationStack}.\n * @public\n */\nexport interface NotificationStackProps {\n  /**\n   * Strings shown on the UI on errors.\n   */\n  strings?: NotificationStackStrings;\n\n  /**\n   * Currently active notifications.\n   */\n  activeNotifications: ActiveNotification[];\n\n  /**\n   * Max notifications to show at a time.\n   * @defaultValue 2\n   */\n  maxNotificationsToShow?: number;\n\n  /**\n   * Callback called when the dismiss button is triggered.\n   * Use this to control notifications shown when they dismissed by the user.\n   * Note this onDismiss function will affect all notifications in the same stack\n   */\n  onDismissNotification?: (dismissedNotification: ActiveNotification) => void;\n\n  /**\n   * If set, notifications with {@link ActiveNotification.timestamp} older than the time this component is mounted\n   * are not shown.\n   *\n   * This is useful when using the {@link NotificationStack} with a stateful client that handles more than one call\n   * or chat thread. Set this prop to ignore notifications from previous call or chat.\n   *\n   * @defaultValue false\n   */\n  ignorePremountNotifications?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link NotificationStack}.\n *\n * @public\n */\nexport interface NotificationStackStrings {\n  /**\n   * A generic message when starting video fails.\n   */\n  startVideoGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when starting video fails.\n   */\n  stopVideoGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when muting microphone fails.\n   */\n  muteGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when unmuting microphone fails.\n   */\n  unmuteGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when starting screenshare fails.\n   */\n  startScreenShareGeneric?: NotificationStrings;\n\n  /**\n   * A generic message when stopping screenshare fails.\n   */\n  stopScreenShareGeneric?: NotificationStrings;\n\n  /**\n   * Message shown when poor network quality is detected during a call.\n   */\n  callNetworkQualityLow?: NotificationStrings;\n  /**\n   * Message shown when poor network quality is detected during a teams meetings.\n   * Contains actions to open phone info modal.\n   */\n  teamsMeetingCallNetworkQualityLow?: NotificationStrings;\n  /**\n   * Message shown on failure to detect audio output devices.\n   */\n  callNoSpeakerFound?: NotificationStrings;\n\n  /**\n   * Message shown on failure to detect audio input devices.\n   */\n  callNoMicrophoneFound?: NotificationStrings;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system.\n   */\n  callMicrophoneAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callMicrophoneAccessDeniedSafari?: NotificationStrings;\n\n  /**\n   * Message shown when microphone is muted by the system (not by local or remote participants)\n   */\n  callMicrophoneMutedBySystem?: NotificationStrings;\n\n  /**\n   * Message shown when microphone is unmuted by the system (not by local or remote participants).\n   * This typically occurs if the system recovers from an unexpected mute.\n   */\n  callMicrophoneUnmutedBySystem?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when microphone can be enumerated but access is\n   * blocked by the system.\n   */\n  callMacOsMicrophoneAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when poor network causes local video stream to be frozen.\n   */\n  callLocalVideoFreeze?: NotificationStrings;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system.\n   */\n  callCameraAccessDenied?: NotificationStrings;\n\n  /**\n   * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n   */\n  callCameraAccessDeniedSafari?: NotificationStrings;\n\n  /**\n   * Message shown when local video fails to start because camera is already in use by\n   * another applciation.\n   */\n  callCameraAlreadyInUse?: NotificationStrings;\n\n  /**\n   * Message shown when local video is stopped by the system (not by local or remote participants)\n   */\n  callVideoStoppedBySystem?: NotificationStrings;\n\n  /**\n   * Message shown when local video was recovered by the system (not by the local participant)\n   */\n  callVideoRecoveredBySystem?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when system denies access to camera.\n   */\n  callMacOsCameraAccessDenied?: NotificationStrings;\n\n  /**\n   * Mac OS specific message shown when system denies sharing local screen on a call.\n   */\n  callMacOsScreenShareAccessDenied?: NotificationStrings;\n\n  /**\n   * Dimiss Notifications button aria label read by screen reader accessibility tools\n   */\n  dismissButtonAriaLabel?: NotificationStrings;\n\n  /**\n   * An error message when joining a call fails.\n   */\n  failedToJoinCallGeneric?: NotificationStrings;\n\n  /**\n   * An error message when joining a call fails specifically due to an invalid meeting link.\n   */\n  failedToJoinCallInvalidMeetingLink?: NotificationStrings;\n  /**\n   * Error string letting you know remote participants see a frozen stream for you.\n   */\n  cameraFrozenForRemoteParticipants?: NotificationStrings;\n  /**\n   * Unable to start effect\n   */\n  unableToStartVideoEffect?: NotificationStrings;\n  /**\n   * An error message when starting spotlight while max participants are spotlighted\n   */\n  startSpotlightWhileMaxParticipantsAreSpotlighted?: NotificationStrings;\n  /**\n   * Muted by a remote participant message\n   */\n  mutedByRemoteParticipant?: NotificationStrings;\n  /**\n   * Speaking while muted message\n   */\n  speakingWhileMuted?: NotificationStrings;\n  /**\n   * Recording started message\n   */\n  recordingStarted?: NotificationStrings;\n  /**\n   * Transcription started message\n   */\n  transcriptionStarted?: NotificationStrings;\n  /**\n   * Recording stopped message\n   */\n  recordingStopped?: NotificationStrings;\n  /**\n   * Transcription stopped message\n   */\n  transcriptionStopped?: NotificationStrings;\n  /**\n   * Recording and transcription both started message\n   */\n  recordingAndTranscriptionStarted?: NotificationStrings;\n  /**\n   * Recording and transcription both stopped message\n   */\n  recordingAndTranscriptionStopped?: NotificationStrings;\n  /**\n   * Recording stopped but transcription still going on message\n   */\n  recordingStoppedStillTranscribing?: NotificationStrings;\n  /**\n   * Transcription stopped but recording still going on message\n   */\n  transcriptionStoppedStillRecording?: NotificationStrings;\n  /**\n   * Message shown in notification when the user will be automatically to their assigned breakout room that is opened\n   */\n  assignedBreakoutRoomOpened?: NotificationStrings;\n  /**\n   * Message shown in notification when the user is prompted to join their assigned breakout room that is opened\n   */\n  assignedBreakoutRoomOpenedPromptJoin?: NotificationStrings;\n  /**\n   * Message shown in notification when the user's assigned breakout room is changed\n   */\n  assignedBreakoutRoomChanged?: NotificationStrings;\n  /**\n   * Message shown in notification when the user's assigned breakout room is closed\n   */\n  assignedBreakoutRoomClosed?: NotificationStrings;\n  /**\n   * Message shown in notification when breakout room is joined\n   */\n  breakoutRoomJoined?: NotificationStrings;\n  /**\n   * Message shown in notification when breakout room is closing soon\n   */\n  breakoutRoomClosingSoon?: NotificationStrings;\n  /**\n   * Message shown in notification when capability turnVideoOn is present\n   */\n  capabilityTurnVideoOnPresent?: NotificationStrings;\n  /**\n   * Message shown in notification when capability turnVideoOn is absent\n   */\n  capabilityTurnVideoOnAbsent?: NotificationStrings;\n  /**\n   * Message shown in notification when capability unMuteMic is present\n   */\n  capabilityUnmuteMicPresent?: NotificationStrings;\n  /**\n   * Message shown in notification when capability unMuteMic is absent\n   */\n  capabilityUnmuteMicAbsent?: NotificationStrings;\n\n  /**\n   * Message shown in notification when together mode is started\n   */\n  togetherModeStarted?: NotificationStrings;\n\n  /**\n   * Message shown in notification when together mode ends\n   */\n  togetherModeEnded?: NotificationStrings;\n  /**\n   * Message shown in notification when there was an error with transcription.\n   */\n  transcriptionError?: NotificationStrings;\n  /**\n   * Message shown when the local user starts transcription\n   */\n  transcriptionStartedByYou?: NotificationStrings;\n}\n\n/**\n * All notifications that can be shown in the {@link NotificationStack}.\n *\n * @public\n */\nexport type NotificationType = keyof NotificationStackStrings;\n\n/**\n * Active notifications to be shown via {@link NotificationStack}.\n *\n * @public\n */\nexport interface ActiveNotification {\n  /**\n   * Type of error that is active.\n   */\n  type: NotificationType;\n  /**\n   * Callback called when the primary button inside notification bar is clicked.\n   */\n  onClickPrimaryButton?: () => void;\n\n  /**\n   * Callback called when the primary button inside notification bar is clicked.\n   */\n  onClickSecondaryButton?: () => void;\n\n  /**\n   * Callback called when the notification is dismissed.\n   */\n  onDismiss?: () => void;\n\n  /**\n   * If set, notification will automatically dismiss after 5 seconds\n   */\n  autoDismiss?: boolean;\n\n  /**\n   * The latest timestamp when this notification was observed.\n   *\n   * When available, this is used to track notifications that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n\n  /**\n   * Aria-live property for the notification.\n   * @defaultValue polite\n   */\n  ariaLive?: 'assertive' | 'off' | 'polite';\n}\n\n/**\n * A component to show notifications on the UI.\n * All strings that can be shown are accepted as the {@link NotificationStackProps.strings} so that they can be localized.\n * Active notifications are selected by {@link NotificationStackProps.activeNotifications}.\n *\n * This component internally tracks dismissed by the user.\n *   * Notifications that have an associated timestamp: The notification is shown on the UI again if it occurs after being dismissed.\n *   * Notifications that do not have a timestamp: The notification is dismissed until it disappears from the props.\n *         If the notification recurs, it is shown in the UI.\n *\n *\n * @public\n */\nexport const NotificationStack = (props: NotificationStackProps): JSX.Element => {\n  const localeStrings = useLocale().strings.notificationStack;\n  const strings = props.strings ?? localeStrings;\n  const maxNotificationsToShow = props.maxNotificationsToShow ?? 2;\n\n  const trackDismissedNotificationsInternally = !props.onDismissNotification;\n\n  // Timestamp for when this comopnent is first mounted.\n  // Never updated through the lifecycle of this component.\n  const mountTimestamp = useRef(new Date(Date.now()));\n\n  const [dismissedNotifications, setDismissedNotifications] = useState<DismissedNotification[]>([]);\n\n  // dropDismissalsForInactiveNotifications only returns a new object if `dismissedErrors` actually changes.\n  // Without this behaviour, this `useEffect` block would cause a render loop.\n  useEffect(() => {\n    trackDismissedNotificationsInternally &&\n      setDismissedNotifications(\n        dropDismissalsForInactiveNotifications(props.activeNotifications, dismissedNotifications)\n      );\n  }, [props.activeNotifications, dismissedNotifications, trackDismissedNotificationsInternally]);\n\n  const activeNotifications = notificationsToShow(\n    props.activeNotifications,\n    dismissedNotifications,\n    props.ignorePremountNotifications ? mountTimestamp.current : undefined\n  );\n\n  return (\n    <Stack\n      data-ui-id=\"notifications-stack\"\n      style={{\n        width: 'fit-content'\n      }}\n    >\n      {activeNotifications.map((notification, index) => {\n        if (index < maxNotificationsToShow) {\n          const onDismiss = (): void => {\n            trackDismissedNotificationsInternally\n              ? setDismissedNotifications(dismissNotification(dismissedNotifications, notification))\n              : props.onDismissNotification?.(notification);\n            notification.onDismiss && notification.onDismiss();\n          };\n          if (notification.type === 'assignedBreakoutRoomOpenedPromptJoin') {\n            // If notification is of type assignedBreakoutRoomOpenedPromptJoin then set onClickSecondaryButton to\n            // onDismiss if it is not defined\n            notification.onClickSecondaryButton = notification.onClickSecondaryButton\n              ? notification.onClickSecondaryButton\n              : () => onDismiss();\n          }\n          return (\n            <div key={index} style={{ marginBottom: `${index === maxNotificationsToShow - 1 ? 0 : '0.25rem'}` }}>\n              <Notification\n                notificationStrings={strings ? strings[notification.type] : undefined}\n                notificationIconProps={NotificationIconProps(notification.type)}\n                onClickPrimaryButton={() => notification.onClickPrimaryButton?.()}\n                onClickSecondaryButton={() => notification.onClickSecondaryButton?.()}\n                onDismiss={onDismiss}\n                showStackedEffect={\n                  index === maxNotificationsToShow - 1 && activeNotifications.length > maxNotificationsToShow\n                }\n                autoDismiss={notification.autoDismiss}\n                ariaLive={notification.ariaLive}\n              />\n            </div>\n          );\n        } else {\n          return <></>;\n        }\n      })}\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/TogetherModeOverlay.js

@@ -1,24 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(together-mode) */
 import React, { useMemo, useState, memo, useEffect } from 'react';
-/* @conditional-compile-remove(together-mode) */
 import { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';
-/* @conditional-compile-remove(together-mode) */
 import { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';
-/* @conditional-compile-remove(together-mode) */
 import { Icon, mergeStyles, Stack, Text } from '@fluentui/react';
-/* @conditional-compile-remove(together-mode) */
 import { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';
-/* @conditional-compile-remove(together-mode) */
 import { useLocale } from '../localization';
-/* @conditional-compile-remove(together-mode) */
 import { calculateScaledSize, getTogetherModeParticipantOverlayStyle, participantStatusTransitionStyle, REACTION_MAX_TRAVEL_HEIGHT, REACTION_TRAVEL_HEIGHT, setTogetherModeSeatPositionStyle, togetherModeIconStyle, togetherModeParticipantDisplayName, togetherModeParticipantEmojiSpriteStyle, togetherModeParticipantStatusContainer } from './styles/TogetherMode.styles';
-/* @conditional-compile-remove(together-mode) */
 import { useTheme } from '../theming';
-/* @conditional-compile-remove(together-mode) */
 import { RaisedHandIcon } from './assets/RaisedHandIcon';
-/* @conditional-compile-remove(together-mode) */
 /**
  * TogetherModeOverlay component renders an empty JSX element.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"TogetherModeOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TogetherModeOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) */\nimport React, { useMemo, useState, memo, useEffect } from 'react';\n/* @conditional-compile-remove(together-mode) */\nimport {\n  Reaction,\n  ReactionResources,\n  VideoGalleryTogetherModeParticipantPosition,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant\n} from '../types';\n/* @conditional-compile-remove(together-mode) */\nimport { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';\n/* @conditional-compile-remove(together-mode) */\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';\n/* @conditional-compile-remove(together-mode) */\nimport { Icon, mergeStyles, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(together-mode) */\nimport { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(together-mode) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(together-mode) */\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/* @conditional-compile-remove(together-mode) */\nimport {\n  calculateScaledSize,\n  getTogetherModeParticipantOverlayStyle,\n  participantStatusTransitionStyle,\n  REACTION_MAX_TRAVEL_HEIGHT,\n  REACTION_TRAVEL_HEIGHT,\n  setTogetherModeSeatPositionStyle,\n  togetherModeIconStyle,\n  togetherModeParticipantDisplayName,\n  togetherModeParticipantEmojiSpriteStyle,\n  togetherModeParticipantStatusContainer,\n  TogetherModeSeatStyle\n} from './styles/TogetherMode.styles';\n/* @conditional-compile-remove(together-mode) */\nimport { CallingTheme, useTheme } from '../theming';\n/* @conditional-compile-remove(together-mode) */\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n/* @conditional-compile-remove(together-mode) */\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Signaling action overlay component props\n * @internal\n */\ntype TogetherModeParticipantStatus = {\n  reaction?: Reaction;\n  scaledSize?: number;\n  isHandRaised?: boolean;\n  isSpotlighted?: boolean;\n  isMuted?: boolean;\n  id: string;\n  seatPositionStyle: TogetherModeSeatStyle;\n  displayName: string;\n  showDisplayName: boolean;\n};\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * TogetherModeOverlay component renders an empty JSX element.\n *\n * @returns {JSX.Element} An empty JSX element.\n */\nexport const TogetherModeOverlay = memo(\n  (props: {\n    emojiSize: number;\n    reactionResources: ReactionResources;\n    localParticipant: VideoGalleryLocalParticipant;\n    remoteParticipants: VideoGalleryRemoteParticipant[];\n    togetherModeSeatPositions: VideoGalleryTogetherModeParticipantPosition;\n  }) => {\n    const locale = useLocale();\n    const theme = useTheme();\n    const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n    const { emojiSize, reactionResources, remoteParticipants, localParticipant, togetherModeSeatPositions } = props;\n    const [togetherModeParticipantStatus, setTogetherModeParticipantStatus] = useState<{\n      [key: string]: TogetherModeParticipantStatus;\n    }>({});\n    const [hoveredParticipantID, setHoveredParticipantID] = useState('');\n\n    /*\n     * The useMemo hook is used to calculate the participant status for the Together Mode overlay.\n     * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,\n     * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.\n     */\n    const updatedParticipantStatus = useMemo(() => {\n      const allParticipants = [...remoteParticipants, localParticipant];\n\n      const participantsWithVideoAvailable = allParticipants.filter(\n        (p) => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]\n      );\n\n      const updatedSignals: { [key: string]: TogetherModeParticipantStatus } = {};\n      for (const p of participantsWithVideoAvailable) {\n        const { userId, reaction, raisedHand, spotlight, isMuted, displayName } = p;\n        const seatingPosition = togetherModeSeatPositions[userId];\n        if (seatingPosition) {\n          updatedSignals[userId] = {\n            id: userId,\n            reaction: reactionResources && reaction,\n            isHandRaised: !!raisedHand,\n            isSpotlighted: !!spotlight,\n            isMuted,\n            displayName: displayName || locale.strings.videoGallery.displayNamePlaceholder,\n            showDisplayName: !!(spotlight || raisedHand || hoveredParticipantID === userId),\n            scaledSize: calculateScaledSize(seatingPosition.width, seatingPosition.height),\n            seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)\n          };\n        }\n      }\n\n      // This is used to remove the participants bounding box from the DOM when they are no longer in the stream\n      const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter(\n        (id) => !updatedSignals[id]\n      );\n\n      const newSignals = { ...togetherModeParticipantStatus, ...updatedSignals };\n\n      participantsNotInTogetherModeStream.forEach((id) => {\n        delete newSignals[id];\n      });\n\n      const hasSignalingChange = Object.keys(newSignals).some(\n        (key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key])\n      );\n\n      const updateTogetherModeParticipantStatusState =\n        hasSignalingChange || Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;\n      return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;\n    }, [\n      remoteParticipants,\n      localParticipant,\n      togetherModeParticipantStatus,\n      togetherModeSeatPositions,\n      reactionResources,\n      locale.strings.videoGallery.displayNamePlaceholder,\n      hoveredParticipantID\n    ]);\n\n    useEffect(() => {\n      if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {\n        setHoveredParticipantID('');\n      }\n\n      setTogetherModeParticipantStatus(updatedParticipantStatus);\n    }, [hoveredParticipantID, updatedParticipantStatus]);\n\n    return (\n      <div style={{ position: 'absolute', width: '100%', height: '100%', overflow: 'hidden' }}>\n        {Object.values(togetherModeParticipantStatus).map(\n          (participantStatus) =>\n            participantStatus.id && (\n              <div\n                key={participantStatus.id}\n                data-ui-id={`together-mode-participant-${participantStatus.id}`}\n                style={{\n                  ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)\n                }}\n                onMouseEnter={() => setHoveredParticipantID(participantStatus.id)}\n                onMouseLeave={() => setHoveredParticipantID('')}\n              >\n                <div>\n                  {participantStatus.showDisplayName && (\n                    <div style={{ ...participantStatusTransitionStyle }}>\n                      <div\n                        style={{\n                          ...togetherModeParticipantStatusContainer(\n                            callingPalette.videoTileLabelBackgroundLight,\n                            theme.effects.roundedCorner4\n                          )\n                        }}\n                      >\n                        {participantStatus.isHandRaised && <RaisedHandIcon />}\n                        {participantStatus.showDisplayName && (\n                          <Text\n                            style={{\n                              ...togetherModeParticipantDisplayName(\n                                hoveredParticipantID === participantStatus.id,\n                                parseFloat(participantStatus.seatPositionStyle.seatPosition.width),\n                                participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit'\n                              )\n                            }}\n                          >\n                            {participantStatus.displayName}\n                          </Text>\n                        )}\n                        {participantStatus.isMuted && (\n                          <Stack className={mergeStyles(togetherModeIconStyle)}>\n                            <Icon iconName=\"VideoTileMicOff\" />\n                          </Stack>\n                        )}\n                        {participantStatus.isSpotlighted && (\n                          <Stack className={mergeStyles(togetherModeIconStyle)}>\n                            <Icon iconName=\"VideoTileSpotlighted\" />\n                          </Stack>\n                        )}\n                      </div>\n                    </div>\n                  )}\n\n                  {participantStatus.reaction?.reactionType && (\n                    // First div - Section that fixes the travel height and applies the movement animation\n                    // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position\n                    // Third div - Play Animation as the other animation applies on the base play animation for the sprite\n                    <div\n                      style={moveAnimationStyles(\n                        parseFloat(participantStatus.seatPositionStyle.seatPosition.height) *\n                          REACTION_MAX_TRAVEL_HEIGHT,\n                        parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT\n                      )}\n                    >\n                      <div\n                        data-ui-id={`together-mode-participant-reaction-${participantStatus.id}`}\n                        style={{\n                          ...togetherModeParticipantEmojiSpriteStyle(\n                            emojiSize,\n                            participantStatus.scaledSize || 1,\n                            participantStatus.seatPositionStyle.seatPosition.width\n                          )\n                        }}\n                      >\n                        <div\n                          style={spriteAnimationStyles(\n                            REACTION_NUMBER_OF_ANIMATION_FRAMES,\n                            participantStatus.scaledSize || 1,\n                            (participantStatus.reaction &&\n                              getEmojiResource(participantStatus?.reaction.reactionType, reactionResources)) ??\n                              ''\n                          )}\n                        />\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            )\n        )}\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"TogetherModeOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TogetherModeOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQlE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5F,OAAO,EAAE,mCAAmC,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,mBAAmB,EACnB,sCAAsC,EACtC,gCAAgC,EAChC,0BAA0B,EAC1B,sBAAsB,EACtB,gCAAgC,EAChC,qBAAqB,EACrB,kCAAkC,EAClC,uCAAuC,EACvC,sCAAsC,EAEvC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAgB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAmBzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CACrC,CAAC,KAMA,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,cAAc,GAAI,KAAiC,CAAC,cAAc,CAAC;IAEzE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IAChH,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAE/E,EAAE,CAAC,CAAC;IACP,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErE;;;;OAIG;IACH,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,MAAM,eAAe,GAAG,CAAC,GAAG,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;QAElE,MAAM,8BAA8B,GAAG,eAAe,CAAC,MAAM,CAC3D,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA,EAAA,CACzE,CAAC;QAEF,MAAM,cAAc,GAAqD,EAAE,CAAC;QAC5E,KAAK,MAAM,CAAC,IAAI,8BAA8B,EAAE,CAAC;YAC/C,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC;YAC5E,MAAM,eAAe,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAAC;YAC1D,IAAI,eAAe,EAAE,CAAC;gBACpB,cAAc,CAAC,MAAM,CAAC,GAAG;oBACvB,EAAE,EAAE,MAAM;oBACV,QAAQ,EAAE,iBAAiB,IAAI,QAAQ;oBACvC,YAAY,EAAE,CAAC,CAAC,UAAU;oBAC1B,aAAa,EAAE,CAAC,CAAC,SAAS;oBAC1B,OAAO;oBACP,WAAW,EAAE,WAAW,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB;oBAC9E,eAAe,EAAE,CAAC,CAAC,CAAC,SAAS,IAAI,UAAU,IAAI,oBAAoB,KAAK,MAAM,CAAC;oBAC/E,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC;oBAC9E,iBAAiB,EAAE,gCAAgC,CAAC,eAAe,CAAC;iBACrE,CAAC;YACJ,CAAC;QACH,CAAC;QAED,0GAA0G;QAC1G,MAAM,mCAAmC,GAAG,MAAM,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,MAAM,CAC3F,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAC5B,CAAC;QAEF,MAAM,UAAU,mCAAQ,6BAA6B,GAAK,cAAc,CAAE,CAAC;QAE3E,mCAAmC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;YACjD,OAAO,UAAU,CAAC,EAAE,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CACrD,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,6BAA6B,CAAC,GAAG,CAAC,CAAC,CAChG,CAAC;QAEF,MAAM,wCAAwC,GAC5C,kBAAkB,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,MAAM,CAAC;QAC7G,OAAO,wCAAwC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC;IAC/F,CAAC,EAAE;QACD,kBAAkB;QAClB,gBAAgB;QAChB,6BAA6B;QAC7B,yBAAyB;QACzB,iBAAiB;QACjB,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB;QAClD,oBAAoB;KACrB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,oBAAoB,IAAI,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,EAAE,CAAC;YAC5E,uBAAuB,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC;QAED,gCAAgC,CAAC,wBAAwB,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,oBAAoB,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAErD,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IACpF,MAAM,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAAG,CAC/C,CAAC,iBAAiB,EAAE,EAAE;;QACpB,OAAA,iBAAiB,CAAC,EAAE,IAAI,CACtB,6BACE,GAAG,EAAE,iBAAiB,CAAC,EAAE,gBACb,6BAA6B,iBAAiB,CAAC,EAAE,EAAE,EAC/D,KAAK,oBACA,sCAAsC,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAEhF,YAAY,EAAE,GAAG,EAAE,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,EAAE,CAAC,EACjE,YAAY,EAAE,GAAG,EAAE,CAAC,uBAAuB,CAAC,EAAE,CAAC;YAE/C;gBACG,iBAAiB,CAAC,eAAe,IAAI,CACpC,6BAAK,KAAK,oBAAO,gCAAgC;oBAC/C,6BACE,KAAK,oBACA,sCAAsC,CACvC,cAAc,CAAC,6BAA6B,EAC5C,KAAK,CAAC,OAAO,CAAC,cAAc,CAC7B;wBAGF,iBAAiB,CAAC,YAAY,IAAI,oBAAC,cAAc,OAAG;wBACpD,iBAAiB,CAAC,eAAe,IAAI,CACpC,oBAAC,IAAI,IACH,KAAK,oBACA,kCAAkC,CACnC,oBAAoB,KAAK,iBAAiB,CAAC,EAAE,EAC7C,UAAU,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,CAAC,KAAK,CAAC,EAClE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAC3E,KAGF,iBAAiB,CAAC,WAAW,CACzB,CACR;wBACA,iBAAiB,CAAC,OAAO,IAAI,CAC5B,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;4BAClD,oBAAC,IAAI,IAAC,QAAQ,EAAC,iBAAiB,GAAG,CAC7B,CACT;wBACA,iBAAiB,CAAC,aAAa,IAAI,CAClC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;4BAClD,oBAAC,IAAI,IAAC,QAAQ,EAAC,sBAAsB,GAAG,CAClC,CACT,CACG,CACF,CACP;gBAEA,CAAA,MAAA,iBAAiB,CAAC,QAAQ,0CAAE,YAAY,KAAI;gBAC3C,sFAAsF;gBACtF,6GAA6G;gBAC7G,sGAAsG;gBACtG,6BACE,KAAK,EAAE,mBAAmB,CACxB,UAAU,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,CAAC,MAAM,CAAC;wBACjE,0BAA0B,EAC5B,UAAU,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAC7F;oBAED,2CACc,sCAAsC,iBAAiB,CAAC,EAAE,EAAE,EACxE,KAAK,oBACA,uCAAuC,CACxC,SAAS,EACT,iBAAiB,CAAC,UAAU,IAAI,CAAC,EACjC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,CAAC,KAAK,CACvD;wBAGH,6BACE,KAAK,EAAE,qBAAqB,CAC1B,mCAAmC,EACnC,iBAAiB,CAAC,UAAU,IAAI,CAAC,EACjC,MAAA,CAAC,iBAAiB,CAAC,QAAQ;gCACzB,gBAAgB,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC,mCAC9E,EAAE,CACL,GACD,CACE,CACF,CACP,CACG,CACF,CACP,CAAA;KAAA,CACJ,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useState, memo, useEffect } from 'react';\nimport {\n  Reaction,\n  ReactionResources,\n  VideoGalleryTogetherModeParticipantPosition,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant\n} from '../types';\nimport { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';\nimport { Icon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { useLocale } from '../localization';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport {\n  calculateScaledSize,\n  getTogetherModeParticipantOverlayStyle,\n  participantStatusTransitionStyle,\n  REACTION_MAX_TRAVEL_HEIGHT,\n  REACTION_TRAVEL_HEIGHT,\n  setTogetherModeSeatPositionStyle,\n  togetherModeIconStyle,\n  togetherModeParticipantDisplayName,\n  togetherModeParticipantEmojiSpriteStyle,\n  togetherModeParticipantStatusContainer,\n  TogetherModeSeatStyle\n} from './styles/TogetherMode.styles';\nimport { CallingTheme, useTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * Signaling action overlay component props\n * @internal\n */\ntype TogetherModeParticipantStatus = {\n  reaction?: Reaction;\n  scaledSize?: number;\n  isHandRaised?: boolean;\n  isSpotlighted?: boolean;\n  isMuted?: boolean;\n  id: string;\n  seatPositionStyle: TogetherModeSeatStyle;\n  displayName: string;\n  showDisplayName: boolean;\n};\n\n/**\n * TogetherModeOverlay component renders an empty JSX element.\n *\n * @returns {JSX.Element} An empty JSX element.\n */\nexport const TogetherModeOverlay = memo(\n  (props: {\n    emojiSize: number;\n    reactionResources: ReactionResources;\n    localParticipant: VideoGalleryLocalParticipant;\n    remoteParticipants: VideoGalleryRemoteParticipant[];\n    togetherModeSeatPositions: VideoGalleryTogetherModeParticipantPosition;\n  }) => {\n    const locale = useLocale();\n    const theme = useTheme();\n    const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n    const { emojiSize, reactionResources, remoteParticipants, localParticipant, togetherModeSeatPositions } = props;\n    const [togetherModeParticipantStatus, setTogetherModeParticipantStatus] = useState<{\n      [key: string]: TogetherModeParticipantStatus;\n    }>({});\n    const [hoveredParticipantID, setHoveredParticipantID] = useState('');\n\n    /*\n     * The useMemo hook is used to calculate the participant status for the Together Mode overlay.\n     * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,\n     * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.\n     */\n    const updatedParticipantStatus = useMemo(() => {\n      const allParticipants = [...remoteParticipants, localParticipant];\n\n      const participantsWithVideoAvailable = allParticipants.filter(\n        (p) => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]\n      );\n\n      const updatedSignals: { [key: string]: TogetherModeParticipantStatus } = {};\n      for (const p of participantsWithVideoAvailable) {\n        const { userId, reaction, raisedHand, spotlight, isMuted, displayName } = p;\n        const seatingPosition = togetherModeSeatPositions[userId];\n        if (seatingPosition) {\n          updatedSignals[userId] = {\n            id: userId,\n            reaction: reactionResources && reaction,\n            isHandRaised: !!raisedHand,\n            isSpotlighted: !!spotlight,\n            isMuted,\n            displayName: displayName || locale.strings.videoGallery.displayNamePlaceholder,\n            showDisplayName: !!(spotlight || raisedHand || hoveredParticipantID === userId),\n            scaledSize: calculateScaledSize(seatingPosition.width, seatingPosition.height),\n            seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)\n          };\n        }\n      }\n\n      // This is used to remove the participants bounding box from the DOM when they are no longer in the stream\n      const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter(\n        (id) => !updatedSignals[id]\n      );\n\n      const newSignals = { ...togetherModeParticipantStatus, ...updatedSignals };\n\n      participantsNotInTogetherModeStream.forEach((id) => {\n        delete newSignals[id];\n      });\n\n      const hasSignalingChange = Object.keys(newSignals).some(\n        (key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key])\n      );\n\n      const updateTogetherModeParticipantStatusState =\n        hasSignalingChange || Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;\n      return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;\n    }, [\n      remoteParticipants,\n      localParticipant,\n      togetherModeParticipantStatus,\n      togetherModeSeatPositions,\n      reactionResources,\n      locale.strings.videoGallery.displayNamePlaceholder,\n      hoveredParticipantID\n    ]);\n\n    useEffect(() => {\n      if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {\n        setHoveredParticipantID('');\n      }\n\n      setTogetherModeParticipantStatus(updatedParticipantStatus);\n    }, [hoveredParticipantID, updatedParticipantStatus]);\n\n    return (\n      <div style={{ position: 'absolute', width: '100%', height: '100%', overflow: 'hidden' }}>\n        {Object.values(togetherModeParticipantStatus).map(\n          (participantStatus) =>\n            participantStatus.id && (\n              <div\n                key={participantStatus.id}\n                data-ui-id={`together-mode-participant-${participantStatus.id}`}\n                style={{\n                  ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)\n                }}\n                onMouseEnter={() => setHoveredParticipantID(participantStatus.id)}\n                onMouseLeave={() => setHoveredParticipantID('')}\n              >\n                <div>\n                  {participantStatus.showDisplayName && (\n                    <div style={{ ...participantStatusTransitionStyle }}>\n                      <div\n                        style={{\n                          ...togetherModeParticipantStatusContainer(\n                            callingPalette.videoTileLabelBackgroundLight,\n                            theme.effects.roundedCorner4\n                          )\n                        }}\n                      >\n                        {participantStatus.isHandRaised && <RaisedHandIcon />}\n                        {participantStatus.showDisplayName && (\n                          <Text\n                            style={{\n                              ...togetherModeParticipantDisplayName(\n                                hoveredParticipantID === participantStatus.id,\n                                parseFloat(participantStatus.seatPositionStyle.seatPosition.width),\n                                participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit'\n                              )\n                            }}\n                          >\n                            {participantStatus.displayName}\n                          </Text>\n                        )}\n                        {participantStatus.isMuted && (\n                          <Stack className={mergeStyles(togetherModeIconStyle)}>\n                            <Icon iconName=\"VideoTileMicOff\" />\n                          </Stack>\n                        )}\n                        {participantStatus.isSpotlighted && (\n                          <Stack className={mergeStyles(togetherModeIconStyle)}>\n                            <Icon iconName=\"VideoTileSpotlighted\" />\n                          </Stack>\n                        )}\n                      </div>\n                    </div>\n                  )}\n\n                  {participantStatus.reaction?.reactionType && (\n                    // First div - Section that fixes the travel height and applies the movement animation\n                    // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position\n                    // Third div - Play Animation as the other animation applies on the base play animation for the sprite\n                    <div\n                      style={moveAnimationStyles(\n                        parseFloat(participantStatus.seatPositionStyle.seatPosition.height) *\n                          REACTION_MAX_TRAVEL_HEIGHT,\n                        parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT\n                      )}\n                    >\n                      <div\n                        data-ui-id={`together-mode-participant-reaction-${participantStatus.id}`}\n                        style={{\n                          ...togetherModeParticipantEmojiSpriteStyle(\n                            emojiSize,\n                            participantStatus.scaledSize || 1,\n                            participantStatus.seatPositionStyle.seatPosition.width\n                          )\n                        }}\n                      >\n                        <div\n                          style={spriteAnimationStyles(\n                            REACTION_NUMBER_OF_ANIMATION_FRAMES,\n                            participantStatus.scaledSize || 1,\n                            (participantStatus.reaction &&\n                              getEmojiResource(participantStatus?.reaction.reactionType, reactionResources)) ??\n                              ''\n                          )}\n                        />\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            )\n        )}\n      </div>\n    );\n  }\n);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/Layout.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\nimport { OverflowGalleryPosition } from '../VideoGallery';\n\n/**\n * Props for a layout component\n *\n * @private\n */\nexport interface LayoutProps {\n  /**\n   * Styles for the {@link DefaultLayout}\n   */\n  styles?: Omit<VideoGalleryStyles, 'root'>;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** Local participant information */\n  localParticipant?: VideoGalleryParticipant;\n  /** Callback to render each remote participant */\n  onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Component that contains local video content */\n  localVideoComponent?: JSX.Element;\n  /** Component that contains screen share content */\n  screenShareComponent?: JSX.Element;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams: number;\n  /**\n   * Width of parent element\n   */\n  parentWidth?: number;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * List of pinned participant userIds\n   */\n  pinnedParticipantUserIds?: string[];\n  /**\n   * Determines the layout of the overflowGallery.\n   * @defaultValue 'horizontalBottom'\n   */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  /**\n   * List of spotlighted participant userIds\n   */\n  spotlightedParticipantUserIds?: string[];\n  /* @conditional-compile-remove(together-mode) */\n  /**\n   * Props for a layout component\n   *\n   */\n  togetherModeStreamComponent?: JSX.Element;\n}\n"]}
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/Layout.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\nimport { OverflowGalleryPosition } from '../VideoGallery';\n\n/**\n * Props for a layout component\n *\n * @private\n */\nexport interface LayoutProps {\n  /**\n   * Styles for the {@link DefaultLayout}\n   */\n  styles?: Omit<VideoGalleryStyles, 'root'>;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** Local participant information */\n  localParticipant?: VideoGalleryParticipant;\n  /** Callback to render each remote participant */\n  onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Component that contains local video content */\n  localVideoComponent?: JSX.Element;\n  /** Component that contains screen share content */\n  screenShareComponent?: JSX.Element;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams: number;\n  /**\n   * Width of parent element\n   */\n  parentWidth?: number;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * List of pinned participant userIds\n   */\n  pinnedParticipantUserIds?: string[];\n  /**\n   * Determines the layout of the overflowGallery.\n   * @defaultValue 'horizontalBottom'\n   */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  /**\n   * List of spotlighted participant userIds\n   */\n  spotlightedParticipantUserIds?: string[];\n  /**\n   * Props for a layout component\n   *\n   */\n  togetherModeStreamComponent?: JSX.Element;\n}\n"]}

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

@@ -1,10 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(together-mode) */
 import React from 'react';
-/* @conditional-compile-remove(together-mode) */
 import { Stack } from '@fluentui/react';
-/* @conditional-compile-remove(together-mode) */
 /**
  * A memoized version of local screen share component. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.

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

@@ -1 +1 @@
-{"version":3,"file":"TogetherModeLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,gDAAgD;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,gDAAgD;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,gDAAgD;AAChD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAmD,EAAe,EAAE;IACrG,MAAM,EAAE,2BAA2B,EAAE,GAAG,KAAK,CAAC;IAC9C,OAAO,oBAAC,KAAK,QAAE,2BAA2B,CAAS,CAAC;AACtD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) */\nimport React from 'react';\n/* @conditional-compile-remove(together-mode) */\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(together-mode) */\nimport { Stack } from '@fluentui/react';\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeLayout = (props: { togetherModeStreamComponent: JSX.Element }): JSX.Element => {\n  const { togetherModeStreamComponent } = props;\n  return <Stack>{togetherModeStreamComponent}</Stack>;\n};\n"]}
+{"version":3,"file":"TogetherModeLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAmD,EAAe,EAAE;IACrG,MAAM,EAAE,2BAA2B,EAAE,GAAG,KAAK,CAAC;IAC9C,OAAO,oBAAC,KAAK,QAAE,2BAA2B,CAAS,CAAC;AACtD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Stack } from '@fluentui/react';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeLayout = (props: { togetherModeStreamComponent: JSX.Element }): JSX.Element => {\n  const { togetherModeStreamComponent } = props;\n  return <Stack>{togetherModeStreamComponent}</Stack>;\n};\n"]}

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

@@ -1,16 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(together-mode) */
 import React, { useEffect, useMemo, memo, useState } from 'react';
-/* @conditional-compile-remove(together-mode) */
 import { StreamMedia } from '../StreamMedia';
-/* @conditional-compile-remove(together-mode) */
 import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
-/* @conditional-compile-remove(together-mode) */
 import { Stack } from '@fluentui/react';
-/* @conditional-compile-remove(together-mode) */
 import { togetherModeStreamRootStyle } from '../styles/TogetherMode.styles';
-/* @conditional-compile-remove(together-mode) */
 /**
  * A memoized version of local screen share component. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.

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

@@ -1 +1 @@
-{"version":3,"file":"TogetherModeStream.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeStream.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) */\nimport React, { useEffect, useMemo, memo, useState } from 'react';\n/* @conditional-compile-remove(together-mode) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(together-mode) */\nimport {\n  ReactionResources,\n  VideoGalleryTogetherModeParticipantPosition,\n  VideoGalleryTogetherModeStreams,\n  TogetherModeStreamViewResult,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  TogetherModeStreamOptions\n} from '../../types';\n/* @conditional-compile-remove(together-mode) */\nimport { StreamMedia } from '../StreamMedia';\n/* @conditional-compile-remove(together-mode) */\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\n/* @conditional-compile-remove(together-mode) */\nimport { Stack } from '@fluentui/react';\n/* @conditional-compile-remove(together-mode) */\nimport { togetherModeStreamRootStyle } from '../styles/TogetherMode.styles';\n/* @conditional-compile-remove(together-mode) */\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeStream = memo(\n  (props: {\n    startTogetherModeEnabled?: boolean;\n    isTogetherModeActive?: boolean;\n    onCreateTogetherModeStreamView?: (\n      options?: TogetherModeStreamOptions\n    ) => Promise<void | TogetherModeStreamViewResult>;\n    onStartTogetherMode?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;\n    onDisposeTogetherModeStreamView?: () => Promise<void>;\n    onSetTogetherModeSceneSize?: (width: number, height: number) => void;\n    togetherModeStreams?: VideoGalleryTogetherModeStreams;\n    seatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n    reactionResources?: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    containerWidth?: number;\n    containerHeight?: number;\n  }): JSX.Element => {\n    const {\n      startTogetherModeEnabled,\n      isTogetherModeActive,\n      onCreateTogetherModeStreamView,\n      onStartTogetherMode,\n      onSetTogetherModeSceneSize,\n      onDisposeTogetherModeStreamView,\n      togetherModeStreams,\n      containerWidth,\n      containerHeight\n    } = props;\n\n    const [showLoadingIndicator, setShowLoadingIndicator] = useState(false);\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeTogetherModeStreamView && onDisposeTogetherModeStreamView();\n      };\n    }, [onDisposeTogetherModeStreamView]);\n\n    // Trigger startTogetherMode only when needed\n    useEffect(() => {\n      if (startTogetherModeEnabled && !isTogetherModeActive) {\n        onStartTogetherMode?.();\n      }\n    }, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);\n\n    // Create stream view if not already created\n    useEffect(() => {\n      if (togetherModeStreams?.mainVideoStream?.isAvailable && !togetherModeStreams?.mainVideoStream?.renderElement) {\n        onCreateTogetherModeStreamView?.();\n      }\n    }, [\n      togetherModeStreams?.mainVideoStream?.renderElement,\n      togetherModeStreams?.mainVideoStream?.isAvailable,\n      onCreateTogetherModeStreamView\n    ]);\n    // Re-render the component if mainVideoStream isReceiving changes\n    useEffect(() => {\n      setShowLoadingIndicator(!togetherModeStreams?.mainVideoStream?.isReceiving);\n      // This effect will trigger a re-render when isReceiving changes\n    }, [togetherModeStreams?.mainVideoStream?.isReceiving]);\n    // Update scene size only when container dimensions change\n    useMemo(() => {\n      if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {\n        onSetTogetherModeSceneSize(containerWidth, containerHeight);\n      }\n    }, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);\n\n    const stream = props.togetherModeStreams?.mainVideoStream;\n\n    return containerWidth && containerHeight ? (\n      <Stack\n        styles={togetherModeStreamRootStyle}\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        data-ui-id=\"together-mode-layout\"\n      >\n        <StreamMedia\n          videoStreamElement={stream?.renderElement || null}\n          isMirrored={true}\n          loadingState={showLoadingIndicator ? 'loading' : 'none'}\n        />\n        <MeetingReactionOverlay\n          reactionResources={props.reactionResources || ({} as ReactionResources)}\n          localParticipant={props.localParticipant}\n          remoteParticipants={props.remoteParticipants}\n          togetherModeSeatPositions={props.seatingCoordinates}\n          overlayMode=\"together-mode\"\n        />\n      </Stack>\n    ) : (\n      <></>\n    );\n  }\n);\n"]}
+{"version":3,"file":"TogetherModeStream.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeStream.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useMemo, memo, useState } from 'react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport {\n  ReactionResources,\n  VideoGalleryTogetherModeParticipantPosition,\n  VideoGalleryTogetherModeStreams,\n  TogetherModeStreamViewResult,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  TogetherModeStreamOptions\n} from '../../types';\nimport { StreamMedia } from '../StreamMedia';\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\nimport { Stack } from '@fluentui/react';\nimport { togetherModeStreamRootStyle } from '../styles/TogetherMode.styles';\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeStream = memo(\n  (props: {\n    startTogetherModeEnabled?: boolean;\n    isTogetherModeActive?: boolean;\n    onCreateTogetherModeStreamView?: (\n      options?: TogetherModeStreamOptions\n    ) => Promise<void | TogetherModeStreamViewResult>;\n    onStartTogetherMode?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;\n    onDisposeTogetherModeStreamView?: () => Promise<void>;\n    onSetTogetherModeSceneSize?: (width: number, height: number) => void;\n    togetherModeStreams?: VideoGalleryTogetherModeStreams;\n    seatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n    reactionResources?: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    containerWidth?: number;\n    containerHeight?: number;\n  }): JSX.Element => {\n    const {\n      startTogetherModeEnabled,\n      isTogetherModeActive,\n      onCreateTogetherModeStreamView,\n      onStartTogetherMode,\n      onSetTogetherModeSceneSize,\n      onDisposeTogetherModeStreamView,\n      togetherModeStreams,\n      containerWidth,\n      containerHeight\n    } = props;\n\n    const [showLoadingIndicator, setShowLoadingIndicator] = useState(false);\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeTogetherModeStreamView && onDisposeTogetherModeStreamView();\n      };\n    }, [onDisposeTogetherModeStreamView]);\n\n    // Trigger startTogetherMode only when needed\n    useEffect(() => {\n      if (startTogetherModeEnabled && !isTogetherModeActive) {\n        onStartTogetherMode?.();\n      }\n    }, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);\n\n    // Create stream view if not already created\n    useEffect(() => {\n      if (togetherModeStreams?.mainVideoStream?.isAvailable && !togetherModeStreams?.mainVideoStream?.renderElement) {\n        onCreateTogetherModeStreamView?.();\n      }\n    }, [\n      togetherModeStreams?.mainVideoStream?.renderElement,\n      togetherModeStreams?.mainVideoStream?.isAvailable,\n      onCreateTogetherModeStreamView\n    ]);\n    // Re-render the component if mainVideoStream isReceiving changes\n    useEffect(() => {\n      setShowLoadingIndicator(!togetherModeStreams?.mainVideoStream?.isReceiving);\n      // This effect will trigger a re-render when isReceiving changes\n    }, [togetherModeStreams?.mainVideoStream?.isReceiving]);\n    // Update scene size only when container dimensions change\n    useMemo(() => {\n      if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {\n        onSetTogetherModeSceneSize(containerWidth, containerHeight);\n      }\n    }, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);\n\n    const stream = props.togetherModeStreams?.mainVideoStream;\n\n    return containerWidth && containerHeight ? (\n      <Stack\n        styles={togetherModeStreamRootStyle}\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        data-ui-id=\"together-mode-layout\"\n      >\n        <StreamMedia\n          videoStreamElement={stream?.renderElement || null}\n          isMirrored={true}\n          loadingState={showLoadingIndicator ? 'loading' : 'none'}\n        />\n        <MeetingReactionOverlay\n          reactionResources={props.reactionResources || ({} as ReactionResources)}\n          localParticipant={props.localParticipant}\n          remoteParticipants={props.remoteParticipants}\n          togetherModeSeatPositions={props.seatingCoordinates}\n          overlayMode=\"together-mode\"\n        />\n      </Stack>\n    ) : (\n      <></>\n    );\n  }\n);\n"]}

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

@@ -104,7 +104,7 @@ export type LocalScreenShareView = 'stream' | 'placeholderMessage';
 /**
  * @public
  */
-export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | /* @conditional-compile-remove(large-gallery) */ 'largeGallery' | /* @conditional-compile-remove(together-mode) */ 'togetherMode' | 'focusedContent';
+export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | /* @conditional-compile-remove(large-gallery) */ 'largeGallery' | 'togetherMode' | 'focusedContent';
 /**
  * {@link VideoGallery} Component Styles.
  * @public

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

@@ -10,8 +10,7 @@ import { _RemoteVideoTile } from './RemoteVideoTile';
 import { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';
 import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
 import { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';
-import { 
-/* @conditional-compile-remove(together-mode) */ _isIdentityMicrosoftTeamsUser } from "../../../acs-ui-common/src";
+import { _isIdentityMicrosoftTeamsUser } from "../../../acs-ui-common/src";
 import { _LocalVideoTile } from './LocalVideoTile';
 import { DefaultLayout } from './VideoGallery/DefaultLayout';
 import { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';
@@ -23,9 +22,7 @@ import { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';
 import { FocusedContentLayout } from './VideoGallery/FocusContentLayout';
 /* @conditional-compile-remove(large-gallery) */
 import { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';
-/* @conditional-compile-remove(together-mode) */
 import { TogetherModeLayout } from './VideoGallery/TogetherModeLayout';
-/* @conditional-compile-remove(together-mode) */
 import { TogetherModeStream } from './VideoGallery/TogetherModeStream';
 /**
  * @private
@@ -68,23 +65,7 @@ export const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  */
 export const VideoGallery = (props) => {
     var _a, _b, _c, _d;
-    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteScreenShareStreamView, onDisposeLocalScreenShareStreamView, onDisposeRemoteVideoStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, onPinParticipant: onPinParticipantHandler, onUnpinParticipant: onUnpinParticipantHandler, remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, overflowGalleryPosition = 'horizontalBottom', localVideoTileSize = 'followDeviceOrientation', spotlightedParticipants, onStartLocalSpotlight, onStartRemoteSpotlight, onStopLocalSpotlight, onStopRemoteSpotlight, maxParticipantsToSpotlight, reactionResources, videoTilesOptions, onMuteParticipant, 
-    /* @conditional-compile-remove(together-mode) */
-    startTogetherModeEnabled, 
-    /* @conditional-compile-remove(together-mode) */
-    isTogetherModeActive, 
-    /* @conditional-compile-remove(together-mode) */
-    onCreateTogetherModeStreamView, 
-    /* @conditional-compile-remove(together-mode) */
-    onStartTogetherMode, 
-    /* @conditional-compile-remove(together-mode) */
-    onSetTogetherModeSceneSize, 
-    /* @conditional-compile-remove(together-mode) */
-    togetherModeStreams, 
-    /* @conditional-compile-remove(together-mode) */
-    togetherModeSeatingCoordinates, 
-    /* @conditional-compile-remove(together-mode) */
-    onDisposeTogetherModeStreamView, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo, localScreenShareView } = props;
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteScreenShareStreamView, onDisposeLocalScreenShareStreamView, onDisposeRemoteVideoStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, onPinParticipant: onPinParticipantHandler, onUnpinParticipant: onUnpinParticipantHandler, remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, overflowGalleryPosition = 'horizontalBottom', localVideoTileSize = 'followDeviceOrientation', spotlightedParticipants, onStartLocalSpotlight, onStartRemoteSpotlight, onStopLocalSpotlight, onStopRemoteSpotlight, maxParticipantsToSpotlight, reactionResources, videoTilesOptions, onMuteParticipant, startTogetherModeEnabled, isTogetherModeActive, onCreateTogetherModeStreamView, onStartTogetherMode, onSetTogetherModeSceneSize, togetherModeStreams, togetherModeSeatingCoordinates, onDisposeTogetherModeStreamView, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo, localScreenShareView } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale().strings.videoGallery;
@@ -264,11 +245,9 @@ export const VideoGallery = (props) => {
         : localParticipant.isScreenSharingOn
             ? localScreenShareStreamComponent
             : undefined;
-    /* @conditional-compile-remove(together-mode) */
     // Current implementation of capabilities is only based on user role.
     // This logic checks for the user role and if the user is a Teams user.
     const canSwitchToTogetherModeLayout = isTogetherModeActive || (_isIdentityMicrosoftTeamsUser(localParticipant.userId) && startTogetherModeEnabled);
-    /* @conditional-compile-remove(together-mode) */
     const togetherModeStreamComponent = useMemo(() => 
     // Avoids unnecessary rendering of TogetherModeStream component when it is not needed
     !screenShareComponent && canSwitchToTogetherModeLayout && layout === 'togetherMode' ? (React.createElement(TogetherModeStream, { startTogetherModeEnabled: startTogetherModeEnabled, isTogetherModeActive: isTogetherModeActive, onCreateTogetherModeStreamView: onCreateTogetherModeStreamView, onStartTogetherMode: onStartTogetherMode, onDisposeTogetherModeStreamView: onDisposeTogetherModeStreamView, onSetTogetherModeSceneSize: onSetTogetherModeSceneSize, togetherModeStreams: togetherModeStreams, seatingCoordinates: togetherModeSeatingCoordinates, localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, containerWidth: containerWidth, containerHeight: containerHeight })) : undefined, [
@@ -337,19 +316,13 @@ export const VideoGallery = (props) => {
         if (layout === 'largeGallery') {
             return React.createElement(LargeGalleryLayout, Object.assign({}, layoutProps));
         }
-        /* @conditional-compile-remove(together-mode) */
         // Teams users can switch to Together mode layout only if they have the capability,
         // while ACS users can do so only if Together mode is enabled.
         if (togetherModeStreamComponent && layout === 'togetherMode') {
             return React.createElement(TogetherModeLayout, { togetherModeStreamComponent: togetherModeStreamComponent });
         }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
-    }, [
-        layout,
-        layoutProps,
-        screenShareParticipant,
-        /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent
-    ]);
+    }, [layout, layoutProps, screenShareParticipant, togetherModeStreamComponent]);
     return (React.createElement("div", { 
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
         id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root, unselectable) },