@azure/communication-react 1.7.1-alpha-202308290013 → 1.7.1-alpha-202308310013

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 (77) hide show
  1. package/dist/communication-react.d.ts +96 -9
  2. package/dist/dist-cjs/communication-react/index.js +351 -85
  3. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  4. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  5. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  6. package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js +1 -1
  7. package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js.map +1 -1
  8. package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts +6 -2
  9. package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
  10. package/dist/dist-esm/calling-stateful-client/src/CallContext.d.ts +2 -2
  11. package/dist/dist-esm/calling-stateful-client/src/CallContext.js +2 -2
  12. package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
  13. package/dist/dist-esm/calling-stateful-client/src/CapabilitiesSubscriber.js +2 -2
  14. package/dist/dist-esm/calling-stateful-client/src/CapabilitiesSubscriber.js.map +1 -1
  15. package/dist/dist-esm/calling-stateful-client/src/index-public.d.ts +1 -1
  16. package/dist/dist-esm/calling-stateful-client/src/index-public.js.map +1 -1
  17. package/dist/dist-esm/react-components/src/components/ImageGallery.js +6 -10
  18. package/dist/dist-esm/react-components/src/components/ImageGallery.js.map +1 -1
  19. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.d.ts +2 -1
  20. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js +2 -1
  21. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map +1 -1
  22. package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.d.ts +1 -0
  23. package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js +4 -1
  24. package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js.map +1 -1
  25. package/dist/dist-esm/react-components/src/components/VideoGallery.js +21 -2
  26. package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
  27. package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.d.ts +9 -7
  28. package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.js +31 -37
  29. package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.js.map +1 -1
  30. package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.d.ts +0 -5
  31. package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.js +4 -7
  32. package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.js.map +1 -1
  33. package/dist/dist-esm/react-components/src/theming/themes.d.ts +22 -3
  34. package/dist/dist-esm/react-components/src/theming/themes.js +16 -0
  35. package/dist/dist-esm/react-components/src/theming/themes.js.map +1 -1
  36. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js +23 -5
  37. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
  38. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.d.ts +5 -0
  39. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.js.map +1 -1
  40. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.d.ts +2 -0
  41. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +17 -6
  42. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
  43. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.d.ts +88 -0
  44. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js +86 -0
  45. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js.map +1 -0
  46. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js +10 -2
  47. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js.map +1 -1
  48. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.js +10 -2
  49. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.js.map +1 -1
  50. package/dist/dist-esm/react-composites/src/composites/CallComposite/index.d.ts +1 -0
  51. package/dist/dist-esm/react-composites/src/composites/CallComposite/index.js.map +1 -1
  52. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.d.ts +2 -0
  53. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js +3 -1
  54. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js.map +1 -1
  55. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.d.ts +2 -0
  56. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
  57. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.d.ts +2 -0
  58. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.js.map +1 -1
  59. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.d.ts +2 -0
  60. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js.map +1 -1
  61. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.d.ts +5 -0
  62. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js +9 -1
  63. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js.map +1 -1
  64. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/capabilitiesChangedInfoAndRoleSelector.d.ts +12 -0
  65. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/capabilitiesChangedInfoAndRoleSelector.js +14 -0
  66. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/capabilitiesChangedInfoAndRoleSelector.js.map +1 -0
  67. package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CapabilityChangedNotificationTracking.d.ts +9 -0
  68. package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CapabilityChangedNotificationTracking.js +4 -0
  69. package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CapabilityChangedNotificationTracking.js.map +1 -0
  70. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.d.ts +33 -0
  71. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.js +99 -0
  72. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.js.map +1 -0
  73. package/dist/dist-esm/react-composites/src/composites/common/icons.d.ts +13 -0
  74. package/dist/dist-esm/react-composites/src/composites/common/icons.js +6 -0
  75. package/dist/dist-esm/react-composites/src/composites/common/icons.js.map +1 -1
  76. package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json +15 -1
  77. package/package.json +8 -8
@@ -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 '.';\n/* @conditional-compile-remove(pinned-participants) */\nimport { Announcer } from './Announcer';\n/* @conditional-compile-remove(pinned-participants) */\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';\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 { _formatString } 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';\n/* @conditional-compile-remove(pinned-participants) */\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from './VerticalGallery';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\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/* @conditional-compile-remove(pinned-participants) */\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 for local video label. Default is \"You\" */\n localVideoLabel: string;\n /** String for local video camera switcher */\n localVideoCameraSwitcherLabel: string;\n /** String for announcing the local video tile can be moved by keyboard controls */\n localVideoMovementLabel: string;\n /** String for announcing the selected camera */\n localVideoSelectedDescription: string;\n /** placeholder text for participants who does not have a display name*/\n displayNamePlaceholder: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n fitRemoteParticipantToFrame: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n fillRemoteParticipantFrame: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n pinParticipantForMe: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n unpinParticipantForMe: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Aria label for pin participant menu item of remote participant's video tile */\n pinParticipantMenuItemAriaLabel: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Aria label for unpin participant menu item of remote participant's video tile */\n unpinParticipantMenuItemAriaLabel: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Aria label to announce when remote participant's video tile is pinned */\n pinnedParticipantAnnouncementAriaLabel: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Aria label to announce when remote participant's video tile is unpinned */\n unpinnedParticipantAnnouncementAriaLabel: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout =\n | 'default'\n | 'floatingLocalVideo'\n | /* @conditional-compile-remove(gallery-layouts) */ 'speaker'\n | /* @conditional-compile-remove(gallery-layouts) */ '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 /* @conditional-compile-remove(vertical-gallery) */\n /** Styles for the vertical gallery */\n verticalGallery?: VerticalGalleryStyles;\n}\n\n/* @conditional-compile-remove(vertical-gallery) */\n/**\n * Different modes and positions of the overflow gallery in the VideoGallery\n *\n * @beta\n */\nexport type OverflowGalleryPosition =\n | 'HorizontalBottom'\n | 'VerticalRight'\n | /* @conditional-compile-remove(gallery-layouts) */ 'HorizontalTop';\n\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\n/**\n * different modes of the local video tile\n *\n * @beta\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 render a particpant avatar */\n onRenderAvatar?: OnRenderAvatarCallback;\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n */\n showMuteIndicator?: boolean;\n /** Optional strings to override in component */\n strings?: Partial<VideoGalleryStrings>;\n /**\n * Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n */\n maxRemoteVideoStreams?: number;\n /**\n * Camera control information for button to switch cameras.\n */\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * List of pinned participant userIds.\n */\n pinnedParticipants?: string[];\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * This callback will be called when a participant video tile is pinned.\n */\n onPinParticipant?: (userId: string) => void;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * This callback will be called when a participant video tile is un-pinned.\n */\n onUnpinParticipant?: (userId: string) => void;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Options for showing the remote video tile menu.\n *\n * @defaultValue \\{ kind: 'contextual' \\}\n */\n remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n /* @conditional-compile-remove(vertical-gallery) */\n /**\n * Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'HorizontalBottom'\n */\n overflowGalleryPosition?: OverflowGalleryPosition;\n /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\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\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface VideoTileContextualMenuProps {\n /**\n * The menu property kind\n */\n kind: 'contextual';\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @beta\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 onDisposeRemoteVideoStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n /* @conditional-compile-remove(pinned-participants) */\n onPinParticipant: onPinParticipantHandler,\n /* @conditional-compile-remove(pinned-participants) */\n onUnpinParticipant: onUnpinParticipantHandler,\n /* @conditional-compile-remove(pinned-participants) */\n remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n /* @conditional-compile-remove(vertical-gallery) */\n overflowGalleryPosition = 'HorizontalBottom',\n /* @conditional-compile-remove(rooms) */\n localVideoTileSize = 'followDeviceOrientation'\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 /* @conditional-compile-remove(pinned-participants) */\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'\n ? (remoteVideoTileMenuOptions as VideoTileDrawerMenuProps).hostId\n : undefined;\n /* @conditional-compile-remove(pinned-participants) */\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const localTileNotInGrid = !!(\n (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&\n remoteParticipants.length > 0\n );\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 /* @conditional-compile-remove(pinned-participants) */\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n /* @conditional-compile-remove(pinned-participants) */\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 /* @conditional-compile-remove(pinned-participants) */\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n /**\n * Utility function for memoized rendering of LocalParticipant.\n */\n const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n /* @conditional-compile-remove(click-to-call) */\n if (localVideoTileSize === 'hidden') {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\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 return (\n <Stack\n styles={localVideoTileContainerStyles}\n key=\"local-video-tile-key\"\n tabIndex={0}\n aria-label={strings.localVideoMovementLabel}\n role={'dialog'}\n >\n <_LocalVideoTile\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={isNarrow ? '' : strings.localVideoLabel}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={\n !(\n (localTileNotInGrid && isNarrow) ||\n /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===\n '9:16'\n )\n }\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n /* @conditional-compile-remove(raise-hand) */\n raisedHand={localParticipant.raisedHand}\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 strings.localVideoCameraSwitcherLabel,\n strings.localVideoLabel,\n strings.localVideoMovementLabel,\n strings.localVideoSelectedDescription,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n /*@conditional-compile-remove(click-to-call) */\n localVideoTileSize\n ]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n /* @conditional-compile-remove(pinned-participants) */\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 /* @conditional-compile-remove(pinned-participants) */\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * sets the announcement string for VideoGallery actions so that the screenreader will trigger\n */\n const toggleAnnouncerString = useCallback(\n (announcement) => {\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\n /* @conditional-compile-remove(pinned-participants) */\n const isPinned = pinnedParticipants?.includes(participant.userId);\n\n const createViewOptions = (): VideoStreamOptions | undefined => {\n /* @conditional-compile-remove(pinned-participants) */\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 return remoteVideoViewOptions;\n };\n\n return (\n <_RemoteVideoTile\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={isVideoParticipant && createViewOptions() ? createViewOptions() : undefined}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n /* @conditional-compile-remove(PSTN-calls) */\n participantState={participant.state}\n /* @conditional-compile-remove(pinned-participants) */\n menuKind={\n participant.userId === localParticipant.userId\n ? undefined\n : remoteVideoTileMenuOptions\n ? remoteVideoTileMenuOptions.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n /* @conditional-compile-remove(pinned-participants) */\n drawerMenuHostId={drawerMenuHostId}\n /* @conditional-compile-remove(pinned-participants) */\n onPinParticipant={onPinParticipant}\n /* @conditional-compile-remove(pinned-participants) */\n onUnpinParticipant={onUnpinParticipant}\n /* @conditional-compile-remove(pinned-participants) */\n isPinned={isPinned}\n /* @conditional-compile-remove(pinned-participants) */\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n /* @conditional-compile-remove(pinned-participants) */\n toggleAnnouncerString={toggleAnnouncerString}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteVideoStreamView,\n remoteVideoViewOptions,\n localParticipant,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,\n /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant,\n /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo(\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 /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\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 /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n /* @conditional-compile-remove(gallery-layouts) */\n if (screenShareParticipant && layout === 'focusedContent') {\n return <FocusedContentLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n /* @conditional-compile-remove(gallery-layouts) */\n if (layout === 'speaker') {\n return <SpeakerVideoLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);\n\n return (\n <div\n /* @conditional-compile-remove(pinned-participants) */\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 {\n /* @conditional-compile-remove(pinned-participants) */\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n }\n </div>\n );\n};\n\"../../../acs-ui-common/src\""]}
1
+ {"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5D,sDAAsD;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,sDAAsD;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAYtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACxG,OAAO,EAAE,2BAA2B,EAAE,MAAM,iDAAiD,CAAC;AAC9F,sDAAsD;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG9C,kDAAkD;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,kDAAkD;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAEzE;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,CAAC;AAElD;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,qBAAqB,EAAE,MAAM;IAC7B,uBAAuB,EAAE,MAAM;IAC/B,kBAAkB,EAAE,MAAM;IAC1B,iBAAiB,EAAE,MAAM;IACzB,aAAa,EAAE,MAAM;CACtB,CAAC;AACF;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAC7C;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG;IACpD,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,sDAAsD;AACtD;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AAyO/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,EACJ,gBAAgB,EAChB,kBAAkB,GAAG,EAAE,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,oCAAoC,EACpC,8BAA8B,EAC9B,MAAM,EACN,MAAM,EACN,cAAc,EACd,iBAAiB,EACjB,qBAAqB,GAAG,gCAAgC,EACxD,gCAAgC,EAChC,gCAAgC;IAChC,sDAAsD;IACtD,gBAAgB,EAAE,uBAAuB;IACzC,sDAAsD;IACtD,kBAAkB,EAAE,yBAAyB;IAC7C,sDAAsD;IACtD,0BAA0B,GAAG,sCAAsC;IACnE,mDAAmD;IACnD,uBAAuB,GAAG,kBAAkB;IAC5C,wCAAwC;IACxC,kBAAkB,GAAG,yBAAyB,EAC/C,GAAG,KAAK,CAAC;IAEV,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iCAAM,aAAa,GAAK,KAAK,CAAC,OAAO,EAAG,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAExG,sDAAsD;IACtD,MAAM,wBAAwB,GAC5B,0BAA0B,IAAI,0BAA0B,CAAC,IAAI,KAAK,QAAQ;QACxE,CAAC,CAAE,0BAAuD,CAAC,MAAM;QACjE,CAAC,CAAC,SAAS,CAAC;IAChB,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;IAE3E,MAAM,kBAAkB,GAAG,CAAC,CAAC,CAC3B,CAAC,MAAM,KAAK,oBAAoB,IAAI,kDAAkD,CAAC,MAAM,KAAK,SAAS,CAAC;QAC5G,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAC9B,CAAC;IAEF,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,sDAAsD;IACtD,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC3F,sDAAsD;IACtD,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC5E,EAAE,CACH,CAAC;IAEF,sDAAsD;IACtD,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,YAAoB,EAAE,WAA4B,EAAE,EAAE;QACrD,2BAA2B,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,iCACpC,OAAO,KACV,CAAC,YAAY,CAAC,EAAE;gBACd,WAAW;gBACX,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;aAC/C,IACD,CAAC,CAAC;IACN,CAAC,EACD,CAAC,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU,CAAC,CACrC,CAAC;IACF,sDAAsD;IACtD,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,KAAK,CAAC,kBAAkB,0CAAE,OAAO,CAAC,CAAC,cAAc,EAAE,EAAE;;YACnD,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,cAAc,CAAC,CAAA,EAAE;gBACvE,qGAAqG;gBACrG,OAAO,CAAC,IAAI,CAAC,qCAAqC,GAAG,cAAc,CAAC,CAAC;aACtE;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzD,sDAAsD;IACtD,6GAA6G;IAC7G,MAAM,kBAAkB,GAAG,MAAA,KAAK,CAAC,kBAAkB,mCAAI,uBAAuB,CAAC;IAE/E;;OAEG;IACH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAqE,EAAE;;QACpG,gDAAgD;QAChD,IAAI,kBAAkB,KAAK,QAAQ,EAAE;YACnC,OAAO,SAAS,CAAC;SAClB;QACD,IAAI,sBAAsB,EAAE;YAC1B,OAAO,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;SACjD;QAED,MAAM,oBAAoB,GAAG,eAAe,CAC1C,kBAAkB,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EACrD;YACE,IAAI,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;SACrD,EACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CACnB,CAAC;QAEF,MAAM,YAAY,GAAG,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC;QAEvF,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,EAAE,6BAA6B,EACrC,GAAG,EAAC,sBAAsB,EAC1B,QAAQ,EAAE,CAAC,gBACC,OAAO,CAAC,uBAAuB,EAC3C,IAAI,EAAE,QAAQ;YAEd,oBAAC,eAAe,IACd,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAC/B,uBAAuB,EAAE,uBAAuB,EAChD,wBAAwB,EAAE,wBAAwB,EAClD,WAAW,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,0CAAE,WAAW,EACvD,OAAO,EAAE,gBAAgB,CAAC,OAAO,EACjC,aAAa,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,0CAAE,aAAa,EAC3D,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,EACpD,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE,qBAAqB,EAC5C,cAAc,EAAE,cAAc,EAC9B,SAAS,EACP,CAAC,CACC,CAAC,kBAAkB,IAAI,QAAQ,CAAC;oBAChC,+CAA+C,CAAC,wCAAwC,CAAC,kBAAkB;wBACzG,MAAM,CACT,EAEH,iBAAiB,EAAE,iBAAiB,EACpC,gCAAgC,EAAE,gCAAgC,EAClE,gCAAgC,EAAE,gCAAgC,EAClE,6BAA6B,EAAE,OAAO,CAAC,6BAA6B,EACpE,6BAA6B,EAAE,OAAO,CAAC,6BAA6B,EACpE,MAAM,EAAE,oBAAoB;gBAC5B,6CAA6C;gBAC7C,UAAU,EAAE,gBAAgB,CAAC,UAAU,GACvC,CACI,CACT,CAAC;IACJ,CAAC,EAAE;QACD,QAAQ;QACR,gBAAgB;QAChB,gCAAgC;QAChC,qBAAqB;QACrB,uBAAuB;QACvB,wBAAwB;QACxB,cAAc;QACd,sBAAsB;QACtB,kBAAkB;QAClB,gCAAgC;QAChC,iBAAiB;QACjB,OAAO,CAAC,6BAA6B;QACrC,OAAO,CAAC,eAAe;QACvB,OAAO,CAAC,uBAAuB;QAC/B,OAAO,CAAC,6BAA6B;QACrC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU;QAClB,KAAK,CAAC,OAAO,CAAC,cAAc;QAC5B,+CAA+C;QAC/C,kBAAkB;KACnB,CAAC,CAAC;IAEH,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,MAAc,EAAE,EAAE;QACjB,IAAI,kBAAkB,CAAC,MAAM,IAAI,6BAA6B,EAAE;YAC9D,OAAO;SACR;QACD,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YAC7C,0BAA0B,CAAC,uBAAuB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;SACpE;QACD,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,MAAM,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,kBAAkB,CAAC,MAAM,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,uBAAuB,CAAC,CAC1G,CAAC;IACF,sDAAsD;IACtD,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,MAAc,EAAE,EAAE;QACjB,0BAA0B,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC;QAChF,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAG,MAAM,CAAC,CAAC;IACtC,CAAC,EACD,CAAC,uBAAuB,EAAE,0BAA0B,EAAE,yBAAyB,CAAC,CACjF,CAAC;IAEF,sDAAsD;IACtD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,EAAE,CAAC,CAAC;IAC/E,sDAAsD;IACtD;;OAEG;IACH,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,YAAY,EAAE,EAAE;QACf,qBAAqB,CAAC,YAAY,CAAC,CAAC;QACpC;;WAEG;QACH,UAAU,CAAC,GAAG,EAAE;YACd,qBAAqB,CAAC,EAAE,CAAC,CAAC;QAC5B,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,EACD,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,WAA0C,EAAE,kBAA4B,EAAE,EAAE;QAC3E,MAAM,iBAAiB,GAAG,WAAW,CAAC,WAAW,CAAC;QAClD,sDAAsD;QACtD,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,CAAC,CAAC,wBAAwB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAEzG,sDAAsD;QACtD,MAAM,QAAQ,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAElE,MAAM,iBAAiB,GAAG,GAAmC,EAAE;;YAC7D,sDAAsD;YACtD,IAAI,mBAAmB,EAAE;gBACvB,OAAO,mBAAmB,CAAC;aAC5B;YACD,sDAAsD;YACtD,OAAO,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,UAAU;gBAClC,CAAA,MAAA,iBAAiB,CAAC,UAAU,0CAAE,MAAM,KAAG,MAAA,iBAAiB,CAAC,UAAU,0CAAE,KAAK,CAAA;gBAC1E,CAAC,CAAE;oBACC,WAAW,EAAE,KAAK;oBAClB,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;iBACxB;gBAC1B,CAAC,CAAC,sBAAsB,CAAC;YAC3B,OAAO,sBAAsB,CAAC;QAChC,CAAC,CAAC;QAEF,OAAO,CACL,oBAAC,gBAAgB,IACf,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,MAAM,EAAE,WAAW,CAAC,MAAM,EAC1B,iBAAiB,EAAE,WAAW,EAC9B,wBAAwB,EAAE,kBAAkB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,SAAS,EACnF,yBAAyB,EAAE,kBAAkB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,SAAS,EAC1F,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,WAAW,CAAC,CAAC,CAAC,KAAK,EACxE,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,WAAW,CAAC,CAAC,CAAC,KAAK,EACxE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,aAAa,CAAC,CAAC,CAAC,SAAS,EAChF,sBAAsB,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,SAAS,EACnG,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO;YAChB,6CAA6C;YAC7C,gBAAgB,EAAE,WAAW,CAAC,KAAK;YACnC,sDAAsD;YACtD,QAAQ,EACN,WAAW,CAAC,MAAM,KAAK,gBAAgB,CAAC,MAAM;gBAC5C,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,0BAA0B;oBAC5B,CAAC,CAAC,0BAA0B,CAAC,IAAI,KAAK,QAAQ;wBAC5C,CAAC,CAAC,QAAQ;wBACV,CAAC,CAAC,YAAY;oBAChB,CAAC,CAAC,SAAS;YAEf,sDAAsD;YACtD,gBAAgB,EAAE,gBAAgB;YAClC,sDAAsD;YACtD,gBAAgB,EAAE,gBAAgB;YAClC,sDAAsD;YACtD,kBAAkB,EAAE,kBAAkB;YACtC,sDAAsD;YACtD,mBAAmB,EAAE,mBAAmB;YACxC,sDAAsD;YACtD,QAAQ,EAAE,QAAQ;YAClB,sDAAsD;YACtD,kBAAkB,EAAE,kBAAkB,CAAC,MAAM,IAAI,6BAA6B;YAC9E,sDAAsD;YACtD,qBAAqB,EAAE,qBAAqB,GAC5C,CACH,CAAC;IACJ,CAAC,EACD;QACE,wBAAwB;QACxB,8BAA8B;QAC9B,sBAAsB;QACtB,gBAAgB;QAChB,cAAc;QACd,iBAAiB;QACjB,OAAO;QACP,sDAAsD,CAAC,wBAAwB;QAC/E,sDAAsD,CAAC,0BAA0B;QACjF,sDAAsD,CAAC,kBAAkB;QACzE,sDAAsD,CAAC,gBAAgB;QACvE,sDAAsD,CAAC,kBAAkB;QACzE,sDAAsD,CAAC,qBAAqB;QAC5E,sDAAsD,CAAC,gBAAgB;QACvE,sDAAsD,CAAC,mBAAmB;KAC3E,CACF,CAAC;IAEF,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,WAAC,OAAA,MAAA,WAAW,CAAC,iBAAiB,0CAAE,WAAW,CAAA,EAAA,CAAC,CAAC;IAEpH,MAAM,+BAA+B,GAAG,oBAAC,gBAAgB,IAAC,gBAAgB,EAAE,gBAAgB,GAAI,CAAC;IAEjG,MAAM,0BAA0B,GAAG,sBAAsB,IAAI,CAC3D,oBAAC,iBAAiB,oBACZ,sBAAsB,IAC1B,aAAa,EAAE,MAAA,sBAAsB,CAAC,iBAAiB,0CAAE,aAAa,EACtE,wBAAwB,EAAE,wBAAwB,EAClD,yBAAyB,EAAE,oCAAoC,EAC/D,WAAW,EAAE,MAAA,sBAAsB,CAAC,iBAAiB,0CAAE,WAAW,IAClE,CACH,CAAC;IAEF,MAAM,oBAAoB,GAAG,0BAA0B;QACrD,CAAC,CAAC,0BAA0B;QAC5B,CAAC,CAAC,gBAAgB,CAAC,iBAAiB;YACpC,CAAC,CAAC,+BAA+B;YACjC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,kBAAkB;QAClB,gBAAgB;QAChB,oBAAoB;QACpB,gCAAgC;QAChC,qBAAqB;QACrB,gBAAgB;QAChB,MAAM;QACN,yBAAyB,EAAE,uBAAuB,aAAvB,uBAAuB,cAAvB,uBAAuB,GAAI,wBAAwB;QAC9E,mBAAmB,EAAE,cAAc;QACnC,WAAW,EAAE,cAAc;QAC3B,YAAY,EAAE,eAAe;QAC7B,sDAAsD,CAAC,wBAAwB,EAAE,kBAAkB;QACnG,mDAAmD,CAAC,uBAAuB;QAC3E,gDAAgD,CAAC,kBAAkB;KACpE,CAAC,EACF;QACE,kBAAkB;QAClB,gBAAgB;QAChB,oBAAoB;QACpB,gCAAgC;QAChC,qBAAqB;QACrB,gBAAgB;QAChB,MAAM;QACN,cAAc;QACd,cAAc;QACd,eAAe;QACf,uBAAuB;QACvB,wBAAwB;QACxB,sDAAsD,CAAC,kBAAkB;QACzE,mDAAmD,CAAC,uBAAuB;QAC3E,gDAAgD,CAAC,kBAAkB;KACpE,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,kDAAkD;QAClD,IAAI,sBAAsB,IAAI,MAAM,KAAK,gBAAgB,EAAE;YACzD,OAAO,oBAAC,oBAAoB,oBAAK,WAAW,EAAI,CAAC;SAClD;QACD,IAAI,MAAM,KAAK,oBAAoB,EAAE;YACnC,OAAO,oBAAC,wBAAwB,oBAAK,WAAW,EAAI,CAAC;SACtD;QACD,kDAAkD;QAClD,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,OAAO,oBAAC,kBAAkB,oBAAK,WAAW,EAAI,CAAC;SAChD;QACD,OAAO,oBAAC,aAAa,oBAAK,WAAW,EAAI,CAAC;IAC5C,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,kDAAkD,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAErG,OAAO,CACL;QACE,sDAAsD;QACtD,4GAA4G;QAC5G,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,gBAC/C,GAAG,CAAC,YAAY,EAC5B,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,WAAW,CAAC,yBAAyB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,YAAY,CAAC;QAE5E,kBAAkB;QAEjB,sDAAsD;QACtD,oBAAC,SAAS,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,QAAQ,EAAC,QAAQ,GAAG,CAErE,CACP,CAAC;AACJ,CAAC,CAAC","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 '.';\n/* @conditional-compile-remove(pinned-participants) */\nimport { Announcer } from './Announcer';\n/* @conditional-compile-remove(pinned-participants) */\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(pinned-participants) */\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 { _formatString } 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';\n/* @conditional-compile-remove(pinned-participants) */\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from './VerticalGallery';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { FocusedContentLayout } from './VideoGallery/FocusContentLayout';\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/* @conditional-compile-remove(pinned-participants) */\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 for local video label. Default is \"You\" */\n localVideoLabel: string;\n /** String for local video camera switcher */\n localVideoCameraSwitcherLabel: string;\n /** String for announcing the local video tile can be moved by keyboard controls */\n localVideoMovementLabel: string;\n /** String for announcing the selected camera */\n localVideoSelectedDescription: string;\n /** placeholder text for participants who does not have a display name*/\n displayNamePlaceholder: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n fitRemoteParticipantToFrame: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n fillRemoteParticipantFrame: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n pinParticipantForMe: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n unpinParticipantForMe: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Aria label for pin participant menu item of remote participant's video tile */\n pinParticipantMenuItemAriaLabel: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Aria label for unpin participant menu item of remote participant's video tile */\n unpinParticipantMenuItemAriaLabel: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Aria label to announce when remote participant's video tile is pinned */\n pinnedParticipantAnnouncementAriaLabel: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Aria label to announce when remote participant's video tile is unpinned */\n unpinnedParticipantAnnouncementAriaLabel: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout =\n | 'default'\n | 'floatingLocalVideo'\n | /* @conditional-compile-remove(gallery-layouts) */ 'speaker'\n | /* @conditional-compile-remove(gallery-layouts) */ '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 /* @conditional-compile-remove(vertical-gallery) */\n /** Styles for the vertical gallery */\n verticalGallery?: VerticalGalleryStyles;\n}\n\n/* @conditional-compile-remove(vertical-gallery) */\n/**\n * Different modes and positions of the overflow gallery in the VideoGallery\n *\n * @beta\n */\nexport type OverflowGalleryPosition =\n | 'HorizontalBottom'\n | 'VerticalRight'\n | /* @conditional-compile-remove(gallery-layouts) */ 'HorizontalTop';\n\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\n/**\n * different modes of the local video tile\n *\n * @beta\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 render a particpant avatar */\n onRenderAvatar?: OnRenderAvatarCallback;\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n */\n showMuteIndicator?: boolean;\n /** Optional strings to override in component */\n strings?: Partial<VideoGalleryStrings>;\n /**\n * Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n */\n maxRemoteVideoStreams?: number;\n /**\n * Camera control information for button to switch cameras.\n */\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * List of pinned participant userIds.\n */\n pinnedParticipants?: string[];\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * This callback will be called when a participant video tile is pinned.\n */\n onPinParticipant?: (userId: string) => void;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * This callback will be called when a participant video tile is un-pinned.\n */\n onUnpinParticipant?: (userId: string) => void;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Options for showing the remote video tile menu.\n *\n * @defaultValue \\{ kind: 'contextual' \\}\n */\n remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n /* @conditional-compile-remove(vertical-gallery) */\n /**\n * Determines the layout of the overflowGallery inside the VideoGallery.\n * @defaultValue 'HorizontalBottom'\n */\n overflowGalleryPosition?: OverflowGalleryPosition;\n /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\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\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface VideoTileContextualMenuProps {\n /**\n * The menu property kind\n */\n kind: 'contextual';\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @beta\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 onDisposeRemoteVideoStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n /* @conditional-compile-remove(pinned-participants) */\n onPinParticipant: onPinParticipantHandler,\n /* @conditional-compile-remove(pinned-participants) */\n onUnpinParticipant: onUnpinParticipantHandler,\n /* @conditional-compile-remove(pinned-participants) */\n remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n /* @conditional-compile-remove(vertical-gallery) */\n overflowGalleryPosition = 'HorizontalBottom',\n /* @conditional-compile-remove(rooms) */\n localVideoTileSize = 'followDeviceOrientation'\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 /* @conditional-compile-remove(pinned-participants) */\n const drawerMenuHostIdFromProp =\n remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'\n ? (remoteVideoTileMenuOptions as VideoTileDrawerMenuProps).hostId\n : undefined;\n /* @conditional-compile-remove(pinned-participants) */\n const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n const localTileNotInGrid = !!(\n (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&\n remoteParticipants.length > 0\n );\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 /* @conditional-compile-remove(pinned-participants) */\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n /* @conditional-compile-remove(pinned-participants) */\n const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n {}\n );\n\n /* @conditional-compile-remove(pinned-participants) */\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 /* @conditional-compile-remove(pinned-participants) */\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 /* @conditional-compile-remove(pinned-participants) */\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n /**\n * Utility function for memoized rendering of LocalParticipant.\n */\n const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n /* @conditional-compile-remove(click-to-call) */\n if (localVideoTileSize === 'hidden') {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\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 return (\n <Stack\n styles={localVideoTileContainerStyles}\n key=\"local-video-tile-key\"\n tabIndex={0}\n aria-label={strings.localVideoMovementLabel}\n role={'dialog'}\n >\n <_LocalVideoTile\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={isNarrow ? '' : strings.localVideoLabel}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={\n !(\n (localTileNotInGrid && isNarrow) ||\n /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===\n '9:16'\n )\n }\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n /* @conditional-compile-remove(raise-hand) */\n raisedHand={localParticipant.raisedHand}\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 strings.localVideoCameraSwitcherLabel,\n strings.localVideoLabel,\n strings.localVideoMovementLabel,\n strings.localVideoSelectedDescription,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n /*@conditional-compile-remove(click-to-call) */\n localVideoTileSize\n ]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {\n return;\n }\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipants.length, pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n /* @conditional-compile-remove(pinned-participants) */\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 /* @conditional-compile-remove(pinned-participants) */\n const [announcementString, setAnnouncementString] = React.useState<string>('');\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * sets the announcement string for VideoGallery actions so that the screenreader will trigger\n */\n const toggleAnnouncerString = useCallback(\n (announcement) => {\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 /* @conditional-compile-remove(pinned-participants) */\n const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n\n /* @conditional-compile-remove(pinned-participants) */\n const isPinned = pinnedParticipants?.includes(participant.userId);\n\n const createViewOptions = (): VideoStreamOptions | undefined => {\n /* @conditional-compile-remove(pinned-participants) */\n if (selectedScalingMode) {\n return selectedScalingMode;\n }\n /* @conditional-compile-remove(pinned-participants) */\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 return remoteVideoViewOptions;\n };\n\n return (\n <_RemoteVideoTile\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={isVideoParticipant && createViewOptions() ? createViewOptions() : undefined}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n /* @conditional-compile-remove(PSTN-calls) */\n participantState={participant.state}\n /* @conditional-compile-remove(pinned-participants) */\n menuKind={\n participant.userId === localParticipant.userId\n ? undefined\n : remoteVideoTileMenuOptions\n ? remoteVideoTileMenuOptions.kind === 'drawer'\n ? 'drawer'\n : 'contextual'\n : undefined\n }\n /* @conditional-compile-remove(pinned-participants) */\n drawerMenuHostId={drawerMenuHostId}\n /* @conditional-compile-remove(pinned-participants) */\n onPinParticipant={onPinParticipant}\n /* @conditional-compile-remove(pinned-participants) */\n onUnpinParticipant={onUnpinParticipant}\n /* @conditional-compile-remove(pinned-participants) */\n onUpdateScalingMode={onUpdateScalingMode}\n /* @conditional-compile-remove(pinned-participants) */\n isPinned={isPinned}\n /* @conditional-compile-remove(pinned-participants) */\n disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n /* @conditional-compile-remove(pinned-participants) */\n toggleAnnouncerString={toggleAnnouncerString}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteVideoStreamView,\n remoteVideoViewOptions,\n localParticipant,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n /* @conditional-compile-remove(pinned-participants) */ selectedScalingModeState,\n /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant,\n /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString,\n /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,\n /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteScreenShareStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo(\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 /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\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 /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n /* @conditional-compile-remove(click-to-call) */ localVideoTileSize\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n /* @conditional-compile-remove(gallery-layouts) */\n if (screenShareParticipant && layout === 'focusedContent') {\n return <FocusedContentLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n /* @conditional-compile-remove(gallery-layouts) */\n if (layout === 'speaker') {\n return <SpeakerVideoLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);\n\n return (\n <div\n /* @conditional-compile-remove(pinned-participants) */\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 {\n /* @conditional-compile-remove(pinned-participants) */\n <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n }\n </div>\n );\n};\n\"../../../acs-ui-common/src\""]}
@@ -1,4 +1,6 @@
1
- import { IIconProps, IOverlayStyles, IStyle, Theme } from '@fluentui/react';
1
+ import { IIconProps, IStyle } from '@fluentui/react';
2
+ import { IOverlayStyles } from '@fluentui/react';
3
+ import { ChatTheme } from '../../theming/themes';
2
4
  /**
3
5
  * @private
4
6
  */
@@ -10,7 +12,7 @@ export declare const downloadIcon: IIconProps;
10
12
  /**
11
13
  * @private
12
14
  */
13
- export declare const overlayStyles: (theme: Theme, isDarkThemed: boolean) => IOverlayStyles;
15
+ export declare const overlayStyles: (theme: ChatTheme) => IOverlayStyles;
14
16
  /**
15
17
  * @private
16
18
  */
@@ -30,7 +32,7 @@ export declare const titleBarContainerStyle: IStyle;
30
32
  /**
31
33
  * @private
32
34
  */
33
- export declare const titleStyle: (theme: Theme, isDarkThemed: boolean) => IStyle;
35
+ export declare const titleStyle: (theme: ChatTheme) => IStyle;
34
36
  /**
35
37
  * @private
36
38
  */
@@ -54,17 +56,17 @@ export declare const normalImageStyle: IStyle;
54
56
  /**
55
57
  * @private
56
58
  */
57
- export declare const brokenImageStyle: (theme: Theme, isDarkThemed: boolean) => IStyle;
59
+ export declare const brokenImageStyle: (theme: ChatTheme) => IStyle;
58
60
  /**
59
61
  * @private
60
62
  */
61
- export declare const closeButtonStyles: (theme: Theme, isDarkThemed: boolean) => IStyle;
63
+ export declare const closeButtonStyles: (theme: ChatTheme) => IStyle;
62
64
  /**
63
65
  * @private
64
66
  */
65
- export declare const downloadButtonStyle: (theme: Theme, isDarkThemed: boolean) => IStyle;
67
+ export declare const downloadButtonStyle: (theme: ChatTheme) => IStyle;
66
68
  /**
67
69
  * @private
68
70
  */
69
- export declare const smallDownloadButtonContainerStyle: (theme: Theme, isDarkThemed: boolean) => IStyle;
71
+ export declare const smallDownloadButtonContainerStyle: (theme: ChatTheme) => IStyle;
70
72
  //# sourceMappingURL=ImageGallery.style.d.ts.map
@@ -10,15 +10,14 @@ export const cancelIcon = { iconName: 'Cancel' };
10
10
  export const downloadIcon = {
11
11
  iconName: 'Download'
12
12
  };
13
+ /* @conditional-compile-remove(image-gallery) */
13
14
  /**
14
15
  * @private
15
16
  */
16
- export const overlayStyles = (theme, isDarkThemed) => {
17
+ export const overlayStyles = (theme) => {
17
18
  return {
18
19
  root: {
19
- // The overlay background color should always be black in both light and dark theme.
20
- // In dark theme, theme.palette.white is actually black.
21
- background: isDarkThemed ? theme.palette.white : theme.palette.black,
20
+ background: theme.chatPalette.modalOverlayBlack,
22
21
  opacity: '0.85'
23
22
  }
24
23
  };
@@ -68,14 +67,15 @@ export const titleBarContainerStyle = {
68
67
  alignContent: 'center',
69
68
  alignItems: 'center'
70
69
  };
70
+ /* @conditional-compile-remove(image-gallery) */
71
71
  /**
72
72
  * @private
73
73
  */
74
- export const titleStyle = (theme, isDarkThemed) => {
74
+ export const titleStyle = (theme) => {
75
75
  return {
76
76
  paddingLeft: '0.5rem',
77
77
  marginLeft: '0.5rem',
78
- color: isDarkThemed ? undefined : theme.palette.white,
78
+ color: theme.chatPalette.modalTitleWhite,
79
79
  fontFamily: 'inherit',
80
80
  fontSize: '0.875rem',
81
81
  fontStyle: 'normal',
@@ -133,38 +133,37 @@ export const normalImageStyle = {
133
133
  maxHeight: '100%',
134
134
  maxWidth: '100%'
135
135
  };
136
+ /* @conditional-compile-remove(image-gallery) */
136
137
  /**
137
138
  * @private
138
139
  */
139
- export const brokenImageStyle = (theme, isDarkThemed) => {
140
+ export const brokenImageStyle = (theme) => {
140
141
  return {
141
- // The color should be white in dark theme.
142
- // In dark theme, theme.palette.black is actually white.
143
- color: isDarkThemed ? theme.palette.black : theme.palette.white
142
+ color: theme.chatPalette.modalTitleWhite
144
143
  };
145
144
  };
145
+ /* @conditional-compile-remove(image-gallery) */
146
146
  /**
147
147
  * @private
148
148
  */
149
- export const closeButtonStyles = (theme, isDarkThemed) => {
149
+ export const closeButtonStyles = (theme) => {
150
150
  return {
151
- // The color should be white in dark theme.
152
- // In dark theme, theme.palette.black is actually white.
153
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
151
+ color: theme.chatPalette.modalTitleWhite,
154
152
  ':hover': {
155
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
156
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
153
+ color: theme.chatPalette.modalTitleWhite,
154
+ backgroundColor: theme.chatPalette.modalButtonBackgroundHover
157
155
  },
158
156
  ':active': {
159
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
160
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
157
+ color: theme.chatPalette.modalTitleWhite,
158
+ backgroundColor: theme.chatPalette.modalButtonBackgroundActive
161
159
  }
162
160
  };
163
161
  };
162
+ /* @conditional-compile-remove(image-gallery) */
164
163
  /**
165
164
  * @private
166
165
  */
167
- export const downloadButtonStyle = (theme, isDarkThemed) => {
166
+ export const downloadButtonStyle = (theme) => {
168
167
  return {
169
168
  margin: '0 0.5rem',
170
169
  height: '32px',
@@ -173,43 +172,38 @@ export const downloadButtonStyle = (theme, isDarkThemed) => {
173
172
  fontWeight: 600,
174
173
  padding: '0.38rem 0.75rem',
175
174
  borderRadius: '4px',
176
- backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,
177
- color: isDarkThemed ? undefined : theme.palette.white,
175
+ backgroundColor: theme.chatPalette.modalButtonBackground,
176
+ color: theme.chatPalette.modalTitleWhite,
178
177
  whiteSpace: 'nowrap',
179
178
  ':hover': {
180
- // The color should be white in dark theme.
181
- // In dark theme, theme.palette.black is actually white.
182
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
183
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
179
+ color: theme.chatPalette.modalTitleWhite,
180
+ backgroundColor: theme.chatPalette.modalButtonBackgroundHover
184
181
  },
185
182
  ':active': {
186
- // The color should be white in dark theme.
187
- // In dark theme, theme.palette.black is actually white.
188
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
189
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
183
+ color: theme.chatPalette.modalTitleWhite,
184
+ backgroundColor: theme.chatPalette.modalButtonBackgroundActive
190
185
  },
191
186
  '@media (max-width: 25rem)': {
192
187
  display: 'none'
193
188
  }
194
189
  };
195
190
  };
191
+ /* @conditional-compile-remove(image-gallery) */
196
192
  /**
197
193
  * @private
198
194
  */
199
- export const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
195
+ export const smallDownloadButtonContainerStyle = (theme) => {
200
196
  return {
201
197
  marginRight: '0.5rem',
202
- // The color should be white in dark theme.
203
- // In dark theme, theme.palette.black is actually white.
204
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
198
+ color: theme.chatPalette.modalTitleWhite,
205
199
  whiteSpace: 'nowrap',
206
200
  ':hover': {
207
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
208
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
201
+ color: theme.chatPalette.modalTitleWhite,
202
+ backgroundColor: theme.chatPalette.modalButtonBackgroundHover
209
203
  },
210
204
  ':active': {
211
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
212
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
205
+ color: theme.chatPalette.modalTitleWhite,
206
+ backgroundColor: theme.chatPalette.modalButtonBackgroundActive
213
207
  },
214
208
  '@media (min-width: 25rem)': {
215
209
  display: 'none'
@@ -1 +1 @@
1
- {"version":3,"file":"ImageGallery.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageGallery.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconProps, IOverlayStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n iconName: 'Download'\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (theme: Theme, isDarkThemed: boolean): IOverlayStyles => {\n return {\n root: {\n // The overlay background color should always be black in both light and dark theme.\n // In dark theme, theme.palette.white is actually black.\n background: isDarkThemed ? theme.palette.white : theme.palette.black,\n opacity: '0.85'\n }\n };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n boxShadow: 'none',\n background: 'transparent',\n display: 'flex',\n width: '100%',\n height: '100%',\n maxWidth: '100%',\n maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n overflowY: 'hidden',\n display: 'flex',\n maxWidth: '100%',\n maxHeight: '100%',\n flexDirection: 'column',\n flexWrap: 'nowrap'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n fontSize: 'inherit',\n margin: '0',\n width: '100%',\n height: '3.5rem',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0.25rem 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const titleStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n paddingLeft: '0.5rem',\n marginLeft: '0.5rem',\n color: isDarkThemed ? undefined : theme.palette.white,\n fontFamily: 'inherit',\n fontSize: '0.875rem',\n fontStyle: 'normal',\n fontWeight: '600',\n lineHeight: '1.25rem'\n };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n marginRight: '0.5em',\n fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const bodyContainer: IStyle = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n padding: '5.75rem',\n '@media (max-width: 25rem) or (max-height: 25rem)': {\n padding: '2rem'\n }\n};\n\n/**\n * @private\n */\nexport const bodyFocusZone: IStyle = {\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n objectFit: 'contain',\n maxHeight: '100%',\n maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white\n };\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n }\n };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n margin: '0 0.5rem',\n height: '32px',\n borderWidth: '1px',\n fontSize: '0.875rem', // 14px\n fontWeight: 600,\n padding: '0.38rem 0.75rem',\n borderRadius: '4px',\n backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,\n color: isDarkThemed ? undefined : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (max-width: 25rem)': {\n display: 'none'\n }\n };\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n marginRight: '0.5rem',\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (min-width: 25rem)': {\n display: 'none'\n }\n };\n};\n"]}
1
+ {"version":3,"file":"ImageGallery.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageGallery.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconProps, IStyle } from '@fluentui/react';\n/* @conditional-compile-remove(image-gallery) */\nimport { IOverlayStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-gallery) */\nimport { ChatTheme } from '../../theming/themes';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n iconName: 'Download'\n};\n\n/* @conditional-compile-remove(image-gallery) */\n/**\n * @private\n */\nexport const overlayStyles = (theme: ChatTheme): IOverlayStyles => {\n return {\n root: {\n background: theme.chatPalette.modalOverlayBlack,\n opacity: '0.85'\n }\n };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n boxShadow: 'none',\n background: 'transparent',\n display: 'flex',\n width: '100%',\n height: '100%',\n maxWidth: '100%',\n maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n overflowY: 'hidden',\n display: 'flex',\n maxWidth: '100%',\n maxHeight: '100%',\n flexDirection: 'column',\n flexWrap: 'nowrap'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n fontSize: 'inherit',\n margin: '0',\n width: '100%',\n height: '3.5rem',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0.25rem 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/* @conditional-compile-remove(image-gallery) */\n/**\n * @private\n */\nexport const titleStyle = (theme: ChatTheme): IStyle => {\n return {\n paddingLeft: '0.5rem',\n marginLeft: '0.5rem',\n color: theme.chatPalette.modalTitleWhite,\n fontFamily: 'inherit',\n fontSize: '0.875rem',\n fontStyle: 'normal',\n fontWeight: '600',\n lineHeight: '1.25rem'\n };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n marginRight: '0.5em',\n fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const bodyContainer: IStyle = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n padding: '5.75rem',\n '@media (max-width: 25rem) or (max-height: 25rem)': {\n padding: '2rem'\n }\n};\n\n/**\n * @private\n */\nexport const bodyFocusZone: IStyle = {\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n objectFit: 'contain',\n maxHeight: '100%',\n maxWidth: '100%'\n};\n\n/* @conditional-compile-remove(image-gallery) */\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: ChatTheme): IStyle => {\n return {\n color: theme.chatPalette.modalTitleWhite\n };\n};\n\n/* @conditional-compile-remove(image-gallery) */\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: ChatTheme): IStyle => {\n return {\n color: theme.chatPalette.modalTitleWhite,\n ':hover': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n },\n ':active': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n }\n };\n};\n\n/* @conditional-compile-remove(image-gallery) */\n/**\n * @private\n */\nexport const downloadButtonStyle = (theme: ChatTheme): IStyle => {\n return {\n margin: '0 0.5rem',\n height: '32px',\n borderWidth: '1px',\n fontSize: '0.875rem', // 14px\n fontWeight: 600,\n padding: '0.38rem 0.75rem',\n borderRadius: '4px',\n backgroundColor: theme.chatPalette.modalButtonBackground,\n color: theme.chatPalette.modalTitleWhite,\n whiteSpace: 'nowrap',\n ':hover': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n },\n ':active': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n },\n '@media (max-width: 25rem)': {\n display: 'none'\n }\n };\n};\n\n/* @conditional-compile-remove(image-gallery) */\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: ChatTheme): IStyle => {\n return {\n marginRight: '0.5rem',\n color: theme.chatPalette.modalTitleWhite,\n whiteSpace: 'nowrap',\n ':hover': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n },\n ':active': {\n color: theme.chatPalette.modalTitleWhite,\n backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n },\n '@media (min-width: 25rem)': {\n display: 'none'\n }\n };\n};\n"]}
@@ -1,9 +1,4 @@
1
1
  import { IStackStyles, Theme } from '@fluentui/react';
2
- /**
3
- * @private
4
- * z-index to ensure that chat container has lower z-index than mention popover
5
- */
6
- export declare const CHAT_CONTAINER_ZINDEX = 1;
7
2
  /**
8
3
  * @private
9
4
  */
@@ -1,11 +1,6 @@
1
1
  // Copyright (c) Microsoft Corporation.
2
2
  // Licensed under the MIT license.
3
3
  import { mergeStyles } from '@fluentui/react';
4
- /**
5
- * @private
6
- * z-index to ensure that chat container has lower z-index than mention popover
7
- */
8
- export const CHAT_CONTAINER_ZINDEX = 1;
9
4
  /**
10
5
  * @private
11
6
  */
@@ -13,8 +8,10 @@ export const mentionPopoverContainerStyle = (theme) => mergeStyles({
13
8
  boxShadow: theme.effects.elevation16,
14
9
  background: theme.semanticColors.bodyBackground,
15
10
  overflow: 'visible',
16
- // zIndex to set the mentionPopover above the chat container
17
- zIndex: CHAT_CONTAINER_ZINDEX + 1
11
+ // zIndex to set the mentionPopover
12
+ // Temporary set to a hardcoded high number to make sure it is on top of the other components
13
+ // Will be replaced by a proper z-index solution after the Fluent 9 migration
14
+ zIndex: 10000
18
15
  });
19
16
  /**
20
17
  * @private
@@ -1 +1 @@
1
- {"version":3,"file":"MentionPopover.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MentionPopover.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAEnE;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAU,EAAE,CACnE,WAAW,CAAC;IACV,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;IACpC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;IAC/C,QAAQ,EAAE,SAAS;IACnB,4DAA4D;IAC5D,MAAM,EAAE,qBAAqB,GAAG,CAAC;CAClC,CAAC,CAAC;AACL;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAgB,EAAE;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;YACrC,MAAM,EAAE,qBAAqB;YAC7B,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ;SACzC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACtD,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,OAAO,EAAE,gBAAgB;IACzB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAU,EAAE;IACjE,OAAO,WAAW,CAAC;QACjB,MAAM,EAAE,WAAW;QACnB,iBAAiB,EAAE;YACjB,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,eAAe;SAC/C;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAY,EAAE,mBAA4B,EAAE,YAAqB,EAAU,EAAE;IACpH,OAAO,WAAW,CAAC;QACjB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;QACpF,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM;KACrF,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n * z-index to ensure that chat container has lower z-index than mention popover\n */\nexport const CHAT_CONTAINER_ZINDEX = 1;\n\n/**\n * @private\n */\nexport const mentionPopoverContainerStyle = (theme: Theme): string =>\n mergeStyles({\n boxShadow: theme.effects.elevation16,\n background: theme.semanticColors.bodyBackground,\n overflow: 'visible',\n // zIndex to set the mentionPopover above the chat container\n zIndex: CHAT_CONTAINER_ZINDEX + 1\n });\n/**\n * @private\n */\nexport const headerStyleThemed = (theme: Theme): IStackStyles => {\n return {\n root: {\n color: theme.palette.neutralSecondary,\n margin: '0.5rem 1rem 0.25rem',\n fontSize: theme.fonts.smallPlus.fontSize\n }\n };\n};\n\n/**\n * @private\n */\nexport const suggestionListContainerStyle = mergeStyles({\n height: '100%',\n overflowY: 'visible',\n overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const suggestionListStyle = mergeStyles({\n padding: '0.25rem 0rem 0',\n overflow: 'visible',\n overflowY: 'scroll'\n});\n\n/**\n * @private\n */\nexport const suggestionItemWrapperStyle = (theme: Theme): string => {\n return mergeStyles({\n margin: '0.05rem 0',\n '&:focus-visible': {\n outline: `${theme.palette.black} solid 0.1rem`\n }\n });\n};\n\n/**\n * @private\n */\nexport const suggestionItemStackStyle = (theme: Theme, isSuggestionHovered: boolean, activeBorder: boolean): string => {\n return mergeStyles({\n width: '10rem',\n alignItems: 'center',\n height: '36px',\n padding: '0 0.75rem',\n background: isSuggestionHovered ? theme.palette.neutralLighter : theme.palette.white,\n outline: activeBorder ? `0.0625rem solid ${theme.palette.neutralSecondary}` : 'none'\n });\n};\n"]}
1
+ {"version":3,"file":"MentionPopover.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MentionPopover.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAU,EAAE,CACnE,WAAW,CAAC;IACV,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;IACpC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;IAC/C,QAAQ,EAAE,SAAS;IACnB,mCAAmC;IACnC,6FAA6F;IAC7F,6EAA6E;IAC7E,MAAM,EAAE,KAAK;CACd,CAAC,CAAC;AACL;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAgB,EAAE;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;YACrC,MAAM,EAAE,qBAAqB;YAC7B,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ;SACzC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACtD,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,OAAO,EAAE,gBAAgB;IACzB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAU,EAAE;IACjE,OAAO,WAAW,CAAC;QACjB,MAAM,EAAE,WAAW;QACnB,iBAAiB,EAAE;YACjB,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,eAAe;SAC/C;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAY,EAAE,mBAA4B,EAAE,YAAqB,EAAU,EAAE;IACpH,OAAO,WAAW,CAAC;QACjB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;QACpF,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM;KACrF,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const mentionPopoverContainerStyle = (theme: Theme): string =>\n mergeStyles({\n boxShadow: theme.effects.elevation16,\n background: theme.semanticColors.bodyBackground,\n overflow: 'visible',\n // zIndex to set the mentionPopover\n // Temporary set to a hardcoded high number to make sure it is on top of the other components\n // Will be replaced by a proper z-index solution after the Fluent 9 migration\n zIndex: 10000\n });\n/**\n * @private\n */\nexport const headerStyleThemed = (theme: Theme): IStackStyles => {\n return {\n root: {\n color: theme.palette.neutralSecondary,\n margin: '0.5rem 1rem 0.25rem',\n fontSize: theme.fonts.smallPlus.fontSize\n }\n };\n};\n\n/**\n * @private\n */\nexport const suggestionListContainerStyle = mergeStyles({\n height: '100%',\n overflowY: 'visible',\n overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const suggestionListStyle = mergeStyles({\n padding: '0.25rem 0rem 0',\n overflow: 'visible',\n overflowY: 'scroll'\n});\n\n/**\n * @private\n */\nexport const suggestionItemWrapperStyle = (theme: Theme): string => {\n return mergeStyles({\n margin: '0.05rem 0',\n '&:focus-visible': {\n outline: `${theme.palette.black} solid 0.1rem`\n }\n });\n};\n\n/**\n * @private\n */\nexport const suggestionItemStackStyle = (theme: Theme, isSuggestionHovered: boolean, activeBorder: boolean): string => {\n return mergeStyles({\n width: '10rem',\n alignItems: 'center',\n height: '36px',\n padding: '0 0.75rem',\n background: isSuggestionHovered ? theme.palette.neutralLighter : theme.palette.white,\n outline: activeBorder ? `0.0625rem solid ${theme.palette.neutralSecondary}` : 'none'\n });\n};\n"]}
@@ -1,6 +1,6 @@
1
1
  import { PartialTheme } from '@fluentui/react';
2
2
  /**
3
- * Custom Fluent theme pallete used by calling related components in this library.
3
+ * Custom Fluent theme palette used by calling related components in this library.
4
4
  *
5
5
  * @public
6
6
  */
@@ -13,16 +13,35 @@ export interface CallingTheme {
13
13
  raiseHandGold: string;
14
14
  };
15
15
  }
16
+ /**
17
+ * Custom Fluent theme palette used by chat related components in this library.
18
+ *
19
+ * @beta
20
+ */
21
+ export interface ChatTheme {
22
+ /**
23
+ * Custom Fluent theme palette used by chat related components in this library.
24
+ *
25
+ * @beta
26
+ */
27
+ chatPalette: {
28
+ modalOverlayBlack: string;
29
+ modalTitleWhite: string;
30
+ modalButtonBackground: string;
31
+ modalButtonBackgroundHover: string;
32
+ modalButtonBackgroundActive: string;
33
+ };
34
+ }
16
35
  /**
17
36
  * Preset light theme for components exported from this library.
18
37
  *
19
38
  * @public
20
39
  */
21
- export declare const lightTheme: PartialTheme & CallingTheme;
40
+ export declare const lightTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-gallery) */ ChatTheme;
22
41
  /**
23
42
  * Preset dark theme for components exported from this library.
24
43
  *
25
44
  * @public
26
45
  */
27
- export declare const darkTheme: PartialTheme & CallingTheme;
46
+ export declare const darkTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-gallery) */ ChatTheme;
28
47
  //# sourceMappingURL=themes.d.ts.map
@@ -38,6 +38,14 @@ export const lightTheme = {
38
38
  /* @conditional-compile-remove(raise-hand) */
39
39
  raiseHandGold: '#eaa300'
40
40
  },
41
+ /* @conditional-compile-remove(image-gallery) */
42
+ chatPalette: {
43
+ modalOverlayBlack: '#000000',
44
+ modalTitleWhite: '#ffffff',
45
+ modalButtonBackground: '#1b1a19',
46
+ modalButtonBackgroundHover: '#252423',
47
+ modalButtonBackgroundActive: '#292827'
48
+ },
41
49
  semanticColors: {
42
50
  errorText: '#a80000'
43
51
  }
@@ -80,6 +88,14 @@ export const darkTheme = {
80
88
  /* @conditional-compile-remove(raise-hand) */
81
89
  raiseHandGold: '#eaa300'
82
90
  },
91
+ /* @conditional-compile-remove(image-gallery) */
92
+ chatPalette: {
93
+ modalOverlayBlack: '#000000',
94
+ modalTitleWhite: '#ffffff',
95
+ modalButtonBackground: '#1b1a19',
96
+ modalButtonBackgroundHover: '#252423',
97
+ modalButtonBackgroundActive: '#292827'
98
+ },
83
99
  semanticColors: {
84
100
  errorText: '#f1707b'
85
101
  }
@@ -1 +1 @@
1
- {"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themes.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAoBlC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAgC;IACrD,OAAO,EAAE;QACP,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,SAAS;QAC3B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;QACpB,6CAA6C;QAC7C,aAAa,EAAE,SAAS;KACzB;IACD,cAAc,EAAE;QACd,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAgC;IACpD,OAAO,EAAE;QACP,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,SAAS;QAC3B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;QACpB,6CAA6C;QAC7C,aAAa,EAAE,SAAS;KACzB;IACD,cAAc,EAAE;QACd,SAAS,EAAE,SAAS;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { PartialTheme } from '@fluentui/react';\n\n/**\n * Custom Fluent theme pallete used by calling related components in this library.\n *\n * @public\n */\nexport interface CallingTheme {\n callingPalette: {\n callRed: string;\n callRedDark: string;\n callRedDarker: string;\n iconWhite: string;\n /* @conditional-compile-remove(raise-hand) */\n raiseHandGold: string;\n };\n}\n\n/**\n * Preset light theme for components exported from this library.\n *\n * @public\n */\nexport const lightTheme: PartialTheme & CallingTheme = {\n palette: {\n themePrimary: '#0078d4',\n themeLighterAlt: '#eff6fc',\n themeLighter: '#deecf9',\n themeLight: '#c7e0f4',\n themeTertiary: '#71afe5',\n themeSecondary: '#2b88d8',\n themeDarkAlt: '#106ebe',\n themeDark: '#59b0f7',\n themeDarker: '#004578',\n neutralLighterAlt: '#faf9f8',\n neutralLighter: '#f3f2f1',\n neutralLight: '#edebe9',\n neutralQuaternaryAlt: '#e1dfdd',\n neutralQuaternary: '#d0d0d0',\n neutralTertiaryAlt: '#c8c6c4',\n neutralTertiary: '#a19f9d',\n neutralSecondary: '#605e5c',\n neutralPrimaryAlt: '#3b3a39',\n neutralPrimary: '#323130',\n neutralDark: '#201f1e',\n black: '#000000',\n white: '#ffffff'\n },\n callingPalette: {\n callRed: '#a42e43',\n callRedDark: '#8b2c3d',\n callRedDarker: '#772a38',\n iconWhite: '#ffffff',\n /* @conditional-compile-remove(raise-hand) */\n raiseHandGold: '#eaa300'\n },\n semanticColors: {\n errorText: '#a80000'\n }\n};\n\n/**\n * Preset dark theme for components exported from this library.\n *\n * @public\n */\nexport const darkTheme: PartialTheme & CallingTheme = {\n palette: {\n themePrimary: '#2899f5',\n themeLighterAlt: '#02060a',\n themeLighter: '#061827',\n themeLight: '#0c2e49',\n themeTertiary: '#185b93',\n themeSecondary: '#2286d7',\n themeDarkAlt: '#3ca2f6',\n themeDark: '#59b0f7',\n themeDarker: '#84c5f9',\n neutralLighterAlt: '#302e2d',\n neutralLighter: '#383735',\n neutralLight: '#464443',\n neutralQuaternaryAlt: '#4e4d4b',\n neutralQuaternary: '#4d4b49',\n neutralTertiaryAlt: '#72706e',\n neutralTertiary: '#c8c8c8',\n neutralSecondary: '#d0d0d0',\n neutralPrimaryAlt: '#dadada',\n neutralPrimary: '#ffffff',\n neutralDark: '#f4f4f4',\n black: '#f8f8f8',\n white: '#252423'\n },\n callingPalette: {\n callRed: '#c4314b',\n callRedDark: '#a42e43',\n callRedDarker: '#8b2c3d',\n iconWhite: '#ffffff',\n /* @conditional-compile-remove(raise-hand) */\n raiseHandGold: '#eaa300'\n },\n semanticColors: {\n errorText: '#f1707b'\n }\n};\n"]}
1
+ {"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themes.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAyClC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAA6F;IAClH,OAAO,EAAE;QACP,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,SAAS;QAC3B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;QACpB,6CAA6C;QAC7C,aAAa,EAAE,SAAS;KACzB;IACD,gDAAgD;IAChD,WAAW,EAAE;QACX,iBAAiB,EAAE,SAAS;QAC5B,eAAe,EAAE,SAAS;QAC1B,qBAAqB,EAAE,SAAS;QAChC,0BAA0B,EAAE,SAAS;QACrC,2BAA2B,EAAE,SAAS;KACvC;IACD,cAAc,EAAE;QACd,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6F;IACjH,OAAO,EAAE;QACP,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,SAAS;QAC3B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;QACpB,6CAA6C;QAC7C,aAAa,EAAE,SAAS;KACzB;IACD,gDAAgD;IAChD,WAAW,EAAE;QACX,iBAAiB,EAAE,SAAS;QAC5B,eAAe,EAAE,SAAS;QAC1B,qBAAqB,EAAE,SAAS;QAChC,0BAA0B,EAAE,SAAS;QACrC,2BAA2B,EAAE,SAAS;KACvC;IACD,cAAc,EAAE;QACd,SAAS,EAAE,SAAS;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { PartialTheme } from '@fluentui/react';\n\n/**\n * Custom Fluent theme palette used by calling related components in this library.\n *\n * @public\n */\nexport interface CallingTheme {\n callingPalette: {\n callRed: string;\n callRedDark: string;\n callRedDarker: string;\n iconWhite: string;\n /* @conditional-compile-remove(raise-hand) */\n raiseHandGold: string;\n };\n}\n\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Custom Fluent theme palette used by chat related components in this library.\n *\n * @beta\n */\nexport interface ChatTheme {\n /**\n * Custom Fluent theme palette used by chat related components in this library.\n *\n * @beta\n */\n chatPalette: {\n modalOverlayBlack: string;\n modalTitleWhite: string;\n modalButtonBackground: string;\n modalButtonBackgroundHover: string;\n modalButtonBackgroundActive: string;\n };\n}\n\n/**\n * Preset light theme for components exported from this library.\n *\n * @public\n */\nexport const lightTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-gallery) */ ChatTheme = {\n palette: {\n themePrimary: '#0078d4',\n themeLighterAlt: '#eff6fc',\n themeLighter: '#deecf9',\n themeLight: '#c7e0f4',\n themeTertiary: '#71afe5',\n themeSecondary: '#2b88d8',\n themeDarkAlt: '#106ebe',\n themeDark: '#59b0f7',\n themeDarker: '#004578',\n neutralLighterAlt: '#faf9f8',\n neutralLighter: '#f3f2f1',\n neutralLight: '#edebe9',\n neutralQuaternaryAlt: '#e1dfdd',\n neutralQuaternary: '#d0d0d0',\n neutralTertiaryAlt: '#c8c6c4',\n neutralTertiary: '#a19f9d',\n neutralSecondary: '#605e5c',\n neutralPrimaryAlt: '#3b3a39',\n neutralPrimary: '#323130',\n neutralDark: '#201f1e',\n black: '#000000',\n white: '#ffffff'\n },\n callingPalette: {\n callRed: '#a42e43',\n callRedDark: '#8b2c3d',\n callRedDarker: '#772a38',\n iconWhite: '#ffffff',\n /* @conditional-compile-remove(raise-hand) */\n raiseHandGold: '#eaa300'\n },\n /* @conditional-compile-remove(image-gallery) */\n chatPalette: {\n modalOverlayBlack: '#000000',\n modalTitleWhite: '#ffffff',\n modalButtonBackground: '#1b1a19',\n modalButtonBackgroundHover: '#252423',\n modalButtonBackgroundActive: '#292827'\n },\n semanticColors: {\n errorText: '#a80000'\n }\n};\n\n/**\n * Preset dark theme for components exported from this library.\n *\n * @public\n */\nexport const darkTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-gallery) */ ChatTheme = {\n palette: {\n themePrimary: '#2899f5',\n themeLighterAlt: '#02060a',\n themeLighter: '#061827',\n themeLight: '#0c2e49',\n themeTertiary: '#185b93',\n themeSecondary: '#2286d7',\n themeDarkAlt: '#3ca2f6',\n themeDark: '#59b0f7',\n themeDarker: '#84c5f9',\n neutralLighterAlt: '#302e2d',\n neutralLighter: '#383735',\n neutralLight: '#464443',\n neutralQuaternaryAlt: '#4e4d4b',\n neutralQuaternary: '#4d4b49',\n neutralTertiaryAlt: '#72706e',\n neutralTertiary: '#c8c8c8',\n neutralSecondary: '#d0d0d0',\n neutralPrimaryAlt: '#dadada',\n neutralPrimary: '#ffffff',\n neutralDark: '#f4f4f4',\n black: '#f8f8f8',\n white: '#252423'\n },\n callingPalette: {\n callRed: '#c4314b',\n callRedDark: '#a42e43',\n callRedDarker: '#8b2c3d',\n iconWhite: '#ffffff',\n /* @conditional-compile-remove(raise-hand) */\n raiseHandGold: '#eaa300'\n },\n /* @conditional-compile-remove(image-gallery) */\n chatPalette: {\n modalOverlayBlack: '#000000',\n modalTitleWhite: '#ffffff',\n modalButtonBackground: '#1b1a19',\n modalButtonBackgroundHover: '#252423',\n modalButtonBackgroundActive: '#292827'\n },\n semanticColors: {\n errorText: '#f1707b'\n }\n};\n"]}