@azure/communication-react 1.15.0-beta.2 → 1.15.0

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

@@ -0,0 +1,144 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/* @conditional-compile-remove(reaction) */
+import { Stack, mergeStyles } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+import { videoContainerStyles } from '../styles/VideoTile.styles';
+/* @conditional-compile-remove(reaction) */
+import { getEmojiResource } from './utils/videoGalleryLayoutUtils';
+/* @conditional-compile-remove(reaction) */
+import { generateStartPositionWave, getReactionMovementStyle, getReactionStyleBucket, moveAnimationStyles, opacityAnimationStyles, reactionOverlayStyle, spriteAnimationStyles } from '../styles/ReactionOverlay.style';
+/* @conditional-compile-remove(reaction) */
+import { REACTION_NUMBER_OF_ANIMATION_FRAMES, REACTION_SCREEN_SHARE_ANIMATION_TIME_MS, REACTION_START_DISPLAY_SIZE, getCombinedKey, getReceivedUnixTime } from './utils/reactionUtils';
+/* @conditional-compile-remove(reaction) */
+const MAX_NUMBER_OF_EMOJIS = 50;
+/* @conditional-compile-remove(reaction) */
+const NUMBER_OF_EMOJI_TYPES = 5;
+/* @conditional-compile-remove(reaction) */
+const REACTION_POSITION_ARRAY_SIZE = 55;
+/* @conditional-compile-remove(reaction) */
+/**
+ * The overlay responsible for rendering multiple reactions all at once in presentation mode
+ * @internal
+ */
+export const RemoteContentShareReactionOverlay = React.memo((props) => {
+    const { reactionResources, localParticipant, remoteParticipants, hostDivHeight, hostDivWidth } = props;
+    // Reactions that are currently being animated
+    const [visibleReactions, setVisibleReactions] = useState([]);
+    // Dictionary of userId to a reaction status. This is used to track the latest received reaction
+    // per user to avoid animating the same reaction multiple times and to limit the number of
+    // active reactions of a certain type.
+    const latestReceivedReaction = useRef({});
+    // Track the number of active reactions of each type to limit the number of active reactions
+    // of a certain type.
+    const activeTypeCount = useRef({
+        like: 0,
+        heart: 0,
+        laugh: 0,
+        applause: 0,
+        surprised: 0
+    });
+    // Used to track the total number of reactions ever played. This is a helper variable
+    // to calculate the reaction movement index (i.e. the .left position of the reaction)
+    const visibleReactionPosition = useRef(new Array(REACTION_POSITION_ARRAY_SIZE).fill(false));
+    const remoteParticipantReactions = useMemo(() => { var _a; return (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.map(remoteParticipant => remoteParticipant.reaction).filter((reaction) => !!reaction)) !== null && _a !== void 0 ? _a : []; }, [remoteParticipants]);
+    const findFirstEmptyPosition = () => {
+        return visibleReactionPosition.current.findIndex(item => item === false);
+    };
+    const updateVisibleReactions = useCallback((reaction, userId) => {
+        var _a;
+        const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);
+        const alreadyHandled = ((_a = latestReceivedReaction.current[userId]) === null || _a === void 0 ? void 0 : _a.id) === combinedKey;
+        if (alreadyHandled) {
+            return;
+        }
+        const activeCount = activeTypeCount.current[reaction.reactionType];
+        if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {
+            latestReceivedReaction.current[userId] = {
+                id: combinedKey,
+                status: 'ignored'
+            };
+            return;
+        }
+        activeTypeCount.current[reaction.reactionType] += 1;
+        latestReceivedReaction.current[userId] = {
+            id: combinedKey,
+            status: 'animating'
+        };
+        const reactionMovementIndex = findFirstEmptyPosition();
+        visibleReactionPosition.current[reactionMovementIndex] = true;
+        setVisibleReactions([...visibleReactions, {
+                reaction: reaction,
+                id: combinedKey,
+                reactionMovementIndex: reactionMovementIndex,
+                styleBucket: getReactionStyleBucket()
+            }]);
+        return;
+    }, [activeTypeCount, visibleReactions]);
+    const removeVisibleReaction = (reactionType, id, index) => {
+        setVisibleReactions(visibleReactions.filter(reaction => reaction.id !== id));
+        visibleReactionPosition.current[index] = false;
+        activeTypeCount.current[reactionType] -= 1;
+        Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {
+            if (reaction.id === id) {
+                latestReceivedReaction.current[userId].status = 'completedAnimating';
+            }
+        });
+    };
+    // Update visible reactions when local participant sends a reaction
+    useEffect(() => {
+        if (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.reaction) {
+            updateVisibleReactions(localParticipant.reaction, localParticipant.userId);
+        }
+    }, [localParticipant, updateVisibleReactions]);
+    // Update visible reactions when remote participants send a reaction
+    useEffect(() => {
+        remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.map(participant => {
+            if (participant === null || participant === void 0 ? void 0 : participant.reaction) {
+                updateVisibleReactions(participant.reaction, participant.userId);
+            }
+        });
+    }, [remoteParticipantReactions, remoteParticipants, updateVisibleReactions]);
+    // Note: canRenderReaction shouldn't be needed as we remove the animation on the onAnimationEnd event
+    const canRenderReaction = (reaction, id, movementIndex) => {
+        // compare current time to reaction.received at and see if more than 4 seconds has elapsed
+        const canRender = Date.now() - getReceivedUnixTime(reaction.receivedOn) < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS;
+        // Clean up the reaction if it's not in the visible reaction list
+        if (!canRender) {
+            removeVisibleReaction(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, id, movementIndex);
+        }
+        return canRender;
+    };
+    const styleBucket = () => getReactionStyleBucket();
+    const displaySizePx = () => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;
+    const containerHeight = hostDivHeight !== null && hostDivHeight !== void 0 ? hostDivHeight : 0;
+    const containerWidth = (hostDivWidth !== null && hostDivWidth !== void 0 ? hostDivWidth : 0) - displaySizePx();
+    const leftPosition = (position) => generateStartPositionWave(position, containerWidth / 2, true);
+    const reactionMovementStyle = (position) => getReactionMovementStyle(leftPosition(position));
+    return React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'transparent'
+        }) }, visibleReactions.map(reaction => {
+        var _a;
+        return React.createElement("div", { key: reaction.id, style: reactionOverlayStyle },
+            React.createElement("div", { className: "reaction-item" }, canRenderReaction(reaction.reaction, reaction.id, reaction.reactionMovementIndex) &&
+                // First div - Section that fixes the travel height and applies the movement animation
+                // Second div - Keeps track of active sprites and responsible for marking, counting
+                //              and removing reactions. Responsible for opacity controls as the sprite emoji animates
+                // Third div - Responsible for calculating the point of X axis where the reaction will start animation
+                // Fourth div - Play Animation as the other animation applies on the base play animation for the sprite
+                React.createElement("div", { style: moveAnimationStyles(containerHeight / 2, 
+                    // dividing by two because reactionOverlayStyle height is set to 50%
+                    containerHeight / 2 * (1 - reaction.styleBucket.heightMaxScale)) },
+                    React.createElement("div", { onAnimationEnd: () => {
+                            removeVisibleReaction(reaction.reaction.reactionType, reaction.id, reaction.reactionMovementIndex);
+                        }, style: opacityAnimationStyles(reaction.styleBucket.opacityMax) },
+                        React.createElement("div", { style: reactionMovementStyle(reaction.reactionMovementIndex) },
+                            React.createElement("div", { style: spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, displaySizePx(), (_a = getEmojiResource(reaction === null || reaction === void 0 ? void 0 : reaction.reaction.reactionType, reactionResources)) !== null && _a !== void 0 ? _a : '') }))))));
+    }));
+});
+//# sourceMappingURL=RemoteContentShareReactionOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteContentShareReactionOverlay.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport { videoContainerStyles } from '../styles/VideoTile.styles';\n/* @conditional-compile-remove(reaction) */\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\n/* @conditional-compile-remove(reaction) */\nimport { IReactionStyleBucket, generateStartPositionWave, getReactionMovementStyle, getReactionStyleBucket, moveAnimationStyles, opacityAnimationStyles, reactionOverlayStyle, spriteAnimationStyles } from '../styles/ReactionOverlay.style';\n/* @conditional-compile-remove(reaction) */\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES, REACTION_SCREEN_SHARE_ANIMATION_TIME_MS, REACTION_START_DISPLAY_SIZE, getCombinedKey, getReceivedUnixTime } from './utils/reactionUtils';\n\n/* @conditional-compile-remove(reaction) */\ntype VisibleReaction = {\n  reaction: Reaction;\n  id: string;\n  reactionMovementIndex: number;\n  styleBucket: IReactionStyleBucket;\n};\n\n/* @conditional-compile-remove(reaction) */\ntype ReceivedReaction = {\n  id: string;\n  status: 'animating' | 'completedAnimating' | 'ignored';\n};\n\n/* @conditional-compile-remove(reaction) */\nconst MAX_NUMBER_OF_EMOJIS = 50;\n/* @conditional-compile-remove(reaction) */\nconst NUMBER_OF_EMOJI_TYPES = 5;\n/* @conditional-compile-remove(reaction) */\nconst REACTION_POSITION_ARRAY_SIZE = 55;\n\n/* @conditional-compile-remove(reaction) */\n/**\n * The overlay responsible for rendering multiple reactions all at once in presentation mode\n * @internal\n */\nexport const RemoteContentShareReactionOverlay = React.memo((props: {\n  reactionResources: ReactionResources;\n  localParticipant?: VideoGalleryLocalParticipant;\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  hostDivHeight?: number;\n  hostDivWidth?: number;\n}) => {\n  const {\n    reactionResources,\n    localParticipant,\n    remoteParticipants,\n    hostDivHeight,\n    hostDivWidth\n  } = props;\n\n  // Reactions that are currently being animated\n  const [visibleReactions, setVisibleReactions] = useState<VisibleReaction[]>([]);\n\n  // Dictionary of userId to a reaction status. This is used to track the latest received reaction\n  // per user to avoid animating the same reaction multiple times and to limit the number of\n  // active reactions of a certain type.\n  const latestReceivedReaction = useRef<Record<string, ReceivedReaction>>({});\n\n  // Track the number of active reactions of each type to limit the number of active reactions\n  // of a certain type.\n  const activeTypeCount = useRef<Record<string, number>>({\n    like: 0,\n    heart: 0,\n    laugh: 0,\n    applause: 0,\n    surprised: 0\n  });\n\n  // Used to track the total number of reactions ever played. This is a helper variable\n  // to calculate the reaction movement index (i.e. the .left position of the reaction)\n  const visibleReactionPosition = useRef<boolean[]>(new Array<boolean>(REACTION_POSITION_ARRAY_SIZE).fill(false));\n  const remoteParticipantReactions: Reaction[] = useMemo(() => remoteParticipants?.map(remoteParticipant => remoteParticipant.reaction).filter((reaction): reaction is Reaction => !!reaction) ?? [], [remoteParticipants]);\n  const findFirstEmptyPosition = (): number => {\n    return visibleReactionPosition.current.findIndex(item => item === false);\n  };\n  const updateVisibleReactions = useCallback((reaction: Reaction, userId: string): void => {\n    const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);\n    const alreadyHandled = latestReceivedReaction.current[userId]?.id === combinedKey;\n    if (alreadyHandled) {\n      return;\n    }\n    const activeCount = activeTypeCount.current[reaction.reactionType];\n    if (activeCount >= MAX_NUMBER_OF_EMOJIS / NUMBER_OF_EMOJI_TYPES) {\n      latestReceivedReaction.current[userId] = {\n        id: combinedKey,\n        status: 'ignored'\n      };\n      return;\n    }\n    activeTypeCount.current[reaction.reactionType] += 1;\n    latestReceivedReaction.current[userId] = {\n      id: combinedKey,\n      status: 'animating'\n    };\n    const reactionMovementIndex = findFirstEmptyPosition();\n    visibleReactionPosition.current[reactionMovementIndex] = true;\n    setVisibleReactions([...visibleReactions, {\n      reaction: reaction,\n      id: combinedKey,\n      reactionMovementIndex: reactionMovementIndex,\n      styleBucket: getReactionStyleBucket()\n    }]);\n    return;\n  }, [activeTypeCount, visibleReactions]);\n  const removeVisibleReaction = (reactionType: string, id: string, index: number): void => {\n    setVisibleReactions(visibleReactions.filter(reaction => reaction.id !== id));\n    visibleReactionPosition.current[index] = false;\n    activeTypeCount.current[reactionType] -= 1;\n    Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {\n      if (reaction.id === id) {\n        latestReceivedReaction.current[userId].status = 'completedAnimating';\n      }\n    });\n  };\n\n  // Update visible reactions when local participant sends a reaction\n  useEffect(() => {\n    if (localParticipant?.reaction) {\n      updateVisibleReactions(localParticipant.reaction, localParticipant.userId);\n    }\n  }, [localParticipant, updateVisibleReactions]);\n\n  // Update visible reactions when remote participants send a reaction\n  useEffect(() => {\n    remoteParticipants?.map(participant => {\n      if (participant?.reaction) {\n        updateVisibleReactions(participant.reaction, participant.userId);\n      }\n    });\n  }, [remoteParticipantReactions, remoteParticipants, updateVisibleReactions]);\n\n  // Note: canRenderReaction shouldn't be needed as we remove the animation on the onAnimationEnd event\n  const canRenderReaction = (reaction: Reaction, id: string, movementIndex: number): boolean => {\n    // compare current time to reaction.received at and see if more than 4 seconds has elapsed\n    const canRender = Date.now() - getReceivedUnixTime(reaction.receivedOn) < REACTION_SCREEN_SHARE_ANIMATION_TIME_MS;\n\n    // Clean up the reaction if it's not in the visible reaction list\n    if (!canRender) {\n      removeVisibleReaction(reaction?.reactionType, id, movementIndex);\n    }\n    return canRender;\n  };\n  const styleBucket = (): IReactionStyleBucket => getReactionStyleBucket();\n  const displaySizePx = (): number => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;\n  const containerHeight = hostDivHeight ?? 0;\n  const containerWidth = (hostDivWidth ?? 0) - displaySizePx();\n  const leftPosition = (position: number): number => generateStartPositionWave(position, containerWidth / 2, true);\n  const reactionMovementStyle = (position: number): React.CSSProperties => getReactionMovementStyle(leftPosition(position));\n  return <Stack className={mergeStyles(videoContainerStyles, {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'transparent'\n  })}>\n        {visibleReactions.map(reaction => <div key={reaction.id} style={reactionOverlayStyle}>\n            <div className=\"reaction-item\">\n              {canRenderReaction(reaction.reaction, reaction.id, reaction.reactionMovementIndex) &&\n        // First div - Section that fixes the travel height and applies the movement animation\n        // Second div - Keeps track of active sprites and responsible for marking, counting\n        //              and removing reactions. Responsible for opacity controls as the sprite emoji animates\n        // Third div - Responsible for calculating the point of X axis where the reaction will start animation\n        // Fourth div - Play Animation as the other animation applies on the base play animation for the sprite\n        <div style={moveAnimationStyles(containerHeight / 2,\n        // dividing by two because reactionOverlayStyle height is set to 50%\n        containerHeight / 2 * (1 - reaction.styleBucket.heightMaxScale))}>\n                  <div onAnimationEnd={() => {\n            removeVisibleReaction(reaction.reaction.reactionType, reaction.id, reaction.reactionMovementIndex);\n          }} style={opacityAnimationStyles(reaction.styleBucket.opacityMax)}>\n                    <div style={reactionMovementStyle(reaction.reactionMovementIndex)}>\n                      <div style={spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, displaySizePx(), getEmojiResource(reaction?.reaction.reactionType, reactionResources) ?? '')} />\n                    </div>\n                  </div>\n                </div>}\n            </div>\n          </div>)}\n      </Stack>;\n});"]}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';
+import { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';
 /**
  * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
@@ -16,5 +17,9 @@ export declare const RemoteScreenShare: React.MemoExoticComponent<(props: {
     isSpeaking?: boolean | undefined;
     renderElement?: HTMLElement | undefined;
     participantVideoScalingMode?: VideoStreamOptions | undefined;
+    reactionResources?: ReactionResources | undefined;
+    localParticipant?: VideoGalleryLocalParticipant | undefined;
+    remoteParticipants?: VideoGalleryRemoteParticipant[] | undefined;
+    isPPTLive?: boolean | undefined;
 }) => React.JSX.Element>;
 //# sourceMappingURL=RemoteScreenShare.d.ts.map

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

@@ -7,13 +7,23 @@ import { StreamMedia } from '../StreamMedia';
 import { VideoTile } from '../VideoTile';
 import { loadingStyle } from './styles/RemoteScreenShare.styles';
 import { _formatString } from "../../../../acs-ui-common/src";
+/* @conditional-compile-remove(reaction) */
+import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
 /**
  * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 export const RemoteScreenShare = React.memo((props) => {
-    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode } = props;
+    const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode, 
+    /* @conditional-compile-remove(reaction) */
+    reactionResources, 
+    /* @conditional-compile-remove(reaction) */
+    localParticipant, 
+    /* @conditional-compile-remove(reaction) */
+    remoteParticipants, 
+    /* @conditional-compile-remove(ppt-live) */
+    isPPTLive } = props;
     const locale = useLocale();
     if (!renderElement) {
         /**
@@ -35,7 +45,13 @@ export const RemoteScreenShare = React.memo((props) => {
     const loadingMessage = displayName ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
         participant: displayName
     }) : '';
-    return React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) });
+    /* @conditional-compile-remove(ppt-live) */
+    if (isPPTLive) {
+        return React.createElement(VideoTile, { renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), 
+            /* @conditional-compile-remove(reaction) */ overlay: React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" }) });
+    }
+    return React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), 
+        /* @conditional-compile-remove(reaction) */ overlay: React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" }) });
 });
 const LoadingSpinner = (props) => {
     return React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAW5C,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB;;;;;;;WAOG;QACH,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,EAAE,2BAA2B,CAAC,CAAC;IAC5F,CAAC;IACD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;QACxG,WAAW,EAAE,WAAW;KACzB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACR,OAAO,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAAC,CAAC,CAAC,SAAS,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAAI,CAAC;AAC3S,CAAC,CAAC,CAAC;AACH,MAAM,cAAc,GAAG,CAAC,KAEvB,EAAe,EAAE;IAChB,OAAO,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACxD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo((props: {\n  userId: string;\n  displayName?: string;\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  isAvailable?: boolean;\n  isReceiving?: boolean;\n  isMuted?: boolean;\n  isSpeaking?: boolean;\n  renderElement?: HTMLElement;\n  participantVideoScalingMode?: VideoStreamOptions;\n}) => {\n  const {\n    userId,\n    displayName,\n    isMuted,\n    renderElement,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    isReceiving,\n    participantVideoScalingMode\n  } = props;\n  const locale = useLocale();\n  if (!renderElement) {\n    /**\n     * TODO: We need to pass in the scaling mode of the screen share participant to this function because when we\n     * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling\n     * mode is the same as before we started the screen share.\n     *\n     * We should deprecate the current function and replace it with a\n     * createRemoteScreenShareStreamView and createRemoteVideoStreamView.\n     */\n    onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);\n  }\n  useEffect(() => {\n    return () => {\n      // TODO: Isolate disposing behaviors for screenShare and videoStream\n      onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n    };\n  }, [onDisposeRemoteStreamView, userId]);\n  const loadingMessage = displayName ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n    participant: displayName\n  }) : '';\n  return <VideoTile displayName={displayName} isMuted={isMuted} renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} /> : undefined} onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />} />;\n});\nconst LoadingSpinner = (props: {\n  loadingMessage: string;\n}): JSX.Element => {\n  return <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>;\n};"]}
+{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(reaction) */\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo((props: {\n  userId: string;\n  displayName?: string;\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  isAvailable?: boolean;\n  isReceiving?: boolean;\n  isMuted?: boolean;\n  isSpeaking?: boolean;\n  renderElement?: HTMLElement;\n  participantVideoScalingMode?: VideoStreamOptions;\n  /* @conditional-compile-remove(reaction) */\n  reactionResources?: ReactionResources;\n  /* @conditional-compile-remove(reaction) */\n  localParticipant?: VideoGalleryLocalParticipant;\n  /* @conditional-compile-remove(reaction) */\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n  /* @conditional-compile-remove(ppt-live) */\n  isPPTLive?: boolean;\n}) => {\n  const {\n    userId,\n    displayName,\n    isMuted,\n    renderElement,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    isReceiving,\n    participantVideoScalingMode,\n    /* @conditional-compile-remove(reaction) */\n    reactionResources,\n    /* @conditional-compile-remove(reaction) */\n    localParticipant,\n    /* @conditional-compile-remove(reaction) */\n    remoteParticipants,\n    /* @conditional-compile-remove(ppt-live) */\n    isPPTLive\n  } = props;\n  const locale = useLocale();\n  if (!renderElement) {\n    /**\n     * TODO: We need to pass in the scaling mode of the screen share participant to this function because when we\n     * call this it will recreate both streams (video and screen share) and we need to make sure that the scaling\n     * mode is the same as before we started the screen share.\n     *\n     * We should deprecate the current function and replace it with a\n     * createRemoteScreenShareStreamView and createRemoteVideoStreamView.\n     */\n    onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);\n  }\n  useEffect(() => {\n    return () => {\n      // TODO: Isolate disposing behaviors for screenShare and videoStream\n      onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n    };\n  }, [onDisposeRemoteStreamView, userId]);\n  const loadingMessage = displayName ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n    participant: displayName\n  }) : '';\n  /* @conditional-compile-remove(ppt-live) */\n  if (isPPTLive) {\n    return <VideoTile renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} /> : undefined} onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n    /* @conditional-compile-remove(reaction) */ overlay={<MeetingReactionOverlay reactionResources={reactionResources!} localParticipant={localParticipant} remoteParticipants={remoteParticipants} overlayMode=\"screen-share\" />} />;\n  }\n  return <VideoTile displayName={displayName} isMuted={isMuted} renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} /> : undefined} onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n  /* @conditional-compile-remove(reaction) */ overlay={<MeetingReactionOverlay reactionResources={reactionResources!} localParticipant={localParticipant} remoteParticipants={remoteParticipants} overlayMode=\"screen-share\" />} />;\n});\nconst LoadingSpinner = (props: {\n  loadingMessage: string;\n}): JSX.Element => {\n  return <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>;\n};"]}

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

@@ -6,6 +6,7 @@ export interface VideoStreamLifecycleMaintainerExtendableProps {
     isMirrored?: boolean;
     scalingMode?: ViewScalingMode;
     isScreenSharingOn?: boolean;
+    streamId?: number;
 }
 /** @private */
 export interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {

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

@@ -20,7 +20,7 @@ import { useEffect, useMemo, useState } from 'react';
  * @private
  */
 const useVideoStreamLifecycleMaintainer = (props) => {
-    const { isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode } = props;
+    const { isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode, streamId } = props;
     const [videoStreamViewResult, setVideoStreamViewResult] = useState();
     useEffect(() => {
         var _a;
@@ -41,7 +41,13 @@ const useVideoStreamLifecycleMaintainer = (props) => {
                 }
             }
         };
-    }, [isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode]);
+    }, [isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode,
+        /**
+         * this is here in order to force a re-render when streamId changes
+         *  - this should not happen but to recover for the user we will make sure that we subscribe to the
+         * new stream by forcing a re-render.
+         */
+        streamId]);
     // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView
     // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.
     // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed

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

@@ -1 +1 @@
-{"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';\n\n/** @private */\nexport interface VideoStreamLifecycleMaintainerExtendableProps {\n  isStreamAvailable?: boolean;\n  renderElementExists?: boolean;\n  isMirrored?: boolean;\n  scalingMode?: ViewScalingMode;\n  isScreenSharingOn?: boolean;\n}\ninterface VideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateStreamView: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult> | undefined;\n  onDisposeStreamView: () => void | undefined;\n}\n\n/**\n * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView\n * appropriately based on react lifecycle events and prop changes.\n *\n * @remarks\n *\n * Notes on handling changes to scaling mode:\n *\n * Ideally we have access to the original StreamRenderView and can call view.updateScalingMode() and do not need to recreate the stream view.\n * However, to support backwards compat we cannot guarantee this. If we don't have access to the original StreamRenderView we need to dispose\n * the old view and create a new one.\n *\n * Supporting both of these scenarios became too complex and fragile. When we introduce a breaking change this should be update to ensure that\n * onCreateStreamView _must_ return a view object with updateScalingMode and update logic in this hook to call view.updateScalingMode instead\n * of recreating the stream.\n *\n * @private\n */\nconst useVideoStreamLifecycleMaintainer = (props: VideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable,\n    onCreateStreamView,\n    onDisposeStreamView,\n    renderElementExists,\n    scalingMode\n  } = props;\n  const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult | undefined>();\n  useEffect(() => {\n    if (isStreamAvailable && !renderElementExists) {\n      onCreateStreamView?.({\n        isMirrored,\n        scalingMode\n      })?.then(result => {\n        result && setVideoStreamViewResult(result);\n      });\n    }\n\n    // Always clean up element to make tile up to date and be able to dispose correctly\n    return () => {\n      if (renderElementExists) {\n        // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n        if (!isScreenSharingOn) {\n          onDisposeStreamView?.();\n        }\n      }\n    };\n  }, [isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode]);\n\n  // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView\n  // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.\n  // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed\n  useEffect(() => {\n    return () => {\n      // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n      if (!isScreenSharingOn) {\n        onDisposeStreamView?.();\n      }\n    };\n  }, [isScreenSharingOn, onDisposeStreamView]);\n  return videoStreamViewResult;\n};\n\n/** @private */\nexport interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams\n *\n * @private\n */\nexport const useLocalVideoStreamLifecycleMaintainer = (props: LocalVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView\n  } = props;\n  const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n    return onCreateLocalStreamView?.(options);\n  }, [onCreateLocalStreamView]);\n  const onDisposeStreamView = useMemo(() => () => {\n    onDisposeLocalStreamView?.();\n  }, [onDisposeLocalStreamView]);\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};\n\n/** @private */\nexport interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  remoteParticipantId: string;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for remote video streams\n *\n * @private\n */\nexport const useRemoteVideoStreamLifecycleMaintainer = (props: RemoteVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    remoteParticipantId,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n  const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n    return onCreateRemoteStreamView?.(remoteParticipantId, options);\n  }, [onCreateRemoteStreamView, remoteParticipantId]);\n  const onDisposeStreamView = useMemo(() => () => {\n    onDisposeRemoteStreamView?.(remoteParticipantId);\n  }, [onDisposeRemoteStreamView, remoteParticipantId]);\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};"]}
+{"version":3,"file":"useVideoStreamLifecycleMaintainer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/useVideoStreamLifecycleMaintainer.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { VideoStreamOptions, CreateVideoStreamViewResult, ViewScalingMode } from '../../types';\n\n/** @private */\nexport interface VideoStreamLifecycleMaintainerExtendableProps {\n  isStreamAvailable?: boolean;\n  renderElementExists?: boolean;\n  isMirrored?: boolean;\n  scalingMode?: ViewScalingMode;\n  isScreenSharingOn?: boolean;\n  streamId?: number;\n}\ninterface VideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateStreamView: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult> | undefined;\n  onDisposeStreamView: () => void | undefined;\n}\n\n/**\n * Helper hook to maintain the video stream lifecycle. This calls onCreateStreamView and onDisposeStreamView\n * appropriately based on react lifecycle events and prop changes.\n *\n * @remarks\n *\n * Notes on handling changes to scaling mode:\n *\n * Ideally we have access to the original StreamRenderView and can call view.updateScalingMode() and do not need to recreate the stream view.\n * However, to support backwards compat we cannot guarantee this. If we don't have access to the original StreamRenderView we need to dispose\n * the old view and create a new one.\n *\n * Supporting both of these scenarios became too complex and fragile. When we introduce a breaking change this should be update to ensure that\n * onCreateStreamView _must_ return a view object with updateScalingMode and update logic in this hook to call view.updateScalingMode instead\n * of recreating the stream.\n *\n * @private\n */\nconst useVideoStreamLifecycleMaintainer = (props: VideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    isMirrored,\n    isScreenSharingOn,\n    isStreamAvailable,\n    onCreateStreamView,\n    onDisposeStreamView,\n    renderElementExists,\n    scalingMode,\n    streamId\n  } = props;\n  const [videoStreamViewResult, setVideoStreamViewResult] = useState<CreateVideoStreamViewResult | undefined>();\n  useEffect(() => {\n    if (isStreamAvailable && !renderElementExists) {\n      onCreateStreamView?.({\n        isMirrored,\n        scalingMode\n      })?.then(result => {\n        result && setVideoStreamViewResult(result);\n      });\n    }\n\n    // Always clean up element to make tile up to date and be able to dispose correctly\n    return () => {\n      if (renderElementExists) {\n        // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n        if (!isScreenSharingOn) {\n          onDisposeStreamView?.();\n        }\n      }\n    };\n  }, [isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode,\n  /**\n   * this is here in order to force a re-render when streamId changes\n   *  - this should not happen but to recover for the user we will make sure that we subscribe to the\n   * new stream by forcing a re-render.\n   */\n  streamId]);\n\n  // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView\n  // Element disposed could happen during async time gap, which still cause leaks for unused renderElement.\n  // Need to do an entire cleanup when remoteTile gets disposed and make sure element gets correctly disposed\n  useEffect(() => {\n    return () => {\n      // TODO: Remove `if isScreenSharingOn` when we isolate dispose behavior for screen share\n      if (!isScreenSharingOn) {\n        onDisposeStreamView?.();\n      }\n    };\n  }, [isScreenSharingOn, onDisposeStreamView]);\n  return videoStreamViewResult;\n};\n\n/** @private */\nexport interface LocalVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeLocalStreamView?: () => void;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for local video streams\n *\n * @private\n */\nexport const useLocalVideoStreamLifecycleMaintainer = (props: LocalVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView\n  } = props;\n  const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n    return onCreateLocalStreamView?.(options);\n  }, [onCreateLocalStreamView]);\n  const onDisposeStreamView = useMemo(() => () => {\n    onDisposeLocalStreamView?.();\n  }, [onDisposeLocalStreamView]);\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};\n\n/** @private */\nexport interface RemoteVideoStreamLifecycleMaintainerProps extends VideoStreamLifecycleMaintainerExtendableProps {\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  remoteParticipantId: string;\n}\n\n/**\n * Extension of {@link useVideoStreamLifecycleMaintainer} specifically for remote video streams\n *\n * @private\n */\nexport const useRemoteVideoStreamLifecycleMaintainer = (props: RemoteVideoStreamLifecycleMaintainerProps): CreateVideoStreamViewResult | undefined => {\n  const {\n    remoteParticipantId,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n  const onCreateStreamView = useMemo(() => (options?: VideoStreamOptions) => {\n    return onCreateRemoteStreamView?.(remoteParticipantId, options);\n  }, [onCreateRemoteStreamView, remoteParticipantId]);\n  const onDisposeStreamView = useMemo(() => () => {\n    onDisposeRemoteStreamView?.(remoteParticipantId);\n  }, [onDisposeRemoteStreamView, remoteParticipantId]);\n  return useVideoStreamLifecycleMaintainer({\n    ...props,\n    onCreateStreamView,\n    onDisposeStreamView\n  });\n};"]}

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

@@ -15,6 +15,11 @@ export declare const useVideoTileContextualMenuProps: (props: {
         unpinParticipantMenuItemAriaLabel?: string | undefined;
         pinnedParticipantAnnouncementAriaLabel?: string | undefined;
         unpinnedParticipantAnnouncementAriaLabel?: string | undefined;
+        startSpotlightVideoTileMenuLabel?: string | undefined;
+        addSpotlightVideoTileMenuLabel?: string | undefined;
+        stopSpotlightVideoTileMenuLabel?: string | undefined;
+        stopSpotlightOnSelfVideoTileMenuLabel?: string | undefined;
+        spotlightLimitReachedMenuTitle?: string | undefined;
     } | undefined;
     view?: {
         updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;
@@ -25,5 +30,11 @@ export declare const useVideoTileContextualMenuProps: (props: {
     onUpdateScalingMode?: ((userId: string, scalingMode: ViewScalingMode) => void) | undefined;
     disablePinMenuItem?: boolean | undefined;
     toggleAnnouncerString?: ((announcerString: string) => void) | undefined;
+    isSpotlighted?: boolean | undefined;
+    spotlightedParticipantUserIds?: string[] | undefined;
+    onStartSpotlight?: ((userIds: string[]) => void) | undefined;
+    onStopSpotlight?: ((userIds: string[]) => void) | undefined;
+    maxParticipantsToSpotlight?: number | undefined;
+    myUserId?: string | undefined;
 }) => IContextualMenuProps | undefined;
 //# sourceMappingURL=useVideoTileContextualMenuProps.d.ts.map

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;
@@ -67,11 +73,53 @@ export const useVideoTileContextualMenuProps = (props) => {
                         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({
@@ -126,7 +174,7 @@ export const useVideoTileContextualMenuProps = (props) => {
                 preventDismissOnEvent
             }
         };
-    }, [scalingMode, strings, view, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, participant.userId, participant.displayName, disablePinMenuItem, toggleAnnouncerString]);
+    }, [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":["../../../../../../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    /* @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?: {\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  /* @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  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 || /* @conditional-compile-remove(spotlight) */isSpotlighted,\n          ariaLabel: pinActionString\n        });\n      }\n    }\n    /* @conditional-compile-remove(spotlight) */\n    if (isSpotlighted) {\n      const stopSpotlightMenuLabel = myUserId === participant.userId ? strings?.stopSpotlightOnSelfVideoTileMenuLabel : 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: {\n              root: {\n                lineHeight: 0\n              }\n            }\n          },\n          onClick: () => onStopSpotlight([participant.userId]),\n          ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n        });\n      }\n    } else {\n      const startSpotlightMenuLabel = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0 ? strings?.addSpotlightVideoTileMenuLabel : strings?.startSpotlightVideoTileMenuLabel;\n      const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight : false;\n      if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {\n        items.push({\n          key: 'startSpotlight',\n          text: startSpotlightMenuLabel,\n          iconProps: {\n            iconName: 'StartSpotlightContextualMenuItem',\n            styles: {\n              root: {\n                lineHeight: 0\n              }\n            }\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: {\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, /* @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]);\n  return contextualMenuProps;\n};"]}

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

@@ -0,0 +1,13 @@
+/** @private */
+export declare const REACTION_START_DISPLAY_SIZE = 44;
+/** @private */
+export declare const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;
+/** @private */
+export declare const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;
+/** @private */
+export declare const REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;
+/** @private */
+export declare const getCombinedKey: (userId: string, reactionType: string, receivedAt: Date) => string;
+/** @private */
+export declare const getReceivedUnixTime: (receivedTime: Date) => number;
+//# sourceMappingURL=reactionUtils.d.ts.map

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

@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+/** @private */
+export const REACTION_START_DISPLAY_SIZE = 44;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+export const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+export const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+export const REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+export const getCombinedKey = (userId, reactionType, receivedAt) => {
+    const receivedTime = receivedAt.toISOString();
+    return userId + reactionType + receivedTime;
+};
+/* @conditional-compile-remove(reaction) */
+/** @private */
+export const getReceivedUnixTime = (receivedTime) => {
+    return receivedTime.getTime();
+};
+//# sourceMappingURL=reactionUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reactionUtils.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/utils/reactionUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,EAAE,CAAC;AAC9C,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,mCAAmC,GAAG,EAAE,CAAC;AACtD,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,uCAAuC,GAAG,IAAI,CAAC;AAC5D,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,uCAAuC,GAAG,GAAG,CAAC;AAE3D,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,YAAoB,EAAE,UAAgB,EAAU,EAAE;IAC/F,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC;IAC9C,OAAO,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC;AAC9C,CAAC,CAAC;AAEF,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAkB,EAAU,EAAE;IAChE,OAAO,YAAY,CAAC,OAAO,EAAE,CAAC;AAChC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const REACTION_START_DISPLAY_SIZE = 44;\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;\n\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const getCombinedKey = (userId: string, reactionType: string, receivedAt: Date): string => {\n  const receivedTime = receivedAt.toISOString();\n  return userId + reactionType + receivedTime;\n};\n\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const getReceivedUnixTime = (receivedTime: Date): number => {\n  return receivedTime.getTime();\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}
@@ -30,4 +31,16 @@ export interface OrganizedParticipantsResult {
  * @private
  */
 export declare const useOrganizedParticipants: (props: OrganizedParticipantsArgs) => OrganizedParticipantsResult;
+/**
+ * @private
+ */
+export declare const getEmojiResource: (reactionName: string, reactionResources: ReactionResources) => string | undefined;
+/**
+ * @private
+ */
+export declare const getEmojiFrameCount: (reactionName: string, reactionResources: ReactionResources) => number;
+/**
+ * @private
+ */
+export declare const getEmojiFrameSize: (reactionName: string, reactionResources: ReactionResources) => number | undefined;
 //# sourceMappingURL=videoGalleryLayoutUtils.d.ts.map