@azure/communication-react 1.14.0-alpha-202403140012 → 1.14.0-alpha-202403160012

package/dist/dist-cjs/communication-react/{index-DikMcJD4.js → index-BfFCLrEO.js}

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.0-alpha-202403140012';
+var telemetryVersion = '1.14.0-alpha-202403160012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -408,7 +408,6 @@ const getRemoteParticipants$1 = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.remoteParticipants;
 };
-/* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -440,7 +439,6 @@ 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
  */
@@ -469,7 +467,6 @@ const getLatestErrors$1 = (state) => state.latestErrors;
  * @private
  */
 const getDiagnostics = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.diagnostics; };
-/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -695,7 +692,6 @@ const cameraButtonSelector = reselect__namespace.createSelector([
         selectedCamera: deviceManager.selectedCamera
     };
 });
-/* @conditional-compile-remove(raise-hand) */
 /**
  * Selector for {@link RaiseHandButton} component.
  *
@@ -928,11 +924,8 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             }, options);
         }
     });
-    /* @conditional-compile-remove(raise-hand) */
     const onRaiseHand = () => __awaiter$Q(void 0, void 0, void 0, function* () { var _a; return yield ((_a = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _a === void 0 ? void 0 : _a.raiseHand()); });
-    /* @conditional-compile-remove(raise-hand) */
     const onLowerHand = () => __awaiter$Q(void 0, void 0, void 0, function* () { var _b; return yield ((_b = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _b === void 0 ? void 0 : _b.lowerHand()); });
-    /* @conditional-compile-remove(raise-hand) */
     const onToggleRaiseHand = () => __awaiter$Q(void 0, void 0, void 0, function* () {
         const raiseHandFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand);
         const localUserId = callClient.getState().userId;
@@ -1218,11 +1211,8 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         onDisposeLocalStreamView,
         onDisposeRemoteScreenShareStreamView,
         onDisposeRemoteVideoStreamView,
-        /* @conditional-compile-remove(raise-hand) */
         onRaiseHand,
-        /* @conditional-compile-remove(raise-hand) */
         onLowerHand,
-        /* @conditional-compile-remove(raise-hand) */
         onToggleRaiseHand,
         /* @conditional-compile-remove(reaction) */
         onReactionClick: onReactionClick,
@@ -1785,7 +1775,6 @@ function convertSdkParticipantToDeclarativeParticipant(participant) {
         videoStreams: declarativeVideoStreams,
         isMuted: participant.isMuted,
         isSpeaking: participant.isSpeaking,
-        /* @conditional-compile-remove(raise-hand) */
         raisedHand: undefined,
         /* @conditional-compile-remove(hide-attendee-name) */
         role: participant.role,
@@ -1826,9 +1815,10 @@ function convertSdkCallToDeclarativeCall(call) {
         remoteParticipants: declarativeRemoteParticipants,
         remoteParticipantsEnded: {},
         recording: { isRecordingActive: false },
+        /* @conditional-compile-remove(local-recording-notification) */
+        localRecording: { isLocalRecordingActive: false },
         /* @conditional-compile-remove(ppt-live) */
         pptLive: { isActive: false },
-        /* @conditional-compile-remove(raise-hand) */
         raiseHand: { raisedHands: [] },
         /* @conditional-compile-remove(reaction) */
         localParticipantReaction: undefined,
@@ -1852,7 +1842,6 @@ function convertSdkCallToDeclarativeCall(call) {
         transfer: {
             acceptedTransfers: {}
         },
-        /* @conditional-compile-remove(optimal-video-count) */
         optimalVideoCount: {
             maxRemoteVideoStreams: call.feature(communicationCalling.Features.OptimalVideoCount).optimalVideoCount
         },
@@ -1886,9 +1875,16 @@ function convertFromSDKToDeclarativeVideoStreamRendererView(view) {
 /**
  * @private
  */
-function convertFromSDKToCaptionInfoState(caption) {
+function convertFromTeamsSDKToCaptionInfoState(caption) {
     return Object.assign({}, caption);
 }
+/* @conditional-compile-remove(acs-close-captions) */
+/**
+ * @private
+ */
+function convertFromSDKToCaptionInfoState(caption) {
+    return Object.assign({ captionText: caption.spokenText }, caption);
+}
 /* @conditional-compile-remove(video-background-effects) */
 /** @private */
 function convertFromSDKToDeclarativeVideoStreamVideoEffects(videoEffects) {
@@ -1896,7 +1892,6 @@ function convertFromSDKToDeclarativeVideoStreamVideoEffects(videoEffects) {
         activeEffects: videoEffects
     };
 }
-/* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -2022,14 +2017,11 @@ let CallContext$2 = class CallContext {
                 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(raise-hand) */
                 existingCall.raiseHand.raisedHands = call.raiseHand.raisedHands;
                 /* @conditional-compile-remove(ppt-live) */
                 existingCall.pptLive.isActive = call.pptLive.isActive;
-                /* @conditional-compile-remove(raise-hand) */
                 existingCall.raiseHand.localParticipantRaisedHand = call.raiseHand.localParticipantRaisedHand;
                 /* @conditional-compile-remove(rooms) */
                 existingCall.role = call.role;
@@ -2209,6 +2201,35 @@ let CallContext$2 = class CallContext {
             }
         });
     }
+    /* @conditional-compile-remove(local-recording-notification) */
+    setCallRecordingInfos(callId, recordingInfosAdded, lastStoppedRecording) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.recording.activeRecordings = recordingInfosAdded;
+                call.recording.lastStoppedRecording = lastStoppedRecording;
+            }
+        });
+    }
+    /* @conditional-compile-remove(local-recording-notification) */
+    setCallLocalRecordingActive(callId, isRecordingActive) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.localRecording.isLocalRecordingActive = isRecordingActive;
+            }
+        });
+    }
+    /* @conditional-compile-remove(local-recording-notification) */
+    setCallLocalRecordingInfos(callId, localRecordingInfosAdded, lastStoppedRecording) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.localRecording.activeLocalRecordings = localRecordingInfosAdded;
+                call.localRecording.lastStoppedLocalRecording = lastStoppedRecording;
+            }
+        });
+    }
     /* @conditional-compile-remove(ppt-live) */
     setCallPPTLiveActive(callId, isActive) {
         this.modifyState((draft) => {
@@ -2231,7 +2252,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     setCallRaisedHands(callId, raisedHands) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2249,7 +2269,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     setParticipantIsRaisedHand(callId, participantKey, raisedHand) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2387,7 +2406,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(optimal-video-count) */
     setOptimalVideoCount(callId, optimalVideoCount) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2683,7 +2701,7 @@ let CallContext$2 = class CallContext {
         }
     }
     /* @conditional-compile-remove(close-captions) */
-    addCaption(callId, caption) {
+    addTeamsCaption(callId, caption) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
@@ -2691,11 +2709,20 @@ let CallContext$2 = class CallContext {
                 if (caption.captionLanguage.toUpperCase() === currentCaptionLanguage.toUpperCase() ||
                     currentCaptionLanguage === '' ||
                     currentCaptionLanguage === undefined) {
-                    this.processNewCaption(call.captionsFeature.captions, convertFromSDKToCaptionInfoState(caption));
+                    this.processNewCaption(call.captionsFeature.captions, convertFromTeamsSDKToCaptionInfoState(caption));
                 }
             }
         });
     }
+    /* @conditional-compile-remove(acs-close-captions) */
+    addCaption(callId, caption) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                this.processNewCaption(call.captionsFeature.captions, convertFromSDKToCaptionInfoState(caption));
+            }
+        });
+    }
     /* @conditional-compile-remove(close-captions) */
     clearCaptions(callId) {
         this.modifyState((draft) => {
@@ -2849,7 +2876,7 @@ function clearParticipantReactionState(callContext, callId, participantKey) {
 /**
  * @private
  */
-class CaptionsSubscriber {
+class TeamsCaptionsSubscriber {
     constructor(callIdRef, context, captions) {
         this.subscribe = () => {
             this._captions.on('CaptionsActiveChanged', this.isCaptionsActiveChanged);
@@ -2864,7 +2891,7 @@ class CaptionsSubscriber {
             this._captions.off('SpokenLanguageChanged', this.isSpokenLanguageChanged);
         };
         this.onCaptionsReceived = (caption) => {
-            this._context.addCaption(this._callIdRef.callId, caption);
+            this._context.addTeamsCaption(this._callIdRef.callId, caption);
         };
         this.isCaptionsActiveChanged = () => {
             this._context.setIsCaptionActive(this._callIdRef.callId, this._captions.isCaptionsFeatureActive);
@@ -2890,6 +2917,42 @@ class CaptionsSubscriber {
         this.subscribe();
     }
 }
+/* @conditional-compile-remove(acs-close-captions) */
+/**
+ * @private
+ */
+class CaptionsSubscriber {
+    constructor(callIdRef, context, captions) {
+        this.subscribe = () => {
+            this._captions.on('CaptionsActiveChanged', this.isCaptionsActiveChanged);
+            this._captions.on('SpokenLanguageChanged', this.isSpokenLanguageChanged);
+            this._captions.on('CaptionsReceived', this.onCaptionsReceived);
+        };
+        this.unsubscribe = () => {
+            this._captions.off('CaptionsActiveChanged', this.isCaptionsActiveChanged);
+            this._captions.off('SpokenLanguageChanged', this.isSpokenLanguageChanged);
+            this._captions.off('CaptionsReceived', this.onCaptionsReceived);
+        };
+        this.onCaptionsReceived = (caption) => {
+            this._context.addCaption(this._callIdRef.callId, caption);
+        };
+        this.isCaptionsActiveChanged = () => {
+            this._context.setIsCaptionActive(this._callIdRef.callId, this._captions.isCaptionsFeatureActive);
+        };
+        this.isSpokenLanguageChanged = () => {
+            this._context.setSelectedSpokenLanguage(this._callIdRef.callId, this._captions.activeSpokenLanguage);
+        };
+        this._callIdRef = callIdRef;
+        this._context = context;
+        this._captions = captions;
+        if (this._captions.isCaptionsFeatureActive) {
+            this._context.setIsCaptionActive(this._callIdRef.callId, this._captions.isCaptionsFeatureActive);
+        }
+        this._context.setAvailableSpokenLanguages(this._callIdRef.callId, this._captions.supportedSpokenLanguages);
+        this._context.setSelectedSpokenLanguage(this._callIdRef.callId, this._captions.activeSpokenLanguage);
+        this.subscribe();
+    }
+}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -3693,13 +3756,21 @@ class RecordingSubscriber {
     constructor(callIdRef, context, recording) {
         this.subscribe = () => {
             this._recording.on('isRecordingActiveChanged', this.isAvailableChanged);
+            /* @conditional-compile-remove(local-recording-notification) */
+            this._recording.on('recordingsUpdated', this.isRecordingsUpdated);
         };
         this.unsubscribe = () => {
             this._recording.off('isRecordingActiveChanged', this.isAvailableChanged);
+            /* @conditional-compile-remove(local-recording-notification) */
+            this._recording.off('recordingsUpdated', this.isRecordingsUpdated);
         };
         this.isAvailableChanged = () => {
             this._context.setCallRecordingActive(this._callIdRef.callId, this._recording.isRecordingActive);
         };
+        /* @conditional-compile-remove(local-recording-notification) */
+        this.isRecordingsUpdated = (data) => {
+            this._context.setCallRecordingInfos(this._callIdRef.callId, this._recording.recordings, data.removed);
+        };
         this._callIdRef = callIdRef;
         this._context = context;
         this._recording = recording;
@@ -3707,6 +3778,9 @@ class RecordingSubscriber {
         // be an event for it.
         if (this._recording.isRecordingActive) {
             this._context.setCallRecordingActive(this._callIdRef.callId, this._recording.isRecordingActive);
+            /* @conditional-compile-remove(local-recording-notification) */
+            // recordings getter only returns a list of active recordings, so we can set the list of recordings here
+            this._context.setCallRecordingInfos(this._callIdRef.callId, this._recording.recordings, []);
         }
         this.subscribe();
     }
@@ -3863,8 +3937,6 @@ const latestFromEvent = (args) => ({
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
-/* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -3897,7 +3969,6 @@ class RaiseHandSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(optimal-video-count) */
 /**
  * Subscribes to a Optimal Video Count Feature events and updates the call context appropriately.
  * @private
@@ -4001,6 +4072,42 @@ class SpotlightSubscriber {
     }
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(local-recording-notification) */
+/**
+ * @private
+ */
+class LocalRecordingSubscriber {
+    constructor(callIdRef, context, recording) {
+        this.subscribe = () => {
+            this._recording.on('isLocalRecordingActiveChanged', this.isAvailableChanged);
+            this._recording.on('localRecordingsUpdated', this.isRecordingsUpdated);
+        };
+        this.unsubscribe = () => {
+            this._recording.off('isLocalRecordingActiveChanged', this.isAvailableChanged);
+            this._recording.off('localRecordingsUpdated', this.isRecordingsUpdated);
+        };
+        this.isAvailableChanged = () => {
+            this._context.setCallLocalRecordingActive(this._callIdRef.callId, this._recording.isRecordingActive);
+        };
+        this.isRecordingsUpdated = (data) => {
+            this._context.setCallLocalRecordingInfos(this._callIdRef.callId, this._recording.recordings, data.removed);
+        };
+        this._callIdRef = callIdRef;
+        this._context = context;
+        this._recording = recording;
+        // If recording as already started when we joined the call, make sure it is reflected in state as there may not
+        // be an event for it.
+        if (this._recording.isRecordingActive) {
+            this._context.setCallLocalRecordingActive(this._callIdRef.callId, this._recording.isRecordingActive);
+            // recordings getter only returns a list of active recordings, so we can set the list of recordings here
+            this._context.setCallLocalRecordingInfos(this._callIdRef.callId, this._recording.recordings, []);
+        }
+        this.subscribe();
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -4035,7 +4142,7 @@ class CallSubscriber {
             }
         };
         this.unsubscribe = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             this._call.off('stateChanged', this.stateChanged);
             /* @conditional-compile-remove(close-captions) */
             this._call.off('stateChanged', this.initCaptionSubscriber);
@@ -4062,18 +4169,20 @@ class CallSubscriber {
             this._diagnosticsSubscriber.unsubscribe();
             this._recordingSubscriber.unsubscribe();
             this._transcriptionSubscriber.unsubscribe();
-            /* @conditional-compile-remove(optimal-video-count) */
+            /* @conditional-compile-remove(local-recording-notification) */
+            this._localRecordingSubscriber.unsubscribe();
             this._optimalVideoCountSubscriber.unsubscribe();
             /* @conditional-compile-remove(ppt-live) */
             this._pptLiveSubscriber.unsubscribe();
             /* @conditional-compile-remove(close-captions) */
-            (_a = this._captionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-            /* @conditional-compile-remove(raise-hand) */
-            (_b = this._raiseHandSubscriber) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            (_a = this._TeamsCaptionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            /* @conditional-compile-remove(acs-close-captions) */
+            (_b = this._CaptionsSubscriber) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            (_c = this._raiseHandSubscriber) === null || _c === void 0 ? void 0 : _c.unsubscribe();
             /* @conditional-compile-remove(capabilities) */
             this._capabilitiesSubscriber.unsubscribe();
             /* @conditional-compile-remove(reaction) */
-            (_c = this._reactionSubscriber) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+            (_d = this._reactionSubscriber) === null || _d === void 0 ? void 0 : _d.unsubscribe();
             /* @conditional-compile-remove(spotlight) */
             this._spotlightSubscriber.unsubscribe();
         };
@@ -4083,11 +4192,17 @@ class CallSubscriber {
         /* @conditional-compile-remove(close-captions) */
         this.initCaptionSubscriber = () => {
             // subscribe to captions here so that we don't call captions when call is not initialized
-            if (this._call.state === 'Connected' && !this._captionsSubscriber) {
+            if (this._call.state === 'Connected' &&
+                !this._TeamsCaptionsSubscriber &&
+                /* @conditional-compile-remove(acs-close-captions) */ !this._CaptionsSubscriber) {
                 if (this._call.feature(communicationCalling.Features.Captions).captions.kind === 'TeamsCaptions') {
-                    this._captionsSubscriber = new CaptionsSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Captions).captions);
-                    this._call.off('stateChanged', this.initCaptionSubscriber);
+                    this._TeamsCaptionsSubscriber = new TeamsCaptionsSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Captions).captions);
                 }
+                else {
+                    /* @conditional-compile-remove(acs-close-captions) */
+                    this._CaptionsSubscriber = new CaptionsSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Captions).captions);
+                }
+                this._call.off('stateChanged', this.initCaptionSubscriber);
             }
         };
         this.idChanged = () => {
@@ -4161,14 +4276,14 @@ class CallSubscriber {
         this._diagnosticsSubscriber = new UserFacingDiagnosticsSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.UserFacingDiagnostics));
         this._participantSubscribers = new Map();
         this._recordingSubscriber = new RecordingSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Recording));
+        /* @conditional-compile-remove(local-recording-notification) */
+        this._localRecordingSubscriber = new LocalRecordingSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.LocalRecording));
         /* @conditional-compile-remove(ppt-live) */
         this._pptLiveSubscriber = new PPTLiveSubscriber(this._callIdRef, this._context, this._call);
         this._transcriptionSubscriber = new TranscriptionSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Transcription));
-        /* @conditional-compile-remove(raise-hand) */
         this._raiseHandSubscriber = new RaiseHandSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.RaiseHand));
         /* @conditional-compile-remove(reaction) */
         this._reactionSubscriber = new ReactionSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Reaction));
-        /* @conditional-compile-remove(optimal-video-count) */
         this._optimalVideoCountSubscriber = new OptimalVideoCountSubscriber({
             callIdRef: this._callIdRef,
             context: this._context,
@@ -4554,7 +4669,13 @@ class ProxyCallCommon {
                     /* @conditional-compile-remove(close-captions) */
                     if (args[0] === communicationCalling.Features.Captions) {
                         const captionsFeature = target.feature(communicationCalling.Features.Captions).captions;
-                        const proxyFeature = new ProxyTeamsCaptions(this._context, target);
+                        let proxyFeature;
+                        /* @conditional-compile-remove(acs-close-captions) */
+                        if (captionsFeature.kind === 'Captions') {
+                            proxyFeature = new ProxyCaptions(this._context, target);
+                            return { captions: new Proxy(captionsFeature, proxyFeature) };
+                        }
+                        proxyFeature = new ProxyTeamsCaptions(this._context, target);
                         return { captions: new Proxy(captionsFeature, proxyFeature) };
                     }
                     /* @conditional-compile-remove(call-transfer) */
@@ -4621,6 +4742,44 @@ class ProxyTeamsCaptions {
         }
     }
 }
+/* @conditional-compile-remove(acs-close-captions) */
+/**
+ * @private
+ */
+class ProxyCaptions {
+    constructor(context, call) {
+        this._context = context;
+        this._call = call;
+    }
+    get(target, prop) {
+        switch (prop) {
+            case 'startCaptions':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$I(this, void 0, void 0, function* () {
+                    var _a, _b;
+                    this._context.setStartCaptionsInProgress(this._call.id, true);
+                    const ret = yield target.startCaptions(...args);
+                    this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
+                    return ret;
+                }), 'Call.feature');
+            case 'stopCaptions':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$I(this, void 0, void 0, function* () {
+                    const ret = yield target.stopCaptions(...args);
+                    this._context.setIsCaptionActive(this._call.id, false);
+                    this._context.setStartCaptionsInProgress(this._call.id, false);
+                    this._context.clearCaptions(this._call.id);
+                    return ret;
+                }), 'Call.feature');
+            case 'setSpokenLanguage':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$I(this, void 0, void 0, function* () {
+                    const ret = yield target.setSpokenLanguage(...args);
+                    this._context.setSelectedSpokenLanguage(this._call.id, args[0]);
+                    return ret;
+                }), 'Call.feature');
+            default:
+                return Reflect.get(target, prop);
+        }
+    }
+}
 /* @conditional-compile-remove(spotlight) */
 /**
  * @private
@@ -6313,7 +6472,6 @@ const lightTheme = {
         callRedDark: '#8b2c3d',
         callRedDarker: '#772a38',
         iconWhite: '#ffffff',
-        /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
     semanticColors: {
@@ -6356,14 +6514,13 @@ const darkTheme = {
         callRedDark: '#a42e43',
         callRedDarker: '#8b2c3d',
         iconWhite: '#ffffff',
-        /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
     semanticColors: {
         errorText: '#f1707b'
     }
 };
-/* @conditional-compile-remove(image-overlay) */
+/* @conditional-compile-remove(image-overlay-theme) */
 /**
  * Preset dark theme for the ImageOverlay component.
  *
@@ -6551,13 +6708,9 @@ const DEFAULT_COMPONENT_ICONS = {
     ControlButtonParticipantsContextualMenuItem: React.createElement(reactIcons.People20Regular, null),
     ControlButtonScreenShareStart: React.createElement(reactIcons.ShareScreenStart20Filled, null),
     ControlButtonScreenShareStop: React.createElement(reactIcons.ShareScreenStop20Filled, null),
-    /* @conditional-compile-remove(raise-hand) */
     ControlButtonRaiseHand: React.createElement(ControlButtonRaiseHandIcon, null),
-    /* @conditional-compile-remove(raise-hand) */
     ControlButtonLowerHand: React.createElement(ControlButtonLowerHandIcon, null),
-    /* @conditional-compile-remove(raise-hand) */
     RaiseHandContextualMenuItem: React.createElement(reactIcons.HandRight20Regular, null),
-    /* @conditional-compile-remove(raise-hand) */
     LowerHandContextualMenuItem: React.createElement(reactIcons.HandRightOff20Regular, null),
     /* @conditional-compile-remove(reaction) */
     ReactionButtonIcon: React.createElement(reactIcons.Emoji20Regular, null),
@@ -9158,18 +9311,23 @@ const ImageOverlay = (props) => {
     /* @conditional-compile-remove(image-overlay) */
     const localeStrings = useLocale$1().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = React.useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
+    /* @conditional-compile-remove(image-overlay) */
+    const overlayTheme = React.useMemo(() => {
+        /* @conditional-compile-remove(image-overlay-theme) */
+        return imageOverlayTheme;
+    }, []);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(overlayTheme);
     const renderHeaderBar = () => {
         return (React.createElement(react.Stack, { className: react.mergeStyles(headerStyle) },
             React.createElement(react.Stack, { className: react.mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(imageOverlayTheme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(overlayTheme)), "aria-label": title || 'Image' }, title)),
             React.createElement(react.Stack, { className: react.mergeStyles(controlBarContainerStyle) },
                 onDownloadButtonClicked && (React.createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle), 
                     /* @conditional-compile-remove(image-overlay) */
                     text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel, disabled: imageSrc === '' })),
-                onDownloadButtonClicked && (React.createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite', disabled: imageSrc === '' })),
-                React.createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss, 
+                onDownloadButtonClicked && (React.createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(overlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite', disabled: imageSrc === '' })),
+                React.createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(overlayTheme)), onClick: onDismiss, 
                     /* @conditional-compile-remove(image-overlay) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
@@ -9180,8 +9338,8 @@ const ImageOverlay = (props) => {
                 event.persist();
             } }))));
     };
-    return (React.createElement(react.Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(imageOverlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-        React.createElement(FluentThemeProvider, { fluentTheme: imageOverlayTheme, rootStyle: themeProviderRootStyle },
+    return (React.createElement(react.Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(overlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
+        React.createElement(FluentThemeProvider, { fluentTheme: overlayTheme, rootStyle: themeProviderRootStyle },
             renderHeaderBar(),
             renderBodyWithLightDismiss())));
 };
@@ -12861,8 +13019,6 @@ const participantStateStringTrampoline$1 = (props, strings) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
-/* @conditional-compile-remove(raise-hand) */
 /**
  * Raised hand icon for ParticipantList and VideoTitle.
  *
@@ -13131,16 +13287,12 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     };
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
-    /* @conditional-compile-remove(raise-hand) */
     const callingPalette = theme.callingPalette;
-    const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) ||
-        (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) ||
-        (
-        /* @conditional-compile-remove(raise-hand) */ callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand)
+    const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand)
         ? () => {
             var _a;
             return (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
-                /* @conditional-compile-remove(raise-hand) */ callingParticipant.raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
+                callingParticipant.raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, style: {
                         alignItems: 'center',
                         padding: '0.1rem 0.2rem',
                         backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralLighter,
@@ -13155,7 +13307,6 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
                 /* @conditional-compile-remove(spotlight) */ callingParticipant.spotlight && (React.createElement(react.Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles$2 }))));
         }
         : () => null;
-    /* @conditional-compile-remove(raise-hand) */
     const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) && onRenderAvatar
         ? (userId, options, defaultOnRender) => onRenderAvatar(userId, Object.assign(Object.assign({}, options), { styles: { root: { border: callingPalette.raiseHandGold } } }), defaultOnRender)
         : onRenderAvatar;
@@ -13168,11 +13319,9 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
  * Sort participants by raised hand order position
  */
 const sortParticipants = (participants) => {
-    /* @conditional-compile-remove(raise-hand) */
     const isParticipantListCallParticipant = function (participant) {
         return 'raisedHand' in participant;
     };
-    /* @conditional-compile-remove(raise-hand) */
     participants.sort((a, b) => {
         if (!isParticipantListCallParticipant(a) || !isParticipantListCallParticipant(b)) {
             return 0;
@@ -13218,7 +13367,6 @@ const ParticipantList$k = (props) => {
     totalParticipantCount, 
     /* @conditional-compile-remove(total-participant-count) */
     strings, participantAriaLabelledBy } = props;
-    /* @conditional-compile-remove(raise-hand) */
     const theme = useTheme();
     const ids = useIdentifiers();
     const participantItemStrings = useLocale$1().strings.participantItem;
@@ -13253,7 +13401,6 @@ const ParticipantList$k = (props) => {
         onFetchParticipantMenuItems,
         onRemoveParticipant,
         (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles,
-        /* @conditional-compile-remove(raise-hand) */
         participantItemStrings.removeButtonLabel
     ]);
     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]);
@@ -13262,9 +13409,7 @@ const ParticipantList$k = (props) => {
     return (React.createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.root), role: 'menu' },
         displayedParticipants.map((participant) => onRenderParticipant
             ? onRenderParticipant(participant)
-            : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, 
-            /* @conditional-compile-remove(raise-hand) */
-            theme)),
+            : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme)),
         /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&
             totalParticipantCount &&
             totalParticipantCount > displayedParticipants.length && (React.createElement(react.Text, { style: { fontWeight: 400, margin: '0.5rem' } }, _formatString(overflowParticipantCountString, {
@@ -13299,7 +13444,7 @@ const DrawerMenuItem = (props) => {
     const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
     const secondaryIcon = props.secondaryIconProps ? (React.createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps))) : props.subMenuProps ? (React.createElement(MenuItemIcon, { iconName: "ChevronRight" })) : undefined;
     return (React.createElement(react.FocusZone, { shouldFocusOnMount: props.shouldFocusOnMount },
-        React.createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id },
+        React.createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles$1(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles$1(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap, id: props.id },
             props.iconProps && (React.createElement(react.Stack.Item, { role: "presentation", styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined },
                 React.createElement(MenuItemIcon, Object.assign({}, props.iconProps)))),
             React.createElement(react.Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
@@ -13313,10 +13458,10 @@ const DrawerMenuItem = (props) => {
 };
 const MenuItemIcon = (props) => (React.createElement(react.FontIcon, Object.assign({ className: react.mergeStyles(iconStyles$1) }, props)));
 const menuItemChildrenGap = { childrenGap: '0.5rem' };
-const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
+const drawerMenuItemRootStyles$1 = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
         background: hoverBackground
     } }));
-const disabledDrawerMenuItemRootStyles = (background) => ({
+const disabledDrawerMenuItemRootStyles$1 = (background) => ({
     pointerEvents: 'none',
     background: background,
     ':hover, :focus': {
@@ -13442,6 +13587,9 @@ const drawerContentContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+const isDrawerMenuItem = (item) => {
+    return item.onRendererContent === undefined;
+};
 /**
  * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.
  *
@@ -13458,7 +13606,7 @@ const _DrawerMenu = (props) => {
         var _a;
         let items = props.items;
         for (const subMenuKey of selectedKeyPath) {
-            items = (_a = items === null || items === void 0 ? void 0 : items.find((item) => item.itemKey === subMenuKey)) === null || _a === void 0 ? void 0 : _a.subMenuProps;
+            items = (_a = items === null || items === void 0 ? void 0 : items.find((item) => isDrawerMenuItem(item) && item.itemKey === subMenuKey)) === null || _a === void 0 ? void 0 : _a.subMenuProps;
         }
         return items;
     }, [props.items, selectedKeyPath]);
@@ -13473,7 +13621,7 @@ const _DrawerMenu = (props) => {
     }, [selectedKeyPath]);
     // Ensure the first item has a border radius that matches the DrawerSurface
     const borderRadius = useTheme().effects.roundedCorner4;
-    const firstItemStyle = menuItemsToRender && ((_a = menuItemsToRender[0]) === null || _a === void 0 ? void 0 : _a.styles);
+    const firstItemStyle = (menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 : menuItemsToRender[0]) && ((_a = menuItemsToRender[0]) === null || _a === void 0 ? void 0 : _a.styles);
     const modifiedFirstItemStyle = React.useMemo(() => react.merge(firstItemStyle !== null && firstItemStyle !== void 0 ? firstItemStyle : {}, {
         root: {
             borderTopRightRadius: borderRadius,
@@ -13482,14 +13630,192 @@ const _DrawerMenu = (props) => {
     }), [firstItemStyle, borderRadius]);
     return (React.createElement(_DrawerSurface, { disableMaxHeight: props.disableMaxHeight, styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
         React.createElement(react.Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
-            menuItemsToRender.slice(0, 1).map((item) => (React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${item.itemKey}` + '0', shouldFocusOnMount: true, styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
-                    onItemClick(item, ev, itemKey);
-                } })))), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
-            menuItemsToRender.slice(1).map((item, i) => (React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${item.itemKey}` + `${i + 1}`, onItemClick: (ev, itemKey) => {
-                    onItemClick(item, ev, itemKey);
-                } })))))));
+            menuItemsToRender.slice(0, 1).map((item) => {
+                var _a;
+                return isDrawerMenuItem(item) ? (React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${item.itemKey}` + '0', shouldFocusOnMount: item.itemKey === 'reactions' ? false : true, styles: modifiedFirstItemStyle, onItemClick: item.itemKey === 'reactions'
+                        ? undefined
+                        : (ev, itemKey) => {
+                            onItemClick(item, ev, itemKey);
+                        } }))) : ((_a = item.onRendererContent) === null || _a === void 0 ? void 0 : _a.call(item));
+            }), menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
+            menuItemsToRender.slice(1).map((item, i) => {
+                var _a;
+                return isDrawerMenuItem(item) ? (React.createElement(DrawerMenuItem, Object.assign({}, item, { key: `${item.itemKey}` + `${i + 1}`, onItemClick: (ev, itemKey) => {
+                        onItemClick(item, ev, itemKey);
+                    } }))) : ((_a = item.onRendererContent) === null || _a === void 0 ? void 0 : _a.call(item));
+            }))));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const playFrames$1 = react.memoizeFunction(() => react.keyframes({
+    from: {
+        backgroundPosition: '0px 8568px'
+    },
+    to: {
+        backgroundPosition: '0px 0px'
+    }
+}));
+/* @conditional-compile-remove(reaction) */
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+const emojiStyles = (backgroundImage, animationPlayState) => {
+    const imageResourceUrl = `url(${backgroundImage})`;
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        backgroundImage: imageResourceUrl,
+        animationName: playFrames$1(),
+        animationDuration: '8.12s',
+        animationTimingFunction: `steps(102)`,
+        animationPlayState: animationPlayState,
+        animationIterationCount: 'infinite',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: 'center',
+        backgroundSize: `2.75rem 133.875rem`,
+        transition: 'opacity 2s',
+        backgroundColor: 'transparent',
+        transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+const reactionEmojiMenuStyles = () => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width: '13.75rem',
+        height: '2.625rem'
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+const reactionToolTipHostStyle = () => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            width: '100%'
+        }
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+const mobileViewMenuItemStyle = () => {
+    return {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width: '100%',
+        height: '2.625rem'
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+const mobileViewEmojiStyles = (backgroundImage, animationPlayState) => {
+    const imageResourceUrl = `url(${backgroundImage})`;
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '2.75rem',
+        backgroundImage: imageResourceUrl,
+        animationName: playFrames$1(),
+        animationDuration: '8.12s',
+        animationTimingFunction: `steps(102)`,
+        animationPlayState: animationPlayState,
+        animationIterationCount: 'infinite',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: 'center',
+        backgroundSize: `2.75rem 133.875rem`,
+        transition: 'opacity 2s',
+        backgroundColor: 'transparent',
+        transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
+    };
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(reaction) */
+/**
+ * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
+ *
+ * @internal
+ */
+const _ReactionDrawerMenuItem = (props) => {
+    var _a, _b, _c, _d, _e;
+    const theme = useTheme();
+    const resources = props.reactionResources;
+    const emojiResource = new Map([
+        ['like', (_a = resources === null || resources === void 0 ? void 0 : resources.likeReaction) === null || _a === void 0 ? void 0 : _a.url],
+        ['heart', (_b = resources === null || resources === void 0 ? void 0 : resources.heartReaction) === null || _b === void 0 ? void 0 : _b.url],
+        ['laugh', (_c = resources === null || resources === void 0 ? void 0 : resources.laughReaction) === null || _c === void 0 ? void 0 : _c.url],
+        ['applause', (_d = resources === null || resources === void 0 ? void 0 : resources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url],
+        ['surprised', (_e = resources === null || resources === void 0 ? void 0 : resources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]
+    ]);
+    const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
+    const borderRadius = useTheme().effects.roundedCorner4;
+    const modifiedFirstItemStyle = {
+        root: {
+            borderTopRightRadius: borderRadius,
+            borderTopLeftRadius: borderRadius,
+            marginTop: '12px'
+        }
+    };
+    return (React.createElement(react.Stack, { id: "reaction", role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, modifiedFirstItemStyle.root) },
+        React.createElement("div", { style: mobileViewMenuItemStyle() }, emojis.map((emoji, index) => {
+            const resourceUrl = emojiResource.get(emoji.toString());
+            return (React.createElement(react.IconButton, { key: index, onClick: () => {
+                    var _a;
+                    (_a = props.onReactionClick) === null || _a === void 0 ? void 0 : _a.call(props, emoji);
+                }, style: mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running') }));
+        }))));
+};
+/* @conditional-compile-remove(reaction) */
+const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
+        background: hoverBackground
+    } }));
+/* @conditional-compile-remove(reaction) */
+const disabledDrawerMenuItemRootStyles = (background) => ({
+    pointerEvents: 'none',
+    background: background,
+    ':hover, :focus': {
+        background: background
+    }
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
@@ -13933,7 +14259,7 @@ const raiseHandLimitedSpaceStyles = {
 /**
  * @private
  */
-const playFrames$1 = react.memoizeFunction(() => react.keyframes({
+const playFrames = react.memoizeFunction(() => react.keyframes({
     from: {
         backgroundPosition: '0px 8568px'
     },
@@ -13951,7 +14277,7 @@ const reactionRenderingStyle = (args) => {
         height: '100%',
         width: '100%',
         overflow: 'hidden',
-        animationName: playFrames$1(),
+        animationName: playFrames(),
         backgroundImage: imageUrl,
         animationDuration: '5.12s',
         animationTimingFunction: `steps(102)`,
@@ -14333,9 +14659,7 @@ const VideoTileMoreOptionsButton = (props) => {
 const VideoTile = (props) => {
     const { children, displayName, initialsName, isMirrored, isMuted, 
     /* @conditional-compile-remove(spotlight) */
-    isSpotlighted, isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
-    /* @conditional-compile-remove(raise-hand) */
-    raisedHand, 
+    isSpotlighted, isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, raisedHand, 
     /* @conditional-compile-remove(reaction) */
     reaction, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, contextualMenu, 
     /* @conditional-compile-remove(reaction) */
@@ -14399,9 +14723,7 @@ const VideoTile = (props) => {
     const participantStateString = participantStateStringTrampoline(props, locale);
     const canShowContextMenuButton = isHovered || isFocused;
     let raisedHandBackgroundColor = '';
-    /* @conditional-compile-remove(raise-hand) */
     const callingPalette = theme.callingPalette;
-    /* @conditional-compile-remove(raise-hand) */
     raisedHandBackgroundColor = callingPalette.raiseHandGold;
     /* @conditional-compile-remove(reaction) */
     const backgroundImageUrl = reaction !== undefined && reactionResources !== undefined
@@ -14436,7 +14758,7 @@ const VideoTile = (props) => {
     return (React.createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
             borderRadius: theme.effects.roundedCorner4
-        }, (isSpeaking || /* @conditional-compile-remove(raise-hand) */ raisedHand) && {
+        }, (isSpeaking || raisedHand) && {
             '&::after': {
                 content: `''`,
                 position: 'absolute',
@@ -14477,7 +14799,7 @@ const VideoTile = (props) => {
                         React.createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) }))),
                     React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, canShowContextMenuButton: canShowContextMenuButton })))),
             children && (React.createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)),
-            /* @conditional-compile-remove(raise-hand) */ raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
+            raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
                 React.createElement(react.Stack.Item, null,
                     React.createElement(react.Text, null, raisedHand.raisedHandOrderPosition)),
                 React.createElement(react.Stack.Item, null,
@@ -14599,9 +14921,7 @@ const _RemoteVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
     return (React.createElement(react.Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
-            /* @conditional-compile-remove(raise-hand) */
-            raisedHand: remoteParticipant.raisedHand, 
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, 
             /* @conditional-compile-remove(reaction) */
             reaction: remoteParticipant.reaction, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
             /* @conditional-compile-remove(one-to-n-calling) */
@@ -14856,9 +15176,7 @@ const LocalVideoCameraCycleButton = (props) => {
  * @internal
  */
 const _LocalVideoTile = React.memo((props) => {
-    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, 
-    /* @conditional-compile-remove(raise-hand) */
-    raisedHand, 
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, 
     /* @conditional-compile-remove(reaction) */
     reaction, 
     /* @conditional-compile-remove(spotlight) */
@@ -14963,9 +15281,7 @@ const _LocalVideoTile = React.memo((props) => {
     ]);
     return (React.createElement(react.Stack, { className: react.mergeStyles({ width: '100%', height: '100%' }), 
         /* @conditional-compile-remove(spotlight) */ onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
-        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, 
-            /* @conditional-compile-remove(raise-hand) */
-            raisedHand: raisedHand, 
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, 
             /* @conditional-compile-remove(reaction) */
             reaction: reaction, 
             /* @conditional-compile-remove(spotlight) */
@@ -17157,9 +17473,7 @@ const VideoGallery = (props) => {
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
         };
         return (React.createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
-            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
-                /* @conditional-compile-remove(raise-hand) */
-                raisedHand: localParticipant.raisedHand, 
+            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, 
                 /* @conditional-compile-remove(reaction) */
                 reaction: localParticipant.reaction, 
                 /* @conditional-compile-remove(spotlight) */
@@ -18514,8 +18828,6 @@ const screenshareButtonStyles = (theme) => ({
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
-/* @conditional-compile-remove(raise-hand) */
 /**
  * A button to start / stop screen sharing.
  *
@@ -18533,7 +18845,6 @@ const RaiseHandButton = (props) => {
     const onRenderLowerHandIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonLowerHand" }));
     return (React.createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), onClick: (_a = props.onToggleRaiseHand) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderLowerHandIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderRaiseHandIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'raiseHandButtonLabel', disabled: props.disabled })));
 };
-/* @conditional-compile-remove(raise-hand) */
 const raiseHandButtonStyles = (theme) => ({
     rootChecked: {
         background: theme.palette.themePrimary,
@@ -18548,81 +18859,6 @@ const raiseHandButtonStyles = (theme) => ({
     labelChecked: { color: react.DefaultPalette.white }
 });
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
-/* @conditional-compile-remove(reaction) */
-/**
- * @private
- */
-const playFrames = react.memoizeFunction(() => react.keyframes({
-    from: {
-        backgroundPosition: '0px 8568px'
-    },
-    to: {
-        backgroundPosition: '0px 0px'
-    }
-}));
-/* @conditional-compile-remove(reaction) */
-/**
- * @param backgroundImage - the uri for the reaction emoji resource
- * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
- *
- * @private
- */
-const emojiStyles = (backgroundImage, animationPlayState) => {
-    const imageResourceUrl = `url(${backgroundImage})`;
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        width: '100%',
-        backgroundImage: imageResourceUrl,
-        animationName: playFrames(),
-        animationDuration: '8.12s',
-        animationTimingFunction: `steps(102)`,
-        animationPlayState: animationPlayState,
-        animationIterationCount: 'infinite',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundPosition: 'center',
-        backgroundSize: `44px 2142px`,
-        transition: 'opacity 2s',
-        backgroundColor: 'transparent',
-        transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
-    };
-};
-/* @conditional-compile-remove(reaction) */
-/**
- *
- * @private
- */
-const reactionEmojiMenuStyles = () => {
-    return {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexDirection: 'row',
-        width: '220px',
-        height: '42px'
-    };
-};
-/* @conditional-compile-remove(reaction) */
-/**
- *
- * @private
- */
-const reactionToolTipHostStyle = () => {
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            width: '100%'
-        }
-    };
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(reaction) */
@@ -20488,7 +20724,9 @@ const _CaptionsSettingsModal = (props) => {
         const captionLanguageCode = selectedCaptionLanguage.key;
         if (isCaptionsFeatureActive) {
             onSetSpokenLanguage(spokenLanguageCode);
-            onSetCaptionLanguage(captionLanguageCode);
+            if (changeCaptionLanguage) {
+                onSetCaptionLanguage(captionLanguageCode);
+            }
         }
         else {
             yield onStartCaptions({ spokenLanguage: spokenLanguageCode });
@@ -20501,7 +20739,8 @@ const _CaptionsSettingsModal = (props) => {
         onSetCaptionLanguage,
         onStartCaptions,
         selectedSpokenLanguage.key,
-        selectedCaptionLanguage.key
+        selectedCaptionLanguage.key,
+        changeCaptionLanguage
     ]);
     const spokenLanguageDropdownOptions = React.useMemo(() => {
         return supportedSpokenLanguages.map((languageCode) => {
@@ -20902,9 +21141,7 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeN
             displayName = maskDisplayNameWithRole(displayName, localUserRole, participant.role, isHideAttendeeNamesEnabled);
             /* @conditional-compile-remove(reaction) */
             const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);
-            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, displayName, 
-            /* @conditional-compile-remove(raise-hand) */
-            participant.raisedHand, 
+            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, displayName, participant.raisedHand, 
             /* @conditional-compile-remove(reaction) */
             remoteParticipantReaction, 
             /* @conditional-compile-remove(spotlight) */
@@ -20914,18 +21151,14 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeN
         }));
     });
 };
-const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, // temp unknown type to build stable
+const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
 spotlight, // temp unknown type to build stable
 /* @conditional-compile-remove(ppt-live) */
 contentSharingStream) => {
-    return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, 
-    /* @conditional-compile-remove(raise-hand) */
-    raisedHand, 
+    return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, 
     /* @conditional-compile-remove(reaction) */
     reaction, 
     /* @conditional-compile-remove(spotlight) */
@@ -20934,9 +21167,7 @@ contentSharingStream) => {
     contentSharingStream);
 });
 /** @private */
-const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, // temp unknown type to build stable
+const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
@@ -20971,7 +21202,6 @@ contentSharingStream) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
         state,
-        /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
         reaction: reaction,
@@ -21003,8 +21233,7 @@ const convertRemoteContentSharingStreamToVideoGalleryStream = (stream) => {
 };
 /** @private */
 const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
-/* @conditional-compile-remove(rooms) */ role, 
-/* @conditional-compile-remove(raise-hand) */ raisedHand, 
+/* @conditional-compile-remove(rooms) */ role, raisedHand, 
 /* @conditional-compile-remove(reaction) */ reaction, 
 /* @conditional-compile-remove(spotlight) */ localSpotlight, 
 /* @conditional-compile-remove(spotlight) */ capabilities) => {
@@ -21021,7 +21250,6 @@ const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, is
         },
         /* @conditional-compile-remove(rooms) */
         role,
-        /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
         reaction: reaction,
@@ -21068,11 +21296,9 @@ const videoGallerySelector = reselect.createSelector([
     getDisplayName$2,
     getIdentifier,
     getDominantSpeakers,
-    /* @conditional-compile-remove(optimal-video-count) */
     getOptimalVideoCount,
     /* @conditional-compile-remove(rooms) */
     getRole$1,
-    /* @conditional-compile-remove(raise-hand) */
     getLocalParticipantRaisedHand$1,
     /* @conditional-compile-remove(hide-attendee-name) */
     isHideAttendeeNamesEnabled,
@@ -21082,13 +21308,9 @@ const videoGallerySelector = reselect.createSelector([
     getSpotlightCallFeature,
     /* @conditional-compile-remove(spotlight) */
     getCapabilities
-], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
-/* @conditional-compile-remove(optimal-video-count) */
-optimalVideoCount, 
+], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, optimalVideoCount, 
 /* @conditional-compile-remove(rooms) */
-role, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, 
+role, raisedHand, 
 /* @conditional-compile-remove(hide-attendee-name) */
 isHideAttendeeNamesEnabled, 
 /* @conditional-compile-remove(reaction) */
@@ -21110,17 +21332,13 @@ capabilities) => {
     const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.spotlightedParticipants);
     return {
         screenShareParticipant: screenShareRemoteParticipant
-            ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, 
-            /* @conditional-compile-remove(raise-hand) */
-            screenShareRemoteParticipant.raisedHand, 
+            ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, screenShareRemoteParticipant.raisedHand, 
             /* @conditional-compile-remove(spotlight) */
             screenShareRemoteParticipant.spotlight)
             : undefined,
         localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
         /* @conditional-compile-remove(rooms) */
-        role, 
-        /* @conditional-compile-remove(raise-hand) */
-        raisedHand, 
+        role, raisedHand, 
         /* @conditional-compile-remove(reaction) */
         localParticipantReactionState, 
         /* @conditional-compile-remove(spotlight) */
@@ -21133,7 +21351,6 @@ capabilities) => {
         /* @conditional-compile-remove(hide-attendee-name) */
         role),
         dominantSpeakers: dominantSpeakerIds,
-        /* @conditional-compile-remove(optimal-video-count) */
         maxRemoteVideoStreams: optimalVideoCount,
         /* @conditional-compile-remove(spotlight) */
         spotlightedParticipants: spotlightedParticipantIds,
@@ -21177,9 +21394,7 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
             const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);
             /* @conditional-compile-remove(spotlight) */
             const spotlight = memoizedSpotlight(spotlightedParticipants, toFlatCommunicationIdentifier(participant.identifier));
-            return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking, 
-            /* @conditional-compile-remove(raise-hand) */
-            participant.raisedHand, localUserCanRemoveOthers, 
+            return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking, participant.raisedHand, localUserCanRemoveOthers, 
             /* @conditional-compile-remove(reaction) */
             remoteParticipantReaction, 
             /* @conditional-compile-remove(spotlight) */
@@ -21214,7 +21429,7 @@ const participantListSelector = reselect.createSelector([
     getRemoteParticipantsExcludingConsumers,
     getIsScreenSharingOn,
     getIsMuted,
-    /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand$1,
+    getLocalParticipantRaisedHand$1,
     getRole$1,
     getParticipantCount,
     /* @conditional-compile-remove(hide-attendee-name) */
@@ -21223,9 +21438,7 @@ const participantListSelector = reselect.createSelector([
     getLocalParticipantReactionState,
     /* @conditional-compile-remove(spotlight) */
     getSpotlightCallFeature
-], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, 
-/* @conditional-compile-remove(raise-hand) */
-raisedHand, role, partitipantCount, 
+], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, raisedHand, role, partitipantCount, 
 /* @conditional-compile-remove(hide-attendee-name) */
 isHideAttendeeNamesEnabled, 
 /* @conditional-compile-remove(reaction) */
@@ -21249,7 +21462,6 @@ spotlightCallFeature) => {
         displayName: displayName,
         isScreenSharing: isScreenSharingOn,
         isMuted: isMuted,
-        /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         state: 'Connected',
         // Local participant can never remove themselves.
@@ -21564,10 +21776,6 @@ const getSelector$1 = (component) => {
     if (component === HoldButton) {
         return findConditionalCompiledSelector(component);
     }
-    /* @conditional-compile-remove(raise-hand) */
-    if (component === RaiseHandButton) {
-        return findConditionalCompiledSelector(component);
-    }
     /* @conditional-compile-remove(reaction) */
     if (component === ReactionButton) {
         return findConditionalCompiledSelector(component);
@@ -21599,20 +21807,18 @@ const findSelector$1 = (component) => {
             return emptySelector;
         case ErrorBar:
             return errorBarSelector$1;
+        case RaiseHandButton:
+            return raiseHandButtonSelector;
     }
     return undefined;
 };
-/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(raise-hand) */
+/* @conditional-compile-remove(PSTN-calls) */
 const findConditionalCompiledSelector = (component) => {
     switch (component) {
         /* @conditional-compile-remove(PSTN-calls) */
         case HoldButton:
             /* @conditional-compile-remove(PSTN-calls) */
             return holdButtonSelector;
-        /* @conditional-compile-remove(raise-hand) */
-        case RaiseHandButton:
-            /* @conditional-compile-remove(raise-hand) */
-            return raiseHandButtonSelector;
         /* @conditional-compile-remove(reaction) */
         case ReactionButton:
             /* @conditional-compile-remove(reaction) */
@@ -22140,7 +22346,7 @@ const generateImageAttachmentImgHtml = (message, attachment) => {
 const getResourceSourceUrl = (result) => {
     let src = '';
     if (result) {
-        if (result.error) {
+        if (result.error || !result.sourceUrl) {
             // In case of an error we set src to some invalid value to show broken image
             src = 'blob://';
         }
@@ -22836,7 +23042,9 @@ let ChatContext$1 = class ChatContext {
                     if (cache) {
                         Object.keys(cache).forEach((resourceUrl) => {
                             const resource = cache[resourceUrl];
-                            URL.revokeObjectURL(resource.sourceUrl);
+                            if (resource.sourceUrl) {
+                                URL.revokeObjectURL(resource.sourceUrl);
+                            }
                         });
                     }
                     thread.chatMessages[messageId].resourceCache = undefined;
@@ -22877,7 +23085,9 @@ let ChatContext$1 = class ChatContext {
             }
             if (message && message.resourceCache && message.resourceCache[resourceUrl]) {
                 const resource = message.resourceCache[resourceUrl];
-                URL.revokeObjectURL(resource.sourceUrl);
+                if (resource.sourceUrl) {
+                    URL.revokeObjectURL(resource.sourceUrl);
+                }
                 delete message.resourceCache[resourceUrl];
             }
         });
@@ -23976,7 +24186,6 @@ const COMPOSITE_ONLY_ICONS = {
     FloatingLocalVideoGalleryLayout: React.createElement(reactIcons.BoardSplit20Regular, null),
     FocusedContentGalleryLayout: React.createElement(reactIcons.ContentView20Regular, null),
     LargeGalleryLayout: React.createElement(reactIcons.Table20Regular, null),
-    /* @conditional-compile-remove(control-bar-button-injection) */
     DefaultCustomButton: React.createElement(reactIcons.Circle20Regular, null),
     DtmfDialpadButton: React.createElement(reactIcons.Dialpad20Regular, null),
     /* @conditional-compile-remove(spotlight) */
@@ -25062,9 +25271,7 @@ const AvatarPersona = (props) => {
             }
         }))();
     }, [data, dataProvider, userId]);
-    /* @conditional-compile-remove(raise-hand) */
     let activePersona = '';
-    /* @conditional-compile-remove(raise-hand) */
     if (props.allowActiveBorder) {
         // Display a border for raised handed participants in participant list
         activePersona = react.mergeStyles({
@@ -25077,9 +25284,7 @@ const AvatarPersona = (props) => {
         });
         react.mergeStyles(activePersona, props.styles);
     }
-    return (React.createElement(react.Persona, Object.assign({}, props, { 
-        /* @conditional-compile-remove(raise-hand) */
-        className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
+    return (React.createElement(react.Persona, Object.assign({}, props, { className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
         // default disable tooltip unless specified
         showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false, 
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -25393,9 +25598,7 @@ const ParticipantListWithHeading = (props) => {
         /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount)),
         React.createElement(react.FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
             React.createElement(ParticipantList$k, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React.createElement(React.Fragment, null,
-                    React.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, 
-                        /* @conditional-compile-remove(raise-hand) */
-                        allowActiveBorder: true })),
+                    React.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, allowActiveBorder: true })),
                     (options === null || options === void 0 ? void 0 : options.text) && (React.createElement(react.Text, { nowrap: true, styles: displayNameStyles$1 }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId })))));
 };
 const paneTitleTrampoline = (paneTitle, totalParticipantCount) => {
@@ -25473,7 +25676,7 @@ const useSelector$2 = (selector, selectorProps) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-D1KqCTKr.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BCdGFyar.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  */
@@ -25567,7 +25770,7 @@ const ChatScreen = (props) => {
     }, [messageThreadProps.messages]);
     const getResourceSourceUrl = (result) => {
         let src = '';
-        if (result.error) {
+        if (result.error || !result.sourceUrl) {
             src = 'blob://';
         }
         else {
@@ -26446,15 +26649,12 @@ const createCompositeHandlers = memoizeOne((adapter) => {
                 yield adapter.removeParticipant(_toCommunicationIdentifier(userId));
             }
         }),
-        /* @conditional-compile-remove(raise-hand) */
         onRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
             yield adapter.raiseHand();
         }),
-        /* @conditional-compile-remove(raise-hand) */
         onLowerHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
             yield adapter.lowerHand();
         }),
-        /* @conditional-compile-remove(raise-hand) */
         onToggleRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
             var _b;
             ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.raiseHand.localParticipantRaisedHand)
@@ -26857,7 +27057,7 @@ const CaptionsBanner = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';
     return (React.createElement(React.Fragment, null,
-        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: true })),
+        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isTeamsCall })),
         /* @conditional-compile-remove(close-captions) */ React.createElement("div", { className: containerClassName },
             React.createElement(react.Stack, { horizontalAlign: "center" },
                 React.createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
@@ -27014,7 +27214,6 @@ const getDeviceManager = (state) => state.devices;
  * @private
  */
 const getIsScreenShareOn = (state) => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn) !== null && _b !== void 0 ? _b : false; };
-/* @conditional-compile-remove(raise-hand) */
 /**
  * @private
  */
@@ -27301,7 +27500,6 @@ const callArrangementContainerStyles = (verticalControlBar) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(raise-hand) */
 /** @private */
 const RaiseHand = (props) => {
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
@@ -27313,7 +27511,6 @@ const RaiseHand = (props) => {
     }
     return (React.createElement(RaiseHandButton, Object.assign({ "data-ui-id": "call-composite-raisehand-button" }, raiseHandButtonProps, { showLabel: props.displayType !== 'compact', disabled: raiseHandButtonDisabled || props.disabled, styles: styles })));
 };
-/* @conditional-compile-remove(raise-hand) */
 const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
@@ -27461,7 +27658,6 @@ const CallControls = (props) => {
     const options = React.useMemo(() => inferCallControlOptions(!!props.isMobile, props.options), [props.isMobile, props.options]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(rooms) */
     const adapter = useAdapter();
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const peopleButtonStrings = React.useMemo(() => ({
@@ -27469,14 +27665,12 @@ const CallControls = (props) => {
         tooltipOffContent: localeStrings.strings.call.peopleButtonTooltipOpen,
         tooltipOnContent: localeStrings.strings.call.peopleButtonTooltipClose
     }), [localeStrings]);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const moreButtonStrings = React.useMemo(() => ({
         label: localeStrings.strings.call.moreButtonCallingLabel,
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
-    /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     /* @conditional-compile-remove(reaction) */
     const capabilitiesSelector = useSelector$1(capabilitySelector);
@@ -27566,15 +27760,12 @@ const CallControls = (props) => {
     }
     /* @conditional-compile-remove(reaction) */
     const reactionResources = adapter.getState().reactions;
-    /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.raiseHandButton);
-    /* @conditional-compile-remove(raise-hand) */
     let showRaiseHandButtonInControlBar = raiseHandButtonIsEnabled;
     /* @conditional-compile-remove(rooms) */
     const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     /* @conditional-compile-remove(rooms) */
     const hideRaiseHandButtonInRoomsCall = adapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
-    /* @conditional-compile-remove(raise-hand) */
     if (showRaiseHandButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
         numberOfButtons++;
     }
@@ -27596,7 +27787,6 @@ const CallControls = (props) => {
             ['data-ui-id']: 'call-composite-more-menu-devices-button'
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     if (!showRaiseHandButtonInControlBar && /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall) {
         moreButtonMenuItems.push({
             key: 'raiseHandButtonKey',
@@ -27654,7 +27844,7 @@ const CallControls = (props) => {
                 cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.cameraButton) })),
                 /* @conditional-compile-remove(reaction) */
                 showReactionButtonInControlBar && reactionResources && (React.createElement(Reaction, { displayType: options === null || options === void 0 ? void 0 : options.displayType, reactionResource: reactionResources })),
-                /* @conditional-compile-remove(raise-hand) */ showRaiseHandButtonInControlBar &&
+                showRaiseHandButtonInControlBar &&
                     /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options === null || options === void 0 ? void 0 : options.displayType })),
                 screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
                 showParticipantsButtonInControlBar && (React.createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
@@ -27668,7 +27858,6 @@ const CallControls = (props) => {
                         // styles={commonButtonStyles}
                         showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', disableTooltip: props.isMobile }));
                 }),
-                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
                 showMoreButton && (React.createElement(MoreButton, { disableTooltip: props.isMobile, "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonMenuItems }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React.createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
@@ -28173,15 +28362,12 @@ const DesktopMoreButton = (props) => {
         (_h = (_g = galleryOptions.subMenuProps) === null || _g === void 0 ? void 0 : _g.items) === null || _h === void 0 ? void 0 : _h.push(overflowGalleryOption);
         moreButtonContextualMenuItems.push(galleryOptions);
     }
-    /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = React.useMemo(() => generateCustomCallDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).forEach((element) => {
         moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['secondary']
         .slice(CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)
         .forEach((element) => {
@@ -28189,7 +28375,6 @@ const DesktopMoreButton = (props) => {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['overflow'].forEach((element) => {
         moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -28412,7 +28597,7 @@ const CommonCallControlBar = (props) => {
     const reactionResources = props.callAdapter.getState().reactions;
     return (React.createElement("div", { ref: controlBarSizeRef },
         React.createElement(CallAdapterProvider, { adapter: props.callAdapter }, 
-        /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn }))),
+        /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn && props.isTeamsCall }))),
         React.createElement(react.Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles) },
             React.createElement(react.Stack.Item, { grow: true, className: react.mergeStyles(controlBarWrapperDesktopStyles) },
                 React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
@@ -28434,7 +28619,7 @@ const CommonCallControlBar = (props) => {
                                         isReactionAllowed &&
                                         isEnabled$1(options.reactionButton) &&
                                         reactionResources && (React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen, reactionResource: reactionResources })),
-                                    /* @conditional-compile-remove(raise-hand) */ !props.mobileView &&
+                                    !props.mobileView &&
                                         isEnabled$1(options.raiseHandButton) &&
                                         /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -28457,9 +28642,7 @@ const CommonCallControlBar = (props) => {
                                     props.mobileView && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView })),
                                     !props.mobileView && showDesktopMoreButton && (React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, 
                                         /*@conditional-compile-remove(PSTN-calls) */
-                                        onClickShowDialpad: props.onClickShowDialpad, 
-                                        /* @conditional-compile-remove(control-bar-button-injection) */
-                                        callControls: props.callControls, 
+                                        onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, 
                                         /* @conditional-compile-remove(close-captions) */
                                         isCaptionsSupported: props.isCaptionsSupported, 
                                         /* @conditional-compile-remove(close-captions) */
@@ -28777,14 +28960,12 @@ const MoreDrawer = (props) => {
     const callAdapter = useAdapter();
     const drawerMenuItems = [];
     const { speakers, onSelectSpeaker, onLightDismiss } = props;
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(raise-hand) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
     const callees = useSelector$1(getTargetCallees);
     const allowDtmfDialer = showDtmfDialer(callees);
     const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_a = props.dtmfDialerPresent) !== null && _a !== void 0 ? _a : false);
-    /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     const onSpeakerItemClick = React.useCallback((_ev, itemKey) => {
         const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find((speaker) => speaker.id === itemKey);
@@ -28796,6 +28977,13 @@ const MoreDrawer = (props) => {
         onLightDismiss();
     }, [speakers, onSelectSpeaker, onLightDismiss]);
     const drawerSelectionOptions = inferCallWithChatControlOptions(props.callControls);
+    /* @conditional-compile-remove(reaction) */
+    if (props.reactionResources !== undefined) {
+        drawerMenuItems.push({
+            itemKey: 'reactions',
+            onRendererContent: () => (React.createElement(_ReactionDrawerMenuItem, { onReactionClick: props.onReactionClick, reactionResources: props.reactionResources }))
+        });
+    }
     if (props.speakers && props.speakers.length > 0) {
         drawerMenuItems.push({
             itemKey: 'speakers',
@@ -28955,7 +29143,6 @@ const MoreDrawer = (props) => {
     const role = (_e = callAdapter.getState().call) === null || _e === void 0 ? void 0 : _e.role;
     /*@conditional-compile-remove(rooms) */
     const hideRaiseHandButtonInRoomsCall = callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
-    /* @conditional-compile-remove(raise-hand) */
     if (drawerSelectionOptions !== false &&
         isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.raiseHandButton) &&
         /*@conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall) {
@@ -29015,9 +29202,6 @@ const MoreDrawer = (props) => {
         const spokenLanguageString = supportedSpokenLanguageStrings
             ? supportedSpokenLanguageStrings[currentSpokenLanguage]
             : currentSpokenLanguage;
-        const captionLanguageString = supportedCaptionLanguageStrings
-            ? supportedCaptionLanguageStrings[currentCaptionLanguage]
-            : currentCaptionLanguage;
         drawerMenuItems.push({
             itemKey: 'captions',
             id: 'common-call-composite-captions-button',
@@ -29058,36 +29242,37 @@ const MoreDrawer = (props) => {
                 styles: { root: { lineHeight: 0 } }
             }
         });
-        captionsDrawerItems.push({
-            itemKey: 'ChangeCaptionLanguage',
-            text: props.strings.captionLanguageMenuTitle,
-            id: 'common-call-composite-captions-subtitle-settings-button',
-            secondaryText: captionLanguageString,
-            iconProps: {
-                iconName: 'ChangeCaptionLanguageIcon',
-                styles: { root: { lineHeight: 0 } }
-            },
-            disabled: props.disableButtonsForHoldScreen || !captionSettingsProp.isCaptionsFeatureActive,
-            onItemClick: () => {
-                setIsCaptionLanguageDrawerOpen(true);
-            },
-            secondaryIconProps: {
-                iconName: 'ChevronRight',
-                styles: { root: { lineHeight: 0 } }
-            }
-        });
+        if (props.isTeamsCall) {
+            const captionLanguageString = supportedCaptionLanguageStrings
+                ? supportedCaptionLanguageStrings[currentCaptionLanguage]
+                : currentCaptionLanguage;
+            captionsDrawerItems.push({
+                itemKey: 'ChangeCaptionLanguage',
+                text: props.strings.captionLanguageMenuTitle,
+                id: 'common-call-composite-captions-subtitle-settings-button',
+                secondaryText: captionLanguageString,
+                iconProps: {
+                    iconName: 'ChangeCaptionLanguageIcon',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                disabled: props.disableButtonsForHoldScreen || !captionSettingsProp.isCaptionsFeatureActive,
+                onItemClick: () => {
+                    setIsCaptionLanguageDrawerOpen(true);
+                },
+                secondaryIconProps: {
+                    iconName: 'ChevronRight',
+                    styles: { root: { lineHeight: 0 } }
+                }
+            });
+        }
     }
-    /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = React.useMemo(() => generateCustomCallDrawerButtons(onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined), drawerSelectionOptions !== false ? drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.displayType : undefined), [drawerSelectionOptions]);
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS).forEach((element) => {
         drawerMenuItems.push(element);
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['secondary'].forEach((element) => {
         drawerMenuItems.push(element);
     });
-    /* @conditional-compile-remove(control-bar-button-injection) */
     customDrawerButtons['overflow'].forEach((element) => {
         drawerMenuItems.push(element);
     });
@@ -30342,7 +30527,6 @@ const LocalAndRemotePIP = (props) => {
             showCameraSwitcherInLocalPreview: false,
             isAvailable: (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
             renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
-            /* @conditional-compile-remove(raise-hand) */
             raisedHand: localParticipant.raisedHand
         });
     }, [
@@ -30351,7 +30535,6 @@ const LocalAndRemotePIP = (props) => {
         (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
         onCreateLocalStreamView,
         onDisposeLocalStreamView,
-        /* @conditional-compile-remove(raise-hand) */
         localParticipant.raisedHand
     ]);
     const remoteVideoTileProps = React.useMemo(() => {
@@ -30441,18 +30624,11 @@ const updateUserDisplayNamesTrampoline = (remoteParticipants) => {
  * Picture in picture in picture needs to display the most-dominant remote speaker, as well as the local participant video.
  * @private
  */
-const localAndRemotePIPSelector = reselect__namespace.createSelector([
-    getDisplayName,
-    dominantRemoteParticipantSelector,
-    localVideoSelector,
-    /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand
-], (displayName, dominantRemoteParticipant, localVideoStreamInfo, 
-/* @conditional-compile-remove(raise-hand) */ raisedHand) => {
+const localAndRemotePIPSelector = reselect__namespace.createSelector([getDisplayName, dominantRemoteParticipantSelector, localVideoSelector, getLocalParticipantRaisedHand], (displayName, dominantRemoteParticipant, localVideoStreamInfo, raisedHand) => {
     return {
         localParticipant: {
             displayName,
             videoStream: localVideoStreamInfo,
-            /* @conditional-compile-remove(raise-hand) */
             raisedHand: raisedHand
         },
         dominantRemoteParticipant
@@ -31089,7 +31265,9 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                     disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
                     /* @conditional-compile-remove(close-captions) */
-                    isCaptionsSupported: isTeamsCall && hasJoinedCall, 
+                    isCaptionsSupported: hasJoinedCall, 
+                    /* @conditional-compile-remove(close-captions) */
+                    isTeamsCall: isTeamsCall, 
                     /* @conditional-compile-remove(close-captions) */
                     isCaptionsOn: isCaptionsOn, 
                     /* @conditional-compile-remove(video-background-effects) */
@@ -31101,7 +31279,11 @@ const CallArrangement = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, 
                         /* @conditional-compile-remove(close-captions) */
-                        isCaptionsSupported: isTeamsCall && hasJoinedCall, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent }))),
+                        isCaptionsSupported: hasJoinedCall, 
+                        /* @conditional-compile-remove(close-captions) */
+                        isTeamsCall: isTeamsCall, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, 
+                        /* @conditional-compile-remove(reaction) */
+                        reactionResources: adapter.getState().reactions }))),
                 React.createElement(react.Stack, { horizontal: true, grow: true },
                     React.createElement(react.Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
@@ -31118,7 +31300,9 @@ const CallArrangement = (props) => {
                                     canUnmute && !!props.mutedNotificationProps && (React.createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
                                 renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent(),
                                 /* @conditional-compile-remove(close-captions) */
-                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React.createElement(CaptionsBanner, { isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData }))))),
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React.createElement(CaptionsBanner, { isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, 
+                                    /* @conditional-compile-remove(close-captions) */
+                                    isTeamsCall: isTeamsCall }))))),
                     React.createElement(SidePane, { mobileView: props.mobileView, 
                         /* @conditional-compile-remove(video-background-effects) */
                         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)
@@ -34725,7 +34909,6 @@ class AzureCommunicationCallAdapter {
         this.startCall.bind(this);
         this.startScreenShare.bind(this);
         this.stopScreenShare.bind(this);
-        /* @conditional-compile-remove(raise-hand) */
         this.raiseHand.bind(this);
         /* @conditional-compile-remove(reaction) */
         this.onReactionClick.bind(this);
@@ -35038,7 +35221,6 @@ class AzureCommunicationCallAdapter {
             }));
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     raiseHand() {
         return __awaiter$5(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
@@ -35046,7 +35228,6 @@ class AzureCommunicationCallAdapter {
             }));
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     lowerHand() {
         return __awaiter$5(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
@@ -35262,25 +35443,49 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(close-captions) */
     subscribeToCaptionEvents() {
-        var _a;
-        if (this.call && this.call.state === 'Connected' && this.context.getState().isTeamsCall) {
-            const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
-            captionsFeature.on('CaptionsReceived', this.captionsReceived.bind(this));
-            captionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
-            captionsFeature.on('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
-            captionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+        var _a, _b;
+        if (this.call && this.call.state === 'Connected') {
+            if (this.context.getState().isTeamsCall) {
+                const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
+                captionsFeature.on('CaptionsReceived', this.teamsCaptionsReceived.bind(this));
+                captionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+                captionsFeature.on('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
+                captionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+            }
+            else {
+                /* @conditional-compile-remove(acs-close-captions) */
+                const captionsFeature = (_b = this.call) === null || _b === void 0 ? void 0 : _b.feature(communicationCalling.Features.Captions).captions;
+                /* @conditional-compile-remove(acs-close-captions) */
+                captionsFeature.on('CaptionsReceived', this.captionsReceived.bind(this));
+                /* @conditional-compile-remove(acs-close-captions) */
+                captionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+                /* @conditional-compile-remove(acs-close-captions) */
+                captionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+            }
         }
     }
     /* @conditional-compile-remove(close-captions) */
     unsubscribeFromCaptionEvents() {
-        var _a, _b;
-        if (this.call && this.call.state === 'Connected' && this.context.getState().isTeamsCall) {
-            const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
-            captionsFeature.off('CaptionsReceived', this.captionsReceived.bind(this));
-            captionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
-            captionsFeature.off('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
-            captionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
-            (_b = this.call) === null || _b === void 0 ? void 0 : _b.off('stateChanged', this.subscribeToCaptionEvents.bind(this));
+        var _a, _b, _c;
+        if (this.call && this.call.state === 'Connected') {
+            if (this.context.getState().isTeamsCall) {
+                const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
+                captionsFeature.off('CaptionsReceived', this.teamsCaptionsReceived.bind(this));
+                captionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+                captionsFeature.off('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
+                captionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+            }
+            else {
+                /* @conditional-compile-remove(acs-close-captions) */
+                const captionsFeature = (_b = this.call) === null || _b === void 0 ? void 0 : _b.feature(communicationCalling.Features.Captions).captions;
+                /* @conditional-compile-remove(acs-close-captions) */
+                captionsFeature.off('CaptionsReceived', this.captionsReceived.bind(this));
+                /* @conditional-compile-remove(acs-close-captions) */
+                captionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+                /* @conditional-compile-remove(acs-close-captions) */
+                captionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+            }
+            (_c = this.call) === null || _c === void 0 ? void 0 : _c.off('stateChanged', this.subscribeToCaptionEvents.bind(this));
         }
     }
     subscribeCallEvents() {
@@ -35344,6 +35549,10 @@ class AzureCommunicationCallAdapter {
         this.emitter.emit('isLocalScreenSharingActiveChanged', { isScreenSharingOn: (_a = this.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn });
     }
     /* @conditional-compile-remove(close-captions) */
+    teamsCaptionsReceived(captionsInfo) {
+        this.emitter.emit('captionsReceived', { captionsInfo });
+    }
+    /* @conditional-compile-remove(acs-close-captions) */
     captionsReceived(captionsInfo) {
         this.emitter.emit('captionsReceived', { captionsInfo });
     }
@@ -35897,9 +36106,7 @@ class CallWithChatBackedCallAdapter {
         this.unmute = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.unmute(); });
         this.startScreenShare = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.startScreenShare(); });
         this.stopScreenShare = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.stopScreenShare(); });
-        /* @conditional-compile-remove(raise-hand) */
         this.raiseHand = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.raiseHand(); });
-        /* @conditional-compile-remove(raise-hand) */
         this.lowerHand = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.lowerHand(); });
         /* @conditional-compile-remove(reaction) */
         this.onReactionClick = (reaction) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.onReactionClick(reaction); });
@@ -36423,7 +36630,6 @@ const CallWithChatScreen = (props) => {
     const callControlOptionsFromProps = React.useMemo(() => (Object.assign({}, (typeof props.callControls === 'object' ? props.callControls : {}))), [props.callControls]);
     const injectedCustomButtonsFromProps = React.useMemo(() => {
         var _a;
-        /* @conditional-compile-remove(control-bar-button-injection) */
         return [...((_a = callControlOptionsFromProps.onFetchCustomButtonProps) !== null && _a !== void 0 ? _a : [])];
     }, [callControlOptionsFromProps]);
     const callCompositeOptions = React.useMemo(() => ({
@@ -36431,7 +36637,6 @@ const CallWithChatScreen = (props) => {
             ? false
             : Object.assign(Object.assign({}, callControlOptionsFromProps), { onFetchCustomButtonProps: [
                     ...(showChatButton ? [customChatButton] : []),
-                    /* @conditional-compile-remove(control-bar-button-injection) */
                     ...injectedCustomButtonsFromProps
                 ], legacyControlBarExperience: false }),
         /* @conditional-compile-remove(call-readiness) */
@@ -36770,9 +36975,7 @@ class AzureCommunicationCallWithChatAdapter {
         this.unmute.bind(this);
         this.startScreenShare.bind(this);
         this.stopScreenShare.bind(this);
-        /* @conditional-compile-remove(raise-hand) */
         this.raiseHand.bind(this);
-        /* @conditional-compile-remove(raise-hand) */
         this.lowerHand.bind(this);
         /* @conditional-compile-remove(reaction) */
         this.onReactionClick.bind(this);
@@ -36967,14 +37170,12 @@ class AzureCommunicationCallWithChatAdapter {
             yield this.callAdapter.stopScreenShare();
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     /** Raise hand for local user. */
     raiseHand() {
         return __awaiter$2(this, void 0, void 0, function* () {
             yield this.callAdapter.raiseHand();
         });
     }
-    /* @conditional-compile-remove(raise-hand) */
     /** Lower hand for local user. */
     lowerHand() {
         return __awaiter$2(this, void 0, void 0, function* () {
@@ -38052,4 +38253,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-DikMcJD4.js.map
+//# sourceMappingURL=index-BfFCLrEO.js.map