@azure/communication-react 1.13.0-alpha-202402090012 → 1.13.0-alpha-202402110013

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n    /* @conditional-compile-remove(spotlight) */\n    startSpotlightVideoTileMenuLabel?: string;\n    /* @conditional-compile-remove(spotlight) */\n    addSpotlightVideoTileMenuLabel?: string;\n    /* @conditional-compile-remove(spotlight) */\n    stopSpotlightVideoTileMenuLabel?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n  /* @conditional-compile-remove(spotlight) */\n  isSpotlighted?: boolean;\n  /* @conditional-compile-remove(spotlight) */\n  spotlightedParticipantUserIds?: string[];\n  /* @conditional-compile-remove(spotlight) */\n  onStartSpotlight?: (userId: string) => void;\n  /* @conditional-compile-remove(spotlight) */\n  onStopSpotlight?: (userId: string) => void;\n}): IContextualMenuProps | undefined => {\n  const {\n    remoteParticipant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight\n  } = props;\n  const scalingMode = useMemo(() => {\n    return props.remoteParticipant.videoStream?.scalingMode;\n  }, [props.remoteParticipant.videoStream?.scalingMode]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUnpinParticipant(remoteParticipant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onPinParticipant(remoteParticipant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem || /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n          ariaLabel: pinActionString\n        });\n      }\n    }\n    /* @conditional-compile-remove(spotlight) */\n    if (isSpotlighted) {\n      if (onStopSpotlight && remoteParticipant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n        items.push({\n          key: 'stopSpotlight',\n          text: strings.stopSpotlightVideoTileMenuLabel,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStopSpotlight(remoteParticipant.userId),\n          ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n        });\n      }\n    } else {\n      const startSpotlightMenuLabel =\n        spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n          ? strings?.addSpotlightVideoTileMenuLabel\n          : strings?.startSpotlightVideoTileMenuLabel;\n      if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabel) {\n        items.push({\n          key: 'startSpotlight',\n          text: startSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStartSpotlight(remoteParticipant.userId),\n          ariaLabel: startSpotlightMenuLabel\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(remoteParticipant.userId, 'Fit');\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        items.push({\n          key: 'fillRemoteParticipantFrame',\n          text: strings.fillRemoteParticipantFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFill',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(remoteParticipant.userId, 'Crop');\n            view?.updateScalingMode('Crop');\n          },\n          'data-ui-id': 'video-tile-fill-frame',\n          ariaLabel: strings.fillRemoteParticipantFrame\n        });\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items, styles: {}, calloutProps: { preventDismissOnEvent } };\n  }, [\n    scalingMode,\n    strings,\n    view,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    remoteParticipant.userId,\n    remoteParticipant.displayName,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight\n  ]);\n\n  return contextualMenuProps;\n};\n"]}
+{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n    pinParticipantMenuItemAriaLabel?: string;\n    unpinParticipantMenuItemAriaLabel?: string;\n    pinnedParticipantAnnouncementAriaLabel?: string;\n    unpinnedParticipantAnnouncementAriaLabel?: string;\n    /* @conditional-compile-remove(spotlight) */\n    startSpotlightVideoTileMenuLabel?: string;\n    /* @conditional-compile-remove(spotlight) */\n    addSpotlightVideoTileMenuLabel?: string;\n    /* @conditional-compile-remove(spotlight) */\n    stopSpotlightVideoTileMenuLabel?: string;\n    /* @conditional-compile-remove(spotlight) */\n    spotlightLimitReachedMenuTitle?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n  disablePinMenuItem?: boolean;\n  toggleAnnouncerString?: (announcerString: string) => void;\n  /* @conditional-compile-remove(spotlight) */\n  isSpotlighted?: boolean;\n  /* @conditional-compile-remove(spotlight) */\n  spotlightedParticipantUserIds?: string[];\n  /* @conditional-compile-remove(spotlight) */\n  onStartSpotlight?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(spotlight) */\n  onStopSpotlight?: (userIds: string[]) => void;\n  /* @conditional-compile-remove(spotlight) */\n  maxParticipantsToSpotlight?: number;\n}): IContextualMenuProps | undefined => {\n  const {\n    remoteParticipant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = [],\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight\n  } = props;\n  const scalingMode = useMemo(() => {\n    return props.remoteParticipant.videoStream?.scalingMode;\n  }, [props.remoteParticipant.videoStream?.scalingMode]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUnpinParticipant(remoteParticipant.userId);\n            unpinActionString && toggleAnnouncerString?.(unpinActionString);\n          },\n          'data-ui-id': 'video-tile-unpin-participant-button',\n          ariaLabel: unpinActionString\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        let pinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: remoteParticipant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onPinParticipant(remoteParticipant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem || /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n          ariaLabel: pinActionString\n        });\n      }\n    }\n    /* @conditional-compile-remove(spotlight) */\n    if (isSpotlighted) {\n      if (onStopSpotlight && remoteParticipant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n        items.push({\n          key: 'stopSpotlight',\n          text: strings.stopSpotlightVideoTileMenuLabel,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStopSpotlight([remoteParticipant.userId]),\n          ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n        });\n      }\n    } else {\n      const startSpotlightMenuLabel =\n        spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n          ? strings?.addSpotlightVideoTileMenuLabel\n          : strings?.startSpotlightVideoTileMenuLabel;\n      const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight\n        ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight\n        : false;\n      if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabel) {\n        items.push({\n          key: 'startSpotlight',\n          text: startSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStartSpotlight([remoteParticipant.userId]),\n          ariaLabel: startSpotlightMenuLabel,\n          disabled: maxSpotlightedParticipantsReached,\n          title: maxSpotlightedParticipantsReached ? strings?.spotlightLimitReachedMenuTitle : undefined\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(remoteParticipant.userId, 'Fit');\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame',\n          ariaLabel: strings.fitRemoteParticipantToFrame\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        items.push({\n          key: 'fillRemoteParticipantFrame',\n          text: strings.fillRemoteParticipantFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFill',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(remoteParticipant.userId, 'Crop');\n            view?.updateScalingMode('Crop');\n          },\n          'data-ui-id': 'video-tile-fill-frame',\n          ariaLabel: strings.fillRemoteParticipantFrame\n        });\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items, styles: {}, calloutProps: { preventDismissOnEvent } };\n  }, [\n    scalingMode,\n    strings,\n    view,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    remoteParticipant.userId,\n    remoteParticipant.displayName,\n    disablePinMenuItem,\n    toggleAnnouncerString,\n    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,\n    /* @conditional-compile-remove(spotlight) */ isSpotlighted,\n    /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n    /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight\n  ]);\n\n  return contextualMenuProps;\n};\n"]}

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

@@ -79,6 +79,8 @@ export interface VideoGalleryStrings {
     startSpotlightVideoTileMenuLabel: string;
     /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */
     addSpotlightVideoTileMenuLabel: string;
+    /** Menu title for start spotlight menu item when spotlight limit is reached */
+    spotlightLimitReachedMenuTitle: string;
     /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */
     stopSpotlightVideoTileMenuLabel: string;
     /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */
@@ -200,13 +202,17 @@ export interface VideoGalleryProps {
      */
     spotlightedParticipants?: string[];
     /**
-     * This callback will be called when spotlight is started for participant video tile.
+     * This callback will be called when spotlight is started for participant video tiles.
      */
-    onStartSpotlight?: (userId: string) => Promise<void>;
+    onStartSpotlight?: (userIds?: string[]) => Promise<void>;
     /**
-     * This callback will be called when spotlight is stopped for participant video tile.
+     * This callback will be called when spotlight is stopped for participant video tiles.
      */
-    onStopSpotlight?: (userId: string) => Promise<void>;
+    onStopSpotlight?: (userIds?: string[]) => Promise<void>;
+    /**
+     * Maximum participants that can be spotlighted
+     */
+    maxParticipantsToSpotlight?: number;
     /**
      * Options for showing the remote video tile menu.
      *

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

@@ -75,6 +75,8 @@ export const VideoGallery = (props) => {
     onStartSpotlight, 
     /* @conditional-compile-remove(spotlight) */
     onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    maxParticipantsToSpotlight, 
     /* @conditional-compile-remove(reaction) */
     reactionResources } = props;
     const ids = useIdentifiers();
@@ -127,7 +129,7 @@ export const VideoGallery = (props) => {
             return onRenderLocalVideoTile(localParticipant);
         }
         /* @conditional-compile-remove(spotlight) */
-        const isSpotlighted = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.includes(localParticipant.userId);
+        const isSpotlighted = !!localParticipant.spotlight;
         const localVideoTileStyles = concatStyleSets(localTileNotInGrid ? floatingLocalVideoTileStyle : {}, {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
@@ -170,8 +172,6 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(gallery-layouts) */
         layout,
         showLocalVideoTileLabel,
-        /* @conditional-compile-remove(spotlight) */
-        spotlightedParticipants,
         /* @conditional-compile-remove(reaction) */
         reactionResources
     ]);
@@ -206,7 +206,7 @@ export const VideoGallery = (props) => {
         const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;
         let isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
         /* @conditional-compile-remove(spotlight) */
-        const isSpotlighted = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.includes(participant.userId);
+        const isSpotlighted = !!participant.spotlight;
         /* @conditional-compile-remove(spotlight) */
         isPinned = isSpotlighted ? false : isPinned;
         const createViewOptions = () => {
@@ -239,6 +239,8 @@ export const VideoGallery = (props) => {
             onStartSpotlight: onStartSpotlight, 
             /* @conditional-compile-remove(spotlight) */
             onStopSpotlight: onStopSpotlight, 
+            /* @conditional-compile-remove(spotlight) */
+            maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
             /* @conditional-compile-remove(reaction) */
             reactionResources: reactionResources }));
     }, [
@@ -260,6 +262,7 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
         /* @conditional-compile-remove(reaction) */ reactionResources
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });

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

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAWtC,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,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;AACzE,gDAAgD;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAKvE;;;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;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,CAAC;AA6P/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,EAChC,gBAAgB,EAAE,uBAAuB,EACzC,kBAAkB,EAAE,yBAAyB,EAC7C,mBAAmB,GAAG,sCAAsC;IAC5D,mDAAmD;IACnD,uBAAuB,GAAG,kBAAkB;IAC5C,wCAAwC;IACxC,kBAAkB,GAAG,yBAAyB;IAC9C,4CAA4C;IAC5C,uBAAuB;IACvB,4CAA4C;IAC5C,gBAAgB;IAChB,4CAA4C;IAC5C,eAAe;IACf,2CAA2C;IAC3C,iBAAiB,EAClB,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,MAAM,wBAAwB,GAC5B,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,KAAK,QAAQ;QAC1D,CAAC,CAAE,mBAAgD,CAAC,MAAM;QAC1D,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;IAE3E,MAAM,kBAAkB,GACtB,CAAC,MAAM,KAAK,oBAAoB,IAAI,kDAAkD,CAAC,MAAM,KAAK,SAAS,CAAC;QAC5G,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IAEhC,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,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC3F,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC5E,EAAE,CACH,CAAC;IAEF,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,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,CAAC;gBACxE,qGAAqG;gBACrG,OAAO,CAAC,IAAI,CAAC,qCAAqC,GAAG,cAAc,CAAC,CAAC;YACvE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACzD,6GAA6G;IAC7G,MAAM,kBAAkB,GAAG,MAAA,KAAK,CAAC,kBAAkB,mCAAI,uBAAuB,CAAC;IAE/E,MAAM,uBAAuB,GAC3B,CAAC,CACC,CAAC,kBAAkB,IAAI,QAAQ,CAAC;QAChC,+CAA+C,CAAC,wCAAwC,CAAC,kBAAkB;YACzG,MAAM,CACT,IAAI,kDAAkD,CAAC,MAAM,KAAK,SAAS,CAAC;IAC/E;;OAEG;IACH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAqE,EAAE;;QACpG,gDAAgD;QAChD,IAAI,kBAAkB,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,IAAI,sBAAsB,EAAE,CAAC;YAC3B,OAAO,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;QAClD,CAAC;QAED,4CAA4C;QAC5C,MAAM,aAAa,GAAG,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAEjF,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,MAAM,yBAAyB,GAAG,GAAW,EAAE;YAC7C,kDAAkD;YAClD,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC;YAChG,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,CAAC,CAAC;QAEF,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,yBAAyB,EAAE,EACxC,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE,qBAAqB,EAC5C,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,uBAAuB,EAClC,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;gBACvC,2CAA2C;gBAC3C,QAAQ,EAAE,gBAAgB,CAAC,QAAQ;gBACnC,4CAA4C;gBAC5C,aAAa,EAAE,aAAa;gBAC5B,2CAA2C;gBAC3C,iBAAiB,EAAE,iBAAiB,GACpC,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;QAClB,kDAAkD;QAClD,MAAM;QACN,uBAAuB;QACvB,4CAA4C;QAC5C,uBAAuB;QACvB,2CAA2C;QAC3C,iBAAiB;KAClB,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,MAAc,EAAE,EAAE;QACjB,IAAI,kBAAkB,CAAC,MAAM,IAAI,6BAA6B,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QACD,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9C,0BAA0B,CAAC,uBAAuB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QACrE,CAAC;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,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,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,EAAE,CAAC,CAAC;IAC/E;;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,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,CAAC,CAAC,wBAAwB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACzG,IAAI,QAAQ,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAChE,4CAA4C;QAC5C,MAAM,aAAa,GAAG,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC5E,4CAA4C;QAC5C,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;QAE5C,MAAM,iBAAiB,GAAG,GAAmC,EAAE;;YAC7D,IAAI,mBAAmB,EAAE,CAAC;gBACxB,OAAO,mBAAmB,CAAC;YAC7B,CAAC;YACD,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;QAC7B,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,iBAAiB,EAAE,EAC3C,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO;YAChB,6CAA6C;YAC7C,gBAAgB,EAAE,WAAW,CAAC,KAAK,EACnC,QAAQ,EACN,WAAW,CAAC,MAAM,KAAK,gBAAgB,CAAC,MAAM;gBAC5C,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,mBAAmB;oBACrB,CAAC,CAAC,mBAAmB,CAAC,IAAI,KAAK,QAAQ;wBACrC,CAAC,CAAC,QAAQ;wBACV,CAAC,CAAC,YAAY;oBAChB,CAAC,CAAC,SAAS,EAEf,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,CAAC,MAAM,IAAI,6BAA6B,EAC9E,qBAAqB,EAAE,qBAAqB;YAC5C,4CAA4C;YAC5C,6BAA6B,EAAE,uBAAuB;YACtD,4CAA4C;YAC5C,aAAa,EAAE,aAAa;YAC5B,4CAA4C;YAC5C,gBAAgB,EAAE,gBAAgB;YAClC,4CAA4C;YAC5C,eAAe,EAAE,eAAe;YAChC,2CAA2C;YAC3C,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC;IACJ,CAAC,EACD;QACE,wBAAwB;QACxB,8BAA8B;QAC9B,sBAAsB;QACtB,gBAAgB;QAChB,cAAc;QACd,iBAAiB;QACjB,OAAO;QACP,gBAAgB;QAChB,mBAAmB;QACnB,wBAAwB;QACxB,kBAAkB;QAClB,gBAAgB;QAChB,kBAAkB;QAClB,qBAAqB;QACrB,mBAAmB;QACnB,4CAA4C,CAAC,uBAAuB;QACpE,4CAA4C,CAAC,gBAAgB;QAC7D,4CAA4C,CAAC,eAAe;QAC5D,2CAA2C,CAAC,iBAAiB;KAC9D,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,EAClE,2BAA2B,EAAE,wBAAwB,CAAC,sBAAsB,CAAC,MAAM,CAAC,IACpF,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,wBAAwB,EAAE,kBAAkB;QAC5C,mDAAmD,CAAC,uBAAuB;QAC3E,gDAAgD,CAAC,kBAAkB;QACnE,4CAA4C,CAAC,6BAA6B,EAAE,uBAAuB;KACpG,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,kBAAkB;QAClB,mDAAmD,CAAC,uBAAuB;QAC3E,gDAAgD,CAAC,kBAAkB;QACnE,4CAA4C,CAAC,uBAAuB;KACrE,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,kDAAkD;QAClD,IAAI,sBAAsB,IAAI,MAAM,KAAK,gBAAgB,EAAE,CAAC;YAC1D,OAAO,oBAAC,oBAAoB,oBAAK,WAAW,EAAI,CAAC;QACnD,CAAC;QACD,IAAI,MAAM,KAAK,oBAAoB,EAAE,CAAC;YACpC,OAAO,oBAAC,wBAAwB,oBAAK,WAAW,EAAI,CAAC;QACvD,CAAC;QACD,kDAAkD;QAClD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,oBAAC,kBAAkB,oBAAK,WAAW,EAAI,CAAC;QACjD,CAAC;QACD,gDAAgD;QAChD,IAAI,MAAM,KAAK,cAAc,EAAE,CAAC;YAC9B,OAAO,oBAAC,kBAAkB,oBAAK,WAAW,EAAI,CAAC;QACjD,CAAC;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,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;QACnB,oBAAC,SAAS,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,QAAQ,EAAC,QAAQ,GAAG,CACnE,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 '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '../types';\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';\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/* @conditional-compile-remove(large-gallery) */\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/**\n * @private\n * Styles to disable the selectivity of a text in video gallery\n */\nexport const unselectable = {\n  '-webkit-user-select': 'none',\n  '-webkit-touch-callout': 'none',\n  '-moz-user-select': 'none',\n  '-ms-user-select': 'none',\n  'user-select': 'none'\n};\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/**\n * @private\n * Default remote video tile menu options\n */\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n  kind: 'contextual'\n};\n\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String 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  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /** Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile */\n  unpinParticipantForMe: string;\n  /** Aria label for pin participant menu item of remote participant's video tile */\n  pinParticipantMenuItemAriaLabel: string;\n  /** Aria label for unpin participant menu item of remote participant's video tile */\n  unpinParticipantMenuItemAriaLabel: string;\n  /** Aria label to announce when remote participant's video tile is pinned */\n  pinnedParticipantAnnouncementAriaLabel: string;\n  /** Aria label to announce when remote participant's video tile is unpinned */\n  unpinnedParticipantAnnouncementAriaLabel: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile */\n  startSpotlightVideoTileMenuLabel: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */\n  addSpotlightVideoTileMenuLabel: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */\n  stopSpotlightVideoTileMenuLabel: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */\n  stopSpotlightOnSelfVideoTileMenuLabel: 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(large-gallery) */ 'largeGallery'\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 * @public\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 * @public\n */\nexport type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /**\n   * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n   *\n   * Callback to dispose a remote video stream view\n   */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n  /** Callback to dispose a remote screen share stream view */\n  onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /**\n   * List of pinned participant userIds.\n   */\n  pinnedParticipants?: string[];\n  /**\n   * This callback will be called when a participant video tile is pinned.\n   */\n  onPinParticipant?: (userId: string) => void;\n  /**\n   * This callback will be called when a participant video tile is un-pinned.\n   */\n  onUnpinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * List of spotlighted participant userIds.\n   */\n  spotlightedParticipants?: string[];\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * This callback will be called when spotlight is started for participant video tile.\n   */\n  onStartSpotlight?: (userId: string) => Promise<void>;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * This callback will be called when spotlight is stopped for participant video tile.\n   */\n  onStopSpotlight?: (userId: string) => Promise<void>;\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenu?: 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  /* @conditional-compile-remove(reaction) */\n  /**\n   * Reaction resources for like, heart, laugh, applause and surprised.\n   * @beta\n   */\n  reactionResources?: ReactionResources;\n}\n\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileContextualMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'contextual';\n}\n\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileDrawerMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'drawer';\n  /**\n   * The optional id property provided on an element that the drawer menu should render within when a\n   * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n   * render within the VideoGallery component.\n   */\n  hostId?: string;\n}\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteScreenShareStreamView,\n    onDisposeRemoteVideoStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    onPinParticipant: onPinParticipantHandler,\n    onUnpinParticipant: onUnpinParticipantHandler,\n    remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n    /* @conditional-compile-remove(vertical-gallery) */\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(rooms) */\n    localVideoTileSize = 'followDeviceOrientation',\n    /* @conditional-compile-remove(spotlight) */\n    spotlightedParticipants,\n    /* @conditional-compile-remove(spotlight) */\n    onStartSpotlight,\n    /* @conditional-compile-remove(spotlight) */\n    onStopSpotlight,\n    /* @conditional-compile-remove(reaction) */\n    reactionResources\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n  const drawerMenuHostIdFromProp =\n    remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n      ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n      : undefined;\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n  const localTileNotInGrid =\n    (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&\n    remoteParticipants.length > 0;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n    {}\n  );\n\n  const onUpdateScalingMode = useCallback(\n    (remoteUserId: string, scalingMode: ViewScalingMode) => {\n      setselectedScalingModeState((current) => ({\n        ...current,\n        [remoteUserId]: {\n          scalingMode,\n          isMirrored: remoteVideoViewOptions?.isMirrored\n        }\n      }));\n    },\n    [remoteVideoViewOptions?.isMirrored]\n  );\n  useEffect(() => {\n    props.pinnedParticipants?.forEach((pinParticipant) => {\n      if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n        // warning will be logged in the console when invalid participant id is passed in pinned participants\n        console.warn('Invalid pinned participant UserId :' + pinParticipant);\n      }\n    });\n  }, [props.pinnedParticipants, props.remoteParticipants]);\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n  const showLocalVideoTileLabel =\n    !(\n      (localTileNotInGrid && isNarrow) ||\n      /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===\n        '9:16'\n    ) || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default';\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    /* @conditional-compile-remove(spotlight) */\n    const isSpotlighted = spotlightedParticipants?.includes(localParticipant.userId);\n\n    const localVideoTileStyles = concatStyleSets(\n      localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n    const showDisplayNameTrampoline = (): string => {\n      /* @conditional-compile-remove(gallery-layouts) */\n      return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n      return isNarrow ? '' : strings.localVideoLabel;\n    };\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={showDisplayNameTrampoline()}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={showLocalVideoTileLabel}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n          /* @conditional-compile-remove(raise-hand) */\n          raisedHand={localParticipant.raisedHand}\n          /* @conditional-compile-remove(reaction) */\n          reaction={localParticipant.reaction}\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          /* @conditional-compile-remove(reaction) */\n          reactionResources={reactionResources}\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    /* @conditional-compile-remove(gallery-layouts) */\n    layout,\n    showLocalVideoTileLabel,\n    /* @conditional-compile-remove(spotlight) */\n    spotlightedParticipants,\n    /* @conditional-compile-remove(reaction) */\n    reactionResources\n  ]);\n\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  const onUnpinParticipant = useCallback(\n    (userId: string) => {\n      setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n      onUnpinParticipantHandler?.(userId);\n    },\n    [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n  );\n\n  const [announcementString, setAnnouncementString] = React.useState<string>('');\n  /**\n   * sets the announcement string for VideoGallery actions so that the screenreader will trigger\n   */\n  const toggleAnnouncerString = useCallback(\n    (announcement) => {\n      setAnnouncementString(announcement);\n      /**\n       * Clears the announcer string after VideoGallery action allowing it to be re-announced.\n       */\n      setTimeout(() => {\n        setAnnouncementString('');\n      }, 3000);\n    },\n    [setAnnouncementString]\n  );\n\n  const defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n      const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n      let isPinned = pinnedParticipants?.includes(participant.userId);\n      /* @conditional-compile-remove(spotlight) */\n      const isSpotlighted = spotlightedParticipants?.includes(participant.userId);\n      /* @conditional-compile-remove(spotlight) */\n      isPinned = isSpotlighted ? false : isPinned;\n\n      const createViewOptions = (): VideoStreamOptions | undefined => {\n        if (selectedScalingMode) {\n          return selectedScalingMode;\n        }\n        return remoteVideoStream?.streamSize &&\n          remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n          ? ({\n              scalingMode: 'Fit',\n              isMirrored: remoteVideoViewOptions?.isMirrored\n            } as VideoStreamOptions)\n          : remoteVideoViewOptions;\n      };\n\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={createViewOptions()}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n          menuKind={\n            participant.userId === localParticipant.userId\n              ? undefined\n              : remoteVideoTileMenu\n              ? remoteVideoTileMenu.kind === 'drawer'\n                ? 'drawer'\n                : 'contextual'\n              : undefined\n          }\n          drawerMenuHostId={drawerMenuHostId}\n          onPinParticipant={onPinParticipant}\n          onUnpinParticipant={onUnpinParticipant}\n          onUpdateScalingMode={onUpdateScalingMode}\n          isPinned={isPinned}\n          disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n          toggleAnnouncerString={toggleAnnouncerString}\n          /* @conditional-compile-remove(spotlight) */\n          spotlightedParticipantUserIds={spotlightedParticipants}\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          /* @conditional-compile-remove(spotlight) */\n          onStartSpotlight={onStartSpotlight}\n          /* @conditional-compile-remove(spotlight) */\n          onStopSpotlight={onStopSpotlight}\n          /* @conditional-compile-remove(reaction) */\n          reactionResources={reactionResources}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteVideoStreamView,\n      remoteVideoViewOptions,\n      localParticipant,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      drawerMenuHostId,\n      remoteVideoTileMenu,\n      selectedScalingModeState,\n      pinnedParticipants,\n      onPinParticipant,\n      onUnpinParticipant,\n      toggleAnnouncerString,\n      onUpdateScalingMode,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      /* @conditional-compile-remove(reaction) */ reactionResources\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      participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n    ? localScreenShareStreamComponent\n    : undefined;\n\n  const layoutProps = useMemo<LayoutProps>(\n    () => ({\n      remoteParticipants,\n      localParticipant,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n      localVideoComponent: localVideoTile,\n      parentWidth: containerWidth,\n      parentHeight: containerHeight,\n      pinnedParticipantUserIds: pinnedParticipants,\n      /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n      /* @conditional-compile-remove(click-to-call) */ localVideoTileSize,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants\n    }),\n    [\n      remoteParticipants,\n      localParticipant,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      pinnedParticipants,\n      /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n      /* @conditional-compile-remove(click-to-call) */ localVideoTileSize,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipants\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    /* @conditional-compile-remove(large-gallery) */\n    if (layout === 'largeGallery') {\n      return <LargeGalleryLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);\n\n  return (\n    <div\n      // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n      id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n    >\n      {videoGalleryLayout}\n      <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { Announcer } from './Announcer';\nimport { useEffect } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n  BaseCustomStyles,\n  OnRenderAvatarCallback,\n  VideoGalleryLocalParticipant,\n  VideoGalleryRemoteParticipant,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '../types';\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';\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/* @conditional-compile-remove(large-gallery) */\nimport { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';\nimport { LayoutProps } from './VideoGallery/Layout';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n\n/**\n * @private\n * Styles to disable the selectivity of a text in video gallery\n */\nexport const unselectable = {\n  '-webkit-user-select': 'none',\n  '-webkit-touch-callout': 'none',\n  '-moz-user-select': 'none',\n  '-ms-user-select': 'none',\n  'user-select': 'none'\n};\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n/**\n * @private\n * Default remote video tile menu options\n */\nexport const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {\n  kind: 'contextual'\n};\n\n/**\n * @private\n * Maximum number of remote video tiles that can be pinned\n */\nexport const MAX_PINNED_REMOTE_VIDEO_TILES = 4;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n  /** String to notify that local user is sharing their screen */\n  screenIsBeingSharedMessage: string;\n  /** String to show when remote screen share stream is loading */\n  screenShareLoadingMessage: string;\n  /** String 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  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n  fitRemoteParticipantToFrame: string;\n  /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n  fillRemoteParticipantFrame: string;\n  /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n  pinParticipantForMe: string;\n  /** Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile */\n  unpinParticipantForMe: string;\n  /** Aria label for pin participant menu item of remote participant's video tile */\n  pinParticipantMenuItemAriaLabel: string;\n  /** Aria label for unpin participant menu item of remote participant's video tile */\n  unpinParticipantMenuItemAriaLabel: string;\n  /** Aria label to announce when remote participant's video tile is pinned */\n  pinnedParticipantAnnouncementAriaLabel: string;\n  /** Aria label to announce when remote participant's video tile is unpinned */\n  unpinnedParticipantAnnouncementAriaLabel: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile */\n  startSpotlightVideoTileMenuLabel: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */\n  addSpotlightVideoTileMenuLabel: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu title for start spotlight menu item when spotlight limit is reached */\n  spotlightLimitReachedMenuTitle: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */\n  stopSpotlightVideoTileMenuLabel: string;\n  /* @conditional-compile-remove(spotlight) */\n  /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */\n  stopSpotlightOnSelfVideoTileMenuLabel: 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(large-gallery) */ 'largeGallery'\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 * @public\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 * @public\n */\nexport type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n  /**\n   * Allows users to pass an object containing custom CSS styles for the gallery container.\n   *\n   * @Example\n   * ```\n   * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n   * ```\n   */\n  styles?: VideoGalleryStyles;\n  /** Layout of the video tiles. */\n  layout?: VideoGalleryLayout;\n  /** Local video particpant */\n  localParticipant: VideoGalleryLocalParticipant;\n  /** List of remote video particpants */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n  dominantSpeakers?: string[];\n  /** Local video view options */\n  localVideoViewOptions?: VideoStreamOptions;\n  /** Remote videos view options */\n  remoteVideoViewOptions?: VideoStreamOptions;\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to render the local video tile*/\n  onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to render a remote video tile */\n  onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n  /**\n   * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead\n   *\n   * Callback to dispose a remote video stream view\n   */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;\n  /** Callback to dispose a remote screen share stream view */\n  onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;\n  /** Callback to render a particpant avatar */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Whether to display a mute icon beside the user's display name.\n   * @defaultValue `true`\n   */\n  showMuteIndicator?: boolean;\n  /** Optional strings to override in component  */\n  strings?: Partial<VideoGalleryStrings>;\n  /**\n   * Maximum number of participant remote video streams that is rendered.\n   * @defaultValue 4\n   */\n  maxRemoteVideoStreams?: number;\n  /**\n   * Camera control information for button to switch cameras.\n   */\n  localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n  /**\n   * List of pinned participant userIds.\n   */\n  pinnedParticipants?: string[];\n  /**\n   * This callback will be called when a participant video tile is pinned.\n   */\n  onPinParticipant?: (userId: string) => void;\n  /**\n   * This callback will be called when a participant video tile is un-pinned.\n   */\n  onUnpinParticipant?: (userId: string) => void;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * List of spotlighted participant userIds.\n   */\n  spotlightedParticipants?: string[];\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * This callback will be called when spotlight is started for participant video tiles.\n   */\n  onStartSpotlight?: (userIds?: string[]) => Promise<void>;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * This callback will be called when spotlight is stopped for participant video tiles.\n   */\n  onStopSpotlight?: (userIds?: string[]) => Promise<void>;\n  /* @conditional-compile-remove(spotlight) */\n  /**\n   * Maximum participants that can be spotlighted\n   */\n  maxParticipantsToSpotlight?: number;\n  /**\n   * Options for showing the remote video tile menu.\n   *\n   * @defaultValue \\{ kind: 'contextual' \\}\n   */\n  remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;\n  /* @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  /* @conditional-compile-remove(reaction) */\n  /**\n   * Reaction resources for like, heart, laugh, applause and surprised.\n   * @beta\n   */\n  reactionResources?: ReactionResources;\n}\n\n/**\n * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileContextualMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'contextual';\n}\n\n/**\n * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoTileDrawerMenuProps {\n  /**\n   * The menu property kind\n   */\n  kind: 'drawer';\n  /**\n   * The optional id property provided on an element that the drawer menu should render within when a\n   * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will\n   * render within the VideoGallery component.\n   */\n  hostId?: string;\n}\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipants = [],\n    localVideoViewOptions,\n    remoteVideoViewOptions,\n    dominantSpeakers,\n    onRenderLocalVideoTile,\n    onRenderRemoteVideoTile,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteScreenShareStreamView,\n    onDisposeRemoteVideoStreamView,\n    styles,\n    layout,\n    onRenderAvatar,\n    showMuteIndicator,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n    showCameraSwitcherInLocalPreview,\n    localVideoCameraCycleButtonProps,\n    onPinParticipant: onPinParticipantHandler,\n    onUnpinParticipant: onUnpinParticipantHandler,\n    remoteVideoTileMenu = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,\n    /* @conditional-compile-remove(vertical-gallery) */\n    overflowGalleryPosition = 'horizontalBottom',\n    /* @conditional-compile-remove(rooms) */\n    localVideoTileSize = 'followDeviceOrientation',\n    /* @conditional-compile-remove(spotlight) */\n    spotlightedParticipants,\n    /* @conditional-compile-remove(spotlight) */\n    onStartSpotlight,\n    /* @conditional-compile-remove(spotlight) */\n    onStopSpotlight,\n    /* @conditional-compile-remove(spotlight) */\n    maxParticipantsToSpotlight,\n    /* @conditional-compile-remove(reaction) */\n    reactionResources\n  } = props;\n\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.videoGallery;\n  const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n  const drawerMenuHostIdFromProp =\n    remoteVideoTileMenu && remoteVideoTileMenu.kind === 'drawer'\n      ? (remoteVideoTileMenu as VideoTileDrawerMenuProps).hostId\n      : undefined;\n  const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);\n\n  const localTileNotInGrid =\n    (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&\n    remoteParticipants.length > 0;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n  const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n  const [selectedScalingModeState, setselectedScalingModeState] = React.useState<Record<string, VideoStreamOptions>>(\n    {}\n  );\n\n  const onUpdateScalingMode = useCallback(\n    (remoteUserId: string, scalingMode: ViewScalingMode) => {\n      setselectedScalingModeState((current) => ({\n        ...current,\n        [remoteUserId]: {\n          scalingMode,\n          isMirrored: remoteVideoViewOptions?.isMirrored\n        }\n      }));\n    },\n    [remoteVideoViewOptions?.isMirrored]\n  );\n  useEffect(() => {\n    props.pinnedParticipants?.forEach((pinParticipant) => {\n      if (!props.remoteParticipants?.find((t) => t.userId === pinParticipant)) {\n        // warning will be logged in the console when invalid participant id is passed in pinned participants\n        console.warn('Invalid pinned participant UserId :' + pinParticipant);\n      }\n    });\n  }, [props.pinnedParticipants, props.remoteParticipants]);\n  // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n  const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n  const showLocalVideoTileLabel =\n    !(\n      (localTileNotInGrid && isNarrow) ||\n      /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===\n        '9:16'\n    ) || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default';\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    /* @conditional-compile-remove(spotlight) */\n    const isSpotlighted = !!localParticipant.spotlight;\n\n    const localVideoTileStyles = concatStyleSets(\n      localTileNotInGrid ? floatingLocalVideoTileStyle : {},\n      {\n        root: { borderRadius: theme.effects.roundedCorner4 }\n      },\n      styles?.localVideo\n    );\n\n    const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n    const showDisplayNameTrampoline = (): string => {\n      /* @conditional-compile-remove(gallery-layouts) */\n      return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;\n      return isNarrow ? '' : strings.localVideoLabel;\n    };\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={showDisplayNameTrampoline()}\n          initialsName={initialsName}\n          localVideoViewOptions={localVideoViewOptions}\n          onRenderAvatar={onRenderAvatar}\n          showLabel={showLocalVideoTileLabel}\n          showMuteIndicator={showMuteIndicator}\n          showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n          localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n          localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n          localVideoSelectedDescription={strings.localVideoSelectedDescription}\n          styles={localVideoTileStyles}\n          /* @conditional-compile-remove(raise-hand) */\n          raisedHand={localParticipant.raisedHand}\n          /* @conditional-compile-remove(reaction) */\n          reaction={localParticipant.reaction}\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          /* @conditional-compile-remove(reaction) */\n          reactionResources={reactionResources}\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    /* @conditional-compile-remove(gallery-layouts) */\n    layout,\n    showLocalVideoTileLabel,\n    /* @conditional-compile-remove(reaction) */\n    reactionResources\n  ]);\n\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  const onUnpinParticipant = useCallback(\n    (userId: string) => {\n      setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n      onUnpinParticipantHandler?.(userId);\n    },\n    [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n  );\n\n  const [announcementString, setAnnouncementString] = React.useState<string>('');\n  /**\n   * sets the announcement string for VideoGallery actions so that the screenreader will trigger\n   */\n  const toggleAnnouncerString = useCallback(\n    (announcement) => {\n      setAnnouncementString(announcement);\n      /**\n       * Clears the announcer string after VideoGallery action allowing it to be re-announced.\n       */\n      setTimeout(() => {\n        setAnnouncementString('');\n      }, 3000);\n    },\n    [setAnnouncementString]\n  );\n\n  const defaultOnRenderVideoTile = useCallback(\n    (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n      const remoteVideoStream = participant.videoStream;\n      const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;\n      let isPinned = pinnedParticipants?.includes(participant.userId);\n      /* @conditional-compile-remove(spotlight) */\n      const isSpotlighted = !!participant.spotlight;\n      /* @conditional-compile-remove(spotlight) */\n      isPinned = isSpotlighted ? false : isPinned;\n\n      const createViewOptions = (): VideoStreamOptions | undefined => {\n        if (selectedScalingMode) {\n          return selectedScalingMode;\n        }\n        return remoteVideoStream?.streamSize &&\n          remoteVideoStream.streamSize?.height > remoteVideoStream.streamSize?.width\n          ? ({\n              scalingMode: 'Fit',\n              isMirrored: remoteVideoViewOptions?.isMirrored\n            } as VideoStreamOptions)\n          : remoteVideoViewOptions;\n      };\n\n      return (\n        <_RemoteVideoTile\n          key={participant.userId}\n          userId={participant.userId}\n          remoteParticipant={participant}\n          onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n          onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined}\n          isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n          isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n          renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n          remoteVideoViewOptions={createViewOptions()}\n          onRenderAvatar={onRenderAvatar}\n          showMuteIndicator={showMuteIndicator}\n          strings={strings}\n          /* @conditional-compile-remove(PSTN-calls) */\n          participantState={participant.state}\n          menuKind={\n            participant.userId === localParticipant.userId\n              ? undefined\n              : remoteVideoTileMenu\n              ? remoteVideoTileMenu.kind === 'drawer'\n                ? 'drawer'\n                : 'contextual'\n              : undefined\n          }\n          drawerMenuHostId={drawerMenuHostId}\n          onPinParticipant={onPinParticipant}\n          onUnpinParticipant={onUnpinParticipant}\n          onUpdateScalingMode={onUpdateScalingMode}\n          isPinned={isPinned}\n          disablePinMenuItem={pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES}\n          toggleAnnouncerString={toggleAnnouncerString}\n          /* @conditional-compile-remove(spotlight) */\n          spotlightedParticipantUserIds={spotlightedParticipants}\n          /* @conditional-compile-remove(spotlight) */\n          isSpotlighted={isSpotlighted}\n          /* @conditional-compile-remove(spotlight) */\n          onStartSpotlight={onStartSpotlight}\n          /* @conditional-compile-remove(spotlight) */\n          onStopSpotlight={onStopSpotlight}\n          /* @conditional-compile-remove(spotlight) */\n          maxParticipantsToSpotlight={maxParticipantsToSpotlight}\n          /* @conditional-compile-remove(reaction) */\n          reactionResources={reactionResources}\n        />\n      );\n    },\n    [\n      onCreateRemoteStreamView,\n      onDisposeRemoteVideoStreamView,\n      remoteVideoViewOptions,\n      localParticipant,\n      onRenderAvatar,\n      showMuteIndicator,\n      strings,\n      drawerMenuHostId,\n      remoteVideoTileMenu,\n      selectedScalingModeState,\n      pinnedParticipants,\n      onPinParticipant,\n      onUnpinParticipant,\n      toggleAnnouncerString,\n      onUpdateScalingMode,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,\n      /* @conditional-compile-remove(spotlight) */ onStartSpotlight,\n      /* @conditional-compile-remove(spotlight) */ onStopSpotlight,\n      /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,\n      /* @conditional-compile-remove(reaction) */ reactionResources\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      participantVideoScalingMode={selectedScalingModeState[screenShareParticipant.userId]}\n    />\n  );\n\n  const screenShareComponent = remoteScreenShareComponent\n    ? remoteScreenShareComponent\n    : localParticipant.isScreenSharingOn\n    ? localScreenShareStreamComponent\n    : undefined;\n\n  const layoutProps = useMemo<LayoutProps>(\n    () => ({\n      remoteParticipants,\n      localParticipant,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n      localVideoComponent: localVideoTile,\n      parentWidth: containerWidth,\n      parentHeight: containerHeight,\n      pinnedParticipantUserIds: pinnedParticipants,\n      /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n      /* @conditional-compile-remove(click-to-call) */ localVideoTileSize,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants\n    }),\n    [\n      remoteParticipants,\n      localParticipant,\n      screenShareComponent,\n      showCameraSwitcherInLocalPreview,\n      maxRemoteVideoStreams,\n      dominantSpeakers,\n      styles,\n      localVideoTile,\n      containerWidth,\n      containerHeight,\n      onRenderRemoteVideoTile,\n      defaultOnRenderVideoTile,\n      pinnedParticipants,\n      /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n      /* @conditional-compile-remove(click-to-call) */ localVideoTileSize,\n      /* @conditional-compile-remove(spotlight) */ spotlightedParticipants\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    /* @conditional-compile-remove(large-gallery) */\n    if (layout === 'largeGallery') {\n      return <LargeGalleryLayout {...layoutProps} />;\n    }\n    return <DefaultLayout {...layoutProps} />;\n  }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);\n\n  return (\n    <div\n      // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props\n      id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}\n      data-ui-id={ids.videoGallery}\n      ref={containerRef}\n      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}\n    >\n      {videoGalleryLayout}\n      <Announcer announcementString={announcementString} ariaLive=\"polite\" />\n    </div>\n  );\n};\n"]}

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

@@ -1,6 +1,5 @@
-import { IIconProps, IStyle } from '@fluentui/react';
+import { IIconProps, IStyle, PartialTheme } from '@fluentui/react';
 import { IOverlayStyles } from '@fluentui/react';
-import { ChatTheme } from '../../theming/themes';
 /**
  * @private
  */
@@ -12,7 +11,7 @@ export declare const downloadIcon: IIconProps;
 /**
  * @private
  */
-export declare const overlayStyles: (theme: ChatTheme) => IOverlayStyles;
+export declare const overlayStyles: (theme: PartialTheme) => IOverlayStyles;
 /**
  * @private
  */
@@ -32,7 +31,7 @@ export declare const titleBarContainerStyle: IStyle;
 /**
  * @private
  */
-export declare const titleStyle: (theme: ChatTheme) => IStyle;
+export declare const titleStyle: (theme: PartialTheme) => IStyle;
 /**
  * @private
  */
@@ -52,17 +51,17 @@ export declare const normalImageStyle: IStyle;
 /**
  * @private
  */
-export declare const brokenImageStyle: (theme: ChatTheme) => IStyle;
+export declare const brokenImageStyle: (theme: PartialTheme) => IStyle;
 /**
  * @private
  */
-export declare const closeButtonStyles: (theme: ChatTheme) => IStyle;
+export declare const closeButtonStyles: (theme: PartialTheme) => IStyle;
 /**
  * @private
  */
-export declare const downloadButtonStyle: (theme: ChatTheme) => IStyle;
+export declare const downloadButtonStyle: IStyle;
 /**
  * @private
  */
-export declare const smallDownloadButtonContainerStyle: (theme: ChatTheme) => IStyle;
+export declare const smallDownloadButtonContainerStyle: (theme: PartialTheme) => IStyle;
 //# sourceMappingURL=ImageOverlay.style.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.js

@@ -15,10 +15,11 @@ export const downloadIcon = {
  * @private
  */
 export const overlayStyles = (theme) => {
+    var _a;
     return {
         root: {
-            background: theme.chatPalette.modalOverlayBlack,
-            opacity: '0.85'
+            background: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.white,
+            opacity: '0.95'
         }
     };
 };
@@ -67,14 +68,14 @@ export const titleBarContainerStyle = {
     alignContent: 'center',
     alignItems: 'center'
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const titleStyle = (theme) => {
+    var _a;
     return {
         paddingLeft: '0.5rem',
-        color: theme.chatPalette.modalTitleWhite,
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         fontFamily: 'inherit',
         fontSize: '0.875rem',
         fontStyle: 'normal',
@@ -122,77 +123,60 @@ export const normalImageStyle = {
     maxHeight: '100%',
     maxWidth: '100%'
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const brokenImageStyle = (theme) => {
+    var _a;
     return {
-        color: theme.chatPalette.modalTitleWhite
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black
     };
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const closeButtonStyles = (theme) => {
+    var _a, _b, _c;
     return {
-        color: theme.chatPalette.modalTitleWhite,
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
         },
         ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
         }
     };
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
-export const downloadButtonStyle = (theme) => {
-    return {
-        margin: '0 0.5rem',
-        height: '32px',
-        borderWidth: '1px',
-        fontSize: '0.875rem', // 14px
-        fontWeight: 600,
-        padding: '0.38rem 0.75rem',
-        borderRadius: '4px',
-        backgroundColor: theme.chatPalette.modalButtonBackground,
-        color: theme.chatPalette.modalTitleWhite,
-        whiteSpace: 'nowrap',
-        ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
-        },
-        ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
-        },
-        '@media (max-width: 25rem)': {
-            display: 'none'
-        }
-    };
+export const downloadButtonStyle = {
+    margin: '0 0.5rem',
+    height: '32px',
+    borderWidth: '1px',
+    fontSize: '0.875rem', // 14px
+    fontWeight: 600,
+    padding: '0.38rem 0.75rem',
+    borderRadius: '4px',
+    whiteSpace: 'nowrap',
+    '@media (max-width: 25rem)': {
+        display: 'none'
+    }
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const smallDownloadButtonContainerStyle = (theme) => {
+    var _a, _b, _c;
     return {
         marginRight: '0.5rem',
-        color: theme.chatPalette.modalTitleWhite,
         whiteSpace: 'nowrap',
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
         },
         ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
         },
         '@media (min-width: 25rem)': {
             display: 'none'

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

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.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-overlay) */\nimport { IOverlayStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\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-overlay) */\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-overlay) */\n/**\n * @private\n */\nexport const titleStyle = (theme: ChatTheme): IStyle => {\n  return {\n    paddingLeft: '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: '1rem 2rem 3rem 2rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '0rem 1rem 2rem 1rem'\n  }\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-overlay) */\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-overlay) */\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-overlay) */\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-overlay) */\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"]}
+{"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle, PartialTheme } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport { IOverlayStyles } 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/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const overlayStyles = (theme: PartialTheme): IOverlayStyles => {\n  return {\n    root: {\n      background: theme.palette?.white,\n      opacity: '0.95'\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: PartialTheme): IStyle => {\n  return {\n    paddingLeft: '0.5rem',\n    color: theme.palette?.black,\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: '1rem 2rem 3rem 2rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '0rem 1rem 2rem 1rem'\n  }\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: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black\n  };\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle: IStyle = {\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  whiteSpace: 'nowrap',\n  '@media (max-width: 25rem)': {\n    display: 'none'\n  }\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: PartialTheme): IStyle => {\n  return {\n    marginRight: '0.5rem',\n    whiteSpace: 'nowrap',\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    },\n    '@media (min-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "Failed to join call.",
         "failedToJoinCallInvalidMeetingLink": "Unable to join Meeting. Invalid Link.",
         "cameraFrozenForRemoteParticipants": "Users in the call are having issues seeing your video. Please check your devices and network.",
-        "unableToStartVideoEffect": "Unable to apply video effect."
+        "unableToStartVideoEffect": "Unable to apply video effect.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Cannot start spotlight on participant(s) because the maximum number of participants are already spotlighted."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "You are sharing your screen",
@@ -221,6 +222,7 @@
         "unpinnedParticipantAnnouncementAriaLabel": "Unpinned {participantName}",
         "startSpotlightVideoTileMenuLabel": "Spotlight for everyone",
         "addSpotlightVideoTileMenuLabel": "Add spotlight",
+        "spotlightLimitReachedMenuTitle": "Spotlight limit reached",
         "stopSpotlightVideoTileMenuLabel": "Stop spotlighting",
         "stopSpotlightOnSelfVideoTileMenuLabel": "Exit spotlight"
     },