@azure/communication-react 1.7.1-alpha-202308270013 → 1.7.1-alpha-202308300012

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.1-alpha-202308270013';
+var telemetryVersion = '1.7.1-alpha-202308300012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -335,7 +335,7 @@ const getDeviceManager$1 = (state) => state.deviceManager;
 /**
  * @private
  */
-const getRole = (state, props) => {
+const getRole$1 = (state, props) => {
     var _a;
     /* @conditional-compile-remove(rooms) */
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.role;
@@ -344,7 +344,7 @@ const getRole = (state, props) => {
 /**
  * @private
  */
-const getCapabilites = (state, props) => { var _a, _b; return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.capabilities) === null || _b === void 0 ? void 0 : _b.capabilities; };
+const getCapabilites = (state, props) => { var _a, _b; return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities; };
 /**
  * @private
  */
@@ -567,7 +567,7 @@ const microphoneButtonSelector = reselect__namespace.createSelector([
     getIsMuted,
     getDeviceManager$1,
     /* @conditional-compile-remove(capabilities) */ getCapabilites,
-    /* @conditional-compile-remove(capabilities) */ getRole
+    /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (callExists, isMuted, deviceManager, 
 /* @conditional-compile-remove(capabilities) */ capabilities, 
 /* @conditional-compile-remove(capabilities) */ role) => {
@@ -593,7 +593,7 @@ const cameraButtonSelector = reselect__namespace.createSelector([
     getLocalVideoStreams$1,
     getDeviceManager$1,
     /* @conditional-compile-remove(capabilities) */ getCapabilites,
-    /* @conditional-compile-remove(capabilities) */ getRole
+    /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (localVideoStreams, deviceManager, 
 /* @conditional-compile-remove(capabilities) */ capabilities, 
 /* @conditional-compile-remove(capabilities) */ role) => {
@@ -635,7 +635,7 @@ const screenShareButtonSelector = reselect__namespace.createSelector([
     getIsScreenSharingOn,
     /* @conditional-compile-remove(PSTN-calls) */ getCallState,
     /* @conditional-compile-remove(capabilities) */ getCapabilites,
-    /* @conditional-compile-remove(capabilities) */ getRole
+    /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (isScreenSharingOn, 
 /* @conditional-compile-remove(PSTN-calls) */ callState, 
 /* @conditional-compile-remove(capabilities) */ capabilities, 
@@ -1578,7 +1578,9 @@ function convertSdkRemoteStreamToDeclarativeRemoteStream(stream) {
         isAvailable: stream.isAvailable,
         /* @conditional-compile-remove(video-stream-is-receiving-flag) */
         isReceiving: stream.isReceiving,
-        view: undefined
+        view: undefined,
+        /* @conditional-compile-remove(pinned-participants) */
+        streamSize: stream.size
     };
 }
 /**
@@ -2026,11 +2028,11 @@ class CallContext$2 {
         });
     }
     /* @conditional-compile-remove(capabilities) */
-    setCapabilities(callId, capabilities) {
+    setCapabilities(callId, capabilities, capabilitiesChangeInfo) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
-                call.capabilities = { capabilities: capabilities };
+                call.capabilitiesFeature = { capabilities, latestCapabilitiesChangeInfo: capabilitiesChangeInfo };
             }
         });
     }
@@ -2168,6 +2170,21 @@ class CallContext$2 {
             }
         });
     }
+    /* @conditional-compile-remove(pinned-participants) */
+    setRemoteVideoStreamSize(callId, participantKey, streamId, size) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                const participant = call.remoteParticipants[participantKey];
+                if (participant) {
+                    const stream = participant.videoStreams[streamId];
+                    if (stream) {
+                        stream.streamSize = size;
+                    }
+                }
+            }
+        });
+    }
     setRemoteVideoStreams(callId, participantKey, addRemoteVideoStream, removeRemoteVideoStream) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2617,12 +2634,16 @@ class RemoteVideoStreamSubscriber {
             this._remoteVideoStream.on('isAvailableChanged', this.isAvailableChanged);
             /* @conditional-compile-remove(video-stream-is-receiving-flag) */
             this._remoteVideoStream.on('isReceivingChanged', this.isReceivingChanged);
+            /* @conditional-compile-remove(pinned-participants) */
+            this._remoteVideoStream.on('sizeChanged', this.isSizeChanged);
             this.checkAndUpdateScreenShareState();
         };
         this.unsubscribe = () => {
             this._remoteVideoStream.off('isAvailableChanged', this.isAvailableChanged);
             /* @conditional-compile-remove(video-stream-is-receiving-flag) */
             this._remoteVideoStream.off('isReceivingChanged', this.isReceivingChanged);
+            /* @conditional-compile-remove(pinned-participants) */
+            this._remoteVideoStream.off('sizeChanged', this.isSizeChanged);
         };
         this.includesActiveScreenShareStream = (streams) => {
             for (const stream of Object.values(streams)) {
@@ -2675,6 +2696,19 @@ class RemoteVideoStreamSubscriber {
         this.isReceivingChanged = () => {
             this._context.setRemoteVideoStreamIsReceiving(this._callIdRef.callId, this._participantKey, this._remoteVideoStream.id, this._remoteVideoStream.isReceiving);
         };
+        /* @conditional-compile-remove(pinned-participants) */
+        this.isSizeChanged = () => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (((_a = this._remoteVideoStream) === null || _a === void 0 ? void 0 : _a.size.width) === 0 && ((_b = this._remoteVideoStream) === null || _b === void 0 ? void 0 : _b.size.height) === 0) {
+                return;
+            }
+            const streamSize = (_e = (_d = (_c = this._context.getState().calls[this._callIdRef.callId]) === null || _c === void 0 ? void 0 : _c.remoteParticipants[this._participantKey]) === null || _d === void 0 ? void 0 : _d.videoStreams[this._remoteVideoStream.id]) === null || _e === void 0 ? void 0 : _e.streamSize;
+            const existingAspectRatio = streamSize ? streamSize.width / streamSize.height : undefined;
+            const newAspectRatio = ((_f = this._remoteVideoStream) === null || _f === void 0 ? void 0 : _f.size.width) / ((_g = this._remoteVideoStream) === null || _g === void 0 ? void 0 : _g.size.height);
+            if (!streamSize || existingAspectRatio !== newAspectRatio) {
+                this._context.setRemoteVideoStreamSize(this._callIdRef.callId, this._participantKey, this._remoteVideoStream.id, this._remoteVideoStream.size);
+            }
+        };
         this._callIdRef = callIdRef;
         this._participantKey = participantKey;
         this._remoteVideoStream = remoteVideoStream;
@@ -3525,8 +3559,8 @@ class CapabilitiesSubscriber {
         this.unsubscribe = () => {
             this._capabilitiesFeature.off('capabilitiesChanged', this.capabilitiesChanged);
         };
-        this.capabilitiesChanged = () => {
-            this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities);
+        this.capabilitiesChanged = (data) => {
+            this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities, data);
         };
         this._callIdRef = callIdRef;
         this._context = context;
@@ -5926,6 +5960,14 @@ const lightTheme = {
         /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
+    /* @conditional-compile-remove(image-gallery) */
+    chatPalette: {
+        modalOverlayBlack: '#000000',
+        modalTitleWhite: '#ffffff',
+        modalButtonBackground: '#1b1a19',
+        modalButtonBackgroundHover: '#252423',
+        modalButtonBackgroundActive: '#292827'
+    },
     semanticColors: {
         errorText: '#a80000'
     }
@@ -5968,6 +6010,14 @@ const darkTheme = {
         /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
+    /* @conditional-compile-remove(image-gallery) */
+    chatPalette: {
+        modalOverlayBlack: '#000000',
+        modalTitleWhite: '#ffffff',
+        modalButtonBackground: '#1b1a19',
+        modalButtonBackgroundHover: '#252423',
+        modalButtonBackgroundActive: '#292827'
+    },
     semanticColors: {
         errorText: '#f1707b'
     }
@@ -7260,11 +7310,6 @@ const unEscapeHtmlCharacters = (text) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-/**
- * @private
- * z-index to ensure that chat container has lower z-index than mention popover
- */
-const CHAT_CONTAINER_ZINDEX$1 = 1;
 /**
  * @private
  */
@@ -7272,8 +7317,10 @@ const mentionPopoverContainerStyle = (theme) => react.mergeStyles({
     boxShadow: theme.effects.elevation16,
     background: theme.semanticColors.bodyBackground,
     overflow: 'visible',
-    // zIndex to set the mentionPopover above the chat container
-    zIndex: CHAT_CONTAINER_ZINDEX$1 + 1
+    // zIndex to set the mentionPopover
+    // Temporary set to a hardcoded high number to make sure it is on top of the other components
+    // Will be replaced by a proper z-index solution after the Fluent 9 migration
+    zIndex: 10000
 });
 /**
  * @private
@@ -8489,15 +8536,14 @@ const cancelIcon = { iconName: 'Cancel' };
 const downloadIcon = {
     iconName: 'Download'
 };
+/* @conditional-compile-remove(image-gallery) */
 /**
  * @private
  */
-const overlayStyles = (theme, isDarkThemed) => {
+const overlayStyles = (theme) => {
     return {
         root: {
-            // The overlay background color should always be black in both light and dark theme.
-            // In dark theme, theme.palette.white is actually black.
-            background: isDarkThemed ? theme.palette.white : theme.palette.black,
+            background: theme.chatPalette.modalOverlayBlack,
             opacity: '0.85'
         }
     };
@@ -8547,14 +8593,15 @@ const titleBarContainerStyle = {
     alignContent: 'center',
     alignItems: 'center'
 };
+/* @conditional-compile-remove(image-gallery) */
 /**
  * @private
  */
-const titleStyle$2 = (theme, isDarkThemed) => {
+const titleStyle$2 = (theme) => {
     return {
         paddingLeft: '0.5rem',
         marginLeft: '0.5rem',
-        color: isDarkThemed ? undefined : theme.palette.white,
+        color: theme.chatPalette.modalTitleWhite,
         fontFamily: 'inherit',
         fontSize: '0.875rem',
         fontStyle: 'normal',
@@ -8612,38 +8659,37 @@ const normalImageStyle = {
     maxHeight: '100%',
     maxWidth: '100%'
 };
+/* @conditional-compile-remove(image-gallery) */
 /**
  * @private
  */
-const brokenImageStyle = (theme, isDarkThemed) => {
+const brokenImageStyle = (theme) => {
     return {
-        // The color should be white in dark theme.
-        // In dark theme, theme.palette.black is actually white.
-        color: isDarkThemed ? theme.palette.black : theme.palette.white
+        color: theme.chatPalette.modalTitleWhite
     };
 };
+/* @conditional-compile-remove(image-gallery) */
 /**
  * @private
  */
-const closeButtonStyles = (theme, isDarkThemed) => {
+const closeButtonStyles = (theme) => {
     return {
-        // The color should be white in dark theme.
-        // In dark theme, theme.palette.black is actually white.
-        color: isDarkThemed ? theme.palette.black : theme.palette.white,
+        color: theme.chatPalette.modalTitleWhite,
         ':hover': {
-            color: isDarkThemed ? theme.palette.black : theme.palette.white,
-            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
         },
         ':active': {
-            color: isDarkThemed ? theme.palette.black : theme.palette.white,
-            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
         }
     };
 };
+/* @conditional-compile-remove(image-gallery) */
 /**
  * @private
  */
-const downloadButtonStyle = (theme, isDarkThemed) => {
+const downloadButtonStyle = (theme) => {
     return {
         margin: '0 0.5rem',
         height: '32px',
@@ -8652,43 +8698,38 @@ const downloadButtonStyle = (theme, isDarkThemed) => {
         fontWeight: 600,
         padding: '0.38rem 0.75rem',
         borderRadius: '4px',
-        backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,
-        color: isDarkThemed ? undefined : theme.palette.white,
+        backgroundColor: theme.chatPalette.modalButtonBackground,
+        color: theme.chatPalette.modalTitleWhite,
         whiteSpace: 'nowrap',
         ':hover': {
-            // The color should be white in dark theme.
-            // In dark theme, theme.palette.black is actually white.
-            color: isDarkThemed ? theme.palette.black : theme.palette.white,
-            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
         },
         ':active': {
-            // The color should be white in dark theme.
-            // In dark theme, theme.palette.black is actually white.
-            color: isDarkThemed ? theme.palette.black : theme.palette.white,
-            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
         },
         '@media (max-width: 25rem)': {
             display: 'none'
         }
     };
 };
+/* @conditional-compile-remove(image-gallery) */
 /**
  * @private
  */
-const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
+const smallDownloadButtonContainerStyle = (theme) => {
     return {
         marginRight: '0.5rem',
-        // The color should be white in dark theme.
-        // In dark theme, theme.palette.black is actually white.
-        color: isDarkThemed ? theme.palette.black : theme.palette.white,
+        color: theme.chatPalette.modalTitleWhite,
         whiteSpace: 'nowrap',
         ':hover': {
-            color: isDarkThemed ? theme.palette.black : theme.palette.white,
-            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
         },
         ':active': {
-            color: isDarkThemed ? theme.palette.black : theme.palette.white,
-            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
         },
         '@media (min-width: 25rem)': {
             display: 'none'
@@ -8706,13 +8747,11 @@ const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
 const ImageGallery = (props) => {
     const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;
     const theme = useTheme();
-    const isDarkTheme = isDarkThemed(theme);
     /* @conditional-compile-remove(image-gallery) */
     const localeStrings = useLocale$1().strings.imageGallery;
     const [isImageLoaded, setIsImageLoaded] = React.useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme, isDarkTheme);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
     if (images.length <= startIndex) {
-        console.log('Unable to display Image Gallery due to startIndex is out of range.');
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     const image = images[startIndex];
@@ -8720,13 +8759,13 @@ const ImageGallery = (props) => {
         return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(headerStyle) },
             React__default['default'].createElement(react.Stack, { className: react.mergeStyles(titleBarContainerStyle) },
                 image.titleIcon,
-                React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme, isDarkTheme)), "aria-label": image.title }, image.title)),
+                React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme)), "aria-label": image.title }, image.title)),
             React__default['default'].createElement(react.Stack, { className: react.mergeStyles(controlBarContainerStyle) },
-                React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme, isDarkTheme)), 
+                React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme)), 
                     /* @conditional-compile-remove(image-gallery) */
                     text: localeStrings.downloadButtonLabel, onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), onRenderIcon: () => React__default['default'].createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
-                React__default['default'].createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme, isDarkTheme)), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
-                React__default['default'].createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme, isDarkTheme)), onClick: onDismiss, 
+                React__default['default'].createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
+                React__default['default'].createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, 
                     /* @conditional-compile-remove(image-gallery) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
@@ -8740,12 +8779,14 @@ const ImageGallery = (props) => {
                 // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.
                 // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.
                 isClickableOutsideFocusTrap: true, className: react.mergeStyles(bodyFocusZone) },
-                React__default['default'].createElement("img", { src: image.imageUrl, className: react.mergeStyles(imageStyle), alt: image.altText || 'image', "aria-label": 'image-gallery-main-image', onError: (event) => {
+                React__default['default'].createElement("img", { src: image.imageUrl, className: react.mergeStyles(imageStyle), alt: image.altText || 'image', "aria-label": 'image-gallery-main-image', "aria-live": 'polite', onError: (event) => {
                         setIsImageLoaded(false);
                         onError && onError(event);
-                    }, onClick: (event) => event.stopPropagation(), "aria-live": 'polite' }))));
+                    }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
+                        event.persist();
+                    } }))));
     };
-    return (React__default['default'].createElement(react.Modal, { titleAriaId: image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme, isDarkTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
+    return (React__default['default'].createElement(react.Modal, { titleAriaId: image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
         renderHeaderBar(),
         renderBodyWithLightDismiss()));
 };
@@ -14960,7 +15001,18 @@ const VideoGallery = (props) => {
         const remoteVideoStream = participant.videoStream;
         /* @conditional-compile-remove(pinned-participants) */
         const isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
-        return (React__default['default'].createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
+        const createViewOptions = () => {
+            var _a, _b;
+            /* @conditional-compile-remove(pinned-participants) */
+            return (remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.streamSize) &&
+                ((_a = remoteVideoStream.streamSize) === null || _a === void 0 ? void 0 : _a.height) > ((_b = remoteVideoStream.streamSize) === null || _b === void 0 ? void 0 : _b.width)
+                ? {
+                    scalingMode: 'Fit',
+                    isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
+                }
+                : remoteVideoViewOptions;
+        };
+        return (React__default['default'].createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant && createViewOptions() ? createViewOptions() : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -17736,7 +17788,9 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
         isMirrored: (_a = stream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
         renderElement: (_b = stream.view) === null || _b === void 0 ? void 0 : _b.target,
         /* @conditional-compile-remove(pinned-participants) */
-        scalingMode: (_c = stream.view) === null || _c === void 0 ? void 0 : _c.scalingMode
+        scalingMode: (_c = stream.view) === null || _c === void 0 ? void 0 : _c.scalingMode,
+        /* @conditional-compile-remove(pinned-participants) */
+        streamSize: stream.streamSize
     };
 };
 /** @private */
@@ -17778,7 +17832,7 @@ const videoGallerySelector = reselect.createSelector([
     /* @conditional-compile-remove(optimal-video-count) */
     getOptimalVideoCount,
     /* @conditional-compile-remove(rooms) */
-    getRole,
+    getRole$1,
     /* @conditional-compile-remove(raise-hand) */
     getLocalParticipantRaisedHand$1
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
@@ -17905,7 +17959,7 @@ const participantListSelector = reselect.createSelector([
     getIsScreenSharingOn,
     getIsMuted,
     /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand$1,
-    getRole,
+    getRole$1,
     getParticipantCount
 ], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, 
 /* @conditional-compile-remove(raise-hand) */
@@ -20296,7 +20350,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content"};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
+var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
 
 var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content"};var chat$j={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$j={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_GB = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
 
@@ -23209,6 +23263,11 @@ const getMicrophones = (state) => state.devices.microphones;
  * @private
  */
 const getCameras = (state) => state.devices.cameras;
+/* @conditional-compile-remove(capabilities) */
+/**
+ * @private
+ */
+const getRole = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.role; };
 /**
  * @private
  */
@@ -23262,6 +23321,14 @@ const getCaptionsStatus = (state) => {
  * @private
  */
 const getIsTeamsCall = (state) => state.isTeamsCall;
+/* @conditional-compile-remove(capabilities) */
+/**
+ * @private
+ */
+const getLatestCapabilitiesChangedInfo = (state) => {
+    var _a, _b;
+    return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.latestCapabilitiesChangeInfo;
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -23484,12 +23551,7 @@ const SendDtmfDialpad = (props) => {
 /** @private */
 const controlBarContainerStyles = {
     paddingTop: '0.25rem',
-    paddingBottom: '0.25rem',
-    // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values
-    boxShadow: `
-    0px 6.400000095367432px 14.399999618530273px 0px #00000021;
-    0px 1.2000000476837158px 3.5999999046325684px 0px #0000001A;
-  `
+    paddingBottom: '0.25rem'
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -26146,12 +26208,74 @@ const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
     return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
 };
 
+// Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(capabilities) */
+/**
+ * Notification bar for capabilities changed
+ * @private
+ */
+const CapabilitiesChangedNotificationBar = (props) => {
+    const locale = useLocale();
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": "capabilities-changed-notification-bar-stack" }, props.capabilitiesChangedNotifications.map((notification) => {
+        const message = getCapabilityChangedNotificationString(notification, locale.strings.call.capabilityChangedNotification);
+        if (!message) {
+            return null;
+        }
+        return (React__default['default'].createElement(react.MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: react.MessageBarType.warning, dismissIconProps: { iconName: 'ErrorBarClear' }, onDismiss: () => props.onDismissNotification(notification) }, message));
+    })));
+};
+/* @conditional-compile-remove(capabilities) */
+const getCapabilityChangedNotificationString = (notification, strings) => {
+    var _a, _b, _c, _d, _e, _f;
+    switch (notification.capabilityName) {
+        case 'turnVideoOn':
+            if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
+                return notification.isPresent
+                    ? (_a = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _a === void 0 ? void 0 : _a.grantedDueToMeetingOption
+                    : (_b = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _b === void 0 ? void 0 : _b.lostDueToMeetingOption;
+            }
+            break;
+        case 'unmuteMic':
+            if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
+                return notification.isPresent
+                    ? (_c = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _c === void 0 ? void 0 : _c.grantedDueToMeetingOption
+                    : (_d = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _d === void 0 ? void 0 : _d.lostDueToMeetingOption;
+            }
+            break;
+        case 'shareScreen':
+            if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {
+                return (_e = strings === null || strings === void 0 ? void 0 : strings.shareScreen) === null || _e === void 0 ? void 0 : _e.grantedDueToRoleChangeToPresenter;
+            }
+            if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {
+                return (_f = strings === null || strings === void 0 ? void 0 : strings.shareScreen) === null || _f === void 0 ? void 0 : _f.lostDueToRoleChangeToAttendee;
+            }
+            break;
+    }
+    return undefined;
+};
+/* @conditional-compile-remove(capabilities) */
+const messageBarStyles = {
+    innerText: {
+        alignSelf: 'center'
+    },
+    icon: {
+        height: 0
+    },
+    content: {
+        lineHeight: 'inherit'
+    },
+    dismissal: {
+        height: 0,
+        paddingTop: '0.8rem'
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
 const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -26280,13 +26404,18 @@ const CallArrangement = (props) => {
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
     const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
+    /* @conditional-compile-remove(capabilities) */
+    // Filter out shareScreen capability notifications if on mobile
+    const filteredCapabilitesChangedNotifications = props.mobileView
+        ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
+        : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React__default['default'].createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
-                ((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
+                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                    }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: isPeoplePaneOpen, 
                     /* @conditional-compile-remove(one-to-n-calling) */
@@ -26307,7 +26436,7 @@ const CallArrangement = (props) => {
                     onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, 
                     /* @conditional-compile-remove(gallery-layouts) */
                     userSetGalleryLayout: props.userSetGalleryLayout, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
-                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
+                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */
                         onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
@@ -26316,7 +26445,7 @@ const CallArrangement = (props) => {
                         /* @conditional-compile-remove(close-captions) */
                         isCaptionsSupported: isTeamsCall && hasJoinedCall }))),
                 /* @conditional-compile-remove(PSTN-calls) */
-                ((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) !== false && showDtmfDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
+                ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && showDtmfDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))),
                 React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
                     React__default['default'].createElement(react.Stack.Item, { style: callCompositeContainerCSS },
@@ -26327,6 +26456,10 @@ const CallArrangement = (props) => {
                                         React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
                                     props.errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                                         React__default['default'].createElement(ErrorBar, Object.assign({}, props.errorBarProps, { onDismissError: props.onDismissError, activeErrorMessages: filteredLatestErrors })))),
+                                    /* @conditional-compile-remove(capabilities) */
+                                    props.capabilitiesChangedNotificationBarProps &&
+                                        props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
+                                        React__default['default'].createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] })))),
                                     canUnmute && !!props.mutedNotificationProps && (React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
                                 props.onRenderGalleryContent && props.onRenderGalleryContent(),
                                 /* @conditional-compile-remove(close-captions) */
@@ -26336,7 +26469,7 @@ const CallArrangement = (props) => {
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$3((_g = props.callControlProps.options) === null || _g === void 0 ? void 0 : _g.participantsButton), onChatButtonClicked: (_h = props.mobileChatTabHeader) === null || _h === void 0 ? void 0 : _h.onClick, disableChatButton: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.disabled }),
+                            isDisabled$3((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled }),
                     props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
                     drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },
                         React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))))));
@@ -26861,7 +26994,9 @@ const CallPage = (props) => {
         /* @conditional-compile-remove(gallery-layouts) */
         onUserSetGalleryLayoutChange: setUserSetGalleryLayout, 
         /* @conditional-compile-remove(gallery-layouts) */
-        userSetGalleryLayout: userSetGalleryLayout }));
+        userSetGalleryLayout: userSetGalleryLayout, 
+        /* @conditional-compile-remove(capabilities) */
+        capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps }));
 };
 /**
  * @private
@@ -28421,6 +28556,111 @@ const deviceCountSelector = reselect.createSelector([getCameras, getMicrophones]
     };
 });
 
+// Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(capabilities) */
+/**
+ * @private
+ */
+const capabilitiesChangedInfoAndRoleSelector = reselect__namespace.createSelector([getLatestCapabilitiesChangedInfo, getRole], (capabilitiesChangeInfo, participantRole) => {
+    return { capabilitiesChangeInfo, participantRole };
+});
+
+// Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(capabilities) */
+/**
+ * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.
+ *
+ * @private
+ */
+const useTrackedCapabilityChangedNotifications = (capabilitiesChangedAndRoleInfo) => {
+    const [trackedCapabilityChangedNotifications, setTrackedCapabilityChangedNotifications] = React.useState({});
+    const activeNotifications = React.useRef({});
+    // Take note of first capabilities changed reason
+    const firstCapabilitiesChangedReason = React.useRef();
+    React.useEffect(() => {
+        var _a;
+        if (firstCapabilitiesChangedReason.current === undefined) {
+            firstCapabilitiesChangedReason.current = (_a = capabilitiesChangedAndRoleInfo.capabilitiesChangeInfo) === null || _a === void 0 ? void 0 : _a.reason;
+            // Skip the first notifications if they are role related to be inline with Teams behavior
+            if (firstCapabilitiesChangedReason.current === 'RoleChanged') {
+                return;
+            }
+        }
+        activeNotifications.current = updateLatestCapabilityChangedNotificationMap(capabilitiesChangedAndRoleInfo, activeNotifications.current);
+        setTrackedCapabilityChangedNotifications((prev) => updateTrackedCapabilityChangedNotificationsWithActiveNotifications(prev, Object.values(activeNotifications.current)));
+    }, [capabilitiesChangedAndRoleInfo]);
+    const onDismissCapabilityChangedNotification = React.useCallback((notification) => {
+        setTrackedCapabilityChangedNotifications((prev) => trackCapabilityChangedNotificationAsDismissed(notification.capabilityName, prev));
+    }, []);
+    const latestCapabilityChangedNotifications = React.useMemo(() => filterLatestCapabilityChangedNotifications(Object.values(activeNotifications.current), trackedCapabilityChangedNotifications), [trackedCapabilityChangedNotifications]);
+    return {
+        capabilitiesChangedNotifications: latestCapabilityChangedNotifications,
+        onDismissNotification: onDismissCapabilityChangedNotification
+    };
+};
+/* @conditional-compile-remove(capabilities) */
+/**
+ * Take the set of active notifications, and filter to only those that are newer than previously dismissed notifications or have never been dismissed.
+ *
+ * @private
+ */
+const filterLatestCapabilityChangedNotifications = (activeNotifications, trackedNotifications) => {
+    const filteredNotifications = activeNotifications.filter((activeNotification) => {
+        const trackedNotification = trackedNotifications[activeNotification.capabilityName];
+        return (!trackedNotification ||
+            !trackedNotification.lastDismissedAt ||
+            trackedNotification.lastDismissedAt < trackedNotification.mostRecentlyActive);
+    });
+    return filteredNotifications;
+};
+/* @conditional-compile-remove(capabilities) */
+/**
+ * Maintain a record of the most recently active notification for each capability name.
+ *
+ * @private
+ */
+const updateTrackedCapabilityChangedNotificationsWithActiveNotifications = (existingTrackedNotifications, activeNotifications) => {
+    var _a, _b;
+    const trackedNotifications = {};
+    // Only care about active notifications. If notifications are no longer active we do not track that they have been previously dismissed.
+    for (const activeNotification of activeNotifications) {
+        const existingTrackedNotification = existingTrackedNotifications[activeNotification.capabilityName];
+        trackedNotifications[activeNotification.capabilityName] = {
+            mostRecentlyActive: (_b = (_a = activeNotification.timestamp) !== null && _a !== void 0 ? _a : existingTrackedNotification === null || existingTrackedNotification === void 0 ? void 0 : existingTrackedNotification.mostRecentlyActive) !== null && _b !== void 0 ? _b : new Date(Date.now()),
+            lastDismissedAt: existingTrackedNotification === null || existingTrackedNotification === void 0 ? void 0 : existingTrackedNotification.lastDismissedAt
+        };
+    }
+    return trackedNotifications;
+};
+/* @conditional-compile-remove(capabilities) */
+/**
+ * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.
+ *
+ * @private
+ */
+const trackCapabilityChangedNotificationAsDismissed = (capabilityName, trackedNotifications) => {
+    const now = new Date(Date.now());
+    const existingNotification = trackedNotifications[capabilityName];
+    return Object.assign(Object.assign({}, trackedNotifications), { [capabilityName]: Object.assign(Object.assign({}, (existingNotification || {})), { lastDismissedAt: now }) });
+};
+/* @conditional-compile-remove(capabilities) */
+const updateLatestCapabilityChangedNotificationMap = (capabilitiesChangedInfoAndRole, activeNotifications) => {
+    if (!capabilitiesChangedInfoAndRole.capabilitiesChangeInfo) {
+        return activeNotifications;
+    }
+    for (const [capabilityName, newCapabilityValue] of Object.entries(capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.newValue)) {
+        const newCapabilityChangeNotification = {
+            capabilityName: capabilityName,
+            isPresent: newCapabilityValue.isPresent,
+            changedReason: capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason,
+            role: capabilitiesChangedInfoAndRole.participantRole,
+            timestamp: new Date(Date.now())
+        };
+        activeNotifications[capabilityName] = newCapabilityChangeNotification;
+    }
+    return activeNotifications;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$7 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -28478,6 +28718,10 @@ const MainScreen = (props) => {
     React.useEffect(() => {
         onSidePaneIdChange === null || onSidePaneIdChange === void 0 ? void 0 : onSidePaneIdChange(sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id);
     }, [sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id, onSidePaneIdChange]);
+    /* @conditional-compile-remove(capabilities) */
+    const capabilitiesChangedInfoAndRole = useSelector$1(capabilitiesChangedInfoAndRoleSelector);
+    /* @conditional-compile-remove(capabilities) */
+    const capabilitiesChangedNotificationBarProps = useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);
     // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation
     // This works by tracking the most recent timestamp of any active error type.
     // And then tracking when that error type was last dismissed.
@@ -28513,7 +28757,9 @@ const MainScreen = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick, 
                 /* @conditional-compile-remove(call-readiness) */
-                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick }));
+                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'accessDeniedTeamsMeeting':
             pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -28533,20 +28779,28 @@ const MainScreen = (props) => {
             break;
         }
         case 'lobby':
-            pageElement = (React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError }));
+            pageElement = (React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         /* @conditional-compile-remove(call-transfer) */
         case 'transferring':
-            pageElement = (React__default['default'].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError }));
+            pageElement = (React__default['default'].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
             pageElement = (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
                 /* @conditional-compile-remove(gallery-layouts) */
-                galleryLayout: ((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.galleryOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.options.galleryOptions.layout : 'floatingLocalVideo' }));
+                galleryLayout: ((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.galleryOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.options.galleryOptions.layout : 'floatingLocalVideo', 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         case 'hold':
-            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError })));
+            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps })));
             break;
     }
     /* @conditional-compile-remove(unsupported-browser) */