@azure/communication-react 1.4.2-alpha-202211290015.0 → 1.4.2-alpha-202212010027.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';
@@ -3814,6 +3814,8 @@ export declare interface ComponentStrings {
     MicrophoneDomainPermissionsDenied: DomainPermissionsStrings;
     /** Strings for unsupported browser UI */
     UnsupportedBrowser: UnsupportedBrowserStrings;
+    /** Strings for unsupported browser version UI */
+    UnsupportedBrowserVersion: UnsupportedBrowserVersionStrings;
     /** Strings for BrowserPemissionDenied */
     BrowserPermissionDenied: BrowserPermissionDeniedStrings;
     /** Strings for BrowserPemissionDeniedIOS */
@@ -4550,9 +4552,10 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     DomainPermissionMic: JSX.Element;
     DomainPermissionCameraDenied: JSX.Element;
     DomainPermissionMicDenied: JSX.Element;
-    UnsupportedBrowserWarning: JSX.Element;
+    UnsupportedEnvironmentWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
+    VideoTileMoreOptions: JSX.Element;
 };
 
 /**
@@ -4646,9 +4649,10 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     DomainPermissionMic: JSX.Element;
     DomainPermissionCameraDenied: JSX.Element;
     DomainPermissionMicDenied: JSX.Element;
-    UnsupportedBrowserWarning: JSX.Element;
+    UnsupportedEnvironmentWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
+    VideoTileMoreOptions: JSX.Element;
 };
 
 /**
@@ -7839,19 +7843,19 @@ export declare interface TypingIndicatorStylesProps extends BaseCustomStyles {
 }
 
 /**
- * UI to display to the user that the browser they are using is not supported by calling application.
+ * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.
  *
  * @beta
  */
 export declare const UnsupportedBrowser: (props: UnsupportedBrowserProps) => JSX.Element;
 
 /**
- * props for UnsupportedBrowser UI
+ * props for {@link UnsupportedBrowser} UI
  *
  * @beta
  */
 export declare interface UnsupportedBrowserProps {
-    /** Handler to perform a action when the help link is actioned */
+    /** Handler to perform an action when the help link is actioned */
     onTroubleshootingClick?: () => void;
     /** String overrides for the component */
     strings: UnsupportedBrowserStrings;
@@ -7867,8 +7871,42 @@ export declare interface UnsupportedBrowserStrings {
     primaryText: string;
     /** String for the secondary text */
     secondaryText: string;
-    /** String for the help link */
-    moreHelpLink: string;
+    /** String to display in the text for the help link */
+    moreHelpText: string;
+}
+
+/**
+ * UI to display to the user that the browser version they are using is out of date
+ * and not supported by Azure Communications Calling service.
+ *
+ * @beta
+ */
+export declare const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps) => JSX.Element;
+
+/**
+ * props for {@link UnsupportedBrowserVersion} UI
+ *
+ * @beta
+ */
+export declare interface UnsupportedBrowserVersionProps {
+    /** Handler to perform an action when the help link is actioned */
+    onTroubleshootingClick?: () => void;
+    /** String overrides for the component */
+    strings: UnsupportedBrowserVersionStrings;
+}
+
+/**
+ * Strings for UnsupportedBrowser component
+ *
+ * @beta
+ */
+export declare interface UnsupportedBrowserVersionStrings {
+    /** String for the primary text */
+    primaryText: string;
+    /** String for the secondary text */
+    secondaryText: string;
+    /** String to display in the text for the help link */
+    moreHelpText: string;
 }
 
 /**
@@ -8295,18 +8333,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}.
  *
@@ -8345,10 +8371,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.
      */
@@ -8387,6 +8409,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-202211290015.0';
+var telemetryVersion = '1.4.2-alpha-202212010027.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1141,6 +1141,7 @@ var EventNames;
     EventNames["CREATE_STREAM_INVALID_PARAMS"] = "CREATE_STREAM_INVALID_PARAMS";
     EventNames["DISPOSE_STREAM_INVALID_PARAMS"] = "DISPOSE_LOCAL_STREAM_INVALID_PARAMS";
     EventNames["LOCAL_STREAM_ALREADY_RENDERED"] = "LOCAL_STREAM_ALREADY_RENDERED";
+    EventNames["LOCAL_STREAM_ALREADY_DISPOSED"] = "LOCAL_STREAM_ALREADY_DISPOSED";
     EventNames["LOCAL_STREAM_STOPPING"] = "LOCAL_STREAM_STOPPING";
     EventNames["LOCAL_CREATED_STREAM_STOPPING"] = "LOCAL_CREATED_STREAM_STOPPING";
     EventNames["LOCAL_STREAM_RENDERING"] = "LOCAL_STREAM_RENDERING";
@@ -2146,13 +2147,15 @@ function createViewLocalVideo(context, internalContext, callId, options) {
             });
             return;
         }
+        // "Stopping" only happens if the stream was in "rendering" but `disposeView` was called.
+        // Now that `createView` has been re-called, we can flip the state back to "rendering".
         if (renderInfo.status === 'Stopping') {
             _logEvent(callingStatefulLogger, {
                 name: EventNames.LOCAL_STREAM_STOPPING,
                 level: 'warning',
-                message: 'LocalVideoStream is in the middle of stopping.'
+                message: 'LocalVideoStream was marked as stopping by dispose view. Resetting state to "Rendering".'
             });
-            console.warn('LocalVideoStream is in the middle of stopping');
+            internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderInfo.renderer);
             return;
         }
         const renderer = new communicationCalling.VideoStreamRenderer(renderInfo.stream);
@@ -2363,21 +2366,42 @@ function disposeViewLocalVideo(context, internalContext, callId) {
         });
         return;
     }
-    // Sets the status and also renderer. I think we need to always set renderer to undefined since in all status when
-    // cleaned up should have renderer as undefined. If the status is 'Rendered' and renderer is not defined it should
-    // be cleaned up below so we can set it to undefined here.
-    if (renderInfo.status === 'Rendering') {
+    // Nothing to dispose of or clean up -- we can safely exit early here.
+    if (renderInfo.status === 'NotRendered') {
+        _logEvent(callingStatefulLogger, {
+            name: EventNames.LOCAL_STREAM_ALREADY_DISPOSED,
+            level: 'info',
+            message: 'LocalVideoStream is already disposed.'
+        });
+        return;
+    }
+    // Status is already marked as "stopping" so we can exit early here. This is because stopping only occurs
+    // when the stream is being created in createView but hasn't been completed being created yet. The createView
+    // method will see the "stopping" status and perform the cleanup
+    if (renderInfo.status === 'Stopping') {
         _logEvent(callingStatefulLogger, {
             name: EventNames.LOCAL_STREAM_STOPPING,
             level: 'info',
-            message: 'Local stream is still rendering. Changing status to stopping.',
+            message: 'Local stream is already stopping.',
             data: streamLogInfo
         });
-        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Stopping', undefined);
+        return;
     }
-    else {
-        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
+    // If the stream is in the middle of being rendered (i.e. has state "Rendering"), we need the status as
+    // "stopping" without performing any cleanup. This will tell the `createView` method that it should stop
+    // rendering and clean up the state once the view has finished being created.
+    if (renderInfo.status === 'Rendering') {
+        _logEvent(callingStatefulLogger, {
+            name: EventNames.REMOTE_STREAM_STOPPING,
+            level: 'info',
+            message: 'Remote stream is still rendering. Changing status to stopping.',
+            data: streamLogInfo
+        });
+        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Stopping', renderInfo.renderer);
+        return;
     }
+    // Else the state must be in the "Rendered" state, so we can dispose the renderer and clean up the state.
+    internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
     if (renderInfo.renderer) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.DISPOSING_LOCAL_RENDERER,
@@ -3916,7 +3940,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
     wordBreak: 'break-word'
 });
 
-var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$d={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$d={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$d={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneDomainPermissionsCheck={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraDomainPermissionsCheck={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneDomainPermissionsCheck={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneDomainPermissionsDenied={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraDomainPermissionsDenied={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneDomainPermissionsDenied={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$e={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLink:"More help"};var BrowserPermissionDenied$d={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$d={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton$d,videoTile:videoTile$d,CameraAndMicrophoneDomainPermissionsRequest:CameraAndMicrophoneDomainPermissionsRequest,CameraDomainPermissionsRequest:CameraDomainPermissionsRequest,MicrophoneDomainPermissionsRequest:MicrophoneDomainPermissionsRequest,CameraAndMicrophoneDomainPermissionsCheck:CameraAndMicrophoneDomainPermissionsCheck,CameraDomainPermissionsCheck:CameraDomainPermissionsCheck,MicrophoneDomainPermissionsCheck:MicrophoneDomainPermissionsCheck,CameraAndMicrophoneDomainPermissionsDenied:CameraAndMicrophoneDomainPermissionsDenied,CameraDomainPermissionsDenied:CameraDomainPermissionsDenied,MicrophoneDomainPermissionsDenied:MicrophoneDomainPermissionsDenied,UnsupportedBrowser:UnsupportedBrowser$e,BrowserPermissionDenied:BrowserPermissionDenied$d,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$d};
+var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$d={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$d={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$d={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneDomainPermissionsCheck={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraDomainPermissionsCheck={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneDomainPermissionsCheck={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneDomainPermissionsDenied={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraDomainPermissionsDenied={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneDomainPermissionsDenied={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$e={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpText:"More help"};var UnsupportedBrowserVersion$1={primaryText:"Browser version not supported",secondaryText:"Please update your browser and then try joining the call again.",moreHelpText:"See compatibility requirements"};var BrowserPermissionDenied$d={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$d={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton$d,videoTile:videoTile$d,CameraAndMicrophoneDomainPermissionsRequest:CameraAndMicrophoneDomainPermissionsRequest,CameraDomainPermissionsRequest:CameraDomainPermissionsRequest,MicrophoneDomainPermissionsRequest:MicrophoneDomainPermissionsRequest,CameraAndMicrophoneDomainPermissionsCheck:CameraAndMicrophoneDomainPermissionsCheck,CameraDomainPermissionsCheck:CameraDomainPermissionsCheck,MicrophoneDomainPermissionsCheck:MicrophoneDomainPermissionsCheck,CameraAndMicrophoneDomainPermissionsDenied:CameraAndMicrophoneDomainPermissionsDenied,CameraDomainPermissionsDenied:CameraDomainPermissionsDenied,MicrophoneDomainPermissionsDenied:MicrophoneDomainPermissionsDenied,UnsupportedBrowser:UnsupportedBrowser$e,UnsupportedBrowserVersion:UnsupportedBrowserVersion$1,BrowserPermissionDenied:BrowserPermissionDenied$d,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$d};
 
 var participantItem$c={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$c={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$c={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$c={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$c={label:"Leave",tooltipContent:"Leave call"};var cameraButton$c={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$c={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$c={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$c={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$c={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$c={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$c={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$c={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant"};var dialpad$c={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$c={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$c={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var DomainPermissions$c={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Allow Access"};var UnsupportedBrowser$d={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLink:"More help"};var BrowserPermissionDenied$c={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$c={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_GB$1 = {participantItem:participantItem$c,typingIndicator:typingIndicator$c,sendBox:sendBox$c,messageStatusIndicator:messageStatusIndicator$c,endCallButton:endCallButton$c,cameraButton:cameraButton$c,microphoneButton:microphoneButton$c,devicesButton:devicesButton$c,participantsButton:participantsButton$c,screenShareButton:screenShareButton$c,messageThread:messageThread$c,errorBar:errorBar$c,videoGallery:videoGallery$c,dialpad:dialpad$c,holdButton:holdButton$c,videoTile:videoTile$c,DomainPermissions:DomainPermissions$c,UnsupportedBrowser:UnsupportedBrowser$d,BrowserPermissionDenied:BrowserPermissionDenied$c,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$c};
 
@@ -4382,22 +4406,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
@@ -4968,7 +4976,7 @@ const DomainPermissionsCameraDenied20Filled = () => {
 const DomainPermissionSparkle20Filled = () => (React__default['default'].createElement("div", { className: react.mergeStyles({ transform: 'scale(2)' }) },
     React__default['default'].createElement(reactIcons.Sparkle20Filled, null)));
 /* @conditional-compile-remove(unsupported-browser) */
-const UnsupportedBrowserWarning = () => {
+const UnsupportedEnvironmentWarning = () => {
     const theme = useTheme();
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: 'center', styles: {
             root: {
@@ -5067,11 +5075,13 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(call-readiness) */
     DomainPermissionMicDenied: React__default['default'].createElement(DomainPermissionsMicDenied20Filled, null),
     /* @conditional-compile-remove(unsupported-browser) */
-    UnsupportedBrowserWarning: React__default['default'].createElement(UnsupportedBrowserWarning, null),
+    UnsupportedEnvironmentWarning: React__default['default'].createElement(UnsupportedEnvironmentWarning, null),
     /* @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 +8011,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 +8136,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 +8165,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 +8241,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) })))))),
@@ -11465,7 +11468,8 @@ const secondaryTextStyles = {
     root: {
         margin: 'auto',
         fontWeight: 400,
-        paddingBottom: '0.5rem'
+        paddingBottom: '0.5rem',
+        textAlign: 'center'
     }
 };
 /**
@@ -11497,26 +11501,47 @@ const iconStyles$1 = {
 
 // Copyright (c) Microsoft Corporation.
 /* @conditional-compile-remove(unsupported-browser) */
-const UnsupportedBrowserContainer = (props) => {
+const UnsupportedEnvironmentContainer = (props) => {
     const { onTroubleshootingClick, strings } = props;
     return (React__default['default'].createElement(react.Stack, { styles: containerStyles$2 },
-        React__default['default'].createElement(react.Icon, { styles: iconStyles$1, iconName: "UnsupportedBrowserWarning", "data-ui-id": "unsupportedBrowserIcon" }),
+        React__default['default'].createElement(react.Icon, { styles: iconStyles$1, iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
         React__default['default'].createElement(react.Text, { styles: mainTextStyles }, strings.primaryText),
         React__default['default'].createElement(react.Text, { styles: secondaryTextStyles }, strings.secondaryText),
         onTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkTextStyles, onClick: () => {
                 onTroubleshootingClick();
-            }, "data-ui-id": "unsupportedBrowserLink" }, strings.moreHelpLink))));
+            }, "data-ui-id": "unsupported-environment-link" }, strings.moreHelpText))));
 };
 /**
  * UI to display to the user that the browser they are using is not supported by calling application.
  *
+ * @private
+ */
+const UnsupportedEnvironment = (props) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return React__default['default'].createElement(UnsupportedEnvironmentContainer, Object.assign({}, props));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.
+ *
  * @beta
  */
 const UnsupportedBrowser = (props) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    const strings = useLocale$1().strings.UnsupportedBrowser;
-    /* @conditional-compile-remove(unsupported-browser) */
-    return React__default['default'].createElement(UnsupportedBrowserContainer, Object.assign({}, props, { strings: strings }));
+    const { onTroubleshootingClick, strings } = props;
+    return React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings });
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * UI to display to the user that the browser version they are using is out of date
+ * and not supported by Azure Communications Calling service.
+ *
+ * @beta
+ */
+const UnsupportedBrowserVersion = (props) => {
+    const { onTroubleshootingClick, strings } = props;
+    return React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings });
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15776,7 +15801,7 @@ const getCallEndReason = (call) => {
  */
 const getCallCompositePage = (call, previousCall, environmentInfo, features) => {
     /* @conditional-compile-remove(unsupported-browser) */
-    if ((features === null || features === void 0 ? void 0 : features.unsupportedEnvironment) && (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false) {
+    if (isUnsupportedEnvironment(features, environmentInfo)) {
         return 'unsupportedEnvironment';
     }
     if (call) {
@@ -15910,6 +15935,11 @@ const getDevicePermissionState = (setVideoState, setAudioState) => {
         setAudioState('unsupported');
     });
 };
+/* @conditional-compile-remove(unsupported-browser) */
+const isUnsupportedEnvironment = (features, environmentInfo) => {
+    return !!((features === null || features === void 0 ? void 0 : features.unsupportedEnvironment) &&
+        ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false || (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false));
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -19342,16 +19372,23 @@ const HoldPage = (props) => {
  */
 const UnsupportedBrowserPage = (props) => {
     /* @conditional-compile-remove(unsupported-browser) */
-    const { onTroubleshootingClick } = props;
+    const { onTroubleshootingClick, environmentInfo } = props;
     /* @conditional-compile-remove(unsupported-browser) */
     const locale = useLocale();
     /* @conditional-compile-remove(unsupported-browser) */
     const unsupportedBrowserStrings = locale.component.strings.UnsupportedBrowser;
     /* @conditional-compile-remove(unsupported-browser) */
-    return (React__default['default'].createElement(react.Stack, { styles: containerStyles },
-        React__default['default'].createElement(UnsupportedBrowser, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserStrings })));
+    const unsupportedBrowserVersionStrings = locale.component.strings.UnsupportedBrowserVersion;
+    let pageElement = React__default['default'].createElement(React__default['default'].Fragment, null);
+    /* @conditional-compile-remove(unsupported-browser) */
+    if (!(environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser)) {
+        pageElement = (React__default['default'].createElement(UnsupportedBrowser, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserStrings }));
+    }
+    else if (!(environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion)) {
+        pageElement = (React__default['default'].createElement(UnsupportedBrowserVersion, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserVersionStrings }));
+    }
+    return React__default['default'].createElement(react.Stack, { styles: containerStyles }, pageElement);
 };
-/* @conditional-compile-remove(unsupported-browser) */
 const containerStyles = {
     root: {
         margin: 'auto',
@@ -19435,7 +19472,7 @@ const MainScreen = (props) => {
         case 'unsupportedEnvironment':
             pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onEnvironmentInfoTroubleshootingClick })));
+            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
             break;
     }
     if (!pageElement) {
@@ -19713,7 +19750,6 @@ class AzureCommunicationCallAdapter {
                 isMuted: (_a = this.call) === null || _a === void 0 ? void 0 : _a.isMuted
             });
         };
-        console.log(options);
         this.bindPublicMethods();
         this.callClient = callClient;
         this.callAgent = callAgent;
@@ -22391,6 +22427,7 @@ exports.SendBox = SendBox;
 exports.StreamMedia = StreamMedia;
 exports.TypingIndicator = TypingIndicator;
 exports.UnsupportedBrowser = UnsupportedBrowser;
+exports.UnsupportedBrowserVersion = UnsupportedBrowserVersion;
 exports.VideoGallery = VideoGallery;
 exports.VideoTile = VideoTile;
 exports._DevicePermissionDropdown = _DevicePermissionDropdown;