@azure/communication-react 1.5.1-alpha-202306160013 → 1.5.1-alpha-202306170013

package/dist/communication-react.d.ts

@@ -2200,6 +2200,10 @@ export declare interface CallState {
      * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature}.
      */
     captionsFeature: CaptionsCallFeatureState;
+    /**
+     * Proxy of {@link @azure/communication-calling#OptimalVideoCountCallFeature}.
+     */
+    optimalVideoCount: OptimalVideoCountFeatureState;
     /**
      * Proxy of {@link @azure/communication-calling#RecordingCallFeature}.
      */
@@ -7410,6 +7414,18 @@ userId?: string, options?: CustomAvatarOptions,
  */
 defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element) => JSX.Element;
 
+/**
+ * State only version of Optimal Video Count Feature {@link @azure/communication-calling#OptimalVideoCountCallFeature}.
+ *
+ * @beta
+ */
+export declare interface OptimalVideoCountFeatureState {
+    /**
+     * State of the current optimal video count.
+     */
+    maxRemoteVideoStreams: number;
+}
+
 /**
  * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.
  *
@@ -9360,6 +9376,7 @@ export declare type VideoGallerySelector = (state: CallClientState, props: Calli
     localParticipant: VideoGalleryLocalParticipant;
     remoteParticipants: VideoGalleryRemoteParticipant[];
     dominantSpeakers?: string[];
+    optimalVideoCount?: number;
 };
 
 /**

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

@@ -167,7 +167,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202306160013';
+var telemetryVersion = '1.5.1-alpha-202306170013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -344,6 +344,11 @@ const getIsScreenSharingOn = (state, props) => { var _a; return (_a = state.call
  * @private
  */
 const getIsMuted = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.isMuted; };
+/* @conditional-compile-remove(optimal-video-count) */
+/**
+ * @private
+ */
+const getOptimalVideoCount = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.optimalVideoCount.maxRemoteVideoStreams; };
 /**
  * @private
  */
@@ -1500,6 +1505,10 @@ function convertSdkCallToDeclarativeCall(call) {
         /* @conditional-compile-remove(call-transfer) */
         transfer: {
             acceptedTransfers: {}
+        },
+        /* @conditional-compile-remove(optimal-video-count) */
+        optimalVideoCount: {
+            maxRemoteVideoStreams: call.feature(communicationCalling.Features.OptimalVideoCount).optimalVideoCount
         }
     };
 }
@@ -1653,6 +1662,8 @@ class CallContext$2 {
                 existingCall.localVideoStreams = call.localVideoStreams;
                 existingCall.remoteParticipants = call.remoteParticipants;
                 existingCall.transcription.isTranscriptionActive = call.transcription.isTranscriptionActive;
+                /* @conditional-compile-remove(optimal-video-count) */
+                existingCall.optimalVideoCount.maxRemoteVideoStreams = call.optimalVideoCount.maxRemoteVideoStreams;
                 existingCall.recording.isRecordingActive = call.recording.isRecordingActive;
                 /* @conditional-compile-remove(rooms) */
                 existingCall.role = call.role;
@@ -1861,6 +1872,15 @@ class CallContext$2 {
             }
         });
     }
+    /* @conditional-compile-remove(optimal-video-count) */
+    setOptimalVideoCount(callId, optimalVideoCount) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.optimalVideoCount.maxRemoteVideoStreams = optimalVideoCount;
+            }
+        });
+    }
     /* @conditional-compile-remove(rooms) */
     setParticipantRole(callId, participantKey, role) {
         this.modifyState((draft) => {
@@ -3207,6 +3227,32 @@ const latestFromEvent = (args) => ({
     valueType: args.valueType
 });
 
+/* @conditional-compile-remove(optimal-video-count) */
+/**
+ * Subscribes to a Optimal Video Count Feature events and updates the call context appropriately.
+ * @private
+ */
+class OptimalVideoCountSubscriber {
+    constructor(args) {
+        this.subscribe = () => {
+            this._localOptimalVideoCountFeature.on('optimalVideoCountChanged', this.optimalVideoCountChanged);
+        };
+        this.unsubscribe = () => {
+            this._localOptimalVideoCountFeature.off('optimalVideoCountChanged', this.optimalVideoCountChanged);
+        };
+        this.optimalVideoCountChanged = () => {
+            this.updateOptimalVideoCountState({ maxRemoteVideoStreams: this._localOptimalVideoCountFeature.optimalVideoCount });
+        };
+        this.updateOptimalVideoCountState = (newOptimalVideoCountState) => {
+            this._context.setOptimalVideoCount(this._callIdRef.callId, newOptimalVideoCountState.maxRemoteVideoStreams);
+        };
+        this._callIdRef = args.callIdRef;
+        this._context = args.context;
+        this._localOptimalVideoCountFeature = args.localOptimalVideoCountFeature;
+        this.subscribe();
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Keeps track of the listeners assigned to a particular call because when we get an event from SDK, it doesn't tell us
@@ -3267,6 +3313,8 @@ class CallSubscriber {
             this._diagnosticsSubscriber.unsubscribe();
             this._recordingSubscriber.unsubscribe();
             this._transcriptionSubscriber.unsubscribe();
+            /* @conditional-compile-remove(optimal-video-count) */
+            this._optimalVideoCountSubscriber.unsubscribe();
             /* @conditional-compile-remove(close-captions) */
             (_a = this._captionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         };
@@ -3362,6 +3410,12 @@ class CallSubscriber {
         this._participantSubscribers = new Map();
         this._recordingSubscriber = new RecordingSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Recording));
         this._transcriptionSubscriber = new TranscriptionSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Transcription));
+        /* @conditional-compile-remove(optimal-video-count) */
+        this._optimalVideoCountSubscriber = new OptimalVideoCountSubscriber({
+            callIdRef: this._callIdRef,
+            context: this._context,
+            localOptimalVideoCountFeature: this._call.feature(communicationCalling.Features.OptimalVideoCount)
+        });
         /* @conditional-compile-remove(video-background-effects) */
         this._localVideoStreamVideoEffectsSubscribers = new Map();
         this.subscribe();
@@ -11713,12 +11767,11 @@ const participantsById = (participants) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = React.useRef([]);
     const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     visibleGridParticipants.current =
         pinnedParticipantUserIds.length > 0 || isScreenShareActive
@@ -12621,9 +12674,7 @@ const DefaultLayout = (props) => {
      * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
      * this case when those components are here
      */
-    const [indexesToRender, setIndexesToRender] = React.useState([
-        ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()
-    ]);
+    const [indexesToRender, setIndexesToRender] = React.useState([]);
     const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
@@ -13446,9 +13497,7 @@ const FloatingLocalVideoLayout = (props) => {
      * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
      * this case when those components are here
      */
-    const [indexesToRender, setIndexesToRender] = React.useState([
-        ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()
-    ]);
+    const [indexesToRender, setIndexesToRender] = React.useState([]);
     const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
@@ -16313,8 +16362,12 @@ const videoGallerySelector = reselect.createSelector([
     getIsScreenSharingOn,
     getDisplayName$2,
     getIdentifier,
-    getDominantSpeakers
-], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers) => {
+    getDominantSpeakers,
+    /* @conditional-compile-remove(optimal-video-count) */
+    getOptimalVideoCount
+], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
+/* @conditional-compile-remove(optimal-video-count) */
+optimalVideoCount) => {
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -16328,7 +16381,9 @@ const videoGallerySelector = reselect.createSelector([
             : undefined,
         localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream),
         remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline$2(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants)),
-        dominantSpeakers: dominantSpeakerIds
+        dominantSpeakers: dominantSpeakerIds,
+        /* @conditional-compile-remove(optimal-video-count) */
+        maxRemoteVideoStreams: optimalVideoCount
     };
 });
 const updateUserDisplayNamesTrampoline$2 = (remoteParticipants) => {