@azure/communication-react 1.7.1-alpha-202308290013 → 1.7.1-alpha-202308310013

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-202308290013';
+var telemetryVersion = '1.7.1-alpha-202308310013';
 
 // 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, 
@@ -2028,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 };
             }
         });
     }
@@ -3559,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;
@@ -5960,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'
     }
@@ -6002,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'
     }
@@ -7294,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
  */
@@ -7306,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
@@ -8523,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'
         }
     };
@@ -8581,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',
@@ -8646,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',
@@ -8686,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'
@@ -8740,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];
@@ -8754,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' }))));
     };
@@ -8781,7 +8786,7 @@ const ImageGallery = (props) => {
                         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()));
 };
@@ -11897,7 +11902,7 @@ const useRemoteVideoStreamLifecycleMaintainer = (props) => {
  */
 const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem, toggleAnnouncerString } = props;
+    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString } = props;
     const scalingMode = React.useMemo(() => {
         var _a;
         /* @conditional-compile-remove(pinned-participants) */
@@ -11965,6 +11970,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Fit');
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
                     },
                     'data-ui-id': 'video-tile-fit-to-frame',
@@ -11981,6 +11987,7 @@ const useVideoTileContextualMenuProps = (props) => {
                             styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                         },
                         onClick: () => {
+                            onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Crop');
                             view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
                         },
                         'data-ui-id': 'video-tile-fill-frame',
@@ -12000,6 +12007,7 @@ const useVideoTileContextualMenuProps = (props) => {
         isPinned,
         onPinParticipant,
         onUnpinParticipant,
+        onUpdateScalingMode,
         remoteParticipant.userId,
         remoteParticipant.displayName,
         disablePinMenuItem,
@@ -12437,7 +12445,7 @@ const bracketedParticipantString = (participantString, withBrackets) => {
 const _RemoteVideoTile = React__default['default'].memo((props) => {
     var _a;
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem, toggleAnnouncerString, strings } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -12469,6 +12477,7 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
         isPinned,
         onPinParticipant,
         onUnpinParticipant,
+        onUpdateScalingMode,
         disablePinMenuItem,
         toggleAnnouncerString
     });
@@ -14906,6 +14915,15 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     const [pinnedParticipantsState, setPinnedParticipantsState] = React__default['default'].useState([]);
     /* @conditional-compile-remove(pinned-participants) */
+    const [selectedScalingModeState, setselectedScalingModeState] = React__default['default'].useState({});
+    /* @conditional-compile-remove(pinned-participants) */
+    const onUpdateScalingMode = React.useCallback((remoteUserId, scalingMode) => {
+        setselectedScalingModeState((current) => (Object.assign(Object.assign({}, current), { [remoteUserId]: {
+                scalingMode,
+                isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored
+            } })));
+    }, [remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored]);
+    /* @conditional-compile-remove(pinned-participants) */
     React.useEffect(() => {
         var _a;
         (_a = props.pinnedParticipants) === null || _a === void 0 ? void 0 : _a.forEach((pinParticipant) => {
@@ -14995,10 +15013,16 @@ const VideoGallery = (props) => {
     const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
         /* @conditional-compile-remove(pinned-participants) */
+        const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;
+        /* @conditional-compile-remove(pinned-participants) */
         const isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
         const createViewOptions = () => {
             var _a, _b;
             /* @conditional-compile-remove(pinned-participants) */
+            if (selectedScalingMode) {
+                return selectedScalingMode;
+            }
+            /* @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)
                 ? {
@@ -15025,6 +15049,8 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(pinned-participants) */
             onUnpinParticipant: onUnpinParticipant, 
             /* @conditional-compile-remove(pinned-participants) */
+            onUpdateScalingMode: onUpdateScalingMode, 
+            /* @conditional-compile-remove(pinned-participants) */
             isPinned: isPinned, 
             /* @conditional-compile-remove(pinned-participants) */
             disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES, 
@@ -15038,12 +15064,14 @@ const VideoGallery = (props) => {
         onRenderAvatar,
         showMuteIndicator,
         strings,
-        /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,
+        /* @conditional-compile-remove(pinned-participants) */ selectedScalingModeState,
         /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
         /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant,
-        /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString
+        /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString,
+        /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,
+        /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
@@ -17827,7 +17855,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, 
@@ -17954,7 +17982,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) */
@@ -20275,6 +20303,10 @@ const COMPOSITE_ONLY_ICONS = {
     LocalCameraSwitch: React__default['default'].createElement(reactIcons.CameraSwitch24Regular, null),
     ControlBarChatButtonActive: React__default['default'].createElement(reactIcons.Chat20Filled, null),
     ControlBarChatButtonInactive: React__default['default'].createElement(reactIcons.Chat20Regular, null),
+    /* @conditional-compile-remove(capabilities) */
+    ControlButtonCameraProhibited: React__default['default'].createElement(reactIcons.VideoProhibited20Filled, null),
+    /* @conditional-compile-remove(capabilities) */
+    ControlButtonMicProhibited: React__default['default'].createElement(reactIcons.MicProhibited20Filled, null),
     ControlBarPeopleButton: React__default['default'].createElement(reactIcons.People20Regular, null),
     MoreDrawerMicrophones: React__default['default'].createElement(reactIcons.Mic20Regular, null),
     MoreDrawerPeople: React__default['default'].createElement(reactIcons.People20Regular, null),
@@ -20345,7 +20377,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};
 
@@ -23107,16 +23139,22 @@ const usePropsFor$1 = (component) => {
  * @private
  */
 const Camera = (props) => {
-    var _a;
+    var _a, _b, _c;
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     /* @conditional-compile-remove(rooms) */
     const adapter = useAdapter();
     /* @conditional-compile-remove(rooms) */
     const isRoomsCall = adapter.getState().isRoomsCall;
+    /* @conditional-compile-remove(capabilities) */
+    const turnVideoOnCapability = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.turnVideoOn;
     return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled ||
             props.disabled ||
-            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), 
+            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), 
+        /* @conditional-compile-remove(capabilities) */
+        onRenderOffIcon: turnVideoOnCapability && !turnVideoOnCapability.isPresent
+            ? () => React__default['default'].createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonCameraProhibited' })
+            : undefined, 
         /* @conditional-compile-remove(video-background-effects) */
         onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.componentRef })));
 };
@@ -23258,6 +23296,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
  */
@@ -23311,13 +23354,21 @@ 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.
 /**
  * @private
  */
 const Microphone = (props) => {
-    var _a;
+    var _a, _b, _c;
     const microphoneButtonProps = usePropsFor$1(MicrophoneButton);
     const callStatus = useSelector$1(getCallStatus);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
@@ -23326,6 +23377,8 @@ const Microphone = (props) => {
     const adapter = useAdapter();
     /* @conditional-compile-remove(rooms) */
     const isRoomsCall = adapter.getState().isRoomsCall;
+    /* @conditional-compile-remove(capabilities) */
+    const unmuteMicCapability = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.unmuteMic;
     /**
      * When call is in Lobby, microphone button should be disabled.
      * This is due to to headless limitation where a call can not be muted/unmuted in lobby.
@@ -23348,7 +23401,11 @@ const Microphone = (props) => {
     // tab focus on MicrophoneButton on page load
     return (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled ||
             props.disabled ||
-            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown') })));
+            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.role) === 'Unknown'), 
+        /* @conditional-compile-remove(capabilities) */
+        onRenderOffIcon: unmuteMicCapability && !unmuteMicCapability.isPresent
+            ? () => React__default['default'].createElement(_HighContrastAwareIcon, { disabled: true, iconName: 'ControlButtonMicProhibited' })
+            : undefined })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -26190,12 +26247,91 @@ 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;
+        }
+        const iconProps = getNotificationIconProps(notification);
+        return (React__default['default'].createElement(react.MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: react.MessageBarType.warning, dismissIconProps: { iconName: 'ErrorBarClear' }, onDismiss: () => props.onDismissNotification(notification), messageBarIconProps: iconProps }, 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 getNotificationIconProps = (notification) => {
+    switch (notification.capabilityName) {
+        case 'turnVideoOn':
+            if (notification.isPresent) {
+                return { iconName: 'ControlButtonCameraOn' };
+            }
+            return { iconName: 'ControlButtonCameraProhibited' };
+        case 'unmuteMic':
+            if (notification.isPresent) {
+                return { iconName: 'ControlButtonMicOn' };
+            }
+            return { iconName: 'ControlButtonMicProhibited' };
+    }
+    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]);
@@ -26324,13 +26460,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) */
@@ -26351,7 +26492,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, 
@@ -26360,7 +26501,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 },
@@ -26371,6 +26512,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) */
@@ -26380,7 +26525,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 }))))))));
@@ -26905,7 +27050,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
@@ -28465,6 +28612,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) {
@@ -28522,6 +28774,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.
@@ -28557,7 +28813,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' }));
@@ -28577,20 +28835,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) */