@azure/communication-react 1.11.1-alpha-202401120013 → 1.11.1-alpha-202401140014

package/dist/communication-react.d.ts

@@ -93,6 +93,7 @@ import { RemoteParticipantState as RemoteParticipantState_2 } from '@azure/commu
 import { RoomCallLocator } from '@azure/communication-calling';
 import { ScalingMode } from '@azure/communication-calling';
 import { SendMessageOptions } from '@azure/communication-chat';
+import { SpotlightedParticipant } from '@azure/communication-calling';
 import { StartCallOptions } from '@azure/communication-calling';
 import { StartCaptionsOptions } from '@azure/communication-calling';
 import { SyntheticEvent } from 'react';
@@ -893,6 +894,18 @@ export declare interface CallAdapterCallOperations {
      * @beta
      */
     submitSurvey(survey: CallSurvey): Promise<CallSurveyResponse | undefined>;
+    /**
+     * Start spotlight
+     *
+     * @beta
+     */
+    startSpotlight(userId: string): Promise<void>;
+    /**
+     * Stop spotlight
+     *
+     * @beta
+     */
+    stopSpotlight(userId: string): Promise<void>;
 }
 
 /**
@@ -1557,10 +1570,14 @@ export declare type CallCompositeOptions = {
      */
     surveyOptions?: {
         /**
-         * Hide call survey at the end of a call.
+         * Disable call survey at the end of a call.
          * @defaultValue false
          */
-        hideSurvey?: boolean;
+        disableSurvey?: boolean;
+        /**
+         * Optional callback to add extra logic when survey is dismissed. For self-host only
+         */
+        onSurveyDismissed?: () => void;
         /**
          * Optional callback to handle survey data including free form text response
          * Note that free form text response survey option is only going to be enabled when this callback is provided
@@ -2678,6 +2695,10 @@ export declare interface CallState {
      * Hide attendee names in teams meeting
      */
     hideAttendeeNames?: boolean;
+    /**
+     * Proxy of {@link @azure/communication-calling#SpotlightCallFeature}.
+     */
+    spotlight?: SpotlightCallFeatureState;
 }
 
 /**
@@ -3087,6 +3108,18 @@ export declare interface CallWithChatAdapterManagement {
      * @beta
      */
     submitSurvey(survey: CallSurvey): Promise<CallSurveyResponse | undefined>;
+    /**
+     * Start spotlight
+     *
+     * @beta
+     */
+    startSpotlight(userId: string): Promise<void>;
+    /**
+     * Stop spotlight
+     *
+     * @beta
+     */
+    stopSpotlight(userId: string): Promise<void>;
 }
 
 /**
@@ -3401,10 +3434,14 @@ export declare type CallWithChatCompositeOptions = {
      */
     surveyOptions?: {
         /**
-         * Hide call survey at the end of a call.
+         * Disable call survey at the end of a call.
          * @defaultValue false
          */
-        hideSurvey?: boolean;
+        disableSurvey?: boolean;
+        /**
+         * Optional callback to add extra logic when survey is dismissed. For self-host only
+         */
+        onSurveyDismissed?: () => void;
         /**
          * Optional callback to handle survey data including free form text response
          * Note that free form text response survey option is only going to be enabled when this callback is provided
@@ -4906,6 +4943,8 @@ export declare interface CommonCallingHandlers {
     onSetSpokenLanguage: (language: string) => Promise<void>;
     onSetCaptionLanguage: (language: string) => Promise<void>;
     onSubmitSurvey(survey: CallSurvey): Promise<CallSurveyResponse | undefined>;
+    onStartSpotlight: (userId: string) => Promise<void>;
+    onStopSpotlight: (userId: string) => Promise<void>;
 }
 
 /**
@@ -9103,6 +9142,10 @@ export declare interface RemoteParticipantState {
      * @beta
      */
     reactionState?: ReactionState;
+    /**
+     * Proxy of {@link @azure/communication-calling#SpotlightCallFeature.spotlightedParticipants}.
+     */
+    spotlighted?: SpotlightState;
 }
 
 /**
@@ -9483,6 +9526,30 @@ export declare interface SpokenLanguageStrings {
     'zh-tw': string;
 }
 
+/**
+ * State only version of {@link @azure/communication-calling#SpotlightCallFeature}
+ *
+ * @beta
+ */
+export declare interface SpotlightCallFeatureState {
+    /**
+     * Ordered array of spotlighted participants in call
+     */
+    spotlightedParticipants: SpotlightedParticipant[];
+}
+
+/**
+ * Spotlight state with order
+ *
+ * @beta
+ */
+export declare interface SpotlightState {
+    /**
+     * Order position of spotlight in call
+     */
+    spotlightedOrderPosition?: number;
+}
+
 /**
  * Defines the methods that allow CallClient {@link @azure/communication-calling#CallClient} to be used statefully.
  * The interface provides access to proxied state and also allows registering a handler for state change events. For
@@ -10714,6 +10781,7 @@ export declare type VideoGallerySelector = (state: CallClientState, props: Calli
     remoteParticipants: VideoGalleryRemoteParticipant[];
     dominantSpeakers?: string[];
     optimalVideoCount?: number;
+    spotlightedParticipants?: string[];
 };
 
 /**

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

@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.1-alpha-202401120013';
+var telemetryVersion = '1.11.1-alpha-202401140014';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -406,6 +406,14 @@ const getLocalParticipantRaisedHand$1 = (state, props) => {
     var _a, _b;
     return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.raiseHand) === null || _b === void 0 ? void 0 : _b.localParticipantRaisedHand;
 };
+/* @conditional-compile-remove(spotlight) */
+/**
+ * @private
+ */
+const getSpotlightedParticipants = (state, props) => {
+    var _a, _b;
+    return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight) === null || _b === void 0 ? void 0 : _b.spotlightedParticipants;
+};
 /* @conditional-compile-remove(reaction) */
 /**
  * @private
@@ -1114,6 +1122,16 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
     });
     /* @conditional-compile-remove(end-of-call-survey) */
     const onSubmitSurvey = (survey) => __awaiter$M(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.CallSurvey).submitSurvey(survey)); });
+    /* @conditional-compile-remove(spotlight) */
+    const onStartSpotlight = (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
+        const participant = _toCommunicationIdentifier(userId);
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight([participant]));
+    });
+    /* @conditional-compile-remove(spotlight) */
+    const onStopSpotlight = (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
+        const participant = _toCommunicationIdentifier(userId);
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight([participant]));
+    });
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -1161,7 +1179,11 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         /* @conditional-compile-remove(close-captions) */
         onSetSpokenLanguage,
         /* @conditional-compile-remove(end-of-call-survey) */
-        onSubmitSurvey
+        onSubmitSurvey,
+        /* @conditional-compile-remove(spotlight) */
+        onStartSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStopSpotlight
     };
 });
 
@@ -1688,7 +1710,9 @@ function convertSdkParticipantToDeclarativeParticipant(participant) {
         /* @conditional-compile-remove(raise-hand) */
         raisedHand: undefined,
         /* @conditional-compile-remove(hide-attendee-name) */
-        role: participant.role
+        role: participant.role,
+        /* @conditional-compile-remove(spotlight) */
+        spotlighted: undefined
     };
 }
 /**
@@ -2170,6 +2194,27 @@ let CallContext$2 = class CallContext {
             }
         });
     }
+    /* @conditional-compile-remove(spotlight) */
+    setSpotlight(callId, spotlightedParticipants) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.spotlight = { spotlightedParticipants };
+            }
+        });
+    }
+    /* @conditional-compile-remove(spotlight) */
+    setParticipantSpotlighted(callId, spotlightedParticipant) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                const participant = call.remoteParticipants[toFlatCommunicationIdentifier(spotlightedParticipant.identifier)];
+                if (participant) {
+                    participant.spotlighted = { spotlightedOrderPosition: spotlightedParticipant.order };
+                }
+            }
+        });
+    }
     setCallScreenShareParticipant(callId, participantKey) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3752,6 +3797,33 @@ class ReactionSubscriber {
     }
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(spotlight) */
+/**
+ * @private
+ */
+class SpotlightSubscriber {
+    constructor(callIdRef, context, spotlight) {
+        this.subscribe = () => {
+            this._spotlightFeature.on('spotlightChanged', this.spotlightChanged);
+        };
+        this.unsubscribe = () => {
+            this._spotlightFeature.off('spotlightChanged', this.spotlightChanged);
+        };
+        this.spotlightChanged = () => {
+            this._context.setSpotlight(this._callIdRef.callId, this._spotlightFeature.getSpotlightedParticipants());
+            for (const addedParticipant of this._spotlightFeature.getSpotlightedParticipants()) {
+                this._context.setParticipantSpotlighted(this._callIdRef.callId, addedParticipant);
+            }
+        };
+        this._callIdRef = callIdRef;
+        this._context = context;
+        this._spotlightFeature = spotlight;
+        this.subscribe();
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -3823,6 +3895,8 @@ class CallSubscriber {
             this._capabilitiesSubscriber.unsubscribe();
             /* @conditional-compile-remove(reaction) */
             (_c = this._reactionSubscriber) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+            /* @conditional-compile-remove(spotlight) */
+            this._spotlightSubscriber.unsubscribe();
         };
         this.stateChanged = () => {
             this._context.setCallState(this._callIdRef.callId, this._call.state);
@@ -3923,6 +3997,8 @@ class CallSubscriber {
         this._localVideoStreamVideoEffectsSubscribers = new Map();
         /* @conditional-compile-remove(capabilities) */
         this._capabilitiesSubscriber = new CapabilitiesSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Capabilities));
+        /* @conditional-compile-remove(spotlight) */
+        this._spotlightSubscriber = new SpotlightSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Spotlight));
         this.subscribe();
     }
     addParticipantListener(participant) {
@@ -19648,6 +19724,9 @@ const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, is
         reaction: reaction
     });
 });
+/* @conditional-compile-remove(spotlight) */
+/** @private */
+const memoizeSpotlightedParticipantIds = memoizeOne((spotlightedParticipants) => spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.map((p) => toFlatCommunicationIdentifier(p.identifier)));
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -19691,7 +19770,9 @@ const videoGallerySelector = reselect.createSelector([
     /* @conditional-compile-remove(hide-attendee-name) */
     isHideAttendeeNamesEnabled,
     /* @conditional-compile-remove(reaction) */
-    getLocalParticipantReactionState
+    getLocalParticipantReactionState,
+    /* @conditional-compile-remove(spotlight) */
+    getSpotlightedParticipants
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
 /* @conditional-compile-remove(optimal-video-count) */
 optimalVideoCount, 
@@ -19702,7 +19783,9 @@ raisedHand,
 /* @conditional-compile-remove(hide-attendee-name) */
 isHideAttendeeNamesEnabled, 
 /* @conditional-compile-remove(reaction) */
-localParticipantReaction) => {
+localParticipantReaction, 
+/* @conditional-compile-remove(spotlight) */
+spotlightedParticipants) => {
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -19712,6 +19795,8 @@ localParticipantReaction) => {
     const noRemoteParticipants = [];
     /* @conditional-compile-remove(reaction) */
     const localParticipantReactionState = memoizedConvertToVideoTileReaction(localParticipantReaction);
+    /* @conditional-compile-remove(spotlight) */
+    const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightedParticipants);
     return {
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, 
@@ -19732,7 +19817,9 @@ localParticipantReaction) => {
         role),
         dominantSpeakers: dominantSpeakerIds,
         /* @conditional-compile-remove(optimal-video-count) */
-        maxRemoteVideoStreams: optimalVideoCount
+        maxRemoteVideoStreams: optimalVideoCount,
+        /* @conditional-compile-remove(spotlight) */
+        spotlightedParticipants: spotlightedParticipantIds
     };
 });
 const updateUserDisplayNamesTrampoline$2 = (remoteParticipants) => {
@@ -24704,6 +24791,14 @@ const createCompositeHandlers = memoizeOne((adapter) => ({
     /* @conditional-compile-remove(end-of-call-survey) */
     onSubmitSurvey: (survey) => __awaiter$g(void 0, void 0, void 0, function* () {
         return yield adapter.submitSurvey(survey);
+    }),
+    /* @conditional-compile-remove(spotlight) */
+    onStartSpotlight: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+        yield adapter.startSpotlight(userId);
+    }),
+    /* @conditional-compile-remove(spotlight) */
+    onStopSpotlight: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+        yield adapter.stopSpotlight(userId);
     })
 }));
 
@@ -30630,6 +30725,8 @@ const SurveyPaneContent = (
 const SurveyPane = (props) => {
     /* @conditional-compile-remove(end-of-call-survey) */
     const { onSubmitSurvey, onSurveySubmittedCustom } = props;
+    /* @conditional-compile-remove(end-of-call-survey-self-host) */ /* @conditional-compile-remove(end-of-call-survey) */
+    const { onSurveyDismissed } = props;
     /* @conditional-compile-remove(end-of-call-survey) */
     const strings = useLocale().strings.call;
     /* @conditional-compile-remove(end-of-call-survey) */
@@ -30679,7 +30776,13 @@ const SurveyPane = (props) => {
         improvementSuggestions
     ]);
     /* @conditional-compile-remove(end-of-call-survey) */
-    return (React.createElement(react.Panel, { headerText: strings.surveyQuestion, isOpen: isOpen, onDismiss: () => setIsOpen(false), closeButtonAriaLabel: strings.surveyCancelButtonAriaLabel, type: react.PanelType.custom, customWidth: "24rem", onRenderFooterContent: onRenderFooterContent, isFooterAtBottom: true },
+    return (React.createElement(react.Panel, { headerText: strings.surveyQuestion, isOpen: isOpen, onDismiss: () => {
+            /* @conditional-compile-remove(end-of-call-survey-self-host) */
+            if (onSurveyDismissed) {
+                onSurveyDismissed();
+            }
+            setIsOpen(false);
+        }, closeButtonAriaLabel: strings.surveyCancelButtonAriaLabel, type: react.PanelType.custom, customWidth: "24rem", onRenderFooterContent: onRenderFooterContent, isFooterAtBottom: true },
         React.createElement(SurveyPaneContent, { setShowSubmitFeedbackButton: (showButton) => {
                 setShowSubmitFeedbackButton(showButton);
             }, setRatings: (rating) => {
@@ -30701,7 +30804,7 @@ const SurveyPane = (props) => {
  * @private
  */
 function NoticePage(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const adapter = useAdapter();
     /* @conditional-compile-remove(end-of-call-survey) */
     const handlers = useHandlers();
@@ -30712,7 +30815,9 @@ function NoticePage(props) {
             React.createElement(react.Text, { className: react.mergeStyles(moreDetailsStyles), "aria-live": "assertive" }, props.moreDetails),
             !props.disableStartCallButton && (React.createElement(react.Stack, { styles: rejoinCallButtonContainerStyles },
                 React.createElement(StartCallButton, { onClick: () => adapter.joinCall(), disabled: false, rejoinCall: true, autoFocus: true })))),
-        /* @conditional-compile-remove(end-of-call-survey) */ !((_a = props.surveyOptions) === null || _a === void 0 ? void 0 : _a.hideSurvey) && (React.createElement(SurveyPane, Object.assign({}, handlers, { onSurveySubmittedCustom: (_b = props.surveyOptions) === null || _b === void 0 ? void 0 : _b.onSurveySubmitted })))));
+        /* @conditional-compile-remove(end-of-call-survey) */ !((_a = props.surveyOptions) === null || _a === void 0 ? void 0 : _a.disableSurvey) && (React.createElement(SurveyPane, Object.assign({}, handlers, { onSurveySubmittedCustom: (_b = props.surveyOptions) === null || _b === void 0 ? void 0 : _b.onSurveySubmitted, 
+            /* @conditional-compile-remove(end-of-call-survey-self-host) */
+            onSurveyDismissed: (_c = props.surveyOptions) === null || _c === void 0 ? void 0 : _c.onSurveyDismissed })))));
 }
 
 // Copyright (c) Microsoft Corporation.
@@ -31489,22 +31594,22 @@ const MainScreen = (props) => {
         case 'accessDeniedTeamsMeeting':
             pageElement = (React.createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page', 
                 /* @conditional-compile-remove(end-of-call-survey) */
-                surveyOptions: { hideSurvey: true } }));
+                surveyOptions: { disableSurvey: true } }));
             break;
         case 'removedFromCall':
             pageElement = (React.createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page', 
                 /* @conditional-compile-remove(end-of-call-survey) */
-                surveyOptions: { hideSurvey: true } }));
+                surveyOptions: { disableSurvey: true } }));
             break;
         case 'joinCallFailedDueToNoNetwork':
             pageElement = (React.createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page', 
                 /* @conditional-compile-remove(end-of-call-survey) */
-                surveyOptions: { hideSurvey: true } }));
+                surveyOptions: { disableSurvey: true } }));
             break;
         case 'leaving':
             pageElement = (React.createElement(NoticePage, { title: (_l = locale.strings.call.leavingCallTitle) !== null && _l !== void 0 ? _l : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true, 
                 /* @conditional-compile-remove(end-of-call-survey) */
-                surveyOptions: { hideSurvey: true } }));
+                surveyOptions: { disableSurvey: true } }));
             break;
         case 'leftCall': {
             const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
@@ -32656,6 +32761,18 @@ class AzureCommunicationCallAdapter {
             return this.handlers.onSubmitSurvey(survey);
         });
     }
+    /* @conditional-compile-remove(spotlight) */
+    startSpotlight(userId) {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return this.handlers.onStartSpotlight(userId);
+        });
+    }
+    /* @conditional-compile-remove(spotlight) */
+    stopSpotlight(userId) {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return this.handlers.onStopSpotlight(userId);
+        });
+    }
     getState() {
         return this.context.getState();
     }
@@ -33381,6 +33498,18 @@ class CallWithChatBackedCallAdapter {
             return this.callWithChatAdapter.submitSurvey(survey);
         });
     }
+    /* @conditional-compile-remove(spotlight) */
+    startSpotlight(userId) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return this.callWithChatAdapter.startSpotlight(userId);
+        });
+    }
+    /* @conditional-compile-remove(spotlight) */
+    stopSpotlight(userId) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return this.callWithChatAdapter.stopSpotlight(userId);
+        });
+    }
 }
 function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState) {
     return {
@@ -34491,6 +34620,18 @@ class AzureCommunicationCallWithChatAdapter {
             return this.callAdapter.submitSurvey(survey);
         });
     }
+    /* @conditional-compile-remove(spotlight) */
+    startSpotlight(userId) {
+        return __awaiter$2(this, void 0, void 0, function* () {
+            return this.callAdapter.startSpotlight(userId);
+        });
+    }
+    /* @conditional-compile-remove(spotlight) */
+    stopSpotlight(userId) {
+        return __awaiter$2(this, void 0, void 0, function* () {
+            return this.callAdapter.stopSpotlight(userId);
+        });
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     on(event, listener) {
         switch (event) {