@azure/communication-react 1.4.3-alpha-202301150014.0 → 1.4.3-alpha-202301180013.0

package/dist/dist-cjs/communication-react/index.js

@@ -159,7 +159,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202301150014.0';
+var telemetryVersion = '1.4.3-alpha-202301180013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9169,10 +9169,7 @@ const participantsById = (participants) => {
 // Copyright (c) Microsoft Corporation.
 const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
 const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
-/**
- * @private
- */
-const useFloatingLocalVideoLayout = (props) => {
+const _useOrganizedParticipants = (props) => {
     var _a, _b;
     const visibleVideoParticipants = React.useRef([]);
     const visibleAudioParticipants = React.useRef([]);
@@ -9229,10 +9226,9 @@ const useFloatingLocalVideoLayout = (props) => {
     const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
     return { gridParticipants, horizontalGalleryParticipants };
 };
-/**
- * @private
- */
-const usePinnedParticipantLayout = (props) => {
+/* @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;
@@ -9242,7 +9238,7 @@ const usePinnedParticipantLayout = (props) => {
     let pinnedParticipantsWithVideoOnCount = 0;
     // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
     const pinnedParticipants = [];
-    props.pinnedParticipantUserIds.forEach((id) => {
+    (_a = props.pinnedParticipantUserIds) === null || _a === void 0 ? void 0 : _a.forEach((id) => {
         var _a;
         const pinnedParticipant = remoteParticipantMap[id];
         if (pinnedParticipant) {
@@ -9255,24 +9251,32 @@ const usePinnedParticipantLayout = (props) => {
     // 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 floatingLocalVideoLayoutProps = Object.assign(Object.assign({}, props), { 
+    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 floatingLocalVideoLayout = useFloatingLocalVideoLayout(floatingLocalVideoLayoutProps);
-    if (props.pinnedParticipantUserIds.length === 0) {
-        return floatingLocalVideoLayout;
+    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
+    if (pinnedParticipants.length === 0) {
+        return useOrganizedParticipantsResult;
     }
     return {
         gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
         horizontalGalleryParticipants: props.isScreenShareActive
-            ? pinnedParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
-            : floatingLocalVideoLayout.gridParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
+            ? 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
+ */
+const useOrganizedParticipants = (args) => {
+    /* @conditional-compile-remove(pinned-participants) */
+    return _useOrganizedParticipantsWithPinnedParticipants(args);
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -9443,22 +9447,24 @@ const VideoGalleryResponsiveHorizontalGallery = (props) => {
  * @private
  */
 const DefaultLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth } = props;
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
+    const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent
+        isScreenShareActive: !!screenShareComponent,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
-    const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {
+    const gridTiles = gridParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
-    const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {
+    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -10225,17 +10231,19 @@ const layerHostStyle = {
  * @private
  */
 const FloatingLocalVideoLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight } = props;
+    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, 
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const floatingLocalVideoLayout = useFloatingLocalVideoLayout({
+    const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent
+        isScreenShareActive: !!screenShareComponent,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
-    const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {
+    const gridTiles = gridParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -10245,7 +10253,7 @@ const FloatingLocalVideoLayout = (props) => {
     if (!shouldFloatLocalVideo && localVideoComponent) {
         gridTiles.push(localVideoComponent);
     }
-    const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {
+    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -10276,57 +10284,6 @@ const FloatingLocalVideoLayout = (props) => {
         React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) })));
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * PinnedParticipantsLayout displays remote participants and a screen sharing component in
- * a grid and horizontal gallery while floating the local video
- *
- * @private
- */
-const PinnedParticipantsLayout = (props) => {
-    const { remoteParticipants = [], pinnedParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, isLocalVideoFloating } = props;
-    const theme = useTheme();
-    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const pinnedParticipantsLayout = usePinnedParticipantLayout({
-        remoteParticipants,
-        pinnedParticipantUserIds: pinnedParticipants,
-        dominantSpeakers,
-        maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent
-    });
-    let activeVideoStreams = 0;
-    const shouldFloatLocalVideo = isLocalVideoFloating && remoteParticipants.length > 0;
-    const gridTiles = pinnedParticipantsLayout.gridParticipants.map((p) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
-    if (localVideoComponent && !shouldFloatLocalVideo) {
-        gridTiles.push(localVideoComponent);
-    }
-    const horizontalGalleryTiles = pinnedParticipantsLayout.horizontalGalleryParticipants.map((p) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
-    const layerHostId = reactHooks.useId('layerhost');
-    const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
-    // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-    showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
-            boxShadow: theme.effects.elevation8,
-            zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, isNarrow: isNarrow, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
-    return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
-        React__default['default'].createElement(react.Stack, { horizontal: false, styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
-            screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGalleryTiles.length > 0 &&
-                (isNarrow ? (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: horizontalGalleryTiles })) : (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })))),
-        wrappedLocalVideoComponent,
-        React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) })));
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -10482,7 +10439,6 @@ const VideoGallery = (props) => {
             : undefined;
     const layoutProps = React.useMemo(() => ({
         remoteParticipants,
-        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         screenShareComponent,
         showCameraSwitcherInLocalPreview,
         maxRemoteVideoStreams,
@@ -10492,7 +10448,7 @@ const VideoGallery = (props) => {
         localVideoComponent: localVideoTile,
         parentWidth: containerWidth,
         parentHeight: containerHeight,
-        isLocalVideoFloating: layout === 'floatingLocalVideo'
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants
     }), [
         remoteParticipants,
         screenShareComponent,
@@ -10505,14 +10461,9 @@ const VideoGallery = (props) => {
         containerHeight,
         onRenderRemoteVideoTile,
         defaultOnRenderVideoTile,
-        layout,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants
     ]);
     const videoGalleryLayout = React.useMemo(() => {
-        /* @conditional-compile-remove(pinned-participants) */
-        if (layoutProps.pinnedParticipants.length > 0) {
-            return React__default['default'].createElement(PinnedParticipantsLayout, Object.assign({}, layoutProps));
-        }
         if (layout === 'floatingLocalVideo') {
             return React__default['default'].createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
         }