@azure/communication-react 1.25.0-alpha-202503120017 → 1.25.0-alpha-202503130017

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/communication-react.d.ts +12 -0
  2. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-BW8EIlhn.js → ChatMessageComponentAsRichTextEditBox-DJrzXI8e.js} +2 -2
  3. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-BW8EIlhn.js.map → ChatMessageComponentAsRichTextEditBox-DJrzXI8e.js.map} +1 -1
  4. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-33eNEARk.js → RichTextSendBoxWrapper-DSgf2jnX.js} +2 -2
  5. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-33eNEARk.js.map → RichTextSendBoxWrapper-DSgf2jnX.js.map} +1 -1
  6. package/dist/dist-cjs/communication-react/{index-BJVT8gcU.js → index-Dw4_GjIj.js} +77 -29
  7. package/dist/dist-cjs/communication-react/index-Dw4_GjIj.js.map +1 -0
  8. package/dist/dist-cjs/communication-react/index.js +1 -1
  9. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  10. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  11. package/dist/dist-esm/react-components/src/components/Attachment/AttachmentCard.js +1 -1
  12. package/dist/dist-esm/react-components/src/components/Attachment/AttachmentCard.js.map +1 -1
  13. package/dist/dist-esm/react-components/src/components/VideoGallery/LocalScreenShare.d.ts +1 -0
  14. package/dist/dist-esm/react-components/src/components/VideoGallery/LocalScreenShare.js +14 -2
  15. package/dist/dist-esm/react-components/src/components/VideoGallery/LocalScreenShare.js.map +1 -1
  16. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.d.ts +22 -0
  17. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.js +44 -0
  18. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.js.map +1 -0
  19. package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts +4 -0
  20. package/dist/dist-esm/react-components/src/components/VideoGallery.js +2 -2
  21. package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
  22. package/dist/dist-esm/react-components/src/components/styles/AttachmentCard.styles.js +0 -3
  23. package/dist/dist-esm/react-components/src/components/styles/AttachmentCard.styles.js.map +1 -1
  24. package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js +4 -8
  25. package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js.map +1 -1
  26. package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.js +4 -0
  27. package/dist/dist-esm/react-components/src/components/styles/RichTextEditor.styles.js.map +1 -1
  28. package/dist/dist-esm/react-components/src/theming/v9ThemeShim.js +1 -3
  29. package/dist/dist-esm/react-components/src/theming/v9ThemeShim.js.map +1 -1
  30. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.d.ts +4 -0
  31. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
  32. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.d.ts +1 -0
  33. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +3 -2
  34. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
  35. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js +2 -2
  36. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js.map +1 -1
  37. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.d.ts +4 -0
  38. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map +1 -1
  39. package/package.json +1 -1
  40. package/dist/dist-cjs/communication-react/index-BJVT8gcU.js.map +0 -1
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-BJVT8gcU.js');
3
+ var index = require('./index-Dw4_GjIj.js');
4
4
  require('react');
5
5
  require('@fluentui/react');
6
6
  require('@fluentui/react-components');
@@ -2,5 +2,5 @@
2
2
  // Copyright (c) Microsoft Corporation.
3
3
  // Licensed under the MIT License.
4
4
  // GENERATED FILE. DO NOT EDIT MANUALLY.
5
- module.exports = '1.25.0-alpha-202503120017';
5
+ module.exports = '1.25.0-alpha-202503130017';
6
6
  //# sourceMappingURL=telemetryVersion.js.map
@@ -1 +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,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.25.0-alpha-202503120017';\n"]}
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,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.25.0-alpha-202503130017';\n"]}
@@ -54,8 +54,8 @@ export const _AttachmentCard = (props) => {
54
54
  return match && match[1] ? match[1] : '';
55
55
  }, [attachment]);
56
56
  return (React.createElement("div", { "data-is-focusable": true },
57
- React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
58
57
  React.createElement(Card, { className: mergeClasses(attachmentCardStyles.root, selfResizing ? attachmentCardStyles.dynamicWidth : attachmentCardStyles.staticWidth), size: "small", role: "listitem", appearance: "filled-alternative", "aria-label": attachment.name, "data-testid": 'attachment-card' },
58
+ React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
59
59
  React.createElement(CardHeader, { className: attachmentCardStyles.content, image: {
60
60
  className: attachmentCardStyles.fileIcon,
61
61
  children: (React.createElement(Icon, { "data-ui-id": 'attachmenttype-icon', iconName: getFileTypeIconProps({
@@ -1 +1 @@
1
- {"version":3,"file":"AttachmentCard.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, TooltipHost } from '@fluentui/react';\nimport {\n Card,\n CardHeader,\n Text,\n Menu,\n MenuTrigger,\n ToolbarButton,\n MenuPopover,\n MenuItem,\n MenuList,\n Toolbar,\n CardFooter,\n ProgressBar,\n mergeClasses\n} from '@fluentui/react-components';\nimport { getFileTypeIconProps } from '@fluentui/react-file-type-icons';\nimport React from 'react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Announcer } from '../Announcer';\nimport { useEffect, useState, useMemo } from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata, AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport {\n useAttachmentCardStyles,\n ATTACHMENT_CARD_MIN_PROGRESS,\n titleTooltipContainerStyle\n} from '../styles/AttachmentCard.styles';\n\n/**\n * @internal\n * AttachmentCard Component Props.\n */\nexport interface _AttachmentCardProps {\n /**\n * Attachment details including name, extension, url, etc.\n */\n attachment: AttachmentMetadata | AttachmentMetadataInProgress;\n /**\n * An array of menu actions to be displayed in the attachment card.\n */\n menuActions: AttachmentMenuAction[];\n /**\n * Optional aria label strings for attachment upload cards\n */\n strings?: _AttachmentUploadCardsStrings;\n /**\n * Optional callback that runs if menu bar action onclick throws.\n */\n onActionHandlerFailed?: (errMsg: string) => void;\n /**\n * Optional flag to enable self resizing of the attachment card.\n */\n selfResizing?: boolean;\n}\n\n/**\n * @internal\n * A component for displaying an attachment card with attachment icon and progress bar.\n *\n * `_AttachmentCard` internally uses the `Card` component from `@fluentui/react-components`. You can checkout the details about these components [here](https://react.fluentui.dev/?path=/docs/components-card).\n */\nexport const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {\n const { attachment, menuActions, onActionHandlerFailed, selfResizing } = props;\n const attachmentCardStyles = useAttachmentCardStyles();\n\n const progress = useMemo(() => {\n return 'progress' in attachment ? attachment.progress : undefined;\n }, [attachment]);\n\n const isUploadInProgress = useMemo(() => {\n return progress !== undefined && progress >= 0 && progress < 1;\n }, [progress]);\n\n const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n const uploadStartedString = props.strings?.uploading ?? localeStrings.uploading;\n const uploadCompletedString = props.strings?.uploadCompleted ?? localeStrings.uploadCompleted;\n\n useEffect(() => {\n if (isUploadInProgress) {\n setAnnouncerString(`${uploadStartedString} ${attachment.name}`);\n } else if (progress === 1) {\n setAnnouncerString(`${attachment.name} ${uploadCompletedString}`);\n } else {\n setAnnouncerString(undefined);\n }\n }, [progress, isUploadInProgress, attachment.name, uploadStartedString, uploadCompletedString]);\n\n const extension = useMemo((): string => {\n const re = /(?:\\.([^.]+))?$/;\n const match = re.exec(attachment.name);\n return match && match[1] ? match[1] : '';\n }, [attachment]);\n return (\n <div data-is-focusable={true}>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n <Card\n className={mergeClasses(\n attachmentCardStyles.root,\n selfResizing ? attachmentCardStyles.dynamicWidth : attachmentCardStyles.staticWidth\n )}\n size=\"small\"\n role=\"listitem\"\n appearance=\"filled-alternative\"\n aria-label={attachment.name}\n data-testid={'attachment-card'}\n >\n <CardHeader\n className={attachmentCardStyles.content}\n image={{\n className: attachmentCardStyles.fileIcon,\n children: (\n <Icon\n data-ui-id={'attachmenttype-icon'}\n iconName={\n getFileTypeIconProps({\n extension: extension,\n size: 24,\n imageFileType: 'svg'\n }).iconName\n }\n />\n )\n }}\n header={{\n id: 'attachment-' + attachment.id,\n children: (\n <TooltipHost\n content={attachment.name}\n calloutProps={{\n gapSpace: 0,\n target: '#attachment-' + attachment.id\n }}\n hostClassName={titleTooltipContainerStyle}\n >\n <Text className={attachmentCardStyles.title} aria-label={attachment.name}>\n {attachment.name}\n </Text>\n </TooltipHost>\n )\n }}\n action={{\n className: attachmentCardStyles.actions,\n children: MappedMenuItems(\n menuActions,\n {\n ...attachment,\n url: attachment.url ?? ''\n },\n onActionHandlerFailed\n )\n }}\n />\n </Card>\n {isUploadInProgress ? (\n <CardFooter>\n <ProgressBar\n thickness=\"medium\"\n value={Math.max(progress ?? 0, ATTACHMENT_CARD_MIN_PROGRESS)}\n shape=\"rounded\"\n />\n </CardFooter>\n ) : (\n <> </>\n )}\n </div>\n );\n};\n\nconst MappedMenuItems = (\n menuActions: AttachmentMenuAction[],\n attachment: AttachmentMetadata,\n handleOnClickError?: (errMsg: string) => void\n): JSX.Element => {\n const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n\n if (!menuActions[0]) {\n return <></>;\n }\n return menuActions.length === 1 ? (\n <TooltipHost content={menuActions[0].name}>\n <ToolbarButton\n aria-label={menuActions[0].name}\n role=\"button\"\n icon={menuActions[0].icon}\n onClick={() => {\n try {\n menuActions[0]?.onClick(attachment);\n } catch (e) {\n handleOnClickError?.((e as Error).message);\n }\n }}\n />\n </TooltipHost>\n ) : (\n <Toolbar>\n <Menu>\n <TooltipHost content={localeStrings.attachmentMoreMenu}>\n <MenuTrigger>\n <ToolbarButton\n aria-label={localeStrings.attachmentMoreMenu}\n role=\"button\"\n icon={<Icon iconName=\"AttachmentMoreMenu\" />}\n />\n </MenuTrigger>\n </TooltipHost>\n <MenuPopover>\n <MenuList>\n {menuActions.map((menuItem, index) => (\n <MenuItem\n aria-label={menuItem.name}\n key={index}\n icon={menuItem.icon}\n onClick={async () => {\n try {\n await menuItem.onClick(attachment);\n } catch (e) {\n handleOnClickError?.((e as Error).message);\n }\n }}\n >\n {menuItem.name}\n </MenuItem>\n ))}\n </MenuList>\n </MenuPopover>\n </Menu>\n </Toolbar>\n );\n};\n"]}
1
+ {"version":3,"file":"AttachmentCard.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Attachment/AttachmentCard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, TooltipHost } from '@fluentui/react';\nimport {\n Card,\n CardHeader,\n Text,\n Menu,\n MenuTrigger,\n ToolbarButton,\n MenuPopover,\n MenuItem,\n MenuList,\n Toolbar,\n CardFooter,\n ProgressBar,\n mergeClasses\n} from '@fluentui/react-components';\nimport { getFileTypeIconProps } from '@fluentui/react-file-type-icons';\nimport React from 'react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { Announcer } from '../Announcer';\nimport { useEffect, useState, useMemo } from 'react';\nimport { _AttachmentUploadCardsStrings } from './AttachmentUploadCards';\nimport { useLocaleAttachmentCardStringsTrampoline } from '../utils/common';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata, AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport {\n useAttachmentCardStyles,\n ATTACHMENT_CARD_MIN_PROGRESS,\n titleTooltipContainerStyle\n} from '../styles/AttachmentCard.styles';\n\n/**\n * @internal\n * AttachmentCard Component Props.\n */\nexport interface _AttachmentCardProps {\n /**\n * Attachment details including name, extension, url, etc.\n */\n attachment: AttachmentMetadata | AttachmentMetadataInProgress;\n /**\n * An array of menu actions to be displayed in the attachment card.\n */\n menuActions: AttachmentMenuAction[];\n /**\n * Optional aria label strings for attachment upload cards\n */\n strings?: _AttachmentUploadCardsStrings;\n /**\n * Optional callback that runs if menu bar action onclick throws.\n */\n onActionHandlerFailed?: (errMsg: string) => void;\n /**\n * Optional flag to enable self resizing of the attachment card.\n */\n selfResizing?: boolean;\n}\n\n/**\n * @internal\n * A component for displaying an attachment card with attachment icon and progress bar.\n *\n * `_AttachmentCard` internally uses the `Card` component from `@fluentui/react-components`. You can checkout the details about these components [here](https://react.fluentui.dev/?path=/docs/components-card).\n */\nexport const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {\n const { attachment, menuActions, onActionHandlerFailed, selfResizing } = props;\n const attachmentCardStyles = useAttachmentCardStyles();\n\n const progress = useMemo(() => {\n return 'progress' in attachment ? attachment.progress : undefined;\n }, [attachment]);\n\n const isUploadInProgress = useMemo(() => {\n return progress !== undefined && progress >= 0 && progress < 1;\n }, [progress]);\n\n const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n const uploadStartedString = props.strings?.uploading ?? localeStrings.uploading;\n const uploadCompletedString = props.strings?.uploadCompleted ?? localeStrings.uploadCompleted;\n\n useEffect(() => {\n if (isUploadInProgress) {\n setAnnouncerString(`${uploadStartedString} ${attachment.name}`);\n } else if (progress === 1) {\n setAnnouncerString(`${attachment.name} ${uploadCompletedString}`);\n } else {\n setAnnouncerString(undefined);\n }\n }, [progress, isUploadInProgress, attachment.name, uploadStartedString, uploadCompletedString]);\n\n const extension = useMemo((): string => {\n const re = /(?:\\.([^.]+))?$/;\n const match = re.exec(attachment.name);\n return match && match[1] ? match[1] : '';\n }, [attachment]);\n return (\n <div data-is-focusable={true}>\n <Card\n className={mergeClasses(\n attachmentCardStyles.root,\n selfResizing ? attachmentCardStyles.dynamicWidth : attachmentCardStyles.staticWidth\n )}\n size=\"small\"\n role=\"listitem\"\n appearance=\"filled-alternative\"\n aria-label={attachment.name}\n data-testid={'attachment-card'}\n >\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n <CardHeader\n className={attachmentCardStyles.content}\n image={{\n className: attachmentCardStyles.fileIcon,\n children: (\n <Icon\n data-ui-id={'attachmenttype-icon'}\n iconName={\n getFileTypeIconProps({\n extension: extension,\n size: 24,\n imageFileType: 'svg'\n }).iconName\n }\n />\n )\n }}\n header={{\n id: 'attachment-' + attachment.id,\n children: (\n <TooltipHost\n content={attachment.name}\n calloutProps={{\n gapSpace: 0,\n target: '#attachment-' + attachment.id\n }}\n hostClassName={titleTooltipContainerStyle}\n >\n <Text className={attachmentCardStyles.title} aria-label={attachment.name}>\n {attachment.name}\n </Text>\n </TooltipHost>\n )\n }}\n action={{\n className: attachmentCardStyles.actions,\n children: MappedMenuItems(\n menuActions,\n {\n ...attachment,\n url: attachment.url ?? ''\n },\n onActionHandlerFailed\n )\n }}\n />\n </Card>\n {isUploadInProgress ? (\n <CardFooter>\n <ProgressBar\n thickness=\"medium\"\n value={Math.max(progress ?? 0, ATTACHMENT_CARD_MIN_PROGRESS)}\n shape=\"rounded\"\n />\n </CardFooter>\n ) : (\n <> </>\n )}\n </div>\n );\n};\n\nconst MappedMenuItems = (\n menuActions: AttachmentMenuAction[],\n attachment: AttachmentMetadata,\n handleOnClickError?: (errMsg: string) => void\n): JSX.Element => {\n const localeStrings = useLocaleAttachmentCardStringsTrampoline();\n\n if (!menuActions[0]) {\n return <></>;\n }\n return menuActions.length === 1 ? (\n <TooltipHost content={menuActions[0].name}>\n <ToolbarButton\n aria-label={menuActions[0].name}\n role=\"button\"\n icon={menuActions[0].icon}\n onClick={() => {\n try {\n menuActions[0]?.onClick(attachment);\n } catch (e) {\n handleOnClickError?.((e as Error).message);\n }\n }}\n />\n </TooltipHost>\n ) : (\n <Toolbar>\n <Menu>\n <TooltipHost content={localeStrings.attachmentMoreMenu}>\n <MenuTrigger>\n <ToolbarButton\n aria-label={localeStrings.attachmentMoreMenu}\n role=\"button\"\n icon={<Icon iconName=\"AttachmentMoreMenu\" />}\n />\n </MenuTrigger>\n </TooltipHost>\n <MenuPopover>\n <MenuList>\n {menuActions.map((menuItem, index) => (\n <MenuItem\n aria-label={menuItem.name}\n key={index}\n icon={menuItem.icon}\n onClick={async () => {\n try {\n await menuItem.onClick(attachment);\n } catch (e) {\n handleOnClickError?.((e as Error).message);\n }\n }}\n >\n {menuItem.name}\n </MenuItem>\n ))}\n </MenuList>\n </MenuPopover>\n </Menu>\n </Toolbar>\n );\n};\n"]}
@@ -11,5 +11,6 @@ export declare const LocalScreenShare: React.MemoExoticComponent<(props: {
11
11
  isAvailable?: boolean;
12
12
  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
13
13
  onDisposeLocalScreenShareStreamView?: () => Promise<void>;
14
+ localScreenShareView?: 'stream' | 'placeholderMessage';
14
15
  }) => React.JSX.Element | null>;
15
16
  //# sourceMappingURL=LocalScreenShare.d.ts.map
@@ -1,19 +1,23 @@
1
1
  // Copyright (c) Microsoft Corporation.
2
2
  // Licensed under the MIT License.
3
+ import { Icon, Stack, Text } from '@fluentui/react';
3
4
  import React, { useEffect } from 'react';
4
5
  import { useLocale } from '../../localization';
6
+ import { useTheme } from '../../theming';
5
7
  import { VideoTile } from '../VideoTile';
6
8
  import { StreamMedia } from '../StreamMedia';
7
9
  import { LoadingSpinner } from './RemoteScreenShare';
10
+ import { screenSharingContainerStyle, screenSharingNotificationContainerStyle, screenSharingNotificationIconContainerStyle, screenSharingNotificationIconStyle, screenSharingNotificationTextStyle } from './styles/LocalScreenShare.styles';
8
11
  /**
9
12
  * A memoized version of local screen share component. React.memo is used for a performance
10
13
  * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
11
14
  * https://reactjs.org/docs/react-api.html#reactmemo
12
15
  */
13
16
  export const LocalScreenShare = React.memo((props) => {
14
- const { localParticipant, renderElement, isAvailable, onCreateLocalStreamView, onDisposeLocalScreenShareStreamView } = props;
17
+ const { localParticipant, renderElement, isAvailable, onCreateLocalStreamView, onDisposeLocalScreenShareStreamView, localScreenShareView = 'stream' } = props;
15
18
  const locale = useLocale();
16
- if (!renderElement) {
19
+ const theme = useTheme();
20
+ if (!renderElement && localScreenShareView === 'stream') {
17
21
  onCreateLocalStreamView && onCreateLocalStreamView();
18
22
  }
19
23
  useEffect(() => {
@@ -25,10 +29,18 @@ export const LocalScreenShare = React.memo((props) => {
25
29
  if (!localParticipant || !localParticipant.isScreenSharingOn) {
26
30
  return null;
27
31
  }
32
+ const localScreenSharingPlaceholder = (React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
33
+ React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: { childrenGap: '1rem' } },
34
+ React.createElement(Stack, { horizontal: true, verticalAlign: "center", className: screenSharingNotificationIconContainerStyle },
35
+ React.createElement(Icon, { iconName: "ControlButtonScreenShareStart", className: screenSharingNotificationIconStyle(theme) })),
36
+ React.createElement(Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage))));
28
37
  const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName)
29
38
  ? locale.strings.videoGallery.displayNamePlaceholder
30
39
  : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
31
40
  const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;
41
+ if (localScreenShareView === 'placeholderMessage') {
42
+ return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React.createElement(React.Fragment, null) }, localScreenSharingPlaceholder));
43
+ }
32
44
  return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), mediaAccess: localParticipant.mediaAccess }));
33
45
  });
34
46
  //# sourceMappingURL=LocalScreenShare.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KAMA,EAAE,EAAE;IACH,MAAM,EACJ,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,uBAAuB,EACvB,mCAAmC,EACpC,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,uBAAuB,IAAI,uBAAuB,EAAE,CAAC;IACvD,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,mCAAmC,IAAI,mCAAmC,EAAE,CAAC;QAC/E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mCAAmC,CAAC,CAAC,CAAC;IAE1C,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAA;QAChD,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB;QACpD,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAC;IAElC,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,8BAA8B,CAAC;IAElF,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAClC,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,EAC7E,WAAW,EAAE,gBAAgB,CAAC,WAAW,GACzC,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { CreateVideoStreamViewResult, VideoGalleryLocalParticipant, VideoStreamOptions } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport { StreamMedia } from '../StreamMedia';\nimport { LoadingSpinner } from './RemoteScreenShare';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const LocalScreenShare = React.memo(\n (props: {\n localParticipant: VideoGalleryLocalParticipant;\n renderElement?: HTMLElement;\n isAvailable?: boolean;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeLocalScreenShareStreamView?: () => Promise<void>;\n }) => {\n const {\n localParticipant,\n renderElement,\n isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalScreenShareStreamView\n } = props;\n const locale = useLocale();\n if (!renderElement) {\n onCreateLocalStreamView && onCreateLocalStreamView();\n }\n\n useEffect(() => {\n return () => {\n // TODO: Isolate disposing behaviors for screenShare and videoStream\n onDisposeLocalScreenShareStreamView && onDisposeLocalScreenShareStreamView();\n };\n }, [onDisposeLocalScreenShareStreamView]);\n\n if (!localParticipant || !localParticipant.isScreenSharingOn) {\n return null;\n }\n\n const displayName = !localParticipant?.displayName\n ? locale.strings.videoGallery.displayNamePlaceholder\n : localParticipant?.displayName;\n\n const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;\n\n return (\n <VideoTile\n displayName={displayName}\n isMuted={localParticipant?.isMuted}\n renderElement={\n renderElement ? (\n <StreamMedia videoStreamElement={renderElement} loadingState={isAvailable === false ? 'loading' : 'none'} />\n ) : undefined\n }\n onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n mediaAccess={localParticipant.mediaAccess}\n />\n );\n }\n);\n"]}
1
+ {"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Stack, Text } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { useTheme } from '../../theming';\nimport { CreateVideoStreamViewResult, VideoGalleryLocalParticipant, VideoStreamOptions } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport { StreamMedia } from '../StreamMedia';\nimport { LoadingSpinner } from './RemoteScreenShare';\nimport { _formatString } from '@internal/acs-ui-common';\nimport {\n screenSharingContainerStyle,\n screenSharingNotificationContainerStyle,\n screenSharingNotificationIconContainerStyle,\n screenSharingNotificationIconStyle,\n screenSharingNotificationTextStyle\n} from './styles/LocalScreenShare.styles';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const LocalScreenShare = React.memo(\n (props: {\n localParticipant: VideoGalleryLocalParticipant;\n renderElement?: HTMLElement;\n isAvailable?: boolean;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeLocalScreenShareStreamView?: () => Promise<void>;\n localScreenShareView?: 'stream' | 'placeholderMessage';\n }) => {\n const {\n localParticipant,\n renderElement,\n isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalScreenShareStreamView,\n localScreenShareView = 'stream'\n } = props;\n const locale = useLocale();\n const theme = useTheme();\n if (!renderElement && localScreenShareView === 'stream') {\n onCreateLocalStreamView && onCreateLocalStreamView();\n }\n\n useEffect(() => {\n return () => {\n // TODO: Isolate disposing behaviors for screenShare and videoStream\n onDisposeLocalScreenShareStreamView && onDisposeLocalScreenShareStreamView();\n };\n }, [onDisposeLocalScreenShareStreamView]);\n\n if (!localParticipant || !localParticipant.isScreenSharingOn) {\n return null;\n }\n const localScreenSharingPlaceholder = (\n <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingContainerStyle}>\n <Stack\n horizontalAlign=\"center\"\n verticalAlign=\"center\"\n className={screenSharingNotificationContainerStyle(theme)}\n tokens={{ childrenGap: '1rem' }}\n >\n <Stack horizontal verticalAlign=\"center\" className={screenSharingNotificationIconContainerStyle}>\n <Icon iconName=\"ControlButtonScreenShareStart\" className={screenSharingNotificationIconStyle(theme)} />\n </Stack>\n <Text className={screenSharingNotificationTextStyle} aria-live=\"polite\">\n {locale.strings.videoGallery.screenIsBeingSharedMessage}\n </Text>\n </Stack>\n </Stack>\n );\n\n const displayName = !localParticipant?.displayName\n ? locale.strings.videoGallery.displayNamePlaceholder\n : localParticipant?.displayName;\n\n const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;\n\n if (localScreenShareView === 'placeholderMessage') {\n return (\n <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} onRenderPlaceholder={() => <></>}>\n {localScreenSharingPlaceholder}\n </VideoTile>\n );\n }\n\n return (\n <VideoTile\n displayName={displayName}\n isMuted={localParticipant?.isMuted}\n renderElement={\n renderElement ? (\n <StreamMedia videoStreamElement={renderElement} loadingState={isAvailable === false ? 'loading' : 'none'} />\n ) : undefined\n }\n onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n mediaAccess={localParticipant.mediaAccess}\n />\n );\n }\n);\n"]}
@@ -0,0 +1,22 @@
1
+ import { Theme } from '@fluentui/react';
2
+ /**
3
+ * @private
4
+ */
5
+ export declare const screenSharingContainerStyle: string;
6
+ /**
7
+ * @private
8
+ */
9
+ export declare const screenSharingNotificationContainerStyle: (theme: Theme) => string;
10
+ /**
11
+ * @private
12
+ */
13
+ export declare const screenSharingNotificationIconContainerStyle: string;
14
+ /**
15
+ * @private
16
+ */
17
+ export declare const screenSharingNotificationIconStyle: (theme: Theme) => string;
18
+ /**
19
+ * @private
20
+ */
21
+ export declare const screenSharingNotificationTextStyle: string;
22
+ //# sourceMappingURL=LocalScreenShare.styles.d.ts.map
@@ -0,0 +1,44 @@
1
+ // Copyright (c) Microsoft Corporation.
2
+ // Licensed under the MIT License.
3
+ import { mergeStyles } from '@fluentui/react';
4
+ /**
5
+ * @private
6
+ */
7
+ export const screenSharingContainerStyle = mergeStyles({
8
+ width: '100%',
9
+ height: '100%'
10
+ });
11
+ /**
12
+ * @private
13
+ */
14
+ export const screenSharingNotificationContainerStyle = (theme) => mergeStyles({
15
+ backgroundColor: 'inherit',
16
+ padding: '1rem',
17
+ maxWidth: '95%',
18
+ borderRadius: theme.effects.roundedCorner4,
19
+ color: theme.palette.neutralSecondary
20
+ });
21
+ /**
22
+ * @private
23
+ */
24
+ export const screenSharingNotificationIconContainerStyle = mergeStyles({
25
+ height: '2rem',
26
+ lineHeight: 0
27
+ });
28
+ /**
29
+ * @private
30
+ */
31
+ export const screenSharingNotificationIconStyle = (theme) => mergeStyles({
32
+ // svg is (20px x 20px) but path is only (16px x 12px), so need to scale at 2.5 to get 40px
33
+ transform: 'scale(2.5)',
34
+ color: theme.palette.neutralTertiary
35
+ });
36
+ /**
37
+ * @private
38
+ */
39
+ export const screenSharingNotificationTextStyle = mergeStyles({
40
+ fontSize: '1rem',
41
+ // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color
42
+ color: 'inherit'
43
+ });
44
+ //# sourceMappingURL=LocalScreenShare.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LocalScreenShare.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,CAAC,KAAY,EAAU,EAAE,CAC9E,WAAW,CAAC;IACV,eAAe,EAAE,SAAS;IAC1B,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;CACtC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,2CAA2C,GAAG,WAAW,CAAC;IACrE,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,CAAC;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,KAAY,EAAU,EAAE,CACzE,WAAW,CAAC;IACV,2FAA2F;IAC3F,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;CACrC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,WAAW,CAAC;IAC5D,QAAQ,EAAE,MAAM;IAChB,kHAAkH;IAClH,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const screenSharingContainerStyle = mergeStyles({\n width: '100%',\n height: '100%'\n});\n\n/**\n * @private\n */\nexport const screenSharingNotificationContainerStyle = (theme: Theme): string =>\n mergeStyles({\n backgroundColor: 'inherit',\n padding: '1rem',\n maxWidth: '95%',\n borderRadius: theme.effects.roundedCorner4,\n color: theme.palette.neutralSecondary\n });\n\n/**\n * @private\n */\nexport const screenSharingNotificationIconContainerStyle = mergeStyles({\n height: '2rem',\n lineHeight: 0\n});\n\n/**\n * @private\n */\nexport const screenSharingNotificationIconStyle = (theme: Theme): string =>\n mergeStyles({\n // svg is (20px x 20px) but path is only (16px x 12px), so need to scale at 2.5 to get 40px\n transform: 'scale(2.5)',\n color: theme.palette.neutralTertiary\n });\n\n/**\n * @private\n */\nexport const screenSharingNotificationTextStyle = mergeStyles({\n fontSize: '1rem',\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});\n"]}
@@ -312,6 +312,10 @@ export interface VideoGalleryProps {
312
312
  * This callback is to permit video for remote participant(s)
313
313
  */
314
314
  onPermitVideo?: (userIds: string[]) => Promise<void>;
315
+ /**
316
+ * Controls the view of the local screenshare stream in the gallery
317
+ */
318
+ localScreenShareView?: 'stream' | 'placeholderMessage';
315
319
  }
316
320
  /**
317
321
  * Options that apply to all Video Tiles in the {@link VideoGallery}
@@ -84,7 +84,7 @@ export const VideoGallery = (props) => {
84
84
  /* @conditional-compile-remove(together-mode) */
85
85
  togetherModeSeatingCoordinates,
86
86
  /* @conditional-compile-remove(together-mode) */
87
- onDisposeTogetherModeStreamView, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
87
+ onDisposeTogetherModeStreamView, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo, localScreenShareView } = props;
88
88
  const ids = useIdentifiers();
89
89
  const theme = useTheme();
90
90
  const localeStrings = useLocale().strings.videoGallery;
@@ -252,7 +252,7 @@ export const VideoGallery = (props) => {
252
252
  remoteVideoViewOptions
253
253
  ]);
254
254
  const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
255
- const localScreenShareStreamComponent = (React.createElement(LocalScreenShare, { localParticipant: localParticipant, renderElement: (_a = localParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, isAvailable: (_b = localParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isAvailable, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalScreenShareStreamView: onDisposeLocalScreenShareStreamView }));
255
+ const localScreenShareStreamComponent = (React.createElement(LocalScreenShare, { localParticipant: localParticipant, renderElement: (_a = localParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, isAvailable: (_b = localParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isAvailable, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalScreenShareStreamView: onDisposeLocalScreenShareStreamView, localScreenShareView: localScreenShareView }));
256
256
  const remoteScreenShareComponent = screenShareParticipant && (React.createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.isReceiving, participantVideoScalingMode: selectedScalingModeState[screenShareParticipant.userId], localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources })));
257
257
  const screenShareComponent = remoteScreenShareComponent
258
258
  ? remoteScreenShareComponent
@@ -1 +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, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\n/* @conditional-compile-remove(together-mode) */\nimport {\n VideoGalleryTogetherModeParticipantPosition,\n VideoGalleryTogetherModeStreams,\n TogetherModeStreamViewResult,\n TogetherModeStreamOptions\n} from '../types/TogetherModeTypes';\nimport { ViewScalingMode } from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport {\n _formatString,\n /* @conditional-compile-remove(together-mode) */ _isIdentityMicrosoftTeamsUser\n} from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\n/* @conditional-compile-remove(large-gallery) */\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\n\n/* @conditional-compile-remove(together-mode) */\nimport { TogetherModeLayout } from './VideoGallery/TogetherModeLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\nimport { ReactionResources } from '../types/ReactionTypes';\n/* @conditional-compile-remove(together-mode) */\nimport { TogetherModeStream } from './VideoGallery/TogetherModeStream';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/**\n * @private\n * Styles to disable the selectivity of a text in video gallery\n */\nexport const unselectable = {\n '-webkit-user-select': 'none',\n '-webkit-touch-callout': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none'\n};\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/**\n * @private\n * Default remote video tile menu options\n */\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n kind: 'contextual'\n};\n\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\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 to show when local screen share stream is loading */\n localScreenShareLoadingMessage: 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 /** Aria-label for announcing the local video tile can be moved by keyboard controls */\n localVideoMovementAriaLabel: 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 /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n fitRemoteParticipantToFrame: string;\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n fillRemoteParticipantFrame: string;\n /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n pinParticipantForMe: string;\n /** Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile */\n unpinParticipantForMe: string;\n /** Aria label for pin participant menu item of remote participant's video tile */\n pinParticipantMenuItemAriaLabel: string;\n /** Aria label for unpin participant menu item of remote participant's video tile */\n unpinParticipantMenuItemAriaLabel: string;\n /** Aria label to announce when remote participant's video tile is pinned */\n pinnedParticipantAnnouncementAriaLabel: string;\n /** Aria label to announce when remote participant's video tile is unpinned */\n unpinnedParticipantAnnouncementAriaLabel: string;\n /** Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile */\n startSpotlightVideoTileMenuLabel: string;\n /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */\n addSpotlightVideoTileMenuLabel: string;\n /** Menu title for start spotlight menu item when spotlight limit is reached */\n spotlightLimitReachedMenuTitle: string;\n /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */\n stopSpotlightVideoTileMenuLabel: string;\n /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */\n stopSpotlightOnSelfVideoTileMenuLabel: string;\n /** String for the attendee role */\n attendeeRole: string;\n /** Menu text shown in Video Tile contextual menu to mute a remote participant */\n muteParticipantMenuItemLabel: string;\n /** Text shown when waiting for others to join the call */\n waitingScreenText: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout =\n | 'default'\n | 'floatingLocalVideo'\n | 'speaker'\n | /* @conditional-compile-remove(large-gallery) */ 'largeGallery'\n | /* @conditional-compile-remove(together-mode) */ 'togetherMode'\n | 'focusedContent';\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 /** Styles for the vertical gallery */\n verticalGallery?: VerticalGalleryStyles;\n}\n\n/**\n * Different modes and positions of the overflow gallery in the VideoGallery\n *\n * @public\n */\nexport type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | 'horizontalTop';\n\n/**\n * different modes of the local video tile\n *\n * @public\n */\nexport type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';\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 /**\n * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n *\n * Callback to dispose a remote video stream view\n */\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /** Callback to dispose a remote video stream view */\n onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n /** Callback to dispose a remote screen share stream view */\n onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n /** Callback to dispose a local screen share stream view */\n onDisposeLocalScreenShareStreamView?: () => Promise<void>;\n /** Callback to render a participant 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 * List of pinned participant userIds.\n */\n pinnedParticipants?: string[];\n /**\n * This callback will be called when a participant video tile is pinned.\n */\n onPinParticipant?: (userId: string) => void;\n /**\n * This callback will be called when a participant video tile is un-pinned.\n */\n onUnpinParticipant?: (userId: string) => void;\n /**\n * List of spotlighted participant userIds.\n */\n spotlightedParticipants?: string[];\n /**\n * This callback is to start spotlight for local participant video tile.\n */\n onStartLocalSpotlight?: () => Promise<void>;\n /**\n * This callback is to stop spotlight for local participant video tile.\n */\n onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /**\n * This callback is to start spotlight for remote participant video tiles.\n */\n onStopLocalSpotlight?: () => Promise<void>;\n /**\n * This callback is to stop spotlight for remote participant video tiles.\n */\n onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /**\n * Maximum participants that can be spotlighted\n */\n maxParticipantsToSpotlight?: number;\n /**\n * Options for showing the remote video tile menu.\n *\n * @defaultValue \\{ kind: 'contextual' \\}\n */\n remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n /**\n * Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'horizontalBottom'\n */\n overflowGalleryPosition?: OverflowGalleryPosition;\n /**\n * Determines the aspect ratio of local video tile in the video gallery.\n * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and\n * 16:9 (landscape) aspect ratios.\n * @defaultValue 'followDeviceOrientation'\n */\n localVideoTileSize?: LocalVideoTileSize;\n /**\n * Reaction resources for like, heart, laugh, applause and surprised.\n */\n reactionResources?: ReactionResources;\n /**\n * Additional Options for Video Tiles\n */\n videoTilesOptions?: VideoTilesOptions;\n /**\n * This callback is to mute a remote participant\n */\n onMuteParticipant?: (userId: string) => Promise<void>;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Indicates if the local participant can start together mode\n */\n startTogetherModeEnabled?: boolean;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Indicates if together mode is active\n */\n isTogetherModeActive?: boolean;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Callback to create a together mode stream view\n */\n onCreateTogetherModeStreamView?: (\n options?: TogetherModeStreamOptions\n ) => Promise<void | TogetherModeStreamViewResult>;\n /* @conditional-compile-remove(together-mode) */\n /**\n * This callback is to start together mode\n */\n onStartTogetherMode?: () => Promise<void>;\n /* @conditional-compile-remove(together-mode) */\n /**\n * This callback is to set the scene size for together mode\n */\n onSetTogetherModeSceneSize?: (width: number, height: number) => void;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Together mode video streams\n */\n togetherModeStreams?: VideoGalleryTogetherModeStreams;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Seating position of participants in together mode\n */\n togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Callback to dispose a together mode stream view\n */\n onDisposeTogetherModeStreamView?: () => Promise<void>;\n /**\n * This callback is to forbid audio for remote participant(s)\n */\n onForbidAudio?: (userIds: string[]) => Promise<void>;\n /**\n * This callback is to permit audio for remote participant(s)\n */\n onPermitAudio?: (userIds: string[]) => Promise<void>;\n /**\n * This callback is to forbid video for remote participant(s)\n */\n onForbidVideo?: (userIds: string[]) => Promise<void>;\n /**\n * This callback is to permit video for remote participant(s)\n */\n onPermitVideo?: (userIds: string[]) => Promise<void>;\n}\n\n/**\n * Options that apply to all Video Tiles in the {@link VideoGallery}\n *\n * @public\n */\nexport interface VideoTilesOptions {\n /**\n * Whether to always show the label background for the video tile\n */\n alwaysShowLabelBackground?: boolean;\n}\n\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileContextualMenuProps {\n /**\n * The menu property kind\n */\n kind: 'contextual';\n}\n\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileDrawerMenuProps {\n /**\n * The menu property kind\n */\n kind: 'drawer';\n /**\n * The optional id property provided on an element that the drawer menu should render within when a\n * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n * render within the VideoGallery component.\n */\n hostId?: string;\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 onDisposeRemoteScreenShareStreamView,\n onDisposeLocalScreenShareStreamView,\n onDisposeRemoteVideoStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n onPinParticipant: onPinParticipantHandler,\n onUnpinParticipant: onUnpinParticipantHandler,\n remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n overflowGalleryPosition = 'horizontalBottom',\n localVideoTileSize = 'followDeviceOrientation',\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStartRemoteSpotlight,\n onStopLocalSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n reactionResources,\n videoTilesOptions,\n onMuteParticipant,\n /* @conditional-compile-remove(together-mode) */\n startTogetherModeEnabled,\n /* @conditional-compile-remove(together-mode) */\n isTogetherModeActive,\n /* @conditional-compile-remove(together-mode) */\n onCreateTogetherModeStreamView,\n /* @conditional-compile-remove(together-mode) */\n onStartTogetherMode,\n /* @conditional-compile-remove(together-mode) */\n onSetTogetherModeSceneSize,\n /* @conditional-compile-remove(together-mode) */\n togetherModeStreams,\n /* @conditional-compile-remove(together-mode) */\n togetherModeSeatingCoordinates,\n /* @conditional-compile-remove(together-mode) */\n onDisposeTogetherModeStreamView,\n onForbidAudio,\n onPermitAudio,\n onForbidVideo,\n onPermitVideo\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n : undefined;\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const localTileNotInGrid = (layout === 'floatingLocalVideo' || layout === 'speaker') && remoteParticipants.length > 0;\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\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n {}\n );\n\n const onUpdateScalingMode = useCallback(\n (remoteUserId: string, scalingMode: ViewScalingMode) => {\n setselectedScalingModeState((current) => ({\n ...current,\n [remoteUserId]: {\n scalingMode,\n isMirrored: remoteVideoViewOptions?.isMirrored\n }\n }));\n },\n [remoteVideoViewOptions?.isMirrored]\n );\n useEffect(() => {\n props.pinnedParticipants?.forEach((pinParticipant) => {\n if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n // warning will be logged in the console when invalid participant id is passed in pinned participants\n console.warn('Invalid pinned participant UserId :' + pinParticipant);\n }\n });\n }, [props.pinnedParticipants, props.remoteParticipants]);\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = useMemo(\n () =>\n props.pinnedParticipants ??\n pinnedParticipantsState.filter((pinnedParticipantId) =>\n remoteParticipants.find((remoteParticipant) => remoteParticipant.userId === pinnedParticipantId)\n ),\n [props.pinnedParticipants, pinnedParticipantsState, remoteParticipants]\n );\n\n const showLocalVideoTileLabel =\n !((localTileNotInGrid && isNarrow) || localVideoTileSize === '9:16') || layout === 'default';\n /**\n * Utility function for memoized rendering of LocalParticipant.\n */\n const localVideoTile = useMemo((): JSX.Element | undefined => {\n if (localVideoTileSize === 'hidden') {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const isSpotlighted = !!localParticipant.spotlight;\n\n const localVideoTileStyles = concatStyleSets(\n localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n const showDisplayNameTrampoline = (): string => {\n return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n };\n\n return (\n <Stack styles={localVideoTileContainerStyles} key=\"local-video-tile-key\">\n <_LocalVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\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={showDisplayNameTrampoline()}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={showLocalVideoTileLabel}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n raisedHand={localParticipant.raisedHand}\n reaction={localParticipant.reaction}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartLocalSpotlight}\n onStopSpotlight={onStopLocalSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n menuKind={remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined}\n drawerMenuHostId={drawerMenuHostId}\n strings={strings}\n reactionResources={reactionResources}\n participantsCount={remoteParticipants.length + 1}\n isScreenSharingOn={localParticipant.isScreenSharingOn}\n mediaAccess={localParticipant.mediaAccess}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n localTileNotInGrid,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n localVideoTileSize,\n layout,\n showLocalVideoTileLabel,\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStopLocalSpotlight,\n maxParticipantsToSpotlight,\n remoteVideoTileMenu,\n strings,\n drawerMenuHostId,\n reactionResources,\n videoTilesOptions,\n remoteParticipants.length\n ]);\n\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipants.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipants.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants, setPinnedParticipantsState, onPinParticipantHandler]\n );\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n /**\n * sets the announcement string for VideoGallery actions so that the screenreader will trigger\n */\n const toggleAnnouncerString = useCallback(\n (announcement: string) => {\n setAnnouncementString(announcement);\n /**\n * Clears the announcer string after VideoGallery action allowing it to be re-announced.\n */\n setTimeout(() => {\n setAnnouncementString('');\n }, 3000);\n },\n [setAnnouncementString]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n let isPinned = pinnedParticipants?.includes(participant.userId);\n const isSpotlighted = !!participant.spotlight;\n isPinned = isSpotlighted ? false : isPinned;\n\n const createViewOptions = (): VideoStreamOptions | undefined => {\n if (selectedScalingMode) {\n return selectedScalingMode;\n }\n return remoteVideoStream?.streamSize &&\n remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n ? ({\n scalingMode: 'Fit',\n isMirrored: remoteVideoViewOptions?.isMirrored\n } as VideoStreamOptions)\n : remoteVideoViewOptions;\n };\n\n return (\n <_RemoteVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n streamId={remoteVideoStream?.id}\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={createViewOptions()}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n participantState={participant.state}\n menuKind={\n participant.userId === localParticipant.userId\n ? undefined\n : remoteVideoTileMenu\n ? remoteVideoTileMenu.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n drawerMenuHostId={drawerMenuHostId}\n onPinParticipant={onPinParticipant}\n onUnpinParticipant={onUnpinParticipant}\n onUpdateScalingMode={onUpdateScalingMode}\n isPinned={isPinned}\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n toggleAnnouncerString={toggleAnnouncerString}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartRemoteSpotlight}\n onStopSpotlight={onStopRemoteSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n reactionResources={reactionResources}\n onMuteParticipant={onMuteParticipant}\n onForbidAudio={onForbidAudio}\n onPermitAudio={onPermitAudio}\n onForbidVideo={onForbidVideo}\n onPermitVideo={onPermitVideo}\n />\n );\n },\n [\n selectedScalingModeState,\n pinnedParticipants,\n videoTilesOptions?.alwaysShowLabelBackground,\n onCreateRemoteStreamView,\n onDisposeRemoteVideoStreamView,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n localParticipant.userId,\n remoteVideoTileMenu,\n drawerMenuHostId,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n toggleAnnouncerString,\n spotlightedParticipants,\n onStartRemoteSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n reactionResources,\n onMuteParticipant,\n onForbidAudio,\n onPermitAudio,\n onForbidVideo,\n onPermitVideo,\n remoteVideoViewOptions\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n const localScreenShareStreamComponent = (\n <LocalScreenShare\n localParticipant={localParticipant}\n renderElement={localParticipant.screenShareStream?.renderElement}\n isAvailable={localParticipant.screenShareStream?.isAvailable}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalScreenShareStreamView={onDisposeLocalScreenShareStreamView}\n />\n );\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n localParticipant={localParticipant}\n remoteParticipants={remoteParticipants}\n reactionResources={reactionResources}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n /* @conditional-compile-remove(together-mode) */\n const togetherModeStreamComponent = useMemo(\n () => (\n <TogetherModeStream\n startTogetherModeEnabled={startTogetherModeEnabled}\n isTogetherModeActive={isTogetherModeActive}\n onCreateTogetherModeStreamView={onCreateTogetherModeStreamView}\n onStartTogetherMode={onStartTogetherMode}\n onDisposeTogetherModeStreamView={onDisposeTogetherModeStreamView}\n onSetTogetherModeSceneSize={onSetTogetherModeSceneSize}\n togetherModeStreams={togetherModeStreams}\n seatingCoordinates={togetherModeSeatingCoordinates}\n localParticipant={localParticipant}\n remoteParticipants={remoteParticipants}\n reactionResources={reactionResources}\n containerWidth={containerWidth}\n containerHeight={containerHeight}\n />\n ),\n [\n startTogetherModeEnabled,\n isTogetherModeActive,\n onCreateTogetherModeStreamView,\n onStartTogetherMode,\n onDisposeTogetherModeStreamView,\n onSetTogetherModeSceneSize,\n togetherModeStreams,\n togetherModeSeatingCoordinates,\n localParticipant,\n remoteParticipants,\n reactionResources,\n containerWidth,\n containerHeight\n ]\n );\n /* @conditional-compile-remove(together-mode) */\n // Current implementation of capabilities is only based on user role.\n // This logic checks for the user role and if the user is a Teams user.\n const canSwitchToTogetherModeLayout =\n isTogetherModeActive || (_isIdentityMicrosoftTeamsUser(localParticipant.userId) && startTogetherModeEnabled);\n\n const layoutProps = useMemo<LayoutProps>(\n () => ({\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n pinnedParticipantUserIds: pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipantUserIds: spotlightedParticipants\n }),\n [\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipants\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n if (screenShareParticipant && layout === 'focusedContent') {\n return <FocusedContentLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n\n if (layout === 'speaker') {\n return <SpeakerVideoLayout {...layoutProps} />;\n }\n /* @conditional-compile-remove(large-gallery) */\n if (layout === 'largeGallery') {\n return <LargeGalleryLayout {...layoutProps} />;\n }\n /* @conditional-compile-remove(together-mode) */\n // Teams users can switch to Together mode layout only if they have the capability,\n // while ACS users can do so only if Together mode is enabled.\n if (!screenShareComponent && layout === 'togetherMode' && canSwitchToTogetherModeLayout) {\n return <TogetherModeLayout togetherModeStreamComponent={togetherModeStreamComponent} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [\n /* @conditional-compile-remove(together-mode) */ canSwitchToTogetherModeLayout,\n layout,\n layoutProps,\n screenShareComponent,\n screenShareParticipant,\n /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent\n ]);\n\n return (\n <div\n // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n >\n {videoGalleryLayout}\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n </div>\n );\n};\n"]}
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, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\n/* @conditional-compile-remove(together-mode) */\nimport {\n VideoGalleryTogetherModeParticipantPosition,\n VideoGalleryTogetherModeStreams,\n TogetherModeStreamViewResult,\n TogetherModeStreamOptions\n} from '../types/TogetherModeTypes';\nimport { ViewScalingMode } from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport {\n _formatString,\n /* @conditional-compile-remove(together-mode) */ _isIdentityMicrosoftTeamsUser\n} from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { localVideoTileContainerStyles, videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\nimport { VerticalGalleryStyles } from './VerticalGallery';\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\n/* @conditional-compile-remove(large-gallery) */\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\n\n/* @conditional-compile-remove(together-mode) */\nimport { TogetherModeLayout } from './VideoGallery/TogetherModeLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\nimport { ReactionResources } from '../types/ReactionTypes';\n/* @conditional-compile-remove(together-mode) */\nimport { TogetherModeStream } from './VideoGallery/TogetherModeStream';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/**\n * @private\n * Styles to disable the selectivity of a text in video gallery\n */\nexport const unselectable = {\n '-webkit-user-select': 'none',\n '-webkit-touch-callout': 'none',\n '-moz-user-select': 'none',\n '-ms-user-select': 'none',\n 'user-select': 'none'\n};\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/**\n * @private\n * Default remote video tile menu options\n */\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n kind: 'contextual'\n};\n\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\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 to show when local screen share stream is loading */\n localScreenShareLoadingMessage: 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 /** Aria-label for announcing the local video tile can be moved by keyboard controls */\n localVideoMovementAriaLabel: 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 /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n fitRemoteParticipantToFrame: string;\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n fillRemoteParticipantFrame: string;\n /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n pinParticipantForMe: string;\n /** Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile */\n unpinParticipantForMe: string;\n /** Aria label for pin participant menu item of remote participant's video tile */\n pinParticipantMenuItemAriaLabel: string;\n /** Aria label for unpin participant menu item of remote participant's video tile */\n unpinParticipantMenuItemAriaLabel: string;\n /** Aria label to announce when remote participant's video tile is pinned */\n pinnedParticipantAnnouncementAriaLabel: string;\n /** Aria label to announce when remote participant's video tile is unpinned */\n unpinnedParticipantAnnouncementAriaLabel: string;\n /** Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile */\n startSpotlightVideoTileMenuLabel: string;\n /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */\n addSpotlightVideoTileMenuLabel: string;\n /** Menu title for start spotlight menu item when spotlight limit is reached */\n spotlightLimitReachedMenuTitle: string;\n /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */\n stopSpotlightVideoTileMenuLabel: string;\n /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */\n stopSpotlightOnSelfVideoTileMenuLabel: string;\n /** String for the attendee role */\n attendeeRole: string;\n /** Menu text shown in Video Tile contextual menu to mute a remote participant */\n muteParticipantMenuItemLabel: string;\n /** Text shown when waiting for others to join the call */\n waitingScreenText: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout =\n | 'default'\n | 'floatingLocalVideo'\n | 'speaker'\n | /* @conditional-compile-remove(large-gallery) */ 'largeGallery'\n | /* @conditional-compile-remove(together-mode) */ 'togetherMode'\n | 'focusedContent';\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 /** Styles for the vertical gallery */\n verticalGallery?: VerticalGalleryStyles;\n}\n\n/**\n * Different modes and positions of the overflow gallery in the VideoGallery\n *\n * @public\n */\nexport type OverflowGalleryPosition = 'horizontalBottom' | 'verticalRight' | 'horizontalTop';\n\n/**\n * different modes of the local video tile\n *\n * @public\n */\nexport type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';\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 /**\n * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n *\n * Callback to dispose a remote video stream view\n */\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /** Callback to dispose a remote video stream view */\n onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n /** Callback to dispose a remote screen share stream view */\n onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n /** Callback to dispose a local screen share stream view */\n onDisposeLocalScreenShareStreamView?: () => Promise<void>;\n /** Callback to render a participant 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 * List of pinned participant userIds.\n */\n pinnedParticipants?: string[];\n /**\n * This callback will be called when a participant video tile is pinned.\n */\n onPinParticipant?: (userId: string) => void;\n /**\n * This callback will be called when a participant video tile is un-pinned.\n */\n onUnpinParticipant?: (userId: string) => void;\n /**\n * List of spotlighted participant userIds.\n */\n spotlightedParticipants?: string[];\n /**\n * This callback is to start spotlight for local participant video tile.\n */\n onStartLocalSpotlight?: () => Promise<void>;\n /**\n * This callback is to stop spotlight for local participant video tile.\n */\n onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /**\n * This callback is to start spotlight for remote participant video tiles.\n */\n onStopLocalSpotlight?: () => Promise<void>;\n /**\n * This callback is to stop spotlight for remote participant video tiles.\n */\n onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;\n /**\n * Maximum participants that can be spotlighted\n */\n maxParticipantsToSpotlight?: number;\n /**\n * Options for showing the remote video tile menu.\n *\n * @defaultValue \\{ kind: 'contextual' \\}\n */\n remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n /**\n * Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'horizontalBottom'\n */\n overflowGalleryPosition?: OverflowGalleryPosition;\n /**\n * Determines the aspect ratio of local video tile in the video gallery.\n * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and\n * 16:9 (landscape) aspect ratios.\n * @defaultValue 'followDeviceOrientation'\n */\n localVideoTileSize?: LocalVideoTileSize;\n /**\n * Reaction resources for like, heart, laugh, applause and surprised.\n */\n reactionResources?: ReactionResources;\n /**\n * Additional Options for Video Tiles\n */\n videoTilesOptions?: VideoTilesOptions;\n /**\n * This callback is to mute a remote participant\n */\n onMuteParticipant?: (userId: string) => Promise<void>;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Indicates if the local participant can start together mode\n */\n startTogetherModeEnabled?: boolean;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Indicates if together mode is active\n */\n isTogetherModeActive?: boolean;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Callback to create a together mode stream view\n */\n onCreateTogetherModeStreamView?: (\n options?: TogetherModeStreamOptions\n ) => Promise<void | TogetherModeStreamViewResult>;\n /* @conditional-compile-remove(together-mode) */\n /**\n * This callback is to start together mode\n */\n onStartTogetherMode?: () => Promise<void>;\n /* @conditional-compile-remove(together-mode) */\n /**\n * This callback is to set the scene size for together mode\n */\n onSetTogetherModeSceneSize?: (width: number, height: number) => void;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Together mode video streams\n */\n togetherModeStreams?: VideoGalleryTogetherModeStreams;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Seating position of participants in together mode\n */\n togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n /* @conditional-compile-remove(together-mode) */\n /**\n * Callback to dispose a together mode stream view\n */\n onDisposeTogetherModeStreamView?: () => Promise<void>;\n /**\n * This callback is to forbid audio for remote participant(s)\n */\n onForbidAudio?: (userIds: string[]) => Promise<void>;\n /**\n * This callback is to permit audio for remote participant(s)\n */\n onPermitAudio?: (userIds: string[]) => Promise<void>;\n /**\n * This callback is to forbid video for remote participant(s)\n */\n onForbidVideo?: (userIds: string[]) => Promise<void>;\n /**\n * This callback is to permit video for remote participant(s)\n */\n onPermitVideo?: (userIds: string[]) => Promise<void>;\n /**\n * Controls the view of the local screenshare stream in the gallery\n */\n localScreenShareView?: 'stream' | 'placeholderMessage';\n}\n\n/**\n * Options that apply to all Video Tiles in the {@link VideoGallery}\n *\n * @public\n */\nexport interface VideoTilesOptions {\n /**\n * Whether to always show the label background for the video tile\n */\n alwaysShowLabelBackground?: boolean;\n}\n\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileContextualMenuProps {\n /**\n * The menu property kind\n */\n kind: 'contextual';\n}\n\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileDrawerMenuProps {\n /**\n * The menu property kind\n */\n kind: 'drawer';\n /**\n * The optional id property provided on an element that the drawer menu should render within when a\n * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n * render within the VideoGallery component.\n */\n hostId?: string;\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 onDisposeRemoteScreenShareStreamView,\n onDisposeLocalScreenShareStreamView,\n onDisposeRemoteVideoStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n onPinParticipant: onPinParticipantHandler,\n onUnpinParticipant: onUnpinParticipantHandler,\n remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n overflowGalleryPosition = 'horizontalBottom',\n localVideoTileSize = 'followDeviceOrientation',\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStartRemoteSpotlight,\n onStopLocalSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n reactionResources,\n videoTilesOptions,\n onMuteParticipant,\n /* @conditional-compile-remove(together-mode) */\n startTogetherModeEnabled,\n /* @conditional-compile-remove(together-mode) */\n isTogetherModeActive,\n /* @conditional-compile-remove(together-mode) */\n onCreateTogetherModeStreamView,\n /* @conditional-compile-remove(together-mode) */\n onStartTogetherMode,\n /* @conditional-compile-remove(together-mode) */\n onSetTogetherModeSceneSize,\n /* @conditional-compile-remove(together-mode) */\n togetherModeStreams,\n /* @conditional-compile-remove(together-mode) */\n togetherModeSeatingCoordinates,\n /* @conditional-compile-remove(together-mode) */\n onDisposeTogetherModeStreamView,\n onForbidAudio,\n onPermitAudio,\n onForbidVideo,\n onPermitVideo,\n localScreenShareView\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n : undefined;\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const localTileNotInGrid = (layout === 'floatingLocalVideo' || layout === 'speaker') && remoteParticipants.length > 0;\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\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n {}\n );\n\n const onUpdateScalingMode = useCallback(\n (remoteUserId: string, scalingMode: ViewScalingMode) => {\n setselectedScalingModeState((current) => ({\n ...current,\n [remoteUserId]: {\n scalingMode,\n isMirrored: remoteVideoViewOptions?.isMirrored\n }\n }));\n },\n [remoteVideoViewOptions?.isMirrored]\n );\n useEffect(() => {\n props.pinnedParticipants?.forEach((pinParticipant) => {\n if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n // warning will be logged in the console when invalid participant id is passed in pinned participants\n console.warn('Invalid pinned participant UserId :' + pinParticipant);\n }\n });\n }, [props.pinnedParticipants, props.remoteParticipants]);\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = useMemo(\n () =>\n props.pinnedParticipants ??\n pinnedParticipantsState.filter((pinnedParticipantId) =>\n remoteParticipants.find((remoteParticipant) => remoteParticipant.userId === pinnedParticipantId)\n ),\n [props.pinnedParticipants, pinnedParticipantsState, remoteParticipants]\n );\n\n const showLocalVideoTileLabel =\n !((localTileNotInGrid && isNarrow) || localVideoTileSize === '9:16') || layout === 'default';\n /**\n * Utility function for memoized rendering of LocalParticipant.\n */\n const localVideoTile = useMemo((): JSX.Element | undefined => {\n if (localVideoTileSize === 'hidden') {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const isSpotlighted = !!localParticipant.spotlight;\n\n const localVideoTileStyles = concatStyleSets(\n localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n const showDisplayNameTrampoline = (): string => {\n return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n };\n\n return (\n <Stack styles={localVideoTileContainerStyles} key=\"local-video-tile-key\">\n <_LocalVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\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={showDisplayNameTrampoline()}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={showLocalVideoTileLabel}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n raisedHand={localParticipant.raisedHand}\n reaction={localParticipant.reaction}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartLocalSpotlight}\n onStopSpotlight={onStopLocalSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n menuKind={remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined}\n drawerMenuHostId={drawerMenuHostId}\n strings={strings}\n reactionResources={reactionResources}\n participantsCount={remoteParticipants.length + 1}\n isScreenSharingOn={localParticipant.isScreenSharingOn}\n mediaAccess={localParticipant.mediaAccess}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n localTileNotInGrid,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n localVideoTileSize,\n layout,\n showLocalVideoTileLabel,\n spotlightedParticipants,\n onStartLocalSpotlight,\n onStopLocalSpotlight,\n maxParticipantsToSpotlight,\n remoteVideoTileMenu,\n strings,\n drawerMenuHostId,\n reactionResources,\n videoTilesOptions,\n remoteParticipants.length\n ]);\n\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipants.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipants.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants, setPinnedParticipantsState, onPinParticipantHandler]\n );\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n /**\n * sets the announcement string for VideoGallery actions so that the screenreader will trigger\n */\n const toggleAnnouncerString = useCallback(\n (announcement: string) => {\n setAnnouncementString(announcement);\n /**\n * Clears the announcer string after VideoGallery action allowing it to be re-announced.\n */\n setTimeout(() => {\n setAnnouncementString('');\n }, 3000);\n },\n [setAnnouncementString]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n let isPinned = pinnedParticipants?.includes(participant.userId);\n const isSpotlighted = !!participant.spotlight;\n isPinned = isSpotlighted ? false : isPinned;\n\n const createViewOptions = (): VideoStreamOptions | undefined => {\n if (selectedScalingMode) {\n return selectedScalingMode;\n }\n return remoteVideoStream?.streamSize &&\n remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n ? ({\n scalingMode: 'Fit',\n isMirrored: remoteVideoViewOptions?.isMirrored\n } as VideoStreamOptions)\n : remoteVideoViewOptions;\n };\n\n return (\n <_RemoteVideoTile\n alwaysShowLabelBackground={videoTilesOptions?.alwaysShowLabelBackground}\n streamId={remoteVideoStream?.id}\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={createViewOptions()}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n participantState={participant.state}\n menuKind={\n participant.userId === localParticipant.userId\n ? undefined\n : remoteVideoTileMenu\n ? remoteVideoTileMenu.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n drawerMenuHostId={drawerMenuHostId}\n onPinParticipant={onPinParticipant}\n onUnpinParticipant={onUnpinParticipant}\n onUpdateScalingMode={onUpdateScalingMode}\n isPinned={isPinned}\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n toggleAnnouncerString={toggleAnnouncerString}\n spotlightedParticipantUserIds={spotlightedParticipants}\n isSpotlighted={isSpotlighted}\n onStartSpotlight={onStartRemoteSpotlight}\n onStopSpotlight={onStopRemoteSpotlight}\n maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n reactionResources={reactionResources}\n onMuteParticipant={onMuteParticipant}\n onForbidAudio={onForbidAudio}\n onPermitAudio={onPermitAudio}\n onForbidVideo={onForbidVideo}\n onPermitVideo={onPermitVideo}\n />\n );\n },\n [\n selectedScalingModeState,\n pinnedParticipants,\n videoTilesOptions?.alwaysShowLabelBackground,\n onCreateRemoteStreamView,\n onDisposeRemoteVideoStreamView,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n localParticipant.userId,\n remoteVideoTileMenu,\n drawerMenuHostId,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n toggleAnnouncerString,\n spotlightedParticipants,\n onStartRemoteSpotlight,\n onStopRemoteSpotlight,\n maxParticipantsToSpotlight,\n reactionResources,\n onMuteParticipant,\n onForbidAudio,\n onPermitAudio,\n onForbidVideo,\n onPermitVideo,\n remoteVideoViewOptions\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n const localScreenShareStreamComponent = (\n <LocalScreenShare\n localParticipant={localParticipant}\n renderElement={localParticipant.screenShareStream?.renderElement}\n isAvailable={localParticipant.screenShareStream?.isAvailable}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalScreenShareStreamView={onDisposeLocalScreenShareStreamView}\n localScreenShareView={localScreenShareView}\n />\n );\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n localParticipant={localParticipant}\n remoteParticipants={remoteParticipants}\n reactionResources={reactionResources}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n /* @conditional-compile-remove(together-mode) */\n const togetherModeStreamComponent = useMemo(\n () => (\n <TogetherModeStream\n startTogetherModeEnabled={startTogetherModeEnabled}\n isTogetherModeActive={isTogetherModeActive}\n onCreateTogetherModeStreamView={onCreateTogetherModeStreamView}\n onStartTogetherMode={onStartTogetherMode}\n onDisposeTogetherModeStreamView={onDisposeTogetherModeStreamView}\n onSetTogetherModeSceneSize={onSetTogetherModeSceneSize}\n togetherModeStreams={togetherModeStreams}\n seatingCoordinates={togetherModeSeatingCoordinates}\n localParticipant={localParticipant}\n remoteParticipants={remoteParticipants}\n reactionResources={reactionResources}\n containerWidth={containerWidth}\n containerHeight={containerHeight}\n />\n ),\n [\n startTogetherModeEnabled,\n isTogetherModeActive,\n onCreateTogetherModeStreamView,\n onStartTogetherMode,\n onDisposeTogetherModeStreamView,\n onSetTogetherModeSceneSize,\n togetherModeStreams,\n togetherModeSeatingCoordinates,\n localParticipant,\n remoteParticipants,\n reactionResources,\n containerWidth,\n containerHeight\n ]\n );\n /* @conditional-compile-remove(together-mode) */\n // Current implementation of capabilities is only based on user role.\n // This logic checks for the user role and if the user is a Teams user.\n const canSwitchToTogetherModeLayout =\n isTogetherModeActive || (_isIdentityMicrosoftTeamsUser(localParticipant.userId) && startTogetherModeEnabled);\n\n const layoutProps = useMemo<LayoutProps>(\n () => ({\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n pinnedParticipantUserIds: pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipantUserIds: spotlightedParticipants\n }),\n [\n remoteParticipants,\n localParticipant,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n pinnedParticipants,\n overflowGalleryPosition,\n localVideoTileSize,\n spotlightedParticipants\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n if (screenShareParticipant && layout === 'focusedContent') {\n return <FocusedContentLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n\n if (layout === 'speaker') {\n return <SpeakerVideoLayout {...layoutProps} />;\n }\n /* @conditional-compile-remove(large-gallery) */\n if (layout === 'largeGallery') {\n return <LargeGalleryLayout {...layoutProps} />;\n }\n /* @conditional-compile-remove(together-mode) */\n // Teams users can switch to Together mode layout only if they have the capability,\n // while ACS users can do so only if Together mode is enabled.\n if (!screenShareComponent && layout === 'togetherMode' && canSwitchToTogetherModeLayout) {\n return <TogetherModeLayout togetherModeStreamComponent={togetherModeStreamComponent} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [\n /* @conditional-compile-remove(together-mode) */ canSwitchToTogetherModeLayout,\n layout,\n layoutProps,\n screenShareComponent,\n screenShareParticipant,\n /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent\n ]);\n\n return (\n <div\n // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n >\n {videoGalleryLayout}\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n </div>\n );\n};\n"]}
@@ -41,9 +41,6 @@ export const useAttachmentCardStyles = makeStyles({
41
41
  textOverflow: 'ellipsis'
42
42
  },
43
43
  actions: {
44
- '& > * button:focus': {
45
- border: `black solid ${_pxToRem(1)}`
46
- },
47
44
  // don't shrink the actions container
48
45
  flexShrink: 0
49
46
  }
@@ -1 +1 @@
1
- {"version":3,"file":"AttachmentCard.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/AttachmentCard.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAChD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AAE/C;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAAC;IAChD,IAAI,EAAE;QACJ,qBAAqB,oBAChB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CACzB;KACF;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,GAAG,6BAA6B,KAAK;KAChD;IACD,WAAW,EAAE;QACX,KAAK,EAAE,GAAG,6BAA6B,KAAK;KAC7C;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;QACvB,uCAAuC;QACvC,UAAU,EAAE,CAAC;KACd;IACD,OAAO,EAAE;QACP,OAAO,EAAE;YACP,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;SACzB;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,UAAU;KACzB;IACD,OAAO,EAAE;QACP,oBAAoB,EAAE;YACpB,MAAM,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,EAAE;SACrC;QACD,qCAAqC;QACrC,UAAU,EAAE,CAAC;KACd;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,IAAI,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { makeStyles, shorthands } from '@fluentui/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const _ATTACHMENT_CARD_WIDTH_IN_REM = 12;\n/**\n * @private\n */\nexport const _ATTACHMENT_CARD_MARGIN_IN_PX = 2;\n\n/**\n * @private\n */\nexport const useAttachmentCardStyles = makeStyles({\n root: {\n '& div[role=toolbar]': {\n ...shorthands.padding(0)\n }\n },\n dynamicWidth: {\n minWidth: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n staticWidth: {\n width: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n fileIcon: {\n marginLeft: _pxToRem(4),\n // don't shrink the file icon container\n flexShrink: 0\n },\n content: {\n '> div': {\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n },\n title: {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n actions: {\n '& > * button:focus': {\n border: `black solid ${_pxToRem(1)}`\n },\n // don't shrink the actions container\n flexShrink: 0\n }\n});\n\n/**\n * @private\n */\nexport const titleTooltipContainerStyle = mergeStyles({\n width: '100%',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflowX: 'clip'\n});\n\n/**\n * @private\n */\nexport const ATTACHMENT_CARD_MIN_PROGRESS = 0.05;\n"]}
1
+ {"version":3,"file":"AttachmentCard.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/AttachmentCard.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,EAAE,CAAC;AAChD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AAE/C;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAAC;IAChD,IAAI,EAAE;QACJ,qBAAqB,oBAChB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CACzB;KACF;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,GAAG,6BAA6B,KAAK;KAChD;IACD,WAAW,EAAE;QACX,KAAK,EAAE,GAAG,6BAA6B,KAAK;KAC7C;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;QACvB,uCAAuC;QACvC,UAAU,EAAE,CAAC;KACd;IACD,OAAO,EAAE;QACP,OAAO,EAAE;YACP,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;SACzB;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,UAAU;KACzB;IACD,OAAO,EAAE;QACP,qCAAqC;QACrC,UAAU,EAAE,CAAC;KACd;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,IAAI,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { makeStyles, shorthands } from '@fluentui/react-components';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const _ATTACHMENT_CARD_WIDTH_IN_REM = 12;\n/**\n * @private\n */\nexport const _ATTACHMENT_CARD_MARGIN_IN_PX = 2;\n\n/**\n * @private\n */\nexport const useAttachmentCardStyles = makeStyles({\n root: {\n '& div[role=toolbar]': {\n ...shorthands.padding(0)\n }\n },\n dynamicWidth: {\n minWidth: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n staticWidth: {\n width: `${_ATTACHMENT_CARD_WIDTH_IN_REM}rem`\n },\n fileIcon: {\n marginLeft: _pxToRem(4),\n // don't shrink the file icon container\n flexShrink: 0\n },\n content: {\n '> div': {\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n },\n title: {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n actions: {\n // don't shrink the actions container\n flexShrink: 0\n }\n});\n\n/**\n * @private\n */\nexport const titleTooltipContainerStyle = mergeStyles({\n width: '100%',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflowX: 'clip'\n});\n\n/**\n * @private\n */\nexport const ATTACHMENT_CARD_MIN_PROGRESS = 0.05;\n"]}