@azure/communication-react 1.14.0-beta.2 → 1.14.1-alpha-202403210013

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

@@ -8,7 +8,13 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs
  */
 export const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString } = props;
+    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, 
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = [], 
+    /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
+    /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ myUserId } = props;
     const scalingMode = useMemo(() => {
         var _a;
         return (_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
@@ -28,12 +34,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                     text: strings.unpinParticipantForMe,
                     iconProps: {
                         iconName: 'UnpinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onUnpinParticipant(participant.userId);
@@ -55,23 +56,58 @@ export const useVideoTileContextualMenuProps = (props) => {
                     text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,
                     iconProps: {
                         iconName: 'PinParticipant',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onPinParticipant(participant.userId);
                         pinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(pinActionString));
                     },
                     'data-ui-id': 'video-tile-pin-participant-button',
-                    disabled: disablePinMenuItem,
+                    disabled: disablePinMenuItem || /* @conditional-compile-remove(spotlight) */ isSpotlighted,
                     ariaLabel: pinActionString
                 });
             }
         }
+        /* @conditional-compile-remove(spotlight) */
+        if (isSpotlighted) {
+            const stopSpotlightMenuLabel = myUserId === participant.userId
+                ? strings === null || strings === void 0 ? void 0 : strings.stopSpotlightOnSelfVideoTileMenuLabel
+                : strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel;
+            if (onStopSpotlight && participant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
+                items.push({
+                    key: 'stopSpotlight',
+                    text: stopSpotlightMenuLabel,
+                    iconProps: {
+                        iconName: 'StopSpotlightContextualMenuItem',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => onStopSpotlight([participant.userId]),
+                    ariaLabel: strings.stopSpotlightVideoTileMenuLabel
+                });
+            }
+        }
+        else {
+            const startSpotlightMenuLabel = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0
+                ? strings === null || strings === void 0 ? void 0 : strings.addSpotlightVideoTileMenuLabel
+                : strings === null || strings === void 0 ? void 0 : strings.startSpotlightVideoTileMenuLabel;
+            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
+                ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
+                : false;
+            if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {
+                items.push({
+                    key: 'startSpotlight',
+                    text: startSpotlightMenuLabel,
+                    iconProps: {
+                        iconName: 'StartSpotlightContextualMenuItem',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => onStartSpotlight([participant.userId]),
+                    ariaLabel: startSpotlightMenuLabel,
+                    disabled: maxSpotlightedParticipantsReached,
+                    title: maxSpotlightedParticipantsReached ? strings === null || strings === void 0 ? void 0 : strings.spotlightLimitReachedMenuTitle : undefined
+                });
+            }
+        }
         if (scalingMode) {
             if (scalingMode === 'Crop' && (strings === null || strings === void 0 ? void 0 : strings.fitRemoteParticipantToFrame)) {
                 items.push({
@@ -79,12 +115,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                     text: strings.fitRemoteParticipantToFrame,
                     iconProps: {
                         iconName: 'VideoTileScaleFit',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Fit');
@@ -100,12 +131,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                     text: strings.fillRemoteParticipantFrame,
                     iconProps: {
                         iconName: 'VideoTileScaleFill',
-                        styles: {
-                            root: {
-                                lineHeight: '1rem',
-                                textAlign: 'center'
-                            }
-                        }
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
                         onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Crop');
@@ -119,14 +145,26 @@ export const useVideoTileContextualMenuProps = (props) => {
         if (items.length === 0) {
             return undefined;
         }
-        return {
-            items,
-            styles: {},
-            calloutProps: {
-                preventDismissOnEvent
-            }
-        };
-    }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, participant.userId, participant.displayName, disablePinMenuItem, toggleAnnouncerString]);
+        return { items, styles: {}, calloutProps: { preventDismissOnEvent } };
+    }, [
+        scalingMode,
+        strings,
+        view,
+        isPinned,
+        onPinParticipant,
+        onUnpinParticipant,
+        onUpdateScalingMode,
+        participant.userId,
+        participant.displayName,
+        disablePinMenuItem,
+        toggleAnnouncerString,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(spotlight) */ myUserId
+    ]);
     return contextualMenuProps;
 };
 //# sourceMappingURL=useVideoTileContextualMenuProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  participant: VideoGalleryParticipant;\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  };\n  view?: {\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\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}): IContextualMenuProps | undefined => {\n  const {\n    participant,\n    view,\n    strings,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    onUpdateScalingMode,\n    disablePinMenuItem,\n    toggleAnnouncerString\n  } = props;\n  const scalingMode = useMemo(() => {\n    return props.participant.videoStream?.scalingMode;\n  }, [props.participant.videoStream?.scalingMode]);\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        let unpinActionString: string | undefined = undefined;\n        if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUnpinParticipant(participant.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 && participant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: participant.displayName\n          });\n        }\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onPinParticipant(participant.userId);\n            pinActionString && toggleAnnouncerString?.(pinActionString);\n          },\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem,\n          ariaLabel: pinActionString\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: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.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: {\n              root: {\n                lineHeight: '1rem',\n                textAlign: 'center'\n              }\n            }\n          },\n          onClick: () => {\n            onUpdateScalingMode?.(participant.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    return {\n      items,\n      styles: {},\n      calloutProps: {\n        preventDismissOnEvent\n      }\n    };\n  }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, participant.userId, participant.displayName, disablePinMenuItem, toggleAnnouncerString]);\n  return contextualMenuProps;\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 { VideoGalleryParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  participant: VideoGalleryParticipant;\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    stopSpotlightOnSelfVideoTileMenuLabel?: 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  /* @conditional-compile-remove(spotlight) */\n  myUserId?: string;\n}): IContextualMenuProps | undefined => {\n  const {\n    participant,\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    /* @conditional-compile-remove(spotlight) */ myUserId\n  } = props;\n  const scalingMode = useMemo(() => {\n    return props.participant.videoStream?.scalingMode;\n  }, [props.participant.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 && participant.displayName) {\n          unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n            participantName: participant.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(participant.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 && participant.displayName) {\n          pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n            participantName: participant.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(participant.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      const stopSpotlightMenuLabel =\n        myUserId === participant.userId\n          ? strings?.stopSpotlightOnSelfVideoTileMenuLabel\n          : strings?.stopSpotlightVideoTileMenuLabel;\n      if (onStopSpotlight && participant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n        items.push({\n          key: 'stopSpotlight',\n          text: stopSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StopSpotlightContextualMenuItem',\n            styles: { root: { lineHeight: 0 } }\n          },\n          onClick: () => onStopSpotlight([participant.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 && participant.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([participant.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?.(participant.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?.(participant.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    participant.userId,\n    participant.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    /* @conditional-compile-remove(spotlight) */ myUserId\n  ]);\n\n  return contextualMenuProps;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowGalleryUtils.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,yCAAgC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,0DAA0D,CAAC;AAClH,OAAO,EAAE,oCAAoC,EAAE,8BAA8B,EAAE,MAAM,wDAAwD,CAAC;AAE9I;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,IAKlD,EAAU,EAAE;IACX,MAAM,EACJ,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACZ,GAAG,IAAI,CAAC;IACT,MAAM,aAAa,GAAG,cAAc,CAAC,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;IACzG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE,CAAC;QACpD,OAAO,2BAA2B,CAAC;IACrC,CAAC;IACD,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,IAMhD,EAAU,EAAE;IACX,MAAM,EACJ,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACR,GAAG,IAAI,CAAC;IACT,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS,CAAC,CAAC;IAC7I,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAE5D;;;;;;;;;;;;;;;;;;;OAmBG;IAEH,MAAM,8BAA8B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC;IACtH,iFAAiF;IACjF,IAAI,gBAAgB,IAAI,8BAA8B,EAAE,CAAC;QACvD,OAAO,8BAA8B,CAAC;IACxC,CAAC;IAED;;;;;OAKG;IACH,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,GAAG,CAAC,GAAG,WAAW,CAAC;IAE1E;;;;;OAKG;IACH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';\nimport { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n *\n * @private\n */\nexport const calculateHorizontalChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerWidth: number;\n  gapWidthRem: number;\n  buttonWidthRem: number;\n}): number => {\n  const {\n    numberOfChildren,\n    containerWidth,\n    buttonWidthRem,\n    gapWidthRem\n  } = args;\n  const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);\n  const gapWidth = convertRemToPx(gapWidthRem);\n\n  /** First check how many children can fit in containerWidth.\n   *    __________________________________\n   *   |                ||                |\n   *   |                ||                |\n   *   |________________||________________|\n   *   <-----------containerWidth--------->\n   *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n   */\n  const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));\n  // If all children fit then return numberOfChildrenInContainer\n  if (numberOfChildren <= numberOfChildrenInContainer) {\n    return numberOfChildrenInContainer;\n  }\n  const buttonWidth = convertRemToPx(buttonWidthRem);\n\n  /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n   * containerWidth to compute childrenSpace\n   *   <-----------containerWidth--------->\n   *    __________________________________\n   *   | ||             ||             || |\n   *   |<||             ||             ||>|\n   *   |_||_____________||_____________||_|\n   *       <-------childrenSpace------>\n   */\n  const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;\n  // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n  // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n  return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);\n};\n\n/**\n * Helper function to find the number of children for the VerticalGallery on each page.\n *\n * @private\n */\nexport const calculateVerticalChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerHeight: number;\n  gapHeightRem: number;\n  controlBarHeight: number;\n  isShort: boolean;\n}): number => {\n  const {\n    numberOfChildren,\n    containerHeight,\n    gapHeightRem,\n    controlBarHeight,\n    isShort\n  } = args;\n  const childMinHeightPx = convertRemToPx(isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);\n  const gapHeightPx = convertRemToPx(gapHeightRem);\n  const controlBarHeightPx = convertRemToPx(controlBarHeight);\n\n  /** First check how many children can fit in containerHeight.\n   *\n   *   _________________\n   *   |                |\n   *   |                |\n   *   |________________|\n   *    _________________\n   *   |                |\n   *   |                |\n   *   |________________|\n   *\n   *      <   n/m   >\n   *\n   * number of children = container height - (2* gap height + button height) / childMinHeight\n   *\n   * we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them\n   * to fill in the space as much as possible\n   *\n   * First we will find the max number of children without any controls we can fit.\n   */\n\n  const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));\n  // if all of the children fit in the container just return the number of children\n  if (numberOfChildren <= maxNumberOfChildrenInContainer) {\n    return maxNumberOfChildrenInContainer;\n  }\n\n  /**\n   * For the pagination we know the container height, the height of the button bar and the 2 times the gap\n   * height, top tile and bottom tile above control bar. So the child space is calculated as:\n   *\n   *      space = height - controlbar - (2 * gap)\n   */\n  const childSpace = containerHeight - controlBarHeightPx - 2 * gapHeightPx;\n\n  /**\n   * Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.\n   * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.\n   *\n   * We want to always return at least one video tile if there are children present.So we take the max.\n   */\n  return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);\n};"]}
+{"version":3,"file":"OverflowGalleryUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,yCAAgC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,0DAA0D,CAAC;AAClH,OAAO,EACL,oCAAoC,EACpC,8BAA8B,EAC/B,MAAM,wDAAwD,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,IAKlD,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAE/E,MAAM,aAAa,GAAG,cAAc,CAAC,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;IACzG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE,CAAC;QACpD,OAAO,2BAA2B,CAAC;IACrC,CAAC;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,IAMhD,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAE5F,MAAM,gBAAgB,GAAG,cAAc,CACrC,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS,CACpG,CAAC;IACF,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAE5D;;;;;;;;;;;;;;;;;;;OAmBG;IAEH,MAAM,8BAA8B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC;IACtH,iFAAiF;IACjF,IAAI,gBAAgB,IAAI,8BAA8B,EAAE,CAAC;QACvD,OAAO,8BAA8B,CAAC;IACxC,CAAC;IAED;;;;;OAKG;IACH,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,GAAG,CAAC,GAAG,WAAW,CAAC;IAE1E;;;;;OAKG;IACH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';\nimport {\n  SHORT_VERTICAL_GALLERY_TILE_SIZE_REM,\n  VERTICAL_GALLERY_TILE_SIZE_REM\n} from '../styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n *\n * @private\n */\nexport const calculateHorizontalChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerWidth: number;\n  gapWidthRem: number;\n  buttonWidthRem: number;\n}): number => {\n  const { numberOfChildren, containerWidth, buttonWidthRem, gapWidthRem } = args;\n\n  const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);\n  const gapWidth = convertRemToPx(gapWidthRem);\n\n  /** First check how many children can fit in containerWidth.\n   *    __________________________________\n   *   |                ||                |\n   *   |                ||                |\n   *   |________________||________________|\n   *   <-----------containerWidth--------->\n   *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n   */\n  const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));\n  // If all children fit then return numberOfChildrenInContainer\n  if (numberOfChildren <= numberOfChildrenInContainer) {\n    return numberOfChildrenInContainer;\n  }\n\n  const buttonWidth = convertRemToPx(buttonWidthRem);\n\n  /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n   * containerWidth to compute childrenSpace\n   *   <-----------containerWidth--------->\n   *    __________________________________\n   *   | ||             ||             || |\n   *   |<||             ||             ||>|\n   *   |_||_____________||_____________||_|\n   *       <-------childrenSpace------>\n   */\n  const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;\n  // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n  // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n  return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);\n};\n\n/**\n * Helper function to find the number of children for the VerticalGallery on each page.\n *\n * @private\n */\nexport const calculateVerticalChildrenPerPage = (args: {\n  numberOfChildren: number;\n  containerHeight: number;\n  gapHeightRem: number;\n  controlBarHeight: number;\n  isShort: boolean;\n}): number => {\n  const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight, isShort } = args;\n\n  const childMinHeightPx = convertRemToPx(\n    isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight\n  );\n  const gapHeightPx = convertRemToPx(gapHeightRem);\n  const controlBarHeightPx = convertRemToPx(controlBarHeight);\n\n  /** First check how many children can fit in containerHeight.\n   *\n   *   _________________\n   *   |                |\n   *   |                |\n   *   |________________|\n   *    _________________\n   *   |                |\n   *   |                |\n   *   |________________|\n   *\n   *      <   n/m   >\n   *\n   * number of children = container height - (2* gap height + button height) / childMinHeight\n   *\n   * we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them\n   * to fill in the space as much as possible\n   *\n   * First we will find the max number of children without any controls we can fit.\n   */\n\n  const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));\n  // if all of the children fit in the container just return the number of children\n  if (numberOfChildren <= maxNumberOfChildrenInContainer) {\n    return maxNumberOfChildrenInContainer;\n  }\n\n  /**\n   * For the pagination we know the container height, the height of the button bar and the 2 times the gap\n   * height, top tile and bottom tile above control bar. So the child space is calculated as:\n   *\n   *      space = height - controlbar - (2 * gap)\n   */\n  const childSpace = containerHeight - controlBarHeightPx - 2 * gapHeightPx;\n\n  /**\n   * Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.\n   * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.\n   *\n   * We want to always return at least one video tile if there are children present.So we take the max.\n   */\n  return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);\n};\n"]}

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

@@ -1,4 +1,5 @@
 import { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';
+import { ReactionResources } from '../../..';
 import { VideoGalleryLayout } from '../../VideoGallery';
 /**
  * Arguments used to determine a {@link OrganizedParticipantsResult}
@@ -14,6 +15,8 @@ export interface OrganizedParticipantsArgs {
     pinnedParticipantUserIds?: string[];
     layout?: VideoGalleryLayout;
     spotlightedParticipantUserIds?: string[];
+    previousGridParticipants?: VideoGalleryRemoteParticipant[];
+    previousOverflowParticipants?: VideoGalleryRemoteParticipant[];
 }
 /**
  * A result that defines grid participants and overflow gallery participants in the VideoGallery
@@ -27,5 +30,9 @@ export interface OrganizedParticipantsResult {
  * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private
  */
-export declare const useOrganizedParticipants: (args: OrganizedParticipantsArgs) => OrganizedParticipantsResult;
+export declare const useOrganizedParticipants: (props: OrganizedParticipantsArgs) => OrganizedParticipantsResult;
+/**
+ * @private
+ */
+export declare const getEmojiResource: (reactionName: string, reactionResources: ReactionResources) => string | undefined;
 //# sourceMappingURL=videoGalleryLayoutUtils.d.ts.map

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

@@ -1,94 +1,65 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { useCallback, useRef } from 'react';
+import { useRef } from 'react';
 import { smartDominantSpeakerParticipants } from '../../../gallery';
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const DEFAULT_MAX_VIDEO_SREAMS = 4;
-/* @conditional-compile-remove(gallery-layouts) */
 const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
-const _useOrganizedParticipants = (props) => {
-    const visibleGridParticipants = useRef([]);
-    const visibleOverflowGalleryParticipants = useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(gallery-layouts) */
-    layout } = props;
-    const calculateMaxRemoteVideoStreams = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
-        if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
-            return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
-        }
-        else {
-            return maxRemoteVideoStreams;
-        }
-        return maxRemoteVideoStreams;
-    };
-    const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
-    const videoParticipants = remoteParticipants.filter(p => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
-    const participantsToSortTrampoline = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
-        return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
-        return videoParticipants;
-    };
-    visibleGridParticipants.current = pinnedParticipantUserIds.length > 0 || isScreenShareActive ? [] : smartDominantSpeakerParticipants({
-        participants: participantsToSortTrampoline(),
+const getOrganizedParticipants = (props) => {
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, layout, previousGridParticipants = [], previousOverflowParticipants = [] } = props;
+    const maxRemoteVideoStreamsToUse = maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY
+        ? MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY
+        : maxRemoteVideoStreams;
+    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
+    const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const participants = layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;
+    let newGridParticipants = smartDominantSpeakerParticipants({
+        participants: participants,
         dominantSpeakers,
-        lastVisibleParticipants: visibleGridParticipants.current,
+        currentParticipants: previousGridParticipants,
         maxDominantSpeakers: maxRemoteVideoStreamsToUse
     }).slice(0, maxRemoteVideoStreamsToUse);
-    /* @conditional-compile-remove(gallery-layouts) */
-    const dominantSpeakerToGrid = layout === 'speaker' ? dominantSpeakers && dominantSpeakers[0] ? visibleGridParticipants.current.filter(p => p.userId === dominantSpeakers[0]) : [visibleGridParticipants.current[0]] : [];
-    /* @conditional-compile-remove(gallery-layouts) */
+    const dominantSpeakerToGrid = layout === 'speaker'
+        ? dominantSpeakers && dominantSpeakers[0]
+            ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])
+            : [newGridParticipants[0]]
+        : [];
     if (dominantSpeakerToGrid[0]) {
-        visibleGridParticipants.current = dominantSpeakerToGrid;
+        newGridParticipants = dominantSpeakerToGrid;
     }
-    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map(p => p.userId));
-    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
+    const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipantsOrdered.filter(p => p.state === ('Connecting' || 'Ringing'));
+    const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipantsSet = new Set(callingParticipants.map(p => p.userId));
-    visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter(p => !visibleGridParticipantsSet.has(p.userId) && /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+    const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({
+        participants: remoteParticipantsOrdered.filter((p) => !gridParticipantSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
-        lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
+        currentParticipants: previousOverflowParticipants,
         maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
     });
-    const getGridParticipants = useCallback(() => {
-        if (isScreenShareActive) {
-            return [];
-        }
-        // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
-        // we will use the max streams provided to the function to find the max participants that can go in the grid
-        // if there are less participants than max streams then we will use all participants including joining in the grid
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse) : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
-        return visibleGridParticipants.current.length > 0 ? visibleGridParticipants.current : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse);
-    }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);
-    const gridParticipants = getGridParticipants();
-    const getOverflowGalleryRemoteParticipants = useCallback(() => {
-        if (isScreenShareActive) {
-            // If screen sharing is active, assign video and audio participants as overflow gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
-            return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current);
-        }
-        else {
-            // If screen sharing is not active, then assign all video tiles as grid tiles.
-            // If there are no video tiles, then assign audio tiles as grid tiles.
-            // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
-            // overflow should be empty if total participants including calling participants is less than max streams
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current.concat(callingParticipants) : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants) : [];
-            return visibleGridParticipants.current.length > 0 ? visibleOverflowGalleryParticipants.current : visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse);
-        }
-    }, [/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants, isScreenShareActive, maxRemoteVideoStreamsToUse]);
-    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
-    return {
-        gridParticipants,
-        overflowGalleryParticipants: overflowGalleryParticipants
-    };
+    const gridParticipants = getGridParticipants({
+        isScreenShareActive,
+        gridParticipants: newGridParticipants,
+        overflowGalleryParticipants: newOverflowGalleryParticipants,
+        maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+    });
+    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({
+        isScreenShareActive,
+        gridParticipants: newGridParticipants,
+        overflowGalleryParticipants: newOverflowGalleryParticipants,
+        maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+    });
+    return { gridParticipants, overflowGalleryParticipants };
 };
-const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
+/**
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
+ * @private
+ */
+export const useOrganizedParticipants = (props) => {
     var _a, _b;
     // map remote participants by userId
     const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
@@ -96,36 +67,74 @@ const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
         return map;
     }, {});
     const spotlightedParticipantUserIds = (_a = props.spotlightedParticipantUserIds) !== null && _a !== void 0 ? _a : [];
-    // declare focused participant user ids as spotlighted participants user ids followed by
-    // pinned participants user ids
-    const focusedParticipantUserIds = [...new Set(spotlightedParticipantUserIds.concat((_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : []))];
+    const pinnedParticipantUserIds = (_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : [];
+    // declare set of focused participant user ids as spotlighted participants user ids followed by
+    // pinned participants user ids which is deduplicated while maintaining order
+    const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p]));
     // get focused participants from map of remote participants in the order of the user ids
-    const focusedParticipants = [];
-    focusedParticipantUserIds.forEach(id => {
-        const pinnedParticipant = remoteParticipantMap[id];
-        if (pinnedParticipant) {
-            focusedParticipants.push(pinnedParticipant);
-        }
-    });
-    // get unfocused participants by filtering out set of focused participant user ids from all remote participants
-    const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);
-    const unfocusedParticipants = props.remoteParticipants.filter(p => !focusedParticipantUserIdSet.has(p.userId));
+    const focusedParticipants = [...focusedParticipantUserIdSet].map((p) => remoteParticipantMap[p]);
+    const currentGridParticipants = useRef([]);
+    const currentOverflowGalleryParticipants = useRef([]);
+    const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
     const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
-        // if there are pinned participants then we should only consider unpinned participants
-        remoteParticipants: unfocusedParticipants });
-    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
-    if (focusedParticipants.length === 0) {
-        return useOrganizedParticipantsResult;
+        // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0
+        maxRemoteVideoStreams: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxRemoteVideoStreams, remoteParticipants: unfocusedParticipants, previousGridParticipants: currentGridParticipants.current, previousOverflowParticipants: currentOverflowGalleryParticipants.current });
+    const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);
+    currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;
+    currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;
+    return focusedParticipants.length > 0
+        ? {
+            gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
+            overflowGalleryParticipants: props.isScreenShareActive
+                ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+                : useOrganizedParticipantsResult.overflowGalleryParticipants
+        }
+        : useOrganizedParticipantsResult;
+};
+const getGridParticipants = (args) => {
+    if (args.isScreenShareActive) {
+        return [];
+    }
+    // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
+    // we will use the max streams provided to the function to find the max participants that can go in the grid
+    // if there are less participants than max streams then we will use all participants including joining in the grid
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    return args.gridParticipants.length > 0
+        ? args.gridParticipants
+        : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams
+            ? args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams)
+            : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams).concat(args.callingParticipants);
+    return args.gridParticipants.length > 0
+        ? args.gridParticipants
+        : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams);
+};
+const getOverflowGalleryRemoteParticipants = (args) => {
+    if (args.isScreenShareActive) {
+        // If screen sharing is active, assign video and audio participants as overflow gallery participants
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));
+        return args.gridParticipants.concat(args.overflowGalleryParticipants);
+    }
+    else {
+        // If screen sharing is not active, then assign all video tiles as grid tiles.
+        // If there are no video tiles, then assign audio tiles as grid tiles.
+        // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
+        // overflow should be empty if total participants including calling participants is less than max streams
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return args.gridParticipants.length > 0
+            ? args.overflowGalleryParticipants.concat(args.callingParticipants)
+            : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams
+                ? args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams).concat(args.callingParticipants)
+                : [];
+        return args.gridParticipants.length > 0
+            ? args.overflowGalleryParticipants
+            : args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams);
     }
-    return {
-        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
-        overflowGalleryParticipants: props.isScreenShareActive ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants) : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-    };
 };
 const putVideoParticipantsFirst = (remoteParticipants) => {
     const videoParticipants = [];
     const audioParticipants = [];
-    remoteParticipants.forEach(p => {
+    remoteParticipants.forEach((p) => {
         var _a;
         if ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
             videoParticipants.push(p);
@@ -137,11 +146,24 @@ const putVideoParticipantsFirst = (remoteParticipants) => {
     const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
     return remoteParticipantSortedByVideo;
 };
+/* @conditional-compile-remove(reaction) */
 /**
- * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private
  */
-export const useOrganizedParticipants = (args) => {
-    return _useOrganizedParticipantsWithFocusedParticipants(args);
+export const getEmojiResource = (reactionName, reactionResources) => {
+    var _a, _b, _c, _d, _e;
+    switch (reactionName) {
+        case 'like':
+            return (_a = reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.url;
+        case 'heart':
+            return (_b = reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.url;
+        case 'laugh':
+            return (_c = reactionResources.laughReaction) === null || _c === void 0 ? void 0 : _c.url;
+        case 'applause':
+            return (_d = reactionResources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url;
+        case 'surprised':
+            return (_e = reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url;
+    }
+    return '';
 };
 //# sourceMappingURL=videoGalleryLayoutUtils.js.map