@azure/communication-react 1.5.1-alpha-202211250013.0 → 1.5.2-alpha-202301190014.0

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

@@ -0,0 +1,23 @@
+import { IContextualMenuProps } from '@fluentui/react';
+import { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';
+/**
+ * @private
+ */
+export declare const useVideoTileContextualMenuProps: (props: {
+    remoteParticipant: VideoGalleryRemoteParticipant;
+    strings?: {
+        fitRemoteParticipantToFrame?: string | undefined;
+        fillRemoteParticipantFrame?: string | undefined;
+        pinParticipantForMe?: string | undefined;
+        pinParticipantForMeLimitReached?: string | undefined;
+        unpinParticipantForMe?: string | undefined;
+    } | undefined;
+    view?: {
+        updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;
+    } | undefined;
+    isPinned?: boolean | undefined;
+    onPinParticipant?: ((userId: string) => void) | undefined;
+    onUnpinParticipant?: ((userId: string) => void) | undefined;
+    disablePinMenuItem?: boolean | undefined;
+}) => IContextualMenuProps | undefined;
+//# sourceMappingURL=useVideoTileContextualMenuProps.d.ts.map

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

@@ -0,0 +1,96 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { useMemo } from 'react';
+/**
+ * @private
+ */
+export const useVideoTileContextualMenuProps = (props) => {
+    var _a;
+    const { view, strings, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem } = props;
+    const scalingMode = useMemo(() => {
+        var _a;
+        /* @conditional-compile-remove(pinned-participants) */
+        return (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
+        return undefined;
+    }, [
+        /* @conditional-compile-remove(pinned-participants) */
+        (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode
+    ]);
+    const contextualMenuProps = useMemo(() => {
+        const items = [];
+        if (isPinned !== undefined) {
+            if (isPinned && onUnpinParticipant && (strings === null || strings === void 0 ? void 0 : strings.unpinParticipantForMe)) {
+                items.push({
+                    key: 'unpin',
+                    text: strings.unpinParticipantForMe,
+                    iconProps: {
+                        iconName: 'UnpinParticipant',
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                    },
+                    onClick: () => onUnpinParticipant === null || onUnpinParticipant === void 0 ? void 0 : onUnpinParticipant(props.remoteParticipant.userId),
+                    'data-ui-id': 'video-tile-unpin-participant-button'
+                });
+            }
+            if (!isPinned && onPinParticipant && (strings === null || strings === void 0 ? void 0 : strings.pinParticipantForMe)) {
+                items.push({
+                    key: 'pin',
+                    text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,
+                    iconProps: {
+                        iconName: 'PinParticipant',
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                    },
+                    onClick: () => onPinParticipant === null || onPinParticipant === void 0 ? void 0 : onPinParticipant(props.remoteParticipant.userId),
+                    'data-ui-id': 'video-tile-pin-participant-button',
+                    disabled: disablePinMenuItem
+                });
+            }
+        }
+        if (scalingMode) {
+            if (scalingMode === 'Crop' && (strings === null || strings === void 0 ? void 0 : strings.fitRemoteParticipantToFrame)) {
+                items.push({
+                    key: 'fitRemoteParticipantToFrame',
+                    text: strings.fitRemoteParticipantToFrame,
+                    iconProps: {
+                        iconName: 'VideoTileScaleFit',
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                    },
+                    onClick: () => {
+                        view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
+                    },
+                    'data-ui-id': 'video-tile-fit-to-frame'
+                });
+            }
+            else if (scalingMode === 'Fit' && (strings === null || strings === void 0 ? void 0 : strings.fillRemoteParticipantFrame)) {
+                {
+                    items.push({
+                        key: 'fillRemoteParticipantFrame',
+                        text: strings.fillRemoteParticipantFrame,
+                        iconProps: {
+                            iconName: 'VideoTileScaleFill',
+                            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                        },
+                        onClick: () => {
+                            view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
+                        },
+                        'data-ui-id': 'video-tile-fill-frame'
+                    });
+                }
+            }
+        }
+        if (items.length === 0) {
+            return undefined;
+        }
+        return { items, styles: {} };
+    }, [
+        scalingMode,
+        strings,
+        view,
+        isPinned,
+        onPinParticipant,
+        onUnpinParticipant,
+        props.remoteParticipant.userId,
+        disablePinMenuItem
+    ]);
+    return contextualMenuProps;
+};
+//# sourceMappingURL=useVideoTileContextualMenuProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\n\n/**\n * @private\n */\nexport const useVideoTileContextualMenuProps = (props: {\n  remoteParticipant: VideoGalleryRemoteParticipant;\n  strings?: {\n    fitRemoteParticipantToFrame?: string;\n    fillRemoteParticipantFrame?: string;\n    pinParticipantForMe?: string;\n    pinParticipantForMeLimitReached?: string;\n    unpinParticipantForMe?: string;\n  };\n  view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n  isPinned?: boolean;\n  onPinParticipant?: (userId: string) => void;\n  onUnpinParticipant?: (userId: string) => void;\n  disablePinMenuItem?: boolean;\n}): IContextualMenuProps | undefined => {\n  const { view, strings, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem } = props;\n  const scalingMode = useMemo(() => {\n    /* @conditional-compile-remove(pinned-participants) */\n    return props.remoteParticipant.videoStream?.scalingMode;\n    return undefined;\n  }, [\n    /* @conditional-compile-remove(pinned-participants) */\n    props.remoteParticipant.videoStream?.scalingMode\n  ]);\n\n  const contextualMenuProps: IContextualMenuProps | undefined = useMemo(() => {\n    const items: IContextualMenuItem[] = [];\n\n    if (isPinned !== undefined) {\n      if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n        items.push({\n          key: 'unpin',\n          text: strings.unpinParticipantForMe,\n          iconProps: {\n            iconName: 'UnpinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => onUnpinParticipant?.(props.remoteParticipant.userId),\n          'data-ui-id': 'video-tile-unpin-participant-button'\n        });\n      }\n      if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n        items.push({\n          key: 'pin',\n          text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n          iconProps: {\n            iconName: 'PinParticipant',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => onPinParticipant?.(props.remoteParticipant.userId),\n          'data-ui-id': 'video-tile-pin-participant-button',\n          disabled: disablePinMenuItem\n        });\n      }\n    }\n    if (scalingMode) {\n      if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n        items.push({\n          key: 'fitRemoteParticipantToFrame',\n          text: strings.fitRemoteParticipantToFrame,\n          iconProps: {\n            iconName: 'VideoTileScaleFit',\n            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n          },\n          onClick: () => {\n            view?.updateScalingMode('Fit');\n          },\n          'data-ui-id': 'video-tile-fit-to-frame'\n        });\n      } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n        {\n          items.push({\n            key: 'fillRemoteParticipantFrame',\n            text: strings.fillRemoteParticipantFrame,\n            iconProps: {\n              iconName: 'VideoTileScaleFill',\n              styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n            },\n            onClick: () => {\n              view?.updateScalingMode('Crop');\n            },\n            'data-ui-id': 'video-tile-fill-frame'\n          });\n        }\n      }\n    }\n    if (items.length === 0) {\n      return undefined;\n    }\n\n    return { items, styles: {} };\n  }, [\n    scalingMode,\n    strings,\n    view,\n    isPinned,\n    onPinParticipant,\n    onUnpinParticipant,\n    props.remoteParticipant.userId,\n    disablePinMenuItem\n  ]);\n\n  return contextualMenuProps;\n};\n"]}

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

@@ -0,0 +1,27 @@
+import { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';
+/**
+ * Arguments used to determine a {@link OrganizedParticipantsResult}
+ * @private
+ */
+export interface OrganizedParticipantsArgs {
+    remoteParticipants: VideoGalleryRemoteParticipant[];
+    dominantSpeakers?: string[];
+    maxRemoteVideoStreams?: number;
+    maxAudioDominantSpeakers?: number;
+    isScreenShareActive?: boolean;
+    pinnedParticipantUserIds?: string[];
+}
+/**
+ * A result that defines grid participants and horizontal participants in the VideoGallery
+ * @private
+ */
+export interface OrganizedParticipantsResult {
+    gridParticipants: VideoGalleryParticipant[];
+    horizontalGalleryParticipants: VideoGalleryParticipant[];
+}
+/**
+ * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * @private
+ */
+export declare const useOrganizedParticipants: (args: OrganizedParticipantsArgs) => OrganizedParticipantsResult;
+//# sourceMappingURL=videoGalleryLayoutUtils.d.ts.map

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

@@ -0,0 +1,121 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { useCallback, useRef } from 'react';
+import { smartDominantSpeakerParticipants } from '../../../gallery';
+const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
+const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
+const _useOrganizedParticipants = (props) => {
+    var _a, _b;
+    const visibleVideoParticipants = useRef([]);
+    const visibleAudioParticipants = useRef([]);
+    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
+    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleVideoParticipants.current,
+        maxDominantSpeakers: maxRemoteVideoStreams
+    }).slice(0, maxRemoteVideoStreams);
+    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleAudioParticipants.current,
+        maxDominantSpeakers: maxAudioDominantSpeakers
+    });
+    const getGridParticipants = useCallback(() => {
+        if (isScreenShareActive) {
+            return [];
+        }
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return visibleVideoParticipants.current.length > 0
+            ? visibleVideoParticipants.current
+            : visibleAudioParticipants.current.concat(callingParticipants);
+        return visibleVideoParticipants.current.length > 0
+            ? visibleVideoParticipants.current
+            : visibleAudioParticipants.current;
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const gridParticipants = getGridParticipants();
+    const getHorizontalGalleryRemoteParticipants = useCallback(() => {
+        if (isScreenShareActive) {
+            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
+            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current);
+        }
+        else {
+            // If screen sharing is not active, then assign all video tiles as grid tiles.
+            // If there are no video tiles, then assign audio tiles as grid tiles.
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.length > 0
+                ? visibleAudioParticipants.current.concat(callingParticipants)
+                : [];
+            return visibleVideoParticipants.current.length > 0 ? visibleAudioParticipants.current : [];
+        }
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
+    return { gridParticipants, horizontalGalleryParticipants };
+};
+/* @conditional-compile-remove(pinned-participants) */
+const _useOrganizedParticipantsWithPinnedParticipants = (props) => {
+    var _a;
+    // map remote participants by userId
+    const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
+        map[remoteParticipant.userId] = remoteParticipant;
+        return map;
+    }, {});
+    // count pinned participants with video
+    let pinnedParticipantsWithVideoOnCount = 0;
+    // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
+    const pinnedParticipants = [];
+    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach((id) => {
+        var _a;
+        const pinnedParticipant = remoteParticipantMap[id];
+        if (pinnedParticipant) {
+            pinnedParticipants.push(pinnedParticipant);
+            if ((_a = pinnedParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
+                pinnedParticipantsWithVideoOnCount++;
+            }
+        }
+    });
+    // get unpinned participants by filtering all remote participants using a set of pinned participant user ids
+    const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);
+    const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
+    const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
+        // if there are pinned participants then we should only consider unpinned participants
+        remoteParticipants: unpinnedParticipants, 
+        // if there is a maximum of remote video streams we need to subtract pinned participants with video
+        maxRemoteVideoStreams: props.maxRemoteVideoStreams
+            ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount
+            : undefined });
+    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
+    if (pinnedParticipants.length === 0) {
+        return useOrganizedParticipantsResult;
+    }
+    return {
+        gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
+        horizontalGalleryParticipants: props.isScreenShareActive
+            ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)
+    };
+};
+/**
+ * Hook to determine which participants should be in grid and horizontal gallery and their order respectively
+ * @private
+ */
+export const useOrganizedParticipants = (args) => {
+    /* @conditional-compile-remove(pinned-participants) */
+    return _useOrganizedParticipantsWithPinnedParticipants(args);
+    return _useOrganizedParticipants(args);
+};
+//# sourceMappingURL=videoGalleryLayoutUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"videoGalleryLayoutUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gCAAgC,EAAE,MAAM,kBAAkB,CAAC;AAyBpE,MAAM,+BAA+B,GAAG,CAAC,CAAC;AAE1C,MAAM,mCAAmC,GAAG,CAAC,CAAC;AAE9C,MAAM,yBAAyB,GAAG,CAAC,KAAgC,EAA+B,EAAE;;IAClG,MAAM,wBAAwB,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAC;IAC7E,MAAM,wBAAwB,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAC;IAE7E,MAAM,EACJ,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GAAG,+BAA+B,EACvD,wBAAwB,GAAG,mCAAmC,EAC9D,mBAAmB,GAAG,KAAK,EAC5B,GAAG,KAAK,CAAC;IAEV,wBAAwB,CAAC,OAAO,GAAG,gCAAgC,CAAC;QAClE,YAAY,EAAE,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAAA,EAAA,CAAC,mCAAI,EAAE;QACjF,gBAAgB;QAChB,uBAAuB,EAAE,wBAAwB,CAAC,OAAO;QACzD,mBAAmB,EAAE,qBAAqB;KAC3C,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC;IAEnC,MAAM,2BAA2B,GAAG,IAAI,GAAG,CAAC,wBAAwB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnG,6CAA6C,CAAC,mDAAmD;IACjG,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC,CAAC;IACtG,6CAA6C,CAAC,mDAAmD;IACjG,MAAM,sBAAsB,GAAG,IAAI,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAEjF,wBAAwB,CAAC,OAAO,GAAG,gCAAgC,CAAC;QAClE,YAAY,EACV,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CACxB,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;YAC1C,6CAA6C,CAAC,mDAAmD,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAC3H,CAAC,CAAC,MAAM,CACT,CACJ,mCAAI,EAAE;QACT,gBAAgB;QAChB,uBAAuB,EAAE,wBAAwB,CAAC,OAAO;QACzD,mBAAmB,EAAE,wBAAwB;KAC9C,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAoC,EAAE;QAC5E,IAAI,mBAAmB,EAAE;YACvB,OAAO,EAAE,CAAC;SACX;QACD,6CAA6C,CAAC,mDAAmD;QACjG,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAChD,CAAC,CAAC,wBAAwB,CAAC,OAAO;YAClC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;QACjE,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAChD,CAAC,CAAC,wBAAwB,CAAC,OAAO;YAClC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC;IACvC,CAAC,EAAE;QACD,6CAA6C,CAAC,mDAAmD,CAAC,mBAAmB;QACrH,mBAAmB;KACpB,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAE/C,MAAM,sCAAsC,GAAG,WAAW,CAAC,GAAoC,EAAE;QAC/F,IAAI,mBAAmB,EAAE;YACvB,sGAAsG;YACtG,6CAA6C,CAAC,mDAAmD;YACjG,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAC7G,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC;SAClF;aAAM;YACL,8EAA8E;YAC9E,sEAAsE;YACtE,6CAA6C,CAAC,mDAAmD;YACjG,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;gBAChD,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAAC;gBAC9D,CAAC,CAAC,EAAE,CAAC;YACP,OAAO,wBAAwB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;SAC5F;IACH,CAAC,EAAE;QACD,6CAA6C,CAAC,mDAAmD,CAAC,mBAAmB;QACrH,mBAAmB;KACpB,CAAC,CAAC;IAEH,MAAM,6BAA6B,GAAG,sCAAsC,EAAE,CAAC;IAE/E,OAAO,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,CAAC;AAC7D,CAAC,CAAC;AAEF,sDAAsD;AACtD,MAAM,+CAA+C,GAAG,CACtD,KAAgC,EACH,EAAE;;IAC/B,oCAAoC;IACpC,MAAM,oBAAoB,GAAG,KAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,iBAAiB,EAAE,EAAE;QACtF,GAAG,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAC;QAClD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uCAAuC;IACvC,IAAI,kCAAkC,GAAG,CAAC,CAAC;IAE3C,sGAAsG;IACtG,MAAM,kBAAkB,GAAoC,EAAE,CAAC;IAC/D,MAAA,KAAK,CAAC,wBAAwB,0CAAE,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;;QAC7C,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,EAAE,CAAC,CAAC;QACnD,IAAI,iBAAiB,EAAE;YACrB,kBAAkB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAC3C,IAAI,MAAA,iBAAiB,CAAC,WAAW,0CAAE,WAAW,EAAE;gBAC9C,kCAAkC,EAAE,CAAC;aACtC;SACF;IACH,CAAC,CAAC,CAAC;IAEH,4GAA4G;IAC5G,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAC3E,MAAM,oBAAoB,GAAG,KAAK,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,0BAA0B,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAE/G,MAAM,6BAA6B,mCAC9B,KAAK;QACR,sFAAsF;QACtF,kBAAkB,EAAE,oBAAoB;QACxC,mGAAmG;QACnG,qBAAqB,EAAE,KAAK,CAAC,qBAAqB;YAChD,CAAC,CAAC,KAAK,CAAC,qBAAqB,GAAG,kCAAkC;YAClE,CAAC,CAAC,SAAS,GACd,CAAC;IAEF,MAAM,8BAA8B,GAAG,yBAAyB,CAAC,6BAA6B,CAAC,CAAC;IAEhG,IAAI,kBAAkB,CAAC,MAAM,KAAK,CAAC,EAAE;QACnC,OAAO,8BAA8B,CAAC;KACvC;IAED,OAAO;QACL,gBAAgB,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB;QACrE,6BAA6B,EAAE,KAAK,CAAC,mBAAmB;YACtD,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,8BAA8B,CAAC,6BAA6B,CAAC;YACzF,CAAC,CAAC,8BAA8B,CAAC,gBAAgB,CAAC,MAAM,CACpD,8BAA8B,CAAC,6BAA6B,CAC7D;KACN,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,IAA+B,EAA+B,EAAE;IACvG,sDAAsD;IACtD,OAAO,+CAA+C,CAAC,IAAI,CAAC,CAAC;IAC7D,OAAO,yBAAyB,CAAC,IAAI,CAAC,CAAC;AACzC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { useCallback, useRef } from 'react';\nimport { smartDominantSpeakerParticipants } from '../../../gallery';\nimport { VideoGalleryParticipant, VideoGalleryRemoteParticipant } from '../../../types';\n\n/**\n * Arguments used to determine a {@link OrganizedParticipantsResult}\n * @private\n */\nexport interface OrganizedParticipantsArgs {\n  remoteParticipants: VideoGalleryRemoteParticipant[];\n  dominantSpeakers?: string[];\n  maxRemoteVideoStreams?: number;\n  maxAudioDominantSpeakers?: number;\n  isScreenShareActive?: boolean;\n  /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds?: string[];\n}\n\n/**\n * A result that defines grid participants and horizontal participants in the VideoGallery\n * @private\n */\nexport interface OrganizedParticipantsResult {\n  gridParticipants: VideoGalleryParticipant[];\n  horizontalGalleryParticipants: VideoGalleryParticipant[];\n}\n\nconst DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;\n\nconst DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\nconst _useOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  const visibleVideoParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n  const visibleAudioParticipants = useRef<VideoGalleryRemoteParticipant[]>([]);\n\n  const {\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS,\n    maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS,\n    isScreenShareActive = false\n  } = props;\n\n  visibleVideoParticipants.current = smartDominantSpeakerParticipants({\n    participants: remoteParticipants?.filter((p) => p.videoStream?.isAvailable) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleVideoParticipants.current,\n    maxDominantSpeakers: maxRemoteVideoStreams\n  }).slice(0, maxRemoteVideoStreams);\n\n  const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));\n\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'));\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));\n\n  visibleAudioParticipants.current = smartDominantSpeakerParticipants({\n    participants:\n      remoteParticipants?.filter(\n        (p) =>\n          !visibleVideoParticipantsSet.has(p.userId) &&\n          /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(\n            p.userId\n          )\n      ) ?? [],\n    dominantSpeakers,\n    lastVisibleParticipants: visibleAudioParticipants.current,\n    maxDominantSpeakers: maxAudioDominantSpeakers\n  });\n\n  const getGridParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      return [];\n    }\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    return visibleVideoParticipants.current.length > 0\n      ? visibleVideoParticipants.current\n      : visibleAudioParticipants.current.concat(callingParticipants);\n    return visibleVideoParticipants.current.length > 0\n      ? visibleVideoParticipants.current\n      : visibleAudioParticipants.current;\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const gridParticipants = getGridParticipants();\n\n  const getHorizontalGalleryRemoteParticipants = useCallback((): VideoGalleryRemoteParticipant[] => {\n    if (isScreenShareActive) {\n      // If screen sharing is active, assign video and audio participants as horizontal gallery participants\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));\n      return visibleVideoParticipants.current.concat(visibleAudioParticipants.current);\n    } else {\n      // If screen sharing is not active, then assign all video tiles as grid tiles.\n      // If there are no video tiles, then assign audio tiles as grid tiles.\n      /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n      return visibleVideoParticipants.current.length > 0\n        ? visibleAudioParticipants.current.concat(callingParticipants)\n        : [];\n      return visibleVideoParticipants.current.length > 0 ? visibleAudioParticipants.current : [];\n    }\n  }, [\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,\n    isScreenShareActive\n  ]);\n\n  const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();\n\n  return { gridParticipants, horizontalGalleryParticipants };\n};\n\n/* @conditional-compile-remove(pinned-participants) */\nconst _useOrganizedParticipantsWithPinnedParticipants = (\n  props: OrganizedParticipantsArgs\n): OrganizedParticipantsResult => {\n  // map remote participants by userId\n  const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {\n    map[remoteParticipant.userId] = remoteParticipant;\n    return map;\n  }, {});\n\n  // count pinned participants with video\n  let pinnedParticipantsWithVideoOnCount = 0;\n\n  // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap\n  const pinnedParticipants: VideoGalleryRemoteParticipant[] = [];\n  props.pinnedParticipantUserIds?.forEach((id) => {\n    const pinnedParticipant = remoteParticipantMap[id];\n    if (pinnedParticipant) {\n      pinnedParticipants.push(pinnedParticipant);\n      if (pinnedParticipant.videoStream?.isAvailable) {\n        pinnedParticipantsWithVideoOnCount++;\n      }\n    }\n  });\n\n  // get unpinned participants by filtering all remote participants using a set of pinned participant user ids\n  const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);\n  const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));\n\n  const useOrganizedParticipantsProps = {\n    ...props,\n    // if there are pinned participants then we should only consider unpinned participants\n    remoteParticipants: unpinnedParticipants,\n    // if there is a maximum of remote video streams we need to subtract pinned participants with video\n    maxRemoteVideoStreams: props.maxRemoteVideoStreams\n      ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount\n      : undefined\n  };\n\n  const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);\n\n  if (pinnedParticipants.length === 0) {\n    return useOrganizedParticipantsResult;\n  }\n\n  return {\n    gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,\n    horizontalGalleryParticipants: props.isScreenShareActive\n      ? pinnedParticipants.concat(useOrganizedParticipantsResult.horizontalGalleryParticipants)\n      : useOrganizedParticipantsResult.gridParticipants.concat(\n          useOrganizedParticipantsResult.horizontalGalleryParticipants\n        )\n  };\n};\n\n/**\n * Hook to determine which participants should be in grid and horizontal gallery and their order respectively\n * @private\n */\nexport const useOrganizedParticipants = (args: OrganizedParticipantsArgs): OrganizedParticipantsResult => {\n  /* @conditional-compile-remove(pinned-participants) */\n  return _useOrganizedParticipantsWithPinnedParticipants(args);\n  return _useOrganizedParticipants(args);\n};\n"]}

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

@@ -14,6 +14,18 @@ export declare const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
  * Set aside only 6 dominant speakers for remaining audio participants
  */
 export declare const MAX_AUDIO_DOMINANT_SPEAKERS = 6;
+/**
+ * @private
+ * Default remote video tile menu options
+ */
+export declare const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS: {
+    kind: string;
+};
+/**
+ * @private
+ * Maximum number of remote video tiles that can be pinned
+ */
+export declare const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
 /**
  * All strings that may be shown on the UI in the {@link VideoGallery}.
  *
@@ -34,6 +46,14 @@ export interface VideoGalleryStrings {
     localVideoSelectedDescription: string;
     /** placeholder text for participants who does not have a display name*/
     displayNamePlaceholder: string;
+    /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */
+    fitRemoteParticipantToFrame: string;
+    /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */
+    fillRemoteParticipantFrame: string;
+    /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */
+    pinParticipantForMe: string;
+    /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */
+    unpinParticipantForMe: string;
 }
 /**
  * @public
@@ -112,6 +132,52 @@ export interface VideoGalleryProps {
      * Camera control information for button to switch cameras.
      */
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
+    /**
+     * List of pinned participant userIds.
+     */
+    pinnedParticipants?: string[];
+    /**
+     * This callback will be called when a participant video tile is pinned.
+     */
+    onPinParticipant?: (userId: string) => void;
+    /**
+     * This callback will be called when a participant video tile is un-pinned.
+     */
+    onUnpinParticipant?: (userId: string) => void;
+    /**
+     * Options for showing the remote video tile menu.
+     *
+     * @defaultValue \{ kind: 'contextual' \}
+     */
+    remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
+}
+/**
+ * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.
+ *
+ * @beta
+ */
+export interface VideoTileContextualMenuProps {
+    /**
+     * The menu property kind
+     */
+    kind: 'contextual';
+}
+/**
+ * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.
+ *
+ * @beta
+ */
+export interface VideoTileDrawerMenuProps {
+    /**
+     * The menu property kind
+     */
+    kind: 'drawer';
+    /**
+     * The optional id property provided on an element that the drawer menu should render within when a
+     * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will
+     * render within the VideoGallery component.
+     */
+    hostId?: string;
 }
 /**
  * VideoGallery represents a layout of video tiles for a specific call.