@azure/communication-react 1.19.0-alpha-202409070015 → 1.19.0-alpha-202409100015

package/dist/dist-cjs/communication-react/{index-CczmcjJ7.js → index-DSX_hUlh.js}

@@ -189,7 +189,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.19.0-alpha-202409070015';
+var telemetryVersion = '1.19.0-alpha-202409100015';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -10757,7 +10757,7 @@ class _ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DFzIZcdr.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-eCfb0qTc.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -10765,7 +10765,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DFzIZcdr.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-eCfb0qTc.js'); });
 /**
  * @private
  */
@@ -13893,6 +13893,40 @@ const putVideoParticipantsFirst = (remoteParticipants) => {
     const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
     return remoteParticipantSortedByVideo;
 };
+/**
+ * @private
+ */
+const renderTiles = (gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers) => {
+    const _dominantSpeakers = dominantSpeakers !== null && dominantSpeakers !== void 0 ? dominantSpeakers : [];
+    let streamsLeftToRender = maxRemoteVideoStreams;
+    // Render the grid participants
+    const participantWithStreamsToRenderInGrid = gridParticipants.filter((p) => { var _a; return (_a = p === null || p === void 0 ? void 0 : p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const dominantSpeakerWithStreamsToRenderInGrid = _dominantSpeakers
+        .filter((userId) => participantWithStreamsToRenderInGrid.find((p) => (p === null || p === void 0 ? void 0 : p.userId) === userId))
+        .slice(0, streamsLeftToRender);
+    streamsLeftToRender = streamsLeftToRender - dominantSpeakerWithStreamsToRenderInGrid.length;
+    const gridTiles = gridParticipants.map((p) => {
+        var _a;
+        return onRenderRemoteParticipant(p, dominantSpeakerWithStreamsToRenderInGrid.includes(p.userId) ||
+            (((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && streamsLeftToRender-- > 0));
+    });
+    // Render the overflow participants
+    const participantWithStreamsToRenderInOverflow = indexesToRender
+        .map((i) => {
+        return overflowGalleryParticipants.at(i);
+    })
+        .filter((p) => { var _a; return (_a = p === null || p === void 0 ? void 0 : p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const dominantSpeakerWithStreamsToRenderInOverflow = _dominantSpeakers
+        .filter((userId) => participantWithStreamsToRenderInOverflow.find((p) => (p === null || p === void 0 ? void 0 : p.userId) === userId))
+        .slice(0, streamsLeftToRender);
+    streamsLeftToRender = streamsLeftToRender - dominantSpeakerWithStreamsToRenderInOverflow.length;
+    const overflowGalleryTiles = overflowGalleryParticipants.map((p) => {
+        var _a;
+        return onRenderRemoteParticipant(p, dominantSpeakerWithStreamsToRenderInOverflow.includes(p.userId) ||
+            (((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && streamsLeftToRender-- > 0));
+    });
+    return { gridTiles, overflowGalleryTiles };
+};
 /**
  * @private
  */
@@ -15628,13 +15662,6 @@ const DefaultLayout = (props) => {
         layout: 'default',
         spotlightedParticipantUserIds
     });
-    let activeVideoStreams = 0;
-    let 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);
-    });
     /**
      * instantiate indexes available to render with indexes available that would be on first page
      *
@@ -15643,12 +15670,7 @@ const DefaultLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = React.useState([]);
-    let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
+    let { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
     if (localVideoComponent) {
         if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {
             overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
@@ -16459,17 +16481,6 @@ const FloatingLocalVideoLayout = (props) => {
         layout: 'floatingLocalVideo',
         spotlightedParticipantUserIds
     });
-    let activeVideoStreams = 0;
-    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 shouldFloatLocalVideo = remoteParticipants.length > 0;
-    if (!shouldFloatLocalVideo && localVideoComponent) {
-        gridTiles.push(localVideoComponent);
-    }
     /**
      * instantiate indexes available to render with indexes available that would be on first page
      *
@@ -16478,15 +16489,11 @@ const FloatingLocalVideoLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = React.useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) &&
-                indexesToRender &&
-                indexesToRender.includes(i) &&
-                activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
+    const { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
+    const shouldFloatLocalVideo = remoteParticipants.length > 0;
+    if (!shouldFloatLocalVideo && localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
     const layerHostId = reactHooks.useId('layerhost');
     const localVideoSizeRem = React.useMemo(() => {
         if (isNarrow || localVideoTileSize === '9:16') {
@@ -16574,17 +16581,6 @@ const SpeakerVideoLayout = (props) => {
         pinnedParticipantUserIds,
         layout: 'speaker'
     });
-    let activeVideoStreams = 0;
-    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 shouldFloatLocalVideo = remoteParticipants.length > 0;
-    if (!shouldFloatLocalVideo && localVideoComponent) {
-        gridTiles.push(localVideoComponent);
-    }
     /**
      * instantiate indexes available to render with indexes available that would be on first page
      *
@@ -16593,15 +16589,11 @@ const SpeakerVideoLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = React.useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) &&
-                indexesToRender &&
-                indexesToRender.includes(i) &&
-                activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
+    const { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
+    const shouldFloatLocalVideo = remoteParticipants.length > 0;
+    if (!shouldFloatLocalVideo && localVideoComponent) {
+        gridTiles.push(localVideoComponent);
+    }
     const layerHostId = reactHooks.useId('layerhost');
     const localVideoSizeRem = React.useMemo(() => {
         if (isNarrow || localVideoTileSize === '9:16') {
@@ -16709,13 +16701,6 @@ const LargeGalleryLayout = (props) => {
         /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery',
         spotlightedParticipantUserIds
     });
-    let activeVideoStreams = 0;
-    let 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);
-    });
     /**
      * instantiate indexes available to render with indexes available that would be on first page
      *
@@ -16724,12 +16709,7 @@ const LargeGalleryLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = React.useState([]);
-    let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
-        var _a, _b;
-        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
-            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
-    });
+    let { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
     if (localVideoComponent) {
         if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {
             overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
@@ -19164,7 +19144,7 @@ const _TagsSurvey = (props) => {
  *
  * @param props - properties for the hold button.
  * @returns
- * @beta
+ * @public
  */
 const HoldButton = (props) => {
     const { onToggleHold, strings } = props;
@@ -20337,7 +20317,7 @@ const NotificationStack = (props) => {
 /**
  * A Notification component that is to be used to represent incoming calls to the end user.
  * Allows the user to accept or reject the incoming call.
- * @beta
+ * @public
  */
 const IncomingCallNotification$k = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -20462,7 +20442,7 @@ const incomingCallRejectButtonStyle = (theme) => {
  * Wrapper to manage multiple incoming calls
  * @param props - {@link IncomingCallManagerProps}
  * @returns
- * @beta
+ * @public
  */
 const IncomingCallStack = (props) => {
     /* @conditional-compile-remove(one-to-n-calling) */
@@ -23074,7 +23054,7 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
  */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-Bcr0yV14.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-CrqNnQ4h.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -23082,7 +23062,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
  *
 /* @conditional-compile-remove(rich-text-editor-composite-support)
  */
-const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-Bcr0yV14.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-CrqNnQ4h.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -24958,7 +24938,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne((callClient, callAgent, dev
             }
             return undefined;
         }, 
-        /* @conditional-compile-remove(PSTN-calls) */
+        /* @conditional-compile-remove(teams-identity-support-beta) */
         onAddParticipant: (userId, options) => __awaiter$G(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             /* @conditional-compile-remove(teams-identity-support) */
@@ -25207,7 +25187,7 @@ const appendActiveErrorIfDefined$1 = (activeErrorMessages, latestErrors, target,
 // Licensed under the MIT License.
 /**
  * Select the active and removed incoming calls from the stateful client for the IncomingCallNotificationStackComponent.
- * @beta
+ * @public
  */
 const incomingCallStackSelector = reselect.createSelector([getIncomingCalls, getRemovedIncomingCalls, getDeviceManager$1], (incomingCalls, removedIncomingCalls, deviceManager) => {
     // Convert incoming call state to active incoming call
@@ -29457,7 +29437,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
     get(target, prop) {
         /* @conditional-compile-remove(teams-identity-support) */
         switch (prop) {
-            /* @conditional-compile-remove(PSTN-calls) */
+            /* @conditional-compile-remove(teams-identity-support-beta) */
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
                     return __awaiter$x(this, void 0, void 0, function* () {
@@ -32609,7 +32589,7 @@ const CallControls = (props) => {
         }
     }, [adapter, startDeepNoiseSuppression]);
     /* @conditional-compile-remove(DNS) */
-    const showNoiseSuppressionButton = adapter.getState().onResolveDeepNoiseSuppressionDependency && !adapter.getState().hideNoiseSuppressionButton
+    const showNoiseSuppressionButton = adapter.getState().onResolveDeepNoiseSuppressionDependency && !adapter.getState().hideDeepNoiseSuppressionButton
         ? true
         : false;
     /* @conditional-compile-remove(DNS) */
@@ -33777,7 +33757,7 @@ const CommonCallControlBar = (props) => {
     }, [props.callAdapter, startDeepNoiseSuppression]);
     /* @conditional-compile-remove(DNS) */
     const showNoiseSuppressionButton = props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
-        !props.callAdapter.getState().hideNoiseSuppressionButton
+        !props.callAdapter.getState().hideDeepNoiseSuppressionButton
         ? true
         : false;
     /* @conditional-compile-remove(DNS) */
@@ -34807,7 +34787,7 @@ const SidePane = (props) => {
     if (!ContentRenderer && !OverrideContentRenderer) {
         return React.createElement(EmptyElement, null);
     }
-    return (React.createElement(react.Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView ? {} : sidePaneTokens },
+    return (React.createElement(react.Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView || (!props.showAddPeopleButton && (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people') ? {} : sidePaneTokens },
         HeaderToRender,
         React.createElement(react.Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
             React.createElement(react.Stack, { verticalFill: true, styles: scrollableContainer },
@@ -36959,7 +36939,7 @@ const CallArrangement = (props) => {
                     React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$4((_k = props.callControlProps.options) === null || _k === void 0 ? void 0 : _k.participantsButton), onChatButtonClicked: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.onClick, disableChatButton: (_m = props.mobileChatTabHeader) === null || _m === void 0 ? void 0 : _m.disabled }),
+                            isDisabled$4((_k = props.callControlProps.options) === null || _k === void 0 ? void 0 : _k.participantsButton), onChatButtonClicked: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.onClick, disableChatButton: (_m = props.mobileChatTabHeader) === null || _m === void 0 ? void 0 : _m.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL }),
                     props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
@@ -37999,7 +37979,7 @@ const LocalDeviceSettings = (props) => {
     const speakerDropdown = (React.createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
             props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
         }, onRenderTitle: (props) => onRenderTitle('Speaker', props) }));
-    const SafariBrowserSpeakerDropdownTrampoline = () => {
+    const safariBrowserSpeakerDropdownTrampoline = () => {
         /* @conditional-compile-remove(unsupported-browser) */
         if (isSafariWithNoSpeakers) {
             return React.createElement(React.Fragment, null);
@@ -38024,7 +38004,7 @@ const LocalDeviceSettings = (props) => {
                     dropdownProps: dropdownProps, 
                     /* @conditional-compile-remove(call-readiness) */
                     onClickEnableDevicePermission: props.onClickEnableDevicePermission }),
-                React.createElement(SafariBrowserSpeakerDropdownTrampoline, null)))));
+                safariBrowserSpeakerDropdownTrampoline()))));
 };
 const defaultDeviceId = (devices) => {
     if (devices.length === 0) {
@@ -40258,7 +40238,7 @@ class CallContext {
             /* @conditional-compile-remove(DNS) */
             deepNoiseSuppressionOnByDefault: (_f = (_e = options === null || options === void 0 ? void 0 : options.deepNoiseSuppressionOptions) === null || _e === void 0 ? void 0 : _e.deepNoiseSuppressionOnByDefault) !== null && _f !== void 0 ? _f : true,
             /* @conditional-compile-remove(DNS) */
-            hideNoiseSuppressionButton: (_h = (_g = options === null || options === void 0 ? void 0 : options.deepNoiseSuppressionOptions) === null || _g === void 0 ? void 0 : _g.hideNoiseSuppressionButton) !== null && _h !== void 0 ? _h : false,
+            hideDeepNoiseSuppressionButton: (_h = (_g = options === null || options === void 0 ? void 0 : options.deepNoiseSuppressionOptions) === null || _g === void 0 ? void 0 : _g.hideDeepNoiseSuppressionButton) !== null && _h !== void 0 ? _h : false,
             selectedVideoBackgroundEffect: undefined,
             cameraStatus: undefined,
             sounds: options === null || options === void 0 ? void 0 : options.callingSounds,
@@ -44604,4 +44584,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-CczmcjJ7.js.map
+//# sourceMappingURL=index-DSX_hUlh.js.map