@azure/communication-react 1.3.3-alpha-202208190016.0 → 1.3.3-alpha-202208240015.0

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.3.3-alpha-202208190016.0';
+module.exports = '1.3.3-alpha-202208240015.0';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.3.3-alpha-202208190016.0';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.3.3-alpha-202208240015.0';\n"]}

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.js

@@ -44,7 +44,7 @@ export const _DrawerMenu = (props) => {
         }
     }), [firstItemStyle, borderRadius]);
     return (React.createElement(_DrawerSurface, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss },
-        React.createElement(Stack, { styles: props.styles, role: "menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
+        React.createElement(Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
             menuItemsToRender.slice(0, 1).map((item) => (React.createElement(DrawerMenuItem, Object.assign({}, item, { key: '0', styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);
                 } })))), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  styles?: _DrawerMenuStyles;\n}\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find((item) => item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback(\n    (\n      item: _DrawerMenuItemProps,\n      ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined,\n      itemKey?: string | undefined\n    ): void => {\n      if (item.subMenuProps) {\n        setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n      }\n\n      item.onItemClick?.(ev, itemKey);\n    },\n    [selectedKeyPath]\n  );\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(\n    () =>\n      merge(firstItemStyle ?? {}, {\n        root: {\n          borderTopRightRadius: borderRadius,\n          borderTopLeftRadius: borderRadius\n        }\n      }),\n    [firstItemStyle, borderRadius]\n  );\n\n  return (\n    <_DrawerSurface styles={props.styles?.drawerSurfaceStyles} onLightDismiss={props.onLightDismiss}>\n      <Stack styles={props.styles} role=\"menu\">\n        {menuItemsToRender?.slice(0, 1).map((item) => (\n          <DrawerMenuItem\n            {...item}\n            key={'0'}\n            styles={modifiedFirstItemStyle}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n        {menuItemsToRender?.slice(1).map((item, i) => (\n          <DrawerMenuItem\n            {...item}\n            key={`${i + 1}`}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n      </Stack>\n    </_DrawerSurface>\n  );\n};\n"]}
+{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAwB,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAwB,MAAM,iBAAiB,CAAC;AA4BvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;;IAClE,gGAAgG;IAChG,iGAAiG;IACjG,+EAA+E;IAC/E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,6CAA6C;IAC7C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACrC,IAAI,KAAK,GAAuC,KAAK,CAAC,KAAK,CAAC;QAC5D,KAAK,MAAM,UAAU,IAAI,eAAe,EAAE;YACxC,KAAK,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,0CAAE,YAAY,CAAC;SAC1E;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnC,oGAAoG;IACpG,kGAAkG;IAClG,MAAM,WAAW,GAAG,WAAW,CAC7B,CACE,IAA0B,EAC1B,EAA6F,EAC7F,OAA4B,EACtB,EAAE;;QACR,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,kBAAkB,CAAC,CAAC,GAAG,eAAe,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SACxD;QAED,MAAA,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,EAAE,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,2EAA2E;IAC3E,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACvD,MAAM,cAAc,GAAG,iBAAiB,KAAI,MAAA,iBAAiB,CAAC,CAAC,CAAC,0CAAE,MAAM,CAAA,CAAC;IACzE,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,CACH,KAAK,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,EAAE;QAC1B,IAAI,EAAE;YACJ,oBAAoB,EAAE,YAAY;YAClC,mBAAmB,EAAE,YAAY;SAClC;KACF,CAAC,EACJ,CAAC,cAAc,EAAE,YAAY,CAAC,CAC/B,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IAAC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,mBAAmB,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc;QAC7F,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,gBAAY,aAAa,IAC9D,iBAAiB,aAAjB,iBAAiB;YAAjB,iBAAiB,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5C,oBAAC,cAAc,oBACT,IAAI,IACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,sBAAsB,EAC9B,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;oBAC3B,WAAW,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;gBACjC,CAAC,IACD,CACH,CAAC,EACD,iBAAiB,aAAjB,iBAAiB;YAAjB,iBAAiB,CAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5C,oBAAC,cAAc,oBACT,IAAI,IACR,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,EACf,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;oBAC3B,WAAW,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;gBACjC,CAAC,IACD,CACH,CAAC,CACI,CACO,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  styles?: _DrawerMenuStyles;\n}\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find((item) => item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback(\n    (\n      item: _DrawerMenuItemProps,\n      ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined,\n      itemKey?: string | undefined\n    ): void => {\n      if (item.subMenuProps) {\n        setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n      }\n\n      item.onItemClick?.(ev, itemKey);\n    },\n    [selectedKeyPath]\n  );\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(\n    () =>\n      merge(firstItemStyle ?? {}, {\n        root: {\n          borderTopRightRadius: borderRadius,\n          borderTopLeftRadius: borderRadius\n        }\n      }),\n    [firstItemStyle, borderRadius]\n  );\n\n  return (\n    <_DrawerSurface styles={props.styles?.drawerSurfaceStyles} onLightDismiss={props.onLightDismiss}>\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map((item) => (\n          <DrawerMenuItem\n            {...item}\n            key={'0'}\n            styles={modifiedFirstItemStyle}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n        {menuItemsToRender?.slice(1).map((item, i) => (\n          <DrawerMenuItem\n            {...item}\n            key={`${i + 1}`}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n      </Stack>\n    </_DrawerSurface>\n  );\n};\n"]}

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { Icon, merge, mergeStyles, PersonaPresence, Stack } from '@fluentui/react';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(rooms) */
@@ -51,14 +51,14 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  * @public
  */
 export const ParticipantList = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
     const ids = useIdentifiers();
     const strings = useLocale().strings.participantItem;
     const displayedParticipants = useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
-    const createParticipantMenuItems = (participant) => {
+    const createParticipantMenuItems = useCallback((participant) => {
         var _a, _b;
         let menuItems = [];
         let disabled = !participant.isRemovable;
@@ -82,9 +82,16 @@ export const ParticipantList = (props) => {
             menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);
         }
         return menuItems;
-    };
-    const participantItemStyles = merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles);
-    return (React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root) }, displayedParticipants.map((participant) => onRenderParticipant
+    }, [
+        ids.participantListRemoveParticipantButton,
+        myUserId,
+        onFetchParticipantMenuItems,
+        onRemoveParticipant,
+        (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles,
+        strings.removeButtonLabel
+    ]);
+    const participantItemStyles = useMemo(() => { var _a; return merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
+    return (React.createElement(Stack, { "data-ui-id": ids.participantList, className: mergeStyles(participantListStyle, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.root) }, displayedParticipants.map((participant) => onRenderParticipant
         ? onRenderParticipant(participant)
         : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack\n} from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Styles for the {@link ParticipantList} */\n  styles?: ParticipantListStyles;\n  /** prop to determine if we should show tooltip for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    if (callingParticipant.state === 'Connected') {\n      presence = PersonaPresence.online;\n    } else if (callingParticipant.state === 'Idle') {\n      presence = PersonaPresence.away;\n    }\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing || callingParticipant?.isMuted\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n          </Stack>\n        )\n      : () => null;\n\n  const displayName = !participant.displayName ? strings.displayNamePlaceholder : participant.displayName;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatar}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n    />\n  );\n};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  } = props;\n\n  const ids = useIdentifiers();\n  const strings = useLocale().strings.participantItem;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  const createParticipantMenuItems = (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n    let menuItems: IContextualMenuItem[] = [];\n    let disabled = !participant.isRemovable;\n    /* @conditional-compile-remove(rooms) */\n    const isRemovable = _usePermissions().removeParticipantButton;\n    /* @conditional-compile-remove(rooms) */\n    disabled = !isRemovable || disabled;\n    if (participant.userId !== myUserId && onRemoveParticipant) {\n      menuItems.push({\n        key: 'remove',\n        text: strings.removeButtonLabel,\n        onClick: () => onRemoveParticipant(participant.userId),\n        itemProps: {\n          styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n        },\n        disabled: disabled,\n        'data-ui-id': ids.participantListRemoveParticipantButton\n      });\n    }\n\n    if (onFetchParticipantMenuItems) {\n      menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n    }\n\n    return menuItems;\n  };\n\n  const participantItemStyles = merge(participantListItemStyle, props.styles?.participantItemStyles);\n  return (\n    <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              strings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip\n            )\n      )}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  merge,\n  mergeStyles,\n  PersonaPresence,\n  Stack\n} from '@fluentui/react';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport {\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  OnRenderAvatarCallback,\n  ParticipantListParticipant\n} from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\n\n/**\n * Styles for the {@link ParticipantList} {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n  /** Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. */\n  participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the {@link ParticipantList}.\n *\n * @public\n */\nexport interface ParticipantListStyles extends BaseCustomStyles {\n  /** Styles for the {@link ParticipantList} {@link ParticipantItem}. */\n  participantItemStyles?: ParticipantListItemStyles;\n}\n\n/**\n * A callback for providing custom menu items for each participant in {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantMenuItemsCallback = (\n  participantUserId: string,\n  userId?: string,\n  defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/**\n * Props for {@link ParticipantList}.\n *\n * @public\n */\nexport type ParticipantListProps = {\n  /** Participants in user call or chat */\n  participants: ParticipantListParticipant[];\n  /** User ID of user */\n  myUserId?: string;\n  /**\n   * If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n   *\n   * @defaultValue `false`\n   */\n  excludeMe?: boolean;\n  /** Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem`  */\n  onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element | null;\n  /** Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned.  */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /** Optional callback to render the context menu for each participant  */\n  onRemoveParticipant?: (userId: string) => void;\n  /** Optional callback to render custom menu items for each participant. */\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /** Optional callback when rendered ParticipantItem is clicked */\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n  /** Styles for the {@link ParticipantList} */\n  styles?: ParticipantListStyles;\n  /** prop to determine if we should show tooltip for participants or not */\n  showParticipantOverflowTooltip?: boolean;\n};\n\nconst onRenderParticipantDefault = (\n  participant: ParticipantListParticipant,\n  strings: ParticipantItemStrings,\n  myUserId?: string,\n  onRenderAvatar?: OnRenderAvatarCallback,\n  createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n  styles?: ParticipantListItemStyles,\n  onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n  showParticipantOverflowTooltip?: boolean\n): JSX.Element | null => {\n  const callingParticipant = participant as CallParticipantListParticipant;\n\n  let presence: PersonaPresence | undefined = undefined;\n  if (callingParticipant) {\n    if (callingParticipant.state === 'Connected') {\n      presence = PersonaPresence.online;\n    } else if (callingParticipant.state === 'Idle') {\n      presence = PersonaPresence.away;\n    }\n  }\n\n  const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n  const onRenderIcon =\n    callingParticipant?.isScreenSharing || callingParticipant?.isMuted\n      ? () => (\n          <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n            {callingParticipant.isScreenSharing && (\n              <Icon\n                iconName=\"ParticipantItemScreenShareStart\"\n                className={iconStyles}\n                ariaLabel={strings.sharingIconLabel}\n              />\n            )}\n            {callingParticipant.isMuted && (\n              <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n            )}\n          </Stack>\n        )\n      : () => null;\n\n  const displayName = !participant.displayName ? strings.displayNamePlaceholder : participant.displayName;\n\n  return (\n    <ParticipantItem\n      styles={styles}\n      key={participant.userId}\n      userId={participant.userId}\n      displayName={displayName}\n      me={myUserId ? participant.userId === myUserId : false}\n      menuItems={menuItems}\n      presence={presence}\n      onRenderIcon={onRenderIcon}\n      onRenderAvatar={onRenderAvatar}\n      onClick={() => onParticipantClick?.(participant)}\n      showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      /* @conditional-compile-remove(PSTN-calls) */\n      participantState={callingParticipant.state}\n    />\n  );\n};\n\nconst getParticipantsForDefaultRender = (\n  participants: ParticipantListParticipant[],\n  excludeMe: boolean,\n  myUserId: string | undefined\n): ParticipantListParticipant[] => {\n  if (!excludeMe || !myUserId) {\n    return [...participants];\n  }\n\n  const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n  if (userIndex === -1) {\n    return [...participants];\n  }\n\n  const remoteParticipants = [...participants];\n  remoteParticipants.splice(userIndex, 1);\n\n  return remoteParticipants;\n};\n\n/**\n * Component to render all calling or chat participants.\n *\n * By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n *\n * @public\n */\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n  const {\n    excludeMe = false,\n    myUserId,\n    participants,\n    onRemoveParticipant,\n    onRenderAvatar,\n    onRenderParticipant,\n    onFetchParticipantMenuItems,\n    showParticipantOverflowTooltip\n  } = props;\n\n  const ids = useIdentifiers();\n  const strings = useLocale().strings.participantItem;\n\n  const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n    return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n  }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n  const createParticipantMenuItems = useCallback(\n    (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n      let menuItems: IContextualMenuItem[] = [];\n      let disabled = !participant.isRemovable;\n      /* @conditional-compile-remove(rooms) */\n      const isRemovable = _usePermissions().removeParticipantButton;\n      /* @conditional-compile-remove(rooms) */\n      disabled = !isRemovable || disabled;\n      if (participant.userId !== myUserId && onRemoveParticipant) {\n        menuItems.push({\n          key: 'remove',\n          text: strings.removeButtonLabel,\n          onClick: () => onRemoveParticipant(participant.userId),\n          itemProps: {\n            styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n          },\n          disabled: disabled,\n          'data-ui-id': ids.participantListRemoveParticipantButton\n        });\n      }\n\n      if (onFetchParticipantMenuItems) {\n        menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n      }\n\n      return menuItems;\n    },\n    [\n      ids.participantListRemoveParticipantButton,\n      myUserId,\n      onFetchParticipantMenuItems,\n      onRemoveParticipant,\n      props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n      strings.removeButtonLabel\n    ]\n  );\n\n  const participantItemStyles = useMemo(\n    () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n    [props.styles?.participantItemStyles]\n  );\n  return (\n    <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)}>\n      {displayedParticipants.map((participant: ParticipantListParticipant) =>\n        onRenderParticipant\n          ? onRenderParticipant(participant)\n          : onRenderParticipantDefault(\n              participant,\n              strings,\n              myUserId,\n              onRenderAvatar,\n              createParticipantMenuItems,\n              participantItemStyles,\n              props.onParticipantClick,\n              showParticipantOverflowTooltip\n            )\n      )}\n    </Stack>\n  );\n};\n"]}

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

@@ -75,12 +75,7 @@ export const VideoGallery = (props) => {
         maxDominantSpeakers: maxRemoteVideoStreams
     }).slice(0, maxRemoteVideoStreams);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    visibleCallingParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'))) !== null && _b !== void 0 ? _b : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleCallingParticipants.current,
-        maxDominantSpeakers: 0
-    });
+    visibleCallingParticipants.current = (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'))) !== null && _b !== void 0 ? _b : [];
     // This set will be used to filter out participants already in visibleVideoParticipants
     const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */

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

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, ContextualMenu, IDragOptions, IStyle, LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { smartDominantSpeakerParticipants } from '../gallery';\nimport { useIdentifiers } from '../identifiers/IdentifierProvider';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '../types';\nimport { GridLayout } from './GridLayout';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { ResponsiveHorizontalGallery } from './ResponsiveHorizontalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from './styles/HorizontalGallery.styles';\nimport {\n  LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  floatingLocalVideoModalStyle,\n  floatingLocalVideoTileStyle,\n  horizontalGalleryContainerStyle,\n  horizontalGalleryStyle,\n  layerHostStyle,\n  localVideoTileContainerStyle,\n  videoGalleryContainerStyle,\n  videoGalleryOuterDivStyle,\n  localVideoTileOuterPaddingPX,\n  SMALL_FLOATING_MODAL_SIZE_PX,\n  LARGE_FLOATING_MODAL_SIZE_PX\n} from './styles/VideoGallery.styles';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { useId } from '@fluentui/react-hooks';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX } from './styles/VideoGallery.styles';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n\n// Currently the Calling JS SDK supports up to 4 remote video streams\nconst DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n// Set aside only 6 dominant speakers for remaining audio participants\nconst MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n  /** Styles for the grid layout */\n  gridLayout?: GridLayoutStyles;\n  /** Styles for the horizontal gallery  */\n  horizontalGallery?: HorizontalGalleryStyles;\n  /** Styles for the local video  */\n  localVideo?: IStyle;\n}\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n}\n\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };\n\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n  const shouldFloatNonDraggableLocalVideo = !!(showCameraSwitcherInLocalPreview && shouldFloatLocalVideo);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n  const visibleVideoParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleAudioParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const visibleCallingParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;\n  const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;\n  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n  // to be dragged offscreen and these are the top and left bounds of that calculation.\n  const modalMinDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      containerWidth && containerHeight\n        ? {\n            // We use -containerWidth/Height because our modal is positioned to start in the bottom right,\n            // hence (0,0) is the bottom right of the video gallery.\n            x: -containerWidth + modalWidth + localVideoTileOuterPaddingPX,\n            y: -containerHeight + modalHeight + localVideoTileOuterPaddingPX\n          }\n        : undefined,\n    [containerHeight, containerWidth, modalHeight, modalWidth]\n  );\n\n  visibleVideoParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipants?.filter((p) => p.videoStream?.isAvailable) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleVideoParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreams\n  }).slice(0, maxRemoteVideoStreams);\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  visibleCallingParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipants?.filter((p) => p.state === ('Connecting' || 'Ringing')) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleCallingParticipants.current,\n    maxDominantSpeakers: 0\n  });\n  // This set will be used to filter out participants already in visibleVideoParticipants\n  const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const visibleCallingParticipantsSet = new Set(visibleCallingParticipants.current.map((p) => p.userId));\n\n  visibleAudioParticipants.current = smartDominantSpeakerParticipants({\n    participants:\n      remoteParticipants?.filter(\n        (p) =>\n          !visibleVideoParticipantsSet.has(p.userId) &&\n          /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !visibleCallingParticipantsSet.has(\n            p.userId\n          )\n      ) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleAudioParticipants.current,\n    maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS\n  });\n\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element => {\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const localVideoTileStyles = concatStyleSets(\n      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? strings.displayNamePlaceholder : localParticipant.displayName;\n\n    return (\n      <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile\n          userId={localParticipant.userId}\n          onCreateLocalStreamView={onCreateLocalStreamView}\n          onDisposeLocalStreamView={onDisposeLocalStreamView}\n          isAvailable={localParticipant?.videoStream?.isAvailable}\n          isMuted={localParticipant.isMuted}\n          renderElement={localParticipant?.videoStream?.renderElement}\n          displayName={isNarrow ? '' : strings.localVideoLabel}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={!(shouldFloatLocalVideo && isNarrow)}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    shouldFloatLocalVideo,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    strings.localVideoCameraSwitcherLabel,\n    strings.localVideoLabel,\n    strings.localVideoMovementLabel,\n    strings.localVideoSelectedDescription,\n    strings.displayNamePlaceholder,\n    styles?.localVideo,\n    theme.effects.roundedCorner4\n  ]);\n\n  const defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          {...participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n        />\n      );\n    },\n    [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]\n  );\n\n  const videoTiles = onRenderRemoteVideoTile\n    ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))\n    : visibleVideoParticipants.current.map((participant): JSX.Element => {\n        return defaultOnRenderVideoTile(participant, true);\n      });\n\n  const audioTiles = onRenderRemoteVideoTile\n    ? visibleAudioParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))\n    : visibleAudioParticipants.current.map((participant): JSX.Element => {\n        return defaultOnRenderVideoTile(participant, false);\n      });\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingTiles = onRenderRemoteVideoTile\n    ? visibleCallingParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))\n    : visibleCallingParticipants.current.map((participant): JSX.Element => {\n        return defaultOnRenderVideoTile(participant, false);\n      });\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n  const screenShareActive = screenShareParticipant || localParticipant?.isScreenSharingOn;\n\n  const createGridTiles = (): JSX.Element[] => {\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return videoTiles.length > 0 ? videoTiles : audioTiles.concat(callingTiles);\n    return videoTiles.length > 0 ? videoTiles : audioTiles;\n  };\n  const gridTiles = createGridTiles();\n\n  const createHorizontalGalleryTiles = (): JSX.Element[] => {\n    if (screenShareActive) {\n      // If screen sharing is active, assign video and audio participants as horizontal gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return videoTiles.concat(audioTiles.concat(callingTiles));\n      return videoTiles.concat(audioTiles);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return videoTiles.length > 0 ? audioTiles.concat(callingTiles) : [];\n      return videoTiles.length > 0 ? audioTiles : [];\n    }\n  };\n  const horizontalGalleryTiles = createHorizontalGalleryTiles();\n\n  if (!shouldFloatLocalVideo && localParticipant) {\n    gridTiles.push(localVideoTile);\n  }\n\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n    />\n  );\n\n  const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;\n  const layerHostId = useId('layerhost');\n\n  return (\n    <div\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n    >\n      {shouldFloatLocalVideo &&\n        !shouldFloatNonDraggableLocalVideo &&\n        localParticipant &&\n        (horizontalGalleryPresent ? (\n          <Stack className={mergeStyles(localVideoTileContainerStyle(theme, isNarrow))}>{localVideoTile}</Stack>\n        ) : (\n          <_ModalClone\n            isOpen={true}\n            isModeless={true}\n            dragOptions={DRAG_OPTIONS}\n            styles={floatingLocalVideoModalStyle(theme, isNarrow)}\n            layerProps={{ hostId: layerHostId }}\n            maxDragPosition={modalMaxDragPosition}\n            minDragPosition={modalMinDragPosition}\n          >\n            {localVideoTile}\n          </_ModalClone>\n        ))}\n      {\n        // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n        shouldFloatNonDraggableLocalVideo && localParticipant && remoteParticipants.length > 0 && (\n          <Stack\n            className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {\n              boxShadow: theme.effects.elevation8,\n              zIndex: LOCAL_VIDEO_TILE_ZINDEX\n            })}\n          >\n            {localVideoTile}\n          </Stack>\n        )\n      }\n      <Stack horizontal={false} styles={videoGalleryContainerStyle}>\n        {screenShareParticipant ? (\n          remoteScreenShareComponent\n        ) : localParticipant?.isScreenSharingOn ? (\n          localScreenShareStreamComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {horizontalGalleryPresent && (\n          <div style={{ paddingTop: '0.5rem' }}>\n            <ResponsiveHorizontalGallery\n              key=\"responsive-horizontal-gallery\"\n              containerStyles={horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow)}\n              horizontalGalleryStyles={concatStyleSets(horizontalGalleryStyle(isNarrow), styles?.horizontalGallery)}\n              childWidthRem={\n                isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width\n              }\n              buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n              gapWidthRem={HORIZONTAL_GALLERY_GAP}\n            >\n              {horizontalGalleryTiles}\n            </ResponsiveHorizontalGallery>\n          </div>\n        )}\n\n        <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      </Stack>\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, ContextualMenu, IDragOptions, IStyle, LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { smartDominantSpeakerParticipants } from '../gallery';\nimport { useIdentifiers } from '../identifiers/IdentifierProvider';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '../types';\nimport { GridLayout } from './GridLayout';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { ResponsiveHorizontalGallery } from './ResponsiveHorizontalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from './styles/HorizontalGallery.styles';\nimport {\n  LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  floatingLocalVideoModalStyle,\n  floatingLocalVideoTileStyle,\n  horizontalGalleryContainerStyle,\n  horizontalGalleryStyle,\n  layerHostStyle,\n  localVideoTileContainerStyle,\n  videoGalleryContainerStyle,\n  videoGalleryOuterDivStyle,\n  localVideoTileOuterPaddingPX,\n  SMALL_FLOATING_MODAL_SIZE_PX,\n  LARGE_FLOATING_MODAL_SIZE_PX\n} from './styles/VideoGallery.styles';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { useId } from '@fluentui/react-hooks';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX } from './styles/VideoGallery.styles';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n\n// Currently the Calling JS SDK supports up to 4 remote video streams\nconst DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n// Set aside only 6 dominant speakers for remaining audio participants\nconst MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String for local video label. Default is \"You\" */\n  localVideoLabel: string;\n  /** String for local video camera switcher */\n  localVideoCameraSwitcherLabel: string;\n  /** String for announcing the local video tile can be moved by keyboard controls */\n  localVideoMovementLabel: string;\n  /** String for announcing the selected camera */\n  localVideoSelectedDescription: string;\n  /** placeholder text for participants who does not have a display name*/\n  displayNamePlaceholder: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n  /** Styles for the grid layout */\n  gridLayout?: GridLayoutStyles;\n  /** Styles for the horizontal gallery  */\n  horizontalGallery?: HorizontalGalleryStyles;\n  /** Styles for the local video  */\n  localVideo?: IStyle;\n}\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n}\n\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };\n\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n  const shouldFloatNonDraggableLocalVideo = !!(showCameraSwitcherInLocalPreview && shouldFloatLocalVideo);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n  const visibleVideoParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleAudioParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const visibleCallingParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;\n  const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;\n  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n  // to be dragged offscreen and these are the top and left bounds of that calculation.\n  const modalMinDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      containerWidth && containerHeight\n        ? {\n            // We use -containerWidth/Height because our modal is positioned to start in the bottom right,\n            // hence (0,0) is the bottom right of the video gallery.\n            x: -containerWidth + modalWidth + localVideoTileOuterPaddingPX,\n            y: -containerHeight + modalHeight + localVideoTileOuterPaddingPX\n          }\n        : undefined,\n    [containerHeight, containerWidth, modalHeight, modalWidth]\n  );\n\n  visibleVideoParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipants?.filter((p) => p.videoStream?.isAvailable) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleVideoParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreams\n  }).slice(0, maxRemoteVideoStreams);\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  visibleCallingParticipants.current = remoteParticipants?.filter((p) => p.state === ('Connecting' || 'Ringing')) ?? [];\n\n  // This set will be used to filter out participants already in visibleVideoParticipants\n  const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const visibleCallingParticipantsSet = new Set(visibleCallingParticipants.current.map((p) => p.userId));\n\n  visibleAudioParticipants.current = smartDominantSpeakerParticipants({\n    participants:\n      remoteParticipants?.filter(\n        (p) =>\n          !visibleVideoParticipantsSet.has(p.userId) &&\n          /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !visibleCallingParticipantsSet.has(\n            p.userId\n          )\n      ) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleAudioParticipants.current,\n    maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS\n  });\n\n  /**\n   * Utility function for memoized rendering of LocalParticipant.\n   */\n  const localVideoTile = useMemo((): JSX.Element => {\n    if (onRenderLocalVideoTile) {\n      return onRenderLocalVideoTile(localParticipant);\n    }\n\n    const localVideoTileStyles = concatStyleSets(\n      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? strings.displayNamePlaceholder : localParticipant.displayName;\n\n    return (\n      <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n        <_LocalVideoTile\n          userId={localParticipant.userId}\n          onCreateLocalStreamView={onCreateLocalStreamView}\n          onDisposeLocalStreamView={onDisposeLocalStreamView}\n          isAvailable={localParticipant?.videoStream?.isAvailable}\n          isMuted={localParticipant.isMuted}\n          renderElement={localParticipant?.videoStream?.renderElement}\n          displayName={isNarrow ? '' : strings.localVideoLabel}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={!(shouldFloatLocalVideo && isNarrow)}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n        />\n      </Stack>\n    );\n  }, [\n    isNarrow,\n    localParticipant,\n    localVideoCameraCycleButtonProps,\n    localVideoViewOptions,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onRenderAvatar,\n    onRenderLocalVideoTile,\n    shouldFloatLocalVideo,\n    showCameraSwitcherInLocalPreview,\n    showMuteIndicator,\n    strings.localVideoCameraSwitcherLabel,\n    strings.localVideoLabel,\n    strings.localVideoMovementLabel,\n    strings.localVideoSelectedDescription,\n    strings.displayNamePlaceholder,\n    styles?.localVideo,\n    theme.effects.roundedCorner4\n  ]);\n\n  const defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          {...participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n        />\n      );\n    },\n    [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]\n  );\n\n  const videoTiles = onRenderRemoteVideoTile\n    ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))\n    : visibleVideoParticipants.current.map((participant): JSX.Element => {\n        return defaultOnRenderVideoTile(participant, true);\n      });\n\n  const audioTiles = onRenderRemoteVideoTile\n    ? visibleAudioParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))\n    : visibleAudioParticipants.current.map((participant): JSX.Element => {\n        return defaultOnRenderVideoTile(participant, false);\n      });\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingTiles = onRenderRemoteVideoTile\n    ? visibleCallingParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))\n    : visibleCallingParticipants.current.map((participant): JSX.Element => {\n        return defaultOnRenderVideoTile(participant, false);\n      });\n  const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n  const screenShareActive = screenShareParticipant || localParticipant?.isScreenSharingOn;\n\n  const createGridTiles = (): JSX.Element[] => {\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return videoTiles.length > 0 ? videoTiles : audioTiles.concat(callingTiles);\n    return videoTiles.length > 0 ? videoTiles : audioTiles;\n  };\n  const gridTiles = createGridTiles();\n\n  const createHorizontalGalleryTiles = (): JSX.Element[] => {\n    if (screenShareActive) {\n      // If screen sharing is active, assign video and audio participants as horizontal gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return videoTiles.concat(audioTiles.concat(callingTiles));\n      return videoTiles.concat(audioTiles);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return videoTiles.length > 0 ? audioTiles.concat(callingTiles) : [];\n      return videoTiles.length > 0 ? audioTiles : [];\n    }\n  };\n  const horizontalGalleryTiles = createHorizontalGalleryTiles();\n\n  if (!shouldFloatLocalVideo && localParticipant) {\n    gridTiles.push(localVideoTile);\n  }\n\n  const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n  const remoteScreenShareComponent = screenShareParticipant && (\n    <RemoteScreenShare\n      {...screenShareParticipant}\n      renderElement={screenShareParticipant.screenShareStream?.renderElement}\n      onCreateRemoteStreamView={onCreateRemoteStreamView}\n      onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n      isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n    />\n  );\n\n  const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;\n  const layerHostId = useId('layerhost');\n\n  return (\n    <div\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n    >\n      {shouldFloatLocalVideo &&\n        !shouldFloatNonDraggableLocalVideo &&\n        localParticipant &&\n        (horizontalGalleryPresent ? (\n          <Stack className={mergeStyles(localVideoTileContainerStyle(theme, isNarrow))}>{localVideoTile}</Stack>\n        ) : (\n          <_ModalClone\n            isOpen={true}\n            isModeless={true}\n            dragOptions={DRAG_OPTIONS}\n            styles={floatingLocalVideoModalStyle(theme, isNarrow)}\n            layerProps={{ hostId: layerHostId }}\n            maxDragPosition={modalMaxDragPosition}\n            minDragPosition={modalMinDragPosition}\n          >\n            {localVideoTile}\n          </_ModalClone>\n        ))}\n      {\n        // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n        shouldFloatNonDraggableLocalVideo && localParticipant && remoteParticipants.length > 0 && (\n          <Stack\n            className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {\n              boxShadow: theme.effects.elevation8,\n              zIndex: LOCAL_VIDEO_TILE_ZINDEX\n            })}\n          >\n            {localVideoTile}\n          </Stack>\n        )\n      }\n      <Stack horizontal={false} styles={videoGalleryContainerStyle}>\n        {screenShareParticipant ? (\n          remoteScreenShareComponent\n        ) : localParticipant?.isScreenSharingOn ? (\n          localScreenShareStreamComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {horizontalGalleryPresent && (\n          <div style={{ paddingTop: '0.5rem' }}>\n            <ResponsiveHorizontalGallery\n              key=\"responsive-horizontal-gallery\"\n              containerStyles={horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow)}\n              horizontalGalleryStyles={concatStyleSets(horizontalGalleryStyle(isNarrow), styles?.horizontalGallery)}\n              childWidthRem={\n                isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width\n              }\n              buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n              gapWidthRem={HORIZONTAL_GALLERY_GAP}\n            >\n              {horizontalGalleryTiles}\n            </ResponsiveHorizontalGallery>\n          </div>\n        )}\n\n        <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      </Stack>\n    </div>\n  );\n};\n\"../../../acs-ui-common/src\""]}

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

@@ -6,7 +6,7 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
-import { disabledVideoHint, displayNameStyle, iconContainerStyle, isSpeakingBorderDiv, overlayContainerStyles, rootStyles, videoContainerStyles, videoHint, tileInfoContainerStyle, participantStateStringStyles } from './styles/VideoTile.styles';
+import { disabledVideoHint, displayNameStyle, iconContainerStyle, overlayContainerStyles, rootStyles, videoContainerStyles, videoHint, tileInfoContainerStyle, participantStateStringStyles } from './styles/VideoTile.styles';
 import { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';
 // Coin max size is set to PersonaSize.size100
 const DEFAULT_PERSONA_MAX_SIZE_PX = 100;
@@ -62,11 +62,17 @@ export const VideoTile = (props) => {
         React.createElement(Stack, { "data-ui-id": ids.videoTile, className: mergeStyles(rootStyles, {
                 background: theme.palette.neutralLighter,
                 borderRadius: theme.effects.roundedCorner4
-            }, styles === null || styles === void 0 ? void 0 : styles.root) },
-            React.createElement("div", { className: mergeStyles(isSpeakingBorderDiv, {
+            }, isSpeaking && {
+                '&::before': {
+                    content: `''`,
+                    position: 'absolute',
+                    zIndex: 1,
+                    border: `0.25rem solid ${theme.palette.themePrimary}`,
                     borderRadius: theme.effects.roundedCorner4,
-                    border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : 'transparent'}`
-                }) }),
+                    width: '100%',
+                    height: '100%'
+                }
+            }, styles === null || styles === void 0 ? void 0 : styles.root) },
             isVideoRendered ? (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React.createElement(Stack, { className: mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             (canShowLabel || participantStateString) && (React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 canShowLabel && (React.createElement(Stack, { horizontal: true, className: tileInfoStyle },

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

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\nimport { Ref } from '@fluentui/react-northstar';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport {\n  disabledVideoHint,\n  displayNameStyle,\n  iconContainerStyle,\n  isSpeakingBorderDiv,\n  overlayContainerStyles,\n  rootStyles,\n  videoContainerStyles,\n  videoHint,\n  tileInfoContainerStyle,\n  participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n  participantStateConnecting: string;\n  participantStateRinging: string;\n  participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n  /** Styles for video container. */\n  videoContainer?: IStyle;\n  /** Styles for container overlayed on the video container. */\n  overlayContainer?: IStyle;\n  /** Styles for displayName on the video container. */\n  displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <VideoTile styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: VideoTileStylesProps;\n  /** user id for the VideoTile placeholder. */\n  userId?: string;\n  /** Component with the video stream. */\n  renderElement?: JSX.Element | null;\n  /** Determines if the video is mirrored or not. */\n  isMirrored?: boolean;\n  /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n  onRenderPlaceholder?: OnRenderAvatarCallback;\n  /**\n   * Show label on the VideoTile\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue true\n   */\n  showMuteIndicator?: boolean;\n  /**\n   * Whether the video is muted or not.\n   */\n  isMuted?: boolean;\n  /**\n   * Display Name of the Participant to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /**\n   * Minimum size of the persona avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 32px\n   */\n  personaMinSize?: number;\n  /**\n   * Maximum size of the personal avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 100px\n   */\n  personaMaxSize?: number;\n  /** Optional property to set the aria label of the video tile if there is no available stream. */\n  noVideoAvailableAriaLabel?: string;\n  /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n  isSpeaking?: boolean;\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * The call connection state of the participant.\n   * For example, `Hold` means the participant is on hold.\n   */\n  participantState?: ParticipantState;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  strings?: VideoTileStrings;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n  return (\n    <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n      <Stack styles={defaultPersonaStyles}>\n        <Persona\n          coinSize={coinSize}\n          hidePersonaDetails={hidePersonaDetails}\n          text={text ?? ''}\n          initialsTextColor=\"white\"\n          aria-label={noVideoAvailableAriaLabel ?? ''}\n          showOverflowTooltip={false}\n        />\n      </Stack>\n    </Stack>\n  );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n  const {\n    children,\n    displayName,\n    initialsName,\n    isMirrored,\n    isMuted,\n    onRenderPlaceholder,\n    renderElement,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX\n  } = props;\n\n  const [personaSize, setPersonaSize] = useState(100);\n  const videoTileRef = useRef<HTMLElement>(null);\n\n  const locale = useLocale();\n  const theme = useTheme();\n\n  const isVideoRendered = !!renderElement;\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const { width, height } = entries[0].contentRect;\n      const personaSize = Math.min(width, height) / 3;\n      setPersonaSize(Math.max(Math.min(personaSize, personaMaxSize), personaMinSize));\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  }, [observer, videoTileRef]);\n\n  const placeholderOptions = {\n    userId,\n    text: initialsName || displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n\n  const videoHintWithBorderRadius = mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });\n\n  const tileInfoStyle = useMemo(\n    () =>\n      mergeStyles(\n        isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint,\n        getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'),\n        styles?.displayNameContainer\n      ),\n    [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]\n  );\n\n  const ids = useIdentifiers();\n\n  const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n  const participantStateString = participantStateStringTrampoline(props, locale);\n\n  return (\n    <Ref innerRef={videoTileRef}>\n      <Stack\n        data-ui-id={ids.videoTile}\n        className={mergeStyles(\n          rootStyles,\n          {\n            background: theme.palette.neutralLighter,\n            borderRadius: theme.effects.roundedCorner4\n          },\n          styles?.root\n        )}\n      >\n        <div\n          className={mergeStyles(isSpeakingBorderDiv, {\n            borderRadius: theme.effects.roundedCorner4,\n            border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : 'transparent'}`\n          })}\n        />\n\n        {isVideoRendered ? (\n          <Stack\n            className={mergeStyles(\n              videoContainerStyles,\n              isMirrored && { transform: 'scaleX(-1)' },\n              styles?.videoContainer\n            )}\n          >\n            {renderElement}\n          </Stack>\n        ) : (\n          <Stack className={mergeStyles(videoContainerStyles)}>\n            {onRenderPlaceholder ? (\n              onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n            ) : (\n              <DefaultPlaceholder {...placeholderOptions} />\n            )}\n          </Stack>\n        )}\n\n        {(canShowLabel || participantStateString) && (\n          <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            {canShowLabel && (\n              <Stack horizontal className={tileInfoStyle}>\n                <Text className={mergeStyles(displayNameStyle)} title={displayName}>\n                  {displayName}\n                </Text>\n                {showMuteIndicator && isMuted && (\n                  <Stack className={mergeStyles(iconContainerStyle)}>\n                    <Icon iconName=\"VideoTileMicOff\" />\n                  </Stack>\n                )}\n              </Stack>\n            )}\n            {participantStateString && (\n              <Text className={mergeStyles(participantStateStringStyles(showLabel))}>{participantStateString}</Text>\n            )}\n          </Stack>\n        )}\n\n        {children && (\n          <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n        )}\n      </Stack>\n    </Ref>\n  );\n};\n\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  const strings = { ...locale.strings.videoTile, ...props.strings };\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'Idle' || props.participantState === 'Connecting'\n    ? strings?.participantStateConnecting\n    : props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n    ? strings?.participantStateHold\n    : undefined;\n\n  return undefined;\n};\n\nconst tileInfoContainerTokens = {\n  // A horizontal Stack sets the left margin to 0 for all it's children.\n  // We need to allow the children to set their own margins\n  childrenGap: 'none'\n};\n"]}
+{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAU,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAChD,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,UAAU,EACV,oBAAoB,EACpB,SAAS,EACT,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAyGzE,8CAA8C;AAC9C,MAAM,2BAA2B,GAAG,GAAG,CAAC;AACxC,0CAA0C;AAC1C,MAAM,2BAA2B,GAAG,EAAE,CAAC;AAEvC,MAAM,kBAAkB,GAAG,CAAC,KAA0B,EAAe,EAAE;IACrE,MAAM,EAAE,IAAI,EAAE,yBAAyB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IAEhF,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACpF,oBAAC,KAAK,IAAC,MAAM,EAAE,oBAAoB;YACjC,oBAAC,OAAO,IACN,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,EAChB,iBAAiB,EAAC,OAAO,gBACb,yBAAyB,aAAzB,yBAAyB,cAAzB,yBAAyB,GAAI,EAAE,EAC3C,mBAAmB,EAAE,KAAK,GAC1B,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC;AAE7E;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EACJ,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,aAAa,EACb,SAAS,GAAG,IAAI,EAChB,iBAAiB,GAAG,IAAI,EACxB,MAAM,EACN,MAAM,EACN,yBAAyB,EACzB,UAAU,EACV,cAAc,GAAG,2BAA2B,EAC5C,cAAc,GAAG,2BAA2B,EAC7C,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,eAAe,GAAG,CAAC,CAAC,aAAa,CAAC;IAExC,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAQ,EAAE;QACnC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QACjD,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;QAChD,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;IAClF,CAAC,CAAC,CACH,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SAChD;QACD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,MAAM,kBAAkB,GAAG;QACzB,MAAM;QACN,IAAI,EAAE,YAAY,IAAI,WAAW;QACjC,yBAAyB;QACzB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,oBAAoB;QAC5B,kBAAkB,EAAE,IAAI;KACzB,CAAC;IAEF,MAAM,yBAAyB,GAAG,WAAW,CAAC,SAAS,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAEzG,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CACH,WAAW,CACT,eAAe,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,EAC/D,yBAAyB,CAAC,eAAe,EAAE,KAAK,EAAE,gBAAgB,CAAC,EACnE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,CAC7B,EACH,CAAC,eAAe,EAAE,yBAAyB,EAAE,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,CAAC,CAClF,CAAC;IAEF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,YAAY,GAAG,SAAS,IAAI,CAAC,WAAW,IAAI,CAAC,iBAAiB,IAAI,OAAO,CAAC,CAAC,CAAC;IAClF,MAAM,sBAAsB,GAAG,gCAAgC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAE/E,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAE,YAAY;QACzB,oBAAC,KAAK,kBACQ,GAAG,CAAC,SAAS,EACzB,SAAS,EAAE,WAAW,CACpB,UAAU,EACV;gBACE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;gBACxC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aAC3C,EACD,UAAU,IAAI;gBACZ,WAAW,EAAE;oBACX,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,UAAU;oBACpB,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,iBAAiB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;oBACrD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;oBAC1C,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf;aACF,EACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb;YAEA,eAAe,CAAC,CAAC,CAAC,CACjB,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CACpB,oBAAoB,EACpB,UAAU,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,EACzC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CACvB,IAEA,aAAa,CACR,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAChD,mBAAmB,CAAC,CAAC,CAAC,CACrB,mBAAmB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAC1E,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,oBAAK,kBAAkB,EAAI,CAC/C,CACK,CACT;YAEA,CAAC,YAAY,IAAI,sBAAsB,CAAC,IAAI,CAC3C,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,uBAAuB;gBACjF,YAAY,IAAI,CACf,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,aAAa;oBACxC,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,WAAW,IAC/D,WAAW,CACP;oBACN,iBAAiB,IAAI,OAAO,IAAI,CAC/B,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;wBAC/C,oBAAC,IAAI,IAAC,QAAQ,EAAC,iBAAiB,GAAG,CAC7B,CACT,CACK,CACT;gBACA,sBAAsB,IAAI,CACzB,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,SAAS,CAAC,CAAC,IAAG,sBAAsB,CAAQ,CACvG,CACK,CACT;YAEA,QAAQ,IAAI,CACX,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAG,QAAQ,CAAS,CACpG,CACK,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gCAAgC,GAAG,CAAC,KAAqB,EAAE,MAAuB,EAAsB,EAAE;IAC9G,mDAAmD;IACnD,6CAA6C;IAC7C,MAAM,OAAO,mCAAQ,MAAM,CAAC,OAAO,CAAC,SAAS,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAClE,mDAAmD;IACnD,6CAA6C;IAC7C,OAAO,KAAK,CAAC,gBAAgB,KAAK,MAAM,IAAI,KAAK,CAAC,gBAAgB,KAAK,YAAY;QACjF,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0BAA0B;QACrC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,YAAY,IAAI,KAAK,CAAC,gBAAgB,KAAK,SAAS;YACjF,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;YAClC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,MAAM;gBACnC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB;gBAC/B,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG;IAC9B,sEAAsE;IACtE,yDAAyD;IACzD,WAAW,EAAE,MAAM;CACpB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\nimport { Ref } from '@fluentui/react-northstar';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport {\n  disabledVideoHint,\n  displayNameStyle,\n  iconContainerStyle,\n  overlayContainerStyles,\n  rootStyles,\n  videoContainerStyles,\n  videoHint,\n  tileInfoContainerStyle,\n  participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n  participantStateConnecting: string;\n  participantStateRinging: string;\n  participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n  /** Styles for video container. */\n  videoContainer?: IStyle;\n  /** Styles for container overlayed on the video container. */\n  overlayContainer?: IStyle;\n  /** Styles for displayName on the video container. */\n  displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n  /** React Child components. Child Components will show as overlay component in the VideoTile. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <VideoTile styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: VideoTileStylesProps;\n  /** user id for the VideoTile placeholder. */\n  userId?: string;\n  /** Component with the video stream. */\n  renderElement?: JSX.Element | null;\n  /** Determines if the video is mirrored or not. */\n  isMirrored?: boolean;\n  /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n  onRenderPlaceholder?: OnRenderAvatarCallback;\n  /**\n   * Show label on the VideoTile\n   * @defaultValue true\n   */\n  showLabel?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue true\n   */\n  showMuteIndicator?: boolean;\n  /**\n   * Whether the video is muted or not.\n   */\n  isMuted?: boolean;\n  /**\n   * Display Name of the Participant to be shown in the label.\n   * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n   */\n  displayName?: string;\n  /**\n   * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n   * @remarks `displayName` is used if this property is not specified.\n   */\n  initialsName?: string;\n  /**\n   * Minimum size of the persona avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 32px\n   */\n  personaMinSize?: number;\n  /**\n   * Maximum size of the personal avatar in px.\n   * The persona avatar is the default placeholder shown when no video stream is available.\n   * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n   * @defaultValue 100px\n   */\n  personaMaxSize?: number;\n  /** Optional property to set the aria label of the video tile if there is no available stream. */\n  noVideoAvailableAriaLabel?: string;\n  /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n  isSpeaking?: boolean;\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * The call connection state of the participant.\n   * For example, `Hold` means the participant is on hold.\n   */\n  participantState?: ParticipantState;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  strings?: VideoTileStrings;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n  return (\n    <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n      <Stack styles={defaultPersonaStyles}>\n        <Persona\n          coinSize={coinSize}\n          hidePersonaDetails={hidePersonaDetails}\n          text={text ?? ''}\n          initialsTextColor=\"white\"\n          aria-label={noVideoAvailableAriaLabel ?? ''}\n          showOverflowTooltip={false}\n        />\n      </Stack>\n    </Stack>\n  );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n  const {\n    children,\n    displayName,\n    initialsName,\n    isMirrored,\n    isMuted,\n    onRenderPlaceholder,\n    renderElement,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX\n  } = props;\n\n  const [personaSize, setPersonaSize] = useState(100);\n  const videoTileRef = useRef<HTMLElement>(null);\n\n  const locale = useLocale();\n  const theme = useTheme();\n\n  const isVideoRendered = !!renderElement;\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      const { width, height } = entries[0].contentRect;\n      const personaSize = Math.min(width, height) / 3;\n      setPersonaSize(Math.max(Math.min(personaSize, personaMaxSize), personaMinSize));\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  }, [observer, videoTileRef]);\n\n  const placeholderOptions = {\n    userId,\n    text: initialsName || displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n\n  const videoHintWithBorderRadius = mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });\n\n  const tileInfoStyle = useMemo(\n    () =>\n      mergeStyles(\n        isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint,\n        getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'),\n        styles?.displayNameContainer\n      ),\n    [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]\n  );\n\n  const ids = useIdentifiers();\n\n  const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n  const participantStateString = participantStateStringTrampoline(props, locale);\n\n  return (\n    <Ref innerRef={videoTileRef}>\n      <Stack\n        data-ui-id={ids.videoTile}\n        className={mergeStyles(\n          rootStyles,\n          {\n            background: theme.palette.neutralLighter,\n            borderRadius: theme.effects.roundedCorner4\n          },\n          isSpeaking && {\n            '&::before': {\n              content: `''`,\n              position: 'absolute',\n              zIndex: 1,\n              border: `0.25rem solid ${theme.palette.themePrimary}`,\n              borderRadius: theme.effects.roundedCorner4,\n              width: '100%',\n              height: '100%'\n            }\n          },\n          styles?.root\n        )}\n      >\n        {isVideoRendered ? (\n          <Stack\n            className={mergeStyles(\n              videoContainerStyles,\n              isMirrored && { transform: 'scaleX(-1)' },\n              styles?.videoContainer\n            )}\n          >\n            {renderElement}\n          </Stack>\n        ) : (\n          <Stack className={mergeStyles(videoContainerStyles)}>\n            {onRenderPlaceholder ? (\n              onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n            ) : (\n              <DefaultPlaceholder {...placeholderOptions} />\n            )}\n          </Stack>\n        )}\n\n        {(canShowLabel || participantStateString) && (\n          <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            {canShowLabel && (\n              <Stack horizontal className={tileInfoStyle}>\n                <Text className={mergeStyles(displayNameStyle)} title={displayName}>\n                  {displayName}\n                </Text>\n                {showMuteIndicator && isMuted && (\n                  <Stack className={mergeStyles(iconContainerStyle)}>\n                    <Icon iconName=\"VideoTileMicOff\" />\n                  </Stack>\n                )}\n              </Stack>\n            )}\n            {participantStateString && (\n              <Text className={mergeStyles(participantStateStringStyles(showLabel))}>{participantStateString}</Text>\n            )}\n          </Stack>\n        )}\n\n        {children && (\n          <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n        )}\n      </Stack>\n    </Ref>\n  );\n};\n\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  const strings = { ...locale.strings.videoTile, ...props.strings };\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return props.participantState === 'Idle' || props.participantState === 'Connecting'\n    ? strings?.participantStateConnecting\n    : props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n    ? strings?.participantStateHold\n    : undefined;\n\n  return undefined;\n};\n\nconst tileInfoContainerTokens = {\n  // A horizontal Stack sets the left margin to 0 for all it's children.\n  // We need to allow the children to set their own margins\n  childrenGap: 'none'\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.d.ts

@@ -31,10 +31,6 @@ export declare const displayNameStyle: IStyle;
  * @private
  */
 export declare const iconContainerStyle: IStyle;
-/**
- * @private
- */
-export declare const isSpeakingBorderDiv: IStyle;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js

@@ -84,19 +84,6 @@ export const iconContainerStyle = {
         display: 'block'
     }
 };
-/**
- * @private
- */
-export const isSpeakingBorderDiv = {
-    zIndex: 1,
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    // Ensure the isSpeaking element does not steal any pointer events such as onClick events
-    pointerEvents: 'none'
-};
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0.5rem',\n  left: '0.5rem',\n  width: 'calc(100% - 1rem)'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const videoHint = mergeStyles(disabledVideoHint, {\n  // This will appear on top of the video stream, so no dependency on theme and explicitly use a translucent white\n  backgroundColor: 'rgba(255,255,255,0.8)'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  height: '100%',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block'\n  }\n};\n\n/**\n * @private\n */\nexport const isSpeakingBorderDiv: IStyle = {\n  zIndex: 1,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  // Ensure the isSpeaking element does not steal any pointer events such as onClick events\n  pointerEvents: 'none'\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (showLabel: boolean): IStyle => {\n  return {\n    textAlign: 'center',\n    minWidth: '3rem',\n    color: 'inherit',\n    width: showLabel ? 'auto' : '100%',\n    marginRight: showLabel ? 0 : 'none',\n    marginLeft: showLabel ? 'auto' : 'none',\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.25rem'\n  };\n};\n"]}
+{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAW;IAChC,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAW;IAC1C,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,OAAO;IAClB,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,mBAAmB;CAC3B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAC3C,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC,iBAAiB,EAAE;IACtD,gHAAgH;IAChH,eAAe,EAAE,uBAAuB;CACzC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;IACf,kHAAkH;IAClH,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE;QACP,OAAO,EAAE,OAAO;KACjB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,SAAkB,EAAU,EAAE;IACzE,OAAO;QACL,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QAClC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;QACnC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QACvC,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,SAAS;KACnB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0.5rem',\n  left: '0.5rem',\n  width: 'calc(100% - 1rem)'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const videoHint = mergeStyles(disabledVideoHint, {\n  // This will appear on top of the video stream, so no dependency on theme and explicitly use a translucent white\n  backgroundColor: 'rgba(255,255,255,0.8)'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  height: '100%',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (showLabel: boolean): IStyle => {\n  return {\n    textAlign: 'center',\n    minWidth: '3rem',\n    color: 'inherit',\n    width: showLabel ? 'auto' : '100%',\n    marginRight: showLabel ? 0 : 'none',\n    marginLeft: showLabel ? 'auto' : 'none',\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.25rem'\n  };\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js

@@ -95,12 +95,20 @@ export const CallComposite = (props) => {
     role } = props;
     useEffect(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
+            /* @conditional-compile-remove(rooms) */
+            if (role === 'Consumer') {
+                // Need to ask for audio devices to get access to speakers. Speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
+                // actually granting access to query both microphone and speaker. TODO: Need some investigation to see if we can get access to speakers without SDK.
+                yield adapter.askDevicePermission({ video: false, audio: true });
+                adapter.querySpeakers();
+                return;
+            }
             yield adapter.askDevicePermission({ video: true, audio: true });
             adapter.queryCameras();
             adapter.queryMicrophones();
             adapter.querySpeakers();
         }))();
-    }, [adapter]);
+    }, [adapter, /* @conditional-compile-remove(rooms) */ role]);
     const mobileView = formFactor === 'mobile';
     /* @conditional-compile-remove(one-to-n-calling) */
     const modalLayerHostId = useId('modalLayerhost');