@azure/communication-react 1.23.0-alpha-202501160016 → 1.23.0

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

@@ -33,12 +33,9 @@ export const RemoteContentShareReactionOverlay = React.memo((props) => {
     // 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 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);
+        return visibleReactionPosition.current.findIndex(item => item === false);
     };
     const updateVisibleReactions = useCallback((reaction, userId) => {
         var _a, _b;
@@ -62,19 +59,16 @@ export const RemoteContentShareReactionOverlay = React.memo((props) => {
         };
         const reactionMovementIndex = findFirstEmptyPosition();
         visibleReactionPosition.current[reactionMovementIndex] = true;
-        setVisibleReactions([
-            ...visibleReactions,
-            {
+        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));
+        setVisibleReactions(visibleReactions.filter(reaction => reaction.id !== id));
         visibleReactionPosition.current[index] = false;
         activeTypeCount.current[reactionType] -= 1;
         Object.entries(latestReceivedReaction.current).forEach(([userId, reaction]) => {
@@ -92,7 +86,7 @@ export const RemoteContentShareReactionOverlay = React.memo((props) => {
     }, [localParticipant, updateVisibleReactions]);
     // Update visible reactions when remote participants send a reaction
     useEffect(() => {
-        remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.map((participant) => {
+        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);
             }
@@ -114,27 +108,28 @@ export const RemoteContentShareReactionOverlay = React.memo((props) => {
     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, {
+    return React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             backgroundColor: 'transparent'
-        }) }, visibleReactions.map((reaction) => {
+        }) }, 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 : '') }))))))));
-    })));
+        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

@@ -1 +1 @@
-{"version":3,"file":"RemoteContentShareReactionOverlay.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAEL,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,mCAAmC,EACnC,uCAAuC,EACvC,2BAA2B,EAC3B,cAAc,EACd,mBAAmB,EACpB,MAAM,uBAAuB,CAAC;AAc/B,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAChC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,MAAM,4BAA4B,GAAG,EAAE,CAAC;AAExC;;;GAGG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,KAAK,CAAC,IAAI,CACzD,CAAC,KAMA,EAAE,EAAE;IACH,MAAM,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEvG,8CAA8C;IAC9C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAoB,EAAE,CAAC,CAAC;IAEhF,gGAAgG;IAChG,0FAA0F;IAC1F,sCAAsC;IACtC,MAAM,sBAAsB,GAAG,MAAM,CAAmC,EAAE,CAAC,CAAC;IAE5E,4FAA4F;IAC5F,qBAAqB;IACrB,MAAM,eAAe,GAAG,MAAM,CAAyB;QACrD,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,CAAC;KACb,CAAC,CAAC;IAEH,qFAAqF;IACrF,qFAAqF;IACrF,MAAM,uBAAuB,GAAG,MAAM,CAAY,IAAI,KAAK,CAAU,4BAA4B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhH,MAAM,0BAA0B,GAAe,OAAO,CACpD,GAAG,EAAE;;QACH,OAAA,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CACd,GAAG,CAAC,CAAC,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,CAAC,QAAQ,EACtD,MAAM,CAAC,CAAC,QAAQ,EAAwB,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAA;KAAA,EACjE,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAW,EAAE;QAC1C,OAAO,uBAAuB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;IAC7E,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,QAAkB,EAAE,MAAc,EAAQ,EAAE;;QAC3C,MAAM,WAAW,GAAG,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;QAEvF,MAAM,cAAc,GAAG,CAAA,MAAA,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,0CAAE,EAAE,MAAK,WAAW,CAAC;QAClF,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAG,MAAA,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,mCAAI,CAAC,CAAC;QAExE,IAAI,WAAW,IAAI,oBAAoB,GAAG,qBAAqB,EAAE,CAAC;YAChE,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG;gBACvC,EAAE,EAAE,WAAW;gBACf,MAAM,EAAE,SAAS;aAClB,CAAC;YACF,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpD,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG;YACvC,EAAE,EAAE,WAAW;YACf,MAAM,EAAE,WAAW;SACpB,CAAC;QACF,MAAM,qBAAqB,GAAG,sBAAsB,EAAE,CAAC;QACvD,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC;QAC9D,mBAAmB,CAAC;YAClB,GAAG,gBAAgB;YACnB;gBACE,QAAQ,EAAE,QAAQ;gBAClB,EAAE,EAAE,WAAW;gBACf,qBAAqB,EAAE,qBAAqB;gBAC5C,WAAW,EAAE,sBAAsB,EAAE;aACtC;SACF,CAAC,CAAC;QACH,OAAO;IACT,CAAC,EACD,CAAC,eAAe,EAAE,gBAAgB,CAAC,CACpC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,YAAoB,EAAE,EAAU,EAAE,KAAa,EAAQ,EAAE;QACtF,mBAAmB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC/E,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QAC/C,eAAe,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,EAAE;YAC5E,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAChE,IAAI,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBAC3C,gBAAgB,CAAC,MAAM,GAAG,oBAAoB,CAAC;YACjD,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,EAAE,CAAC;YAC/B,sBAAsB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,oEAAoE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;YACtC,IAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,EAAE,CAAC;gBAC1B,sBAAsB,CAAC,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;YACnE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,0BAA0B,EAAE,kBAAkB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE7E,qGAAqG;IACrG,MAAM,iBAAiB,GAAG,CAAC,QAAkB,EAAE,EAAU,EAAE,aAAqB,EAAW,EAAE;QAC3F,0FAA0F;QAC1F,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,mBAAmB,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,uCAAuC,CAAC;QAElH,iEAAiE;QACjE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,qBAAqB,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;QACnE,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAyB,EAAE,CAAC,sBAAsB,EAAE,CAAC;IACzE,MAAM,aAAa,GAAG,GAAW,EAAE,CAAC,2BAA2B,GAAG,WAAW,EAAE,CAAC,SAAS,CAAC;IAE1F,MAAM,eAAe,GAAG,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAG,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,CAAC,CAAC,GAAG,aAAa,EAAE,CAAC;IAE7D,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAU,EAAE,CAAC,yBAAyB,CAAC,QAAQ,EAAE,cAAc,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;IACjH,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAuB,EAAE,CACtE,wBAAwB,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,oBAAoB,EAAE;YAC3C,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,aAAa;SAC/B,CAAC,IAED,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;;QAAC,OAAA,CAClC,6BAAK,GAAG,EAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,oBAAoB;YAChD,6BAAK,SAAS,EAAC,eAAe,IAC3B,iBAAiB,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC,qBAAqB,CAAC,IAAI;YACpF,sFAAsF;YACtF,mFAAmF;YACnF,qGAAqG;YACrG,sGAAsG;YACtG,uGAAuG;YACvG,6BACE,KAAK,EAAE,mBAAmB,CACxB,eAAe,GAAG,CAAC,EAAE,oEAAoE;gBACzF,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,cAAc,CAAC,CAClE;gBAED,6BACE,cAAc,EAAE,GAAG,EAAE;wBACnB,qBAAqB,CACnB,QAAQ,CAAC,QAAQ,CAAC,YAAY,EAC9B,QAAQ,CAAC,EAAE,EACX,QAAQ,CAAC,qBAAqB,CAC/B,CAAC;oBACJ,CAAC,EACD,KAAK,EAAE,sBAAsB,CAAC,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC;oBAE9D,6BAAK,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC;wBAC/D,6BACE,KAAK,EAAE,qBAAqB,CAC1B,mCAAmC,EACnC,aAAa,EAAE,EACf,MAAA,gBAAgB,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC,mCAAI,EAAE,CAC3E,GACD,CACE,CACF,CACF,CACP,CACG,CACF,CACP,CAAA;KAAA,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { Stack, mergeStyles } from '@fluentui/react';\nimport { videoContainerStyles } from '../styles/VideoTile.styles';\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\nimport {\n  IReactionStyleBucket,\n  generateStartPositionWave,\n  getReactionMovementStyle,\n  getReactionStyleBucket,\n  moveAnimationStyles,\n  opacityAnimationStyles,\n  reactionOverlayStyle,\n  spriteAnimationStyles\n} from '../styles/ReactionOverlay.style';\nimport {\n  REACTION_NUMBER_OF_ANIMATION_FRAMES,\n  REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,\n  REACTION_START_DISPLAY_SIZE,\n  getCombinedKey,\n  getReceivedUnixTime\n} from './utils/reactionUtils';\n\ntype VisibleReaction = {\n  reaction: Reaction;\n  id: string;\n  reactionMovementIndex: number;\n  styleBucket: IReactionStyleBucket;\n};\n\ntype ReceivedReaction = {\n  id: string;\n  status: 'animating' | 'completedAnimating' | 'ignored';\n};\n\nconst MAX_NUMBER_OF_EMOJIS = 50;\nconst NUMBER_OF_EMOJI_TYPES = 5;\nconst REACTION_POSITION_ARRAY_SIZE = 55;\n\n/**\n * The overlay responsible for rendering multiple reactions all at once in presentation mode\n * @internal\n */\nexport const RemoteContentShareReactionOverlay = React.memo(\n  (props: {\n    reactionResources: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n    hostDivHeight?: number;\n    hostDivWidth?: number;\n  }) => {\n    const { reactionResources, localParticipant, remoteParticipants, hostDivHeight, hostDivWidth } = 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\n    const remoteParticipantReactions: Reaction[] = useMemo(\n      () =>\n        remoteParticipants\n          ?.map((remoteParticipant) => remoteParticipant.reaction)\n          .filter((reaction): reaction is Reaction => !!reaction) ?? [],\n      [remoteParticipants]\n    );\n\n    const findFirstEmptyPosition = (): number => {\n      return visibleReactionPosition.current.findIndex((item) => item === false);\n    };\n\n    const updateVisibleReactions = useCallback(\n      (reaction: Reaction, userId: string): void => {\n        const combinedKey = getCombinedKey(userId, reaction.reactionType, reaction.receivedOn);\n\n        const alreadyHandled = latestReceivedReaction.current[userId]?.id === combinedKey;\n        if (alreadyHandled) {\n          return;\n        }\n\n        const activeCount = activeTypeCount.current[reaction.reactionType] ?? 0;\n\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\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([\n          ...visibleReactions,\n          {\n            reaction: reaction,\n            id: combinedKey,\n            reactionMovementIndex: reactionMovementIndex,\n            styleBucket: getReactionStyleBucket()\n          }\n        ]);\n        return;\n      },\n      [activeTypeCount, visibleReactions]\n    );\n\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        const userLastReaction = latestReceivedReaction.current[userId];\n        if (reaction.id === id && userLastReaction) {\n          userLastReaction.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\n      return canRender;\n    };\n\n    const styleBucket = (): IReactionStyleBucket => getReactionStyleBucket();\n    const displaySizePx = (): number => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;\n\n    const containerHeight = hostDivHeight ?? 0;\n    const containerWidth = (hostDivWidth ?? 0) - displaySizePx();\n\n    const leftPosition = (position: number): number => generateStartPositionWave(position, containerWidth / 2, true);\n    const reactionMovementStyle = (position: number): React.CSSProperties =>\n      getReactionMovementStyle(leftPosition(position));\n\n    return (\n      <Stack\n        className={mergeStyles(videoContainerStyles, {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: 'transparent'\n        })}\n      >\n        {visibleReactions.map((reaction) => (\n          <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\n                  style={moveAnimationStyles(\n                    containerHeight / 2, // dividing by two because reactionOverlayStyle height is set to 50%\n                    (containerHeight / 2) * (1 - reaction.styleBucket.heightMaxScale)\n                  )}\n                >\n                  <div\n                    onAnimationEnd={() => {\n                      removeVisibleReaction(\n                        reaction.reaction.reactionType,\n                        reaction.id,\n                        reaction.reactionMovementIndex\n                      );\n                    }}\n                    style={opacityAnimationStyles(reaction.styleBucket.opacityMax)}\n                  >\n                    <div style={reactionMovementStyle(reaction.reactionMovementIndex)}>\n                      <div\n                        style={spriteAnimationStyles(\n                          REACTION_NUMBER_OF_ANIMATION_FRAMES,\n                          displaySizePx(),\n                          getEmojiResource(reaction?.reaction.reactionType, reactionResources) ?? ''\n                        )}\n                      />\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </Stack>\n    );\n  }\n);\n"]}
+{"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\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Reaction, ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { Stack, mergeStyles } from '@fluentui/react';\nimport { videoContainerStyles } from '../styles/VideoTile.styles';\nimport { getEmojiResource } from './utils/videoGalleryLayoutUtils';\nimport { IReactionStyleBucket, generateStartPositionWave, getReactionMovementStyle, getReactionStyleBucket, moveAnimationStyles, opacityAnimationStyles, reactionOverlayStyle, spriteAnimationStyles } from '../styles/ReactionOverlay.style';\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES, REACTION_SCREEN_SHARE_ANIMATION_TIME_MS, REACTION_START_DISPLAY_SIZE, getCombinedKey, getReceivedUnixTime } from './utils/reactionUtils';\ntype VisibleReaction = {\n  reaction: Reaction;\n  id: string;\n  reactionMovementIndex: number;\n  styleBucket: IReactionStyleBucket;\n};\ntype ReceivedReaction = {\n  id: string;\n  status: 'animating' | 'completedAnimating' | 'ignored';\n};\nconst MAX_NUMBER_OF_EMOJIS = 50;\nconst NUMBER_OF_EMOJI_TYPES = 5;\nconst REACTION_POSITION_ARRAY_SIZE = 55;\n\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] ?? 0;\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      const userLastReaction = latestReceivedReaction.current[userId];\n      if (reaction.id === id && userLastReaction) {\n        userLastReaction.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.js

@@ -33,12 +33,10 @@ export const RemoteScreenShare = React.memo((props) => {
             onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
         };
     }, [onDisposeRemoteStreamView, userId]);
-    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 }), overlay: reactionResources && (React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" })) }));
+    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 }), overlay: reactionResources && React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" }) });
 });
 /**
  * LoadingSpinner component for displaying a loading spinner.
@@ -47,7 +45,7 @@ export const RemoteScreenShare = React.memo((props) => {
  * @returns {JSX.Element} The JSX element representing the loading spinner.
  */
 export const LoadingSpinner = (props) => {
-    return (React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
-        React.createElement(Spinner, { label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' })));
+    return React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
+        React.createElement(Spinner, { label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' }));
 };
 //# sourceMappingURL=RemoteScreenShare.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../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;AAGzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAiBA,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC3B,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EACnB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB;;;;;;;WAOG;QACH,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,EAAE,2BAA2B,CAAC,CAAC;IAC5F,CAAC;IAED,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;IAExC,MAAM,cAAc,GAAG,WAAW;QAChC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;YACnE,WAAW,EAAE,WAAW;SACzB,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,EAC7E,OAAO,EACL,iBAAiB,IAAI,CACnB,oBAAC,sBAAsB,IACrB,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAC,cAAc,GAC1B,CACH,GAEH,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAiC,EAAe,EAAE;IAC/E,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACnD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CACT,CAAC;AACJ,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 { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\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(\n  (props: {\n    userId: string;\n    displayName?: string;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => 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    reactionResources?: ReactionResources;\n    localParticipant?: VideoGalleryLocalParticipant;\n    remoteParticipants?: VideoGalleryRemoteParticipant[];\n  }) => {\n    const {\n      userId,\n      displayName,\n      isMuted,\n      renderElement,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      isReceiving,\n      participantVideoScalingMode,\n      reactionResources,\n      localParticipant,\n      remoteParticipants\n    } = props;\n    const locale = useLocale();\n\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\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n      };\n    }, [onDisposeRemoteStreamView, userId]);\n\n    const loadingMessage = displayName\n      ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n          participant: displayName\n        })\n      : '';\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n        overlay={\n          reactionResources && (\n            <MeetingReactionOverlay\n              reactionResources={reactionResources}\n              localParticipant={localParticipant}\n              remoteParticipants={remoteParticipants}\n              overlayMode=\"screen-share\"\n            />\n          )\n        }\n      />\n    );\n  }\n);\n\n/**\n * LoadingSpinner component for displaying a loading spinner.\n *\n * @param {string} props.loadingMessage - The loading message to display.\n * @returns {JSX.Element} The JSX element representing the loading spinner.\n */\nexport const LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n  return (\n    <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>\n  );\n};\n"]}
+{"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;AAGzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAc5C,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC3B,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EACnB,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,EAAE,OAAO,EAAE,iBAAiB,IAAI,oBAAC,sBAAsB,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,WAAW,EAAC,cAAc,GAAG,GAAI,CAAC;AAClf,CAAC,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAE9B,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 { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\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  reactionResources?: ReactionResources;\n  localParticipant?: VideoGalleryLocalParticipant;\n  remoteParticipants?: VideoGalleryRemoteParticipant[];\n}) => {\n  const {\n    userId,\n    displayName,\n    isMuted,\n    renderElement,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    isReceiving,\n    participantVideoScalingMode,\n    reactionResources,\n    localParticipant,\n    remoteParticipants\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} />} overlay={reactionResources && <MeetingReactionOverlay reactionResources={reactionResources} localParticipant={localParticipant} remoteParticipants={remoteParticipants} overlayMode=\"screen-share\" />} />;\n});\n\n/**\n * LoadingSpinner component for displaying a loading spinner.\n *\n * @param {string} props.loadingMessage - The loading message to display.\n * @returns {JSX.Element} The JSX element representing the loading spinner.\n */\nexport const 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/ScrollableHorizontalGallery.js

@@ -18,7 +18,9 @@ export const ScrollableHorizontalGallery = (props) => {
     }, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
     const ref = useRef();
     const { events: dragabbleEvents } = useDraggable(ref);
-    return (React.createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles) }),
-        React.createElement(Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: { childrenGap: '0.5rem' } }, horizontalGalleryElements)));
+    return React.createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles) }),
+        React.createElement(Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: {
+                childrenGap: '0.5rem'
+            } }, horizontalGalleryElements));
 };
 //# sourceMappingURL=ScrollableHorizontalGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,0CAA0C,EAC1C,iCAAiC,EAClC,MAAM,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAI3C,EAAe,EAAE;IAChB,MAAM,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAEnF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,GAAG,MAAM,EAA8D,CAAC;IACjF,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,eAAe,IACnB,SAAS,EAAE,WAAW,CAAC,0CAA0C,EAAE,eAAe,CAAC;QAEnF,oBAAC,KAAK,kBACO,+BAA+B,EAC1C,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,iCAAiC,EACzC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,yBAAyB,CACpB,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport {\n  scrollableHorizontalGalleryContainerStyles,\n  scrollableHorizontalGalleryStyles\n} from './styles/ScrollableHorizontalGallery.style';\n\n/**\n * Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n  horizontalGalleryElements?: JSX.Element[];\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  containerStyles?: IStyle;\n}): JSX.Element => {\n  const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;\n\n  useEffect(() => {\n    const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray ?? []);\n    }\n  }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n\n  const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n  const { events: dragabbleEvents } = useDraggable(ref);\n\n  return (\n    <div\n      ref={ref}\n      {...dragabbleEvents}\n      className={mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles)}\n    >\n      <Stack\n        data-ui-id=\"scrollable-horizontal-gallery\"\n        horizontal={true}\n        styles={scrollableHorizontalGalleryStyles}\n        tokens={{ childrenGap: '0.5rem' }}\n      >\n        {horizontalGalleryElements}\n      </Stack>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,0CAA0C,EAAE,iCAAiC,EAAE,MAAM,4CAA4C,CAAC;AAE3I;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAI3C,EAAe,EAAE;IAChB,MAAM,EACJ,yBAAyB,EACzB,oBAAoB,EACpB,eAAe,EAChB,GAAG,KAAK,CAAC;IACV,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAC9D,MAAM,GAAG,GAAG,MAAM,EAA8D,CAAC;IACjF,MAAM,EACJ,MAAM,EAAE,eAAe,EACxB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,2CAAK,GAAG,EAAE,GAAG,IAAM,eAAe,IAAE,SAAS,EAAE,WAAW,CAAC,0CAA0C,EAAE,eAAe,CAAC;QAC1H,oBAAC,KAAK,kBAAY,+BAA+B,EAAC,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,iCAAiC,EAAE,MAAM,EAAE;gBACvH,WAAW,EAAE,QAAQ;aACtB,IACI,yBAAyB,CACpB,CACJ,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport { scrollableHorizontalGalleryContainerStyles, scrollableHorizontalGalleryStyles } from './styles/ScrollableHorizontalGallery.style';\n\n/**\n * Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n  horizontalGalleryElements?: JSX.Element[];\n  onFetchTilesToRender?: (indexes: number[]) => void;\n  containerStyles?: IStyle;\n}): JSX.Element => {\n  const {\n    horizontalGalleryElements,\n    onFetchTilesToRender,\n    containerStyles\n  } = props;\n  useEffect(() => {\n    const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray ?? []);\n    }\n  }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n  const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n  const {\n    events: dragabbleEvents\n  } = useDraggable(ref);\n  return <div ref={ref} {...dragabbleEvents} className={mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles)}>\n      <Stack data-ui-id=\"scrollable-horizontal-gallery\" horizontal={true} styles={scrollableHorizontalGalleryStyles} tokens={{\n      childrenGap: '0.5rem'\n    }}>\n        {horizontalGalleryElements}\n      </Stack>\n    </div>;\n};"]}

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

@@ -31,9 +31,7 @@ export const SpeakerVideoLayout = (props) => {
         dominantSpeakers,
         maxGridParticipants: maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent
-            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
-            : childrenPerPage.current,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,
         pinnedParticipantUserIds,
         layout: 'speaker'
     });
@@ -56,51 +54,29 @@ export const SpeakerVideoLayout = (props) => {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {
-            return isNarrow
-                ? SMALL_FLOATING_MODAL_SIZE_REM
-                : isShort
-                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
-                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
+            return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
         }
         if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {
             return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
         }
         return LARGE_FLOATING_MODAL_SIZE_REM;
-    }, [
-        overflowGalleryTiles.length,
-        isNarrow,
-        screenShareComponent,
-        isShort,
-        overflowGalleryPosition,
-        localVideoTileSize
-    ]);
-    const wrappedLocalVideoComponent = localVideoComponent || (screenShareComponent && localVideoComponent) ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)) }, localVideoComponent)) : undefined;
+    }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, isShort, overflowGalleryPosition, localVideoTileSize]);
+    const wrappedLocalVideoComponent = localVideoComponent || screenShareComponent && localVideoComponent ? React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)) }, localVideoComponent) : undefined;
     const overflowGallery = useMemo(() => {
         if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
         }
-        return (React.createElement(OverflowGallery, { isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: !!localVideoComponent, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
+        return React.createElement(OverflowGallery, { isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: !!localVideoComponent, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            }, parentWidth: parentWidth }));
-    }, [
-        isNarrow,
-        isShort,
-        screenShareComponent,
-        overflowGalleryTiles,
-        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
-        overflowGalleryPosition,
-        setIndexesToRender,
-        styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
-        parentWidth,
-        localVideoComponent
-    ]);
-    return (React.createElement(Stack, { styles: rootLayoutStyle },
+            }, parentWidth: parentWidth });
+    }, [isNarrow, isShort, screenShareComponent, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles === null || styles === void 0 ? void 0 : styles.verticalGallery, parentWidth, localVideoComponent]);
+    return React.createElement(Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
         React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
         React.createElement(Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
             props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
-            screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition))));
+            screenShareComponent ? screenShareComponent : React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles),
+            overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)));
 };
 const overflowGalleryTrampoline = (gallery, galleryPosition) => {
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"SpeakerVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { LocalVideoTileSize } from '../VideoGallery';\nimport { LayoutProps } from './Layout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { OverflowGallery } from './OverflowGallery';\nimport {\n  SMALL_FLOATING_MODAL_SIZE_REM,\n  LARGE_FLOATING_MODAL_SIZE_REM,\n  localVideoTileContainerStyle\n} from './styles/FloatingLocalVideo.styles';\nimport {\n  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { GridLayout } from '../GridLayout';\nimport { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link SpeakerVideoLayout}.\n *\n * @private\n */\nexport interface SpeakerVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * Layout for the gallery mode to highlight the current dominant speaker\n *\n * @private\n */\nexport const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize\n  } = props;\n\n  const theme = useTheme();\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'speaker'\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const { gridTiles, overflowGalleryTiles } = renderTiles(\n    gridParticipants,\n    onRenderRemoteParticipant,\n    maxRemoteVideoStreams,\n    indexesToRender,\n    overflowGalleryParticipants,\n    dominantSpeakers\n  );\n\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const layerHostId = useId('layerhost');\n\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow\n        ? SMALL_FLOATING_MODAL_SIZE_REM\n        : isShort\n          ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n          : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [\n    overflowGalleryTiles.length,\n    isNarrow,\n    screenShareComponent,\n    isShort,\n    overflowGalleryPosition,\n    localVideoTileSize\n  ]);\n\n  const wrappedLocalVideoComponent =\n    localVideoComponent || (screenShareComponent && localVideoComponent) ? (\n      <Stack\n        className={mergeStyles(\n          localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)\n        )}\n      >\n        {localVideoComponent}\n      </Stack>\n    ) : undefined;\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isShort={isShort}\n        onFetchTilesToRender={setIndexesToRender}\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={!!localVideoComponent}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    screenShareComponent,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth,\n    localVideoComponent\n  ]);\n\n  return (\n    <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack\n        horizontal={overflowGalleryPosition === 'verticalRight'}\n        styles={innerLayoutStyle}\n        tokens={videoGalleryLayoutGap}\n      >\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? (\n          screenShareComponent\n        ) : (\n          <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>\n        )}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};\n"]}
+{"version":3,"file":"SpeakerVideoLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, Stack, mergeStyles, useTheme } from '@fluentui/react';\nimport { LocalVideoTileSize } from '../VideoGallery';\nimport { LayoutProps } from './Layout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { OverflowGallery } from './OverflowGallery';\nimport { SMALL_FLOATING_MODAL_SIZE_REM, LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle } from './styles/FloatingLocalVideo.styles';\nimport { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';\nimport { renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { GridLayout } from '../GridLayout';\nimport { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useId } from '@fluentui/react-hooks';\n\n/**\n * Props for {@link SpeakerVideoLayout}.\n *\n * @private\n */\nexport interface SpeakerVideoLayoutProps extends LayoutProps {\n  /**\n   * Whether to display the local video camera switcher button\n   */\n  showCameraSwitcherInLocalPreview?: boolean;\n  /**\n   * Height of parent element\n   */\n  parentHeight?: number;\n  /**\n   * Local video tile mode\n   */\n  localVideoTileSize?: LocalVideoTileSize;\n}\n\n/**\n * Layout for the gallery mode to highlight the current dominant speaker\n *\n * @private\n */\nexport const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    parentHeight,\n    overflowGalleryPosition = 'horizontalBottom',\n    pinnedParticipantUserIds = [],\n    localVideoTileSize\n  } = props;\n  const theme = useTheme();\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  const childrenPerPage = useRef(4);\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxGridParticipants: maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - pinnedParticipantUserIds.length % childrenPerPage.current : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'speaker'\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n  const {\n    gridTiles,\n    overflowGalleryTiles\n  } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);\n  const shouldFloatLocalVideo = remoteParticipants.length > 0;\n  if (!shouldFloatLocalVideo && localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n  const layerHostId = useId('layerhost');\n  const localVideoSizeRem = useMemo(() => {\n    if (isNarrow || localVideoTileSize === '9:16') {\n      return SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n      return isNarrow ? SMALL_FLOATING_MODAL_SIZE_REM : isShort ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n    }\n    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n    }\n    return LARGE_FLOATING_MODAL_SIZE_REM;\n  }, [overflowGalleryTiles.length, isNarrow, screenShareComponent, isShort, overflowGalleryPosition, localVideoTileSize]);\n  const wrappedLocalVideoComponent = localVideoComponent || screenShareComponent && localVideoComponent ? <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition))}>\n        {localVideoComponent}\n      </Stack> : undefined;\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n      return null;\n    }\n    return <OverflowGallery isShort={isShort} onFetchTilesToRender={setIndexesToRender} isNarrow={isNarrow} shouldFloatLocalVideo={!!localVideoComponent} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, isShort, screenShareComponent, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth, localVideoComponent]);\n  return <Stack styles={rootLayoutStyle}>\n      {wrappedLocalVideoComponent}\n      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n      <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n        {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n            {gridTiles}\n          </GridLayout>}\n        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n      </Stack>\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};"]}

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

@@ -4,6 +4,11 @@
  * @private
  */
 export const rootLayoutStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+    root: {
+        position: 'relative',
+        height: '100%',
+        width: '100%',
+        padding: '0.5rem'
+    }
 };
 //# sourceMappingURL=DefaultLayout.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/DefaultLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n"]}
+{"version":3,"file":"DefaultLayout.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/DefaultLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};"]}

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

@@ -5,32 +5,53 @@ import { _pxToRem } from "../../../../../acs-ui-common/src";
 /**
  * @private
  */
-export const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });
+export const videoGalleryOuterDivStyle = mergeStyles({
+    position: 'relative',
+    width: '100%',
+    height: '100%'
+});
 /**
  * @private
  */
 export const videoGalleryContainerStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+    root: {
+        position: 'relative',
+        height: '100%',
+        width: '100%',
+        padding: '0.5rem'
+    }
 };
 /**
  * Small floating modal width and height in rem for small screen
  */
-export const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };
+export const SMALL_FLOATING_MODAL_SIZE_REM = {
+    width: 3.625,
+    height: 6.5
+};
 /**
  * Large floating modal width and height in rem for large screen
  * Aspect ratio: 16:9
  */
-export const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.75, height: 7.5 };
+export const LARGE_FLOATING_MODAL_SIZE_REM = {
+    width: 13.75,
+    height: 7.5
+};
 /**
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-export const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };
+export const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = {
+    width: 9,
+    height: 5.063
+};
 /**
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-export const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };
+export const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = {
+    width: 11,
+    height: 6.25
+};
 /**
  * @private
  * z-index to ensure that the local video tile is above the video gallery.
@@ -58,7 +79,9 @@ export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, scree
  */
 export const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem) => {
     return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {
-        root: { boxShadow: theme.effects.elevation8 }
+        root: {
+            boxShadow: theme.effects.elevation8
+        }
     });
 };
 /**
@@ -114,8 +137,10 @@ export const localVideoCameraCycleButtonStyles = (theme) => {
             height: _pxToRem(32),
             right: '0rem',
             top: '0rem',
-            color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.
-            zIndex: 2, // shows the button directly over the local video feed.
+            color: '#FFFFFF',
+            // only shows up on running video feed to we want to force specific colours.
+            zIndex: 2,
+            // shows the button directly over the local video feed.
             background: 'rgba(0,0,0,0.4)',
             borderRadius: theme.effects.roundedCorner2
         },

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  concatStyleSets,\n  IButtonStyles,\n  IModalStyleProps,\n  IModalStyles,\n  IStackStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  Theme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.75, height: 7.5 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number },\n  screenSharePresent?: boolean,\n  overflowGalleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: overflowGalleryPosition !== 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    top: overflowGalleryPosition === 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${dockedlocalVideoTileContainerPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number }\n): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  modalSizeRem: { width: number; height: number }\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {\n        bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,\n        right: `${floatinglocalVideoModalInitialPositionGapRem}rem`\n      })\n    },\n    {\n      main: {\n        boxShadow: theme.effects.elevation8,\n        ':focus-within': {\n          boxShadow: theme.effects.elevation16,\n          border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n        }\n      }\n    },\n    localVideoModalStyles\n  );\n};\n\n/**\n * Initial position gap of the floating local video modal.\n * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from\n * the bottom and 1rem from the right.\n * @private\n */\nexport const floatinglocalVideoModalInitialPositionGapRem = 1;\n\n/**\n * Padding of the docked local video tile container.\n * @private\n */\nexport const dockedlocalVideoTileContainerPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};\n"]}
+{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IButtonStyles, IModalStyleProps, IModalStyles, IStackStyles, IStyle, IStyleFunctionOrObject, mergeStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({\n  position: 'relative',\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = {\n  width: 3.625,\n  height: 6.5\n};\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = {\n  width: 13.75,\n  height: 7.5\n};\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = {\n  width: 9,\n  height: 5.063\n};\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = {\n  width: 11,\n  height: 6.25\n};\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (theme: Theme, localVideoTileSizeRem: {\n  width: number;\n  height: number;\n}, screenSharePresent?: boolean, overflowGalleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: overflowGalleryPosition !== 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    top: overflowGalleryPosition === 'horizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${dockedlocalVideoTileContainerPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (theme: Theme, localVideoTileSizeRem: {\n  width: number;\n  height: number;\n}): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: {\n      boxShadow: theme.effects.elevation8\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (theme: Theme, modalSizeRem: {\n  width: number;\n  height: number;\n}): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets({\n    main: mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {\n      bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,\n      right: `${floatinglocalVideoModalInitialPositionGapRem}rem`\n    })\n  }, {\n    main: {\n      boxShadow: theme.effects.elevation8,\n      ':focus-within': {\n        boxShadow: theme.effects.elevation16,\n        border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n      }\n    }\n  }, localVideoModalStyles);\n};\n\n/**\n * Initial position gap of the floating local video modal.\n * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from\n * the bottom and 1rem from the right.\n * @private\n */\nexport const floatinglocalVideoModalInitialPositionGapRem = 1;\n\n/**\n * Padding of the docked local video tile container.\n * @private\n */\nexport const dockedlocalVideoTileContainerPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF',\n      // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2,\n      // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};"]}

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

@@ -4,13 +4,22 @@
  * @private
  */
 export const rootLayoutStyle = {
-    root: { position: 'relative', height: '100%', width: '100%' }
+    root: {
+        position: 'relative',
+        height: '100%',
+        width: '100%'
+    }
 };
 /**
  * @private
  */
 export const innerLayoutStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+    root: {
+        position: 'relative',
+        height: '100%',
+        width: '100%',
+        padding: '0.5rem'
+    }
 };
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideoLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CAC9D,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAiB;IAC5C,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%' }\n};\n\n/**\n * @private\n */\nexport const innerLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * @private\n */\nexport const layerHostStyle: IStyle = {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  // pointer events for layerHost set to none to make descendants interactive\n  pointerEvents: 'none'\n};\n"]}
+{"version":3,"file":"FloatingLocalVideoLayout.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/FloatingLocalVideoLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAiB;IAC5C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const innerLayoutStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * @private\n */\nexport const layerHostStyle: IStyle = {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  // pointer events for layerHost set to none to make descendants interactive\n  pointerEvents: 'none'\n};"]}