@azure/communication-react 1.4.2-alpha-202211260013.0 → 1.4.2-alpha-202211300015.0

package/dist/communication-react.d.ts

@@ -50,10 +50,10 @@ import { IButtonProps } from '@fluentui/react';
 import { IButtonStyles } from '@fluentui/react';
 import { IContextualMenuItem } from '@fluentui/react';
 import { IContextualMenuItemStyles } from '@fluentui/react';
+import { IContextualMenuProps } from '@fluentui/react';
 import { IContextualMenuStyles } from '@fluentui/react';
 import { IDropdownOption } from '@fluentui/react';
 import { IDropdownStyles } from '@fluentui/react';
-import { IIconProps } from '@fluentui/react';
 import { ILinkStyles } from '@fluentui/react';
 import { IMessageBarProps } from '@fluentui/react';
 import { IncomingCall } from '@azure/communication-calling';
@@ -1590,6 +1590,50 @@ export declare interface CallCompositeStrings {
      * Label disaplayed on the lobby screen during a 1:1 outbound call.
      */
     outboundCallingNoticeString: string;
+    /**
+     * Notice to be announced by narrator when a participant joins a call
+     */
+    participantJoinedNoticeString: string;
+    /**
+     * Notice to be announced by narrator when a participant joins a call
+     */
+    twoParticipantJoinedNoticeString: string;
+    /**
+     * Notice to be announced by narrator when a participant joins a call
+     */
+    threeParticipantJoinedNoticeString: string;
+    /**
+     * Notice to be announced by narrator when a participant leaves a call
+     */
+    participantLeftNoticeString: string;
+    /**
+     * Notice to be announced by narrator when 2 participants leave a call
+     */
+    twoParticipantLeftNoticeString: string;
+    /**
+     * Notice to be announced by narrator when 3 participants leave a call
+     */
+    threeParticipantLeftNoticeString: string;
+    /**
+     * string to be used to announce a change in participant if they have no displayName
+     */
+    unnamedParticipantString: string;
+    /**
+     * string to be used to announce when more than 3 participants have joined at the same time.
+     */
+    manyParticipantsJoined: string;
+    /**
+     * string to be used to announce when more than 3 participants have left at the same time.
+     */
+    manyParticipantsLeft: string;
+    /**
+     * string to be used to announce when multiple unnamed participants have joined at the same time.
+     */
+    manyUnnamedParticipantsJoined: string;
+    /**
+     * string to be used to announce when multiple unnamed participants have left at the same time.
+     */
+    manyUnnamedParticipantsLeft: string;
 }
 
 /**
@@ -4509,6 +4553,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     UnsupportedBrowserWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
+    VideoTileMoreOptions: JSX.Element;
 };
 
 /**
@@ -4605,6 +4650,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     UnsupportedBrowserWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
+    VideoTileMoreOptions: JSX.Element;
 };
 
 /**
@@ -8251,18 +8297,6 @@ export declare interface VideoStreamRendererViewState {
  */
 export declare const VideoTile: (props: VideoTileProps) => JSX.Element;
 
-/**
- * @beta
- * MenuItems to be diplayed in video tile in the contextual/drawer menu
- */
-export declare type VideoTileMenuItems = Array<{
-    key: string;
-    ariaLabel?: string;
-    text: string;
-    onClick: () => void;
-    iconProps: IIconProps;
-}>;
-
 /**
  * Props for {@link VideoTile}.
  *
@@ -8301,10 +8335,6 @@ export declare interface VideoTileProps {
      * Whether the video is muted or not.
      */
     isMuted?: boolean;
-    /**
-     * Display custom menu items in the VideoTile's contextual menu.
-     */
-    menuItems?: VideoTileMenuItems;
     /**
      * If true, the video tile will show the pin icon.
      */
@@ -8343,6 +8373,12 @@ export declare interface VideoTileProps {
      */
     participantState?: ParticipantState;
     strings?: VideoTileStrings;
+    /**
+     * Display custom menu items in the VideoTile's contextual menu.
+     * Uses Fluent UI ContextualMenu.
+     * An ellipses icon will be displayed to open the contextual menu if this prop is defined.
+     */
+    contextualMenu?: IContextualMenuProps;
     /**
      * Callback triggered by video tile on touch and hold.
      */

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.2-alpha-202211260013.0';
+var telemetryVersion = '1.4.2-alpha-202211300015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4382,22 +4382,6 @@ const messageBarType = (errorType) => {
             return react.MessageBarType.error;
     }
 };
-/**
- * @private
- */
-const mapMenuItemsToContextualMenuItems = (menuItems) => {
-    const contextualMenuItems = [];
-    menuItems.map((item) => {
-        contextualMenuItems.push({
-            key: item.key,
-            text: item.text,
-            ariaLabel: item.ariaLabel,
-            onClick: item.onClick,
-            iconProps: item.iconProps
-        });
-    });
-    return contextualMenuItems;
-};
 /**
  * @private
  * @param errorType
@@ -5071,7 +5055,9 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(call-readiness) */
     BrowserPermissionDeniedError: React__default['default'].createElement(BrowserPermissionDenied20Filled, null),
     /* @conditional-compile-remove(pinned-participants) */
-    VideoTilePinned: React__default['default'].createElement(reactIcons.Pin16Filled, null)
+    VideoTilePinned: React__default['default'].createElement(reactIcons.Pin16Filled, null),
+    /* @conditional-compile-remove(pinned-participants) */
+    VideoTileMoreOptions: React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, null)
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -8001,36 +7987,21 @@ const participantStateStringStyles = (theme) => {
 /**
  * @private
  */
-const menuButtonStyles = {
+const moreButtonStyles = {
     root: {
-        background: 'none',
-        border: 'none',
-        borderRadius: 0,
-        minHeight: '0.125rem',
-        minWidth: '2rem',
-        width: '100%',
-        maxWidth: '3rem',
-        svg: {
-            verticalAlign: 'text-top'
-        }
+        // To ensure that the button is clickable when there is a floating video tile
+        zIndex: 1,
+        color: 'inherit',
+        height: '100%'
     },
-    splitButtonMenuButton: {
-        border: 'none'
+    rootHovered: {
+        background: 'none'
     },
-    flexContainer: {
-        flexFlow: 'column',
-        display: 'contents'
+    rootPressed: {
+        background: 'none'
     },
-    label: {
-        fontSize: '0.625rem',
-        fontWeight: '400',
-        lineHeight: '1rem',
-        cursor: 'pointer',
-        display: 'block',
-        margin: '0rem 0.25rem',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
+    rootExpanded: {
+        background: 'none'
     }
 };
 
@@ -8141,16 +8112,24 @@ const DefaultPlaceholder = (props) => {
         React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles },
             React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }))));
 };
-/* @conditional-compile-remove(pinned-participants) */
-const menuIcon = () => React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, { primaryFill: "currentColor" });
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /* @conditional-compile-remove(pinned-participants) */
+const videoTileMoreIconProps = { iconName: 'VideoTileMoreOptions' };
+/* @conditional-compile-remove(pinned-participants) */
+const videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };
+/* @conditional-compile-remove(pinned-participants) */
+const videoTileMoreMenuProps = {
+    directionalHint: react.DirectionalHint.topLeftEdge,
+    isBeakVisible: false,
+    styles: { container: { maxWidth: '8rem' } }
+};
+/* @conditional-compile-remove(pinned-participants) */
 const VideoTileMoreOptionsButton = (props) => {
-    const { menuItems, menuStyles } = props;
-    if (!menuItems || menuItems.length === 0) {
+    const { contextualMenu } = props;
+    if (!contextualMenu) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
-    return (React__default['default'].createElement(react.DefaultButton, { styles: react.concatStyleSets(menuButtonStyles, menuStyles !== null && menuStyles !== void 0 ? menuStyles : {}), onRenderIcon: menuIcon, menuIconProps: { hidden: true }, menuProps: { items: mapMenuItemsToContextualMenuItems(menuItems), directionalHint: react.DirectionalHint.topRightEdge } }));
+    return (React__default['default'].createElement(react.IconButton, { styles: moreButtonStyles, iconProps: videoTileMoreIconProps, menuIconProps: videoTileMoreMenuIconProps, menuProps: Object.assign(Object.assign({}, videoTileMoreMenuProps), contextualMenu) }));
 };
 /**
  * A component to render the video stream for a single call participant.
@@ -8162,9 +8141,9 @@ const VideoTileMoreOptionsButton = (props) => {
 const VideoTile = (props) => {
     const { children, displayName, initialsName, isMirrored, isMuted, 
     /* @conditional-compile-remove(pinned-participants) */
-    isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
+    isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
     /* @conditional-compile-remove(pinned-participants) */
-    menuItems, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX } = props;
+    contextualMenu } = props;
     const [personaSize, setPersonaSize] = React.useState(100);
     const videoTileRef = React.useRef(null);
     const locale = useLocale$1();
@@ -8238,7 +8217,7 @@ const VideoTile = (props) => {
                     showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" }))),
                     /* @conditional-compile-remove(pinned-participants) */
-                    React__default['default'].createElement(VideoTileMoreOptionsButton, { menuItems: menuItems, menuStyles: props.styles }),
+                    React__default['default'].createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu }),
                     /* @conditional-compile-remove(pinned-participants) */
                     isPinned && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                         React__default['default'].createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) })))))),
@@ -13996,7 +13975,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",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",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",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",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",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..."};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={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",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_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",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",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",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",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",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"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={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",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_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",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",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",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",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",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..."};var chat$c={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$c={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",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$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -17765,6 +17744,138 @@ const localVideoCameraCycleButtonSelector = reselect.createSelector([getDeviceMa
     };
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const mediaGallerySelector = reselect__namespace.createSelector([getLocalVideoStreams], (localVideoStreams) => {
+    var _a, _b;
+    return {
+        isVideoStreamOn: !!((_b = (_a = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.target)
+    };
+});
+/**
+ * Custom selector for this hook to retrieve all the participants that are currently
+ * connected to the call.
+ */
+const getRemoteParticipantsConnectedSelector = reselect__namespace.createSelector([getRemoteParticipants], (remoteParticipants) => {
+    const participants = Object.values(remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : {});
+    return participants.filter((p) => p.state === 'Connected');
+});
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * sets the announcement string whenever a Participant comes or goes from a call to be
+ * used by the system narrator.
+ *
+ * @returns string to be used by the narrator and Announcer component
+ *
+ * @internal
+ */
+const useParticipantChangedAnnouncement = () => {
+    const locale = useLocale().strings.call;
+    const strings = React.useMemo(() => {
+        return {
+            participantJoinedNoticeString: locale.participantJoinedNoticeString,
+            twoParticipantJoinedNoticeString: locale.twoParticipantJoinedNoticeString,
+            threeParticipantJoinedNoticeString: locale.threeParticipantJoinedNoticeString,
+            participantLeftNoticeString: locale.participantLeftNoticeString,
+            twoParticipantLeftNoticeString: locale.twoParticipantLeftNoticeString,
+            threeParticipantLeftNoticeString: locale.threeParticipantLeftNoticeString,
+            unnamedParticipantString: locale.unnamedParticipantString,
+            manyParticipantsJoined: locale.manyParticipantsJoined,
+            manyParticipantsLeft: locale.manyParticipantsLeft,
+            manyUnnamedParticipantsJoined: locale.manyUnnamedParticipantsJoined,
+            manyUnnamedParticipantsLeft: locale.manyUnnamedParticipantsLeft
+        };
+    }, [locale]);
+    const [announcerString, setAnnouncerString] = React.useState('');
+    const currentParticipants = useSelector$1(getRemoteParticipantsConnectedSelector);
+    /**
+     * We want to use a useRef here since we want to not fire this hook based on the previous participants
+     * this allows this value to be used in the hook without being in the dependency array.
+     *
+     * Note: By definition if this hook is used in another component it is not pure anymore.
+     */
+    const previousParticipants = React.useRef(currentParticipants);
+    const resetAnnoucement = (string) => {
+        setAnnouncerString(string);
+    };
+    React.useMemo(() => {
+        const currentIds = currentParticipants.map((p) => toFlatCommunicationIdentifier(p.identifier));
+        const previousIds = previousParticipants.current.map((p) => toFlatCommunicationIdentifier(p.identifier));
+        const whoJoined = currentParticipants.filter((p) => !previousIds.includes(toFlatCommunicationIdentifier(p.identifier)));
+        const whoLeft = previousParticipants.current.filter((p) => !currentIds.includes(toFlatCommunicationIdentifier(p.identifier)));
+        if (whoJoined.length > 0) {
+            resetAnnoucement(createAnnouncmentString('joined', whoJoined, strings));
+        }
+        if (whoLeft.length > 0) {
+            resetAnnoucement(createAnnouncmentString('left', whoLeft, strings));
+        }
+        // Update cached value at the end.
+        previousParticipants.current = currentParticipants;
+    }, [currentParticipants, strings]);
+    return announcerString;
+};
+/**
+ * Generates the announcement string for when a participant joins or leaves a call.
+ */
+const createAnnouncmentString = (direction, participants, strings) => {
+    var _a, _b, _c;
+    /**
+     * If there are no participants return empty string.
+     */
+    if (participants.length === 0) {
+        return '';
+    }
+    /**
+     * Filter participants into two arrays to put all the unnamed participants at the back of the
+     * names being announced.
+     */
+    const unnamedParticipants = participants.filter((p) => p.displayName === undefined);
+    const namedParicipants = participants.filter((p) => p.displayName);
+    const sortedParticipants = namedParicipants.concat(unnamedParticipants);
+    /**
+     * if there are only unnamed participants present in the array announce a special unnamed participants
+     * only string.
+     */
+    if (sortedParticipants.filter((p) => p.displayName).length === 0 && sortedParticipants.length > 1) {
+        return _formatString(direction === 'joined' ? strings.manyUnnamedParticipantsJoined : strings.manyUnnamedParticipantsLeft, {
+            numOfParticipants: (sortedParticipants.length - 1).toString()
+        });
+    }
+    const participantNames = sortedParticipants.map((p) => { var _a; return (_a = p.displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString; });
+    switch (sortedParticipants.length) {
+        case 1:
+            return _formatString(direction === 'joined' ? strings.participantJoinedNoticeString : strings.participantLeftNoticeString, { displayName: participantNames[0] });
+        case 2:
+            return _formatString(direction === 'joined' ? strings.twoParticipantJoinedNoticeString : strings.twoParticipantLeftNoticeString, {
+                displayName1: participantNames[0],
+                displayName2: participantNames[1]
+            });
+        case 3:
+            return _formatString(direction === 'joined' ? strings.threeParticipantJoinedNoticeString : strings.threeParticipantLeftNoticeString, {
+                displayName1: participantNames[0],
+                displayName2: participantNames[1],
+                displayName3: participantNames[2]
+            });
+    }
+    /**
+     * If we have more than 3 participants joining we need to do something more to announce them
+     * appropriately.
+     *
+     * We don't want to announce every name when more than 3 participants join at once so
+     * we parse out the first 3 names we have and announce those with the number of others.
+     */
+    const numberOfExtraParticipants = sortedParticipants.length - 3;
+    return _formatString(direction === 'joined' ? strings.manyParticipantsJoined : strings.manyParticipantsLeft, {
+        displayName1: (_a = sortedParticipants[0].displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString,
+        displayName2: (_b = sortedParticipants[1].displayName) !== null && _b !== void 0 ? _b : strings.unnamedParticipantString,
+        displayName3: (_c = sortedParticipants[2].displayName) !== null && _c !== void 0 ? _c : strings.unnamedParticipantString,
+        numOfParticipants: numberOfExtraParticipants.toString()
+    });
+};
+
 // Copyright (c) Microsoft Corporation.
 const VideoGalleryStyles = {
     root: {
@@ -17787,6 +17898,7 @@ const MediaGallery = (props) => {
     const videoGalleryProps = usePropsFor$1(VideoGallery);
     const cameraSwitcherCameras = useSelector$1(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers();
+    const announcerString = useParticipantChangedAnnouncement();
     const cameraSwitcherProps = React.useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
@@ -17799,7 +17911,9 @@ const MediaGallery = (props) => {
     const VideoGalleryMemoized = React.useMemo(() => {
         return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar })));
     }, [videoGalleryProps, props.isMobile, onRenderAvatar, cameraSwitcherProps]);
-    return VideoGalleryMemoized;
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
+        VideoGalleryMemoized));
 };
 /**
  * @private
@@ -17964,17 +18078,6 @@ const complianceBannerSelector = reselect__namespace.createSelector([getIsTransc
     };
 });
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const mediaGallerySelector = reselect__namespace.createSelector([getLocalVideoStreams], (localVideoStreams) => {
-    var _a, _b;
-    return {
-        isVideoStreamOn: !!((_b = (_a = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.target)
-    };
-});
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private