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

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.
  *
@@ -7498,6 +7514,11 @@ export declare interface ParticipantItemProps {
      * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.
      */
     participantState?: ParticipantState;
+    /**
+     * Optional aria property that prefixes the ParticipantItems aria content
+     * Takes in a unique id value of the element you would like to be read before the ParticipantItem.
+     */
+    ariaLabelledBy?: string;
 }
 
 /**
@@ -7601,6 +7622,8 @@ export declare type ParticipantListProps = {
     styles?: ParticipantListStyles;
     /** prop to determine if we should show tooltip for participants or not */
     showParticipantOverflowTooltip?: boolean;
+    /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */
+    participantAriaLabelledBy?: string;
 };
 
 /**
@@ -9360,6 +9383,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-202306180015';
 
 // 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();
@@ -10229,6 +10283,7 @@ const ParticipantItem = (props) => {
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.participantItem;
     const ids = useIdentifiers();
+    const uniqueId = React.useId();
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     // For 'me' show empty name so avatar will get 'Person' icon, when there is no name
     const meAvatarText = (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || '';
@@ -10268,7 +10323,7 @@ const ParticipantItem = (props) => {
         React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles({
                 width: `calc(100% - ${!me && participantStateString ? participantStateMaxWidth : menuButtonContainerStyle.width})`,
                 alignItems: 'center'
-            }) },
+            }), id: uniqueId, "aria-labelledby": `${props.ariaLabelledBy} ${uniqueId}` },
             avatar,
             me && React__default['default'].createElement(react.Text, { className: meTextStyle }, strings.isMeText),
             React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(infoContainerStyle) }, onRenderIcon && onRenderIcon(props))),
@@ -10390,7 +10445,7 @@ const iconStyles$2 = react.mergeStyles({
 });
 
 // Copyright (c) Microsoft Corporation.
-const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip) => {
+const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy) => {
     const callingParticipant = participant;
     let presence = undefined;
     if (callingParticipant) {
@@ -10410,7 +10465,7 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     return (React__default['default'].createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: participant.displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
-        participantState: callingParticipant.state }));
+        participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy }));
 };
 const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
     if (!excludeMe || !myUserId) {
@@ -10433,7 +10488,7 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  */
 const ParticipantList = (props) => {
     var _a, _b, _c, _d;
-    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
+    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, participantAriaLabelledBy } = props;
     const ids = useIdentifiers();
     const strings = useLocale$1().strings.participantItem;
     const displayedParticipants = React.useMemo(() => {
@@ -10471,7 +10526,7 @@ const ParticipantList = (props) => {
     const participantItemStyles = React.useMemo(() => { var _a; return react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
     return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.root) }, displayedParticipants.map((participant) => onRenderParticipant
         ? onRenderParticipant(participant)
-        : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
+        : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -11713,12 +11768,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 +12675,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 +13498,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 +16363,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 +16382,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) => {
@@ -20632,6 +20688,7 @@ const ParticipantContainer = (props) => {
  */
 const ParticipantListWithHeading = (props) => {
     const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, title, participantListProps } = props;
+    const subheadingUniqueId = React.useId();
     const theme = react.useTheme();
     const subheadingStyleThemed = React.useMemo(() => ({
         root: {
@@ -20641,11 +20698,11 @@ const ParticipantListWithHeading = (props) => {
         }
     }), [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]);
     return (React__default['default'].createElement(react.Stack, { className: participantListStack },
-        React__default['default'].createElement(react.Stack.Item, { styles: subheadingStyleThemed, "aria-label": title }, title),
+        React__default['default'].createElement(react.Stack.Item, { styles: subheadingStyleThemed, "aria-label": title, id: subheadingUniqueId }, title),
         React__default['default'].createElement(react.FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
             React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React__default['default'].createElement(React__default['default'].Fragment, null,
                     React__default['default'].createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text) }, { dataProvider: onFetchAvatarPersonaData })),
-                    (options === null || options === void 0 ? void 0 : options.text) && (React__default['default'].createElement(react.Text, { nowrap: true, styles: displayNameStyles$1 }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile })))));
+                    (options === null || options === void 0 ? void 0 : options.text) && (React__default['default'].createElement(react.Text, { nowrap: true, styles: displayNameStyles$1 }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId })))));
 };
 
 // Copyright (c) Microsoft Corporation.