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

package/dist/dist-cjs/communication-react/{index-DikMcJD4.js → index-Db9LOYoW.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-202403150012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -1886,9 +1886,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) {
@@ -2683,7 +2690,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 +2698,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 +2865,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 +2880,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 +2906,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.
@@ -4035,7 +4087,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);
@@ -4067,13 +4119,15 @@ class CallSubscriber {
             /* @conditional-compile-remove(ppt-live) */
             this._pptLiveSubscriber.unsubscribe();
             /* @conditional-compile-remove(close-captions) */
-            (_a = this._captionsSubscriber) === null || _a === void 0 ? void 0 : _a.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();
             /* @conditional-compile-remove(raise-hand) */
-            (_b = this._raiseHandSubscriber) === 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 +4137,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 = () => {
@@ -4554,7 +4614,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 +4687,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
@@ -6363,7 +6467,7 @@ const darkTheme = {
         errorText: '#f1707b'
     }
 };
-/* @conditional-compile-remove(image-overlay) */
+/* @conditional-compile-remove(image-overlay-theme) */
 /**
  * Preset dark theme for the ImageOverlay component.
  *
@@ -9158,18 +9262,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 +9289,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())));
 };
@@ -13299,7 +13408,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 +13422,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 +13551,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 +13570,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 +13585,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 +13594,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 +14223,7 @@ const raiseHandLimitedSpaceStyles = {
 /**
  * @private
  */
-const playFrames$1 = react.memoizeFunction(() => react.keyframes({
+const playFrames = react.memoizeFunction(() => react.keyframes({
     from: {
         backgroundPosition: '0px 8568px'
     },
@@ -13951,7 +14241,7 @@ const reactionRenderingStyle = (args) => {
         height: '100%',
         width: '100%',
         overflow: 'hidden',
-        animationName: playFrames$1(),
+        animationName: playFrames(),
         backgroundImage: imageUrl,
         animationDuration: '5.12s',
         animationTimingFunction: `steps(102)`,
@@ -18548,81 +18838,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 +20703,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 +20718,8 @@ const _CaptionsSettingsModal = (props) => {
         onSetCaptionLanguage,
         onStartCaptions,
         selectedSpokenLanguage.key,
-        selectedCaptionLanguage.key
+        selectedCaptionLanguage.key,
+        changeCaptionLanguage
     ]);
     const spokenLanguageDropdownOptions = React.useMemo(() => {
         return supportedSpokenLanguages.map((languageCode) => {
@@ -22140,7 +22358,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 +23054,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 +23097,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];
             }
         });
@@ -25473,7 +25695,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-UUKnVH43.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  */
@@ -25567,7 +25789,7 @@ const ChatScreen = (props) => {
     }, [messageThreadProps.messages]);
     const getResourceSourceUrl = (result) => {
         let src = '';
-        if (result.error) {
+        if (result.error || !result.sourceUrl) {
             src = 'blob://';
         }
         else {
@@ -26857,7 +27079,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 } },
@@ -28412,7 +28634,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 },
@@ -28796,6 +29018,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',
@@ -29015,9 +29244,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,24 +29284,29 @@ 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]);
@@ -31089,7 +31320,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 +31334,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 +31355,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)
@@ -35262,25 +35501,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 +35607,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 });
     }
@@ -38052,4 +38319,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-DikMcJD4.js.map
+//# sourceMappingURL=index-Db9LOYoW.js.map