@azure/communication-react 1.3.2-alpha-202208060014.0 → 1.3.2-alpha-202208110020.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/dist/communication-react.d.ts +27 -9
  2. package/dist/dist-cjs/communication-react/index.js +266 -103
  3. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  4. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  5. package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.d.ts.map +1 -1
  6. package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.js +1 -24
  7. package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.js.map +1 -1
  8. package/dist/dist-esm/communication-react/src/index.d.ts +2 -2
  9. package/dist/dist-esm/communication-react/src/index.d.ts.map +1 -1
  10. package/dist/dist-esm/communication-react/src/index.js.map +1 -1
  11. package/dist/dist-esm/react-components/src/components/CameraButton.d.ts.map +1 -1
  12. package/dist/dist-esm/react-components/src/components/CameraButton.js +3 -1
  13. package/dist/dist-esm/react-components/src/components/CameraButton.js.map +1 -1
  14. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.d.ts.map +1 -1
  15. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js +1 -1
  16. package/dist/dist-esm/react-components/src/components/Dialpad/Dialpad.js.map +1 -1
  17. package/dist/dist-esm/react-components/src/components/FileCard.js +1 -1
  18. package/dist/dist-esm/react-components/src/components/FileCard.js.map +1 -1
  19. package/dist/dist-esm/react-components/src/components/ParticipantItem.d.ts +15 -0
  20. package/dist/dist-esm/react-components/src/components/ParticipantItem.d.ts.map +1 -1
  21. package/dist/dist-esm/react-components/src/components/ParticipantItem.js +32 -14
  22. package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
  23. package/dist/dist-esm/react-components/src/components/ParticipantList.d.ts.map +1 -1
  24. package/dist/dist-esm/react-components/src/components/ParticipantList.js +4 -1
  25. package/dist/dist-esm/react-components/src/components/ParticipantList.js.map +1 -1
  26. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.d.ts +2 -2
  27. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.d.ts.map +1 -1
  28. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js +3 -3
  29. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map +1 -1
  30. package/dist/dist-esm/react-components/src/components/StreamMedia.d.ts.map +1 -1
  31. package/dist/dist-esm/react-components/src/components/StreamMedia.js +1 -1
  32. package/dist/dist-esm/react-components/src/components/StreamMedia.js.map +1 -1
  33. package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteScreenShare.js +1 -1
  34. package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteScreenShare.js.map +1 -1
  35. package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts.map +1 -1
  36. package/dist/dist-esm/react-components/src/components/VideoGallery.js +46 -16
  37. package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
  38. package/dist/dist-esm/react-components/src/components/VideoTile.d.ts +2 -2
  39. package/dist/dist-esm/react-components/src/components/VideoTile.d.ts.map +1 -1
  40. package/dist/dist-esm/react-components/src/components/VideoTile.js +2 -2
  41. package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
  42. package/dist/dist-esm/react-components/src/components/styles/ParticipantItem.styles.d.ts +8 -0
  43. package/dist/dist-esm/react-components/src/components/styles/ParticipantItem.styles.d.ts.map +1 -1
  44. package/dist/dist-esm/react-components/src/components/styles/ParticipantItem.styles.js +17 -0
  45. package/dist/dist-esm/react-components/src/components/styles/ParticipantItem.styles.js.map +1 -1
  46. package/dist/dist-esm/react-components/src/index.d.ts +1 -1
  47. package/dist/dist-esm/react-components/src/index.d.ts.map +1 -1
  48. package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +6 -3
  49. package/dist/dist-esm/react-components/src/types/OnRender.d.ts +3 -0
  50. package/dist/dist-esm/react-components/src/types/OnRender.d.ts.map +1 -1
  51. package/dist/dist-esm/react-components/src/types/ParticipantListParticipant.d.ts +6 -1
  52. package/dist/dist-esm/react-components/src/types/ParticipantListParticipant.d.ts.map +1 -1
  53. package/dist/dist-esm/react-components/src/types/VideoGalleryParticipant.d.ts +2 -6
  54. package/dist/dist-esm/react-components/src/types/VideoGalleryParticipant.d.ts.map +1 -1
  55. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +2 -2
  56. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
  57. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.d.ts.map +1 -1
  58. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +2 -1
  59. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
  60. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.d.ts.map +1 -1
  61. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.js +13 -1
  62. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.js.map +1 -1
  63. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.d.ts.map +1 -1
  64. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js +4 -2
  65. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js.map +1 -1
  66. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.d.ts.map +1 -1
  67. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +26 -2
  68. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
  69. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js +2 -1
  70. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js.map +1 -1
  71. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/MediaGallery.styles.d.ts +40 -0
  72. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/MediaGallery.styles.d.ts.map +1 -0
  73. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/MediaGallery.styles.js +64 -0
  74. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/MediaGallery.styles.js.map +1 -0
  75. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.d.ts.map +1 -1
  76. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.js +11 -1
  77. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.js.map +1 -1
  78. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js +3 -1
  79. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js.map +1 -1
  80. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.d.ts +2 -0
  81. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.d.ts.map +1 -1
  82. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.js +3 -1
  83. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.js.map +1 -1
  84. package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.d.ts +4 -0
  85. package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.d.ts.map +1 -1
  86. package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.js +2 -2
  87. package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.js.map +1 -1
  88. package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.d.ts +4 -0
  89. package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.d.ts.map +1 -1
  90. package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.js +19 -15
  91. package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.js.map +1 -1
  92. package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.d.ts +4 -0
  93. package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.d.ts.map +1 -1
  94. package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.js +11 -4
  95. package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.js.map +1 -1
  96. package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.d.ts +4 -0
  97. package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.d.ts.map +1 -1
  98. package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js +10 -2
  99. package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js.map +1 -1
  100. package/package.json +8 -8
@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
192
192
  // Copyright (c) Microsoft Corporation.
193
193
  // Licensed under the MIT license.
194
194
  // GENERATED FILE. DO NOT EDIT MANUALLY.
195
- var telemetryVersion = '1.3.2-alpha-202208060014.0';
195
+ var telemetryVersion = '1.3.2-alpha-202208110020.0';
196
196
 
197
197
  // Copyright (c) Microsoft Corporation.
198
198
  /**
@@ -958,7 +958,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
958
958
  wordBreak: 'break-word'
959
959
  });
960
960
 
961
- var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant"};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$e={onLabel:"Resume",offLabel:"Hold",toolTipOnContent:"Resume call",toolTipOffContent:"Hold call"};var videoTile={participantStateConnecting:"Connecting...",participantStateRinging:"Ringing...",participantStateHold:"On Hold"};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$e,videoTile:videoTile};
961
+ 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$e={onLabel:"Resume",offLabel:"Hold",toolTipOnContent:"Resume call",toolTipOffContent:"Hold call"};var videoTile={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On Hold"};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$e,videoTile:videoTile};
962
962
 
963
963
  var participantItem$c={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant"};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."};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",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"};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.",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.",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 a number"};var HoldButton$d={onLabel:"Resume",offLabel:"Hold",toolTipOnContent:"Resume call",toolTipOffContent:"Hold call"};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$d};
964
964
 
@@ -2336,7 +2336,7 @@ const _FileCard = (props) => {
2336
2336
  height: _pxToRem(progressBarThicknessPx)
2337
2337
  }
2338
2338
  };
2339
- return (React__default['default'].createElement(React__default['default'].Fragment, null,
2339
+ return (React__default['default'].createElement("div", { "data-is-focusable": true },
2340
2340
  React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
2341
2341
  React__default['default'].createElement(react.Stack, { className: containerClassName, onClick: () => {
2342
2342
  var _a;
@@ -4316,7 +4316,7 @@ const StreamMedia = (props) => {
4316
4316
  };
4317
4317
  }, [videoStreamElement]);
4318
4318
  return (React__default['default'].createElement("div", { className: container() },
4319
- React__default['default'].createElement("div", { className: react.mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }),
4319
+ React__default['default'].createElement("div", { "data-ui-id": "stream-media-container", className: react.mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }),
4320
4320
  loadingState === 'loading' && (React__default['default'].createElement("div", { className: loadingSpinnerContainer() },
4321
4321
  React__default['default'].createElement(react.Spinner, { "data-ui-id": "stream-media-loading-spinner", styles: loadSpinnerStyles })))));
4322
4322
  };
@@ -4342,6 +4342,23 @@ const participantItemContainerStyle = (options) => {
4342
4342
  const menuButtonContainerStyle = {
4343
4343
  width: '1.5rem'
4344
4344
  };
4345
+ /**
4346
+ * @private
4347
+ */
4348
+ const participantStateMaxWidth = '5rem';
4349
+ /**
4350
+ * @private
4351
+ */
4352
+ const participantStateStringStyles = {
4353
+ maxWidth: participantStateMaxWidth,
4354
+ overflow: 'hidden',
4355
+ textOverflow: 'ellipsis',
4356
+ whiteSpace: 'nowrap',
4357
+ lineHeight: 'normal',
4358
+ paddingLeft: '1rem',
4359
+ marginLeft: 'auto',
4360
+ marginRight: 0
4361
+ };
4345
4362
  /**
4346
4363
  * @private
4347
4364
  */
@@ -4375,16 +4392,16 @@ const meContainerStyle = {
4375
4392
  * @public
4376
4393
  */
4377
4394
  const ParticipantItem = (props) => {
4378
- var _a, _b, _c, _d;
4379
- const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip } = props;
4395
+ const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip
4396
+ /* @conditional-compile-remove(PSTN-calls) */
4397
+ } = props;
4380
4398
  const [itemHovered, setItemHovered] = React.useState(false);
4381
4399
  const [menuHidden, setMenuHidden] = React.useState(true);
4382
4400
  const containerRef = React.useRef(null);
4383
4401
  const theme = useTheme();
4384
4402
  const localeStrings = useLocale$1().strings.participantItem;
4385
4403
  const ids = useIdentifiers();
4386
- const isMeText = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.isMeText) !== null && _b !== void 0 ? _b : localeStrings.isMeText;
4387
- const menuTitle = (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.menuTitle) !== null && _d !== void 0 ? _d : localeStrings.menuTitle;
4404
+ const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
4388
4405
  const avatarOptions = {
4389
4406
  text: displayName,
4390
4407
  size: react.PersonaSize.size32,
@@ -4399,26 +4416,43 @@ const ParticipantItem = (props) => {
4399
4416
  const meTextStyle = React.useMemo(() => react.mergeStyles(meContainerStyle, { color: theme.palette.neutralTertiary }, styles === null || styles === void 0 ? void 0 : styles.me), [theme.palette.neutralTertiary, styles === null || styles === void 0 ? void 0 : styles.me]);
4400
4417
  const contextualMenuStyle = React.useMemo(() => react.mergeStyles({ background: theme.palette.neutralLighterAlt }, styles === null || styles === void 0 ? void 0 : styles.menu), [theme.palette.neutralLighterAlt, styles === null || styles === void 0 ? void 0 : styles.menu]);
4401
4418
  const infoContainerStyle = React.useMemo(() => react.mergeStyles(iconContainerStyle$1, { color: theme.palette.neutralTertiary }, styles === null || styles === void 0 ? void 0 : styles.iconContainer), [theme.palette.neutralTertiary, styles === null || styles === void 0 ? void 0 : styles.iconContainer]);
4402
- const menuButton = React.useMemo(() => (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: react.mergeStyles(menuButtonContainerStyle), title: menuTitle, "data-ui-id": ids.participantItemMenuButton },
4403
- React__default['default'].createElement(react.Icon, { iconName: itemHovered ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions', className: iconStyles$3 }))), [itemHovered, menuTitle, ids.participantItemMenuButton]);
4419
+ const menuButton = React.useMemo(() => (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: react.mergeStyles(menuButtonContainerStyle), title: strings.menuTitle, "data-ui-id": ids.participantItemMenuButton },
4420
+ React__default['default'].createElement(react.Icon, { iconName: itemHovered ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions', className: iconStyles$3 }))), [itemHovered, strings.menuTitle, ids.participantItemMenuButton]);
4404
4421
  const onDismissMenu = () => {
4405
4422
  setItemHovered(false);
4406
4423
  setMenuHidden(true);
4407
4424
  };
4425
+ const participantStateString = participantStateStringTrampoline(props, strings);
4408
4426
  return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
4409
- setItemHovered(true);
4410
- setMenuHidden(false);
4411
- onClick === null || onClick === void 0 ? void 0 : onClick(props);
4427
+ if (!participantStateString) {
4428
+ setItemHovered(true);
4429
+ setMenuHidden(false);
4430
+ onClick === null || onClick === void 0 ? void 0 : onClick(props);
4431
+ }
4412
4432
  }, tabIndex: 0 },
4413
- React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles({ width: `calc(100% - ${menuButtonContainerStyle.width})`, alignItems: 'center' }) },
4433
+ React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles({
4434
+ width: `calc(100% - ${!me && participantStateString ? participantStateMaxWidth : menuButtonContainerStyle.width})`,
4435
+ alignItems: 'center'
4436
+ }) },
4414
4437
  avatar,
4415
- me && React__default['default'].createElement(react.Text, { className: meTextStyle }, isMeText),
4438
+ me && React__default['default'].createElement(react.Text, { className: meTextStyle }, strings.isMeText),
4416
4439
  React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(infoContainerStyle) }, onRenderIcon && onRenderIcon(props))),
4417
- menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
4440
+ !me && participantStateString ? (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles) }, participantStateString)) : (React__default['default'].createElement("div", null, menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
4418
4441
  menuButton,
4419
4442
  React__default['default'].createElement(react.ContextualMenu, { items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: onDismissMenu, onDismiss: onDismissMenu, directionalHint: react.DirectionalHint.bottomRightEdge, className: contextualMenuStyle, calloutProps: {
4420
4443
  preventDismissOnEvent: _preventDismissOnEvent
4421
- } })))));
4444
+ } })))))));
4445
+ };
4446
+ const participantStateStringTrampoline = (props, strings) => {
4447
+ /* @conditional-compile-remove(one-to-n-calling) */
4448
+ /* @conditional-compile-remove(PSTN-calls) */
4449
+ return props.participantState === 'Idle' || props.participantState === 'Connecting'
4450
+ ? strings === null || strings === void 0 ? void 0 : strings.participantStateConnecting
4451
+ : props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
4452
+ ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
4453
+ : props.participantState === 'Hold'
4454
+ ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
4455
+ : undefined;
4422
4456
  };
4423
4457
 
4424
4458
  // Copyright (c) Microsoft Corporation.
@@ -4466,7 +4500,10 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
4466
4500
  callingParticipant.isMuted && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel }))))
4467
4501
  : () => null;
4468
4502
  const displayName = !participant.displayName ? strings.displayNamePlaceholder : participant.displayName;
4469
- return (React__default['default'].createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip }));
4503
+ return (React__default['default'].createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip,
4504
+ /* @conditional-compile-remove(one-to-n-calling) */
4505
+ /* @conditional-compile-remove(PSTN-calls) */
4506
+ participantState: callingParticipant.state }));
4470
4507
  };
4471
4508
  const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
4472
4509
  if (!excludeMe || !myUserId) {
@@ -4736,7 +4773,7 @@ const displayNameStyle = {
4736
4773
  /**
4737
4774
  * @private
4738
4775
  */
4739
- const participantStateStyle = {
4776
+ const participantStateStyle$1 = {
4740
4777
  textAlign: 'center',
4741
4778
  paddingTop: '0.5rem',
4742
4779
  fontWeight: 600,
@@ -4786,10 +4823,10 @@ const DefaultPlaceholder = (props) => {
4786
4823
  if (!strings) {
4787
4824
  return;
4788
4825
  }
4789
- if (participantState === 'Connecting') {
4826
+ if (participantState === 'Idle' || participantState === 'Connecting') {
4790
4827
  return strings === null || strings === void 0 ? void 0 : strings.participantStateConnecting;
4791
4828
  }
4792
- else if (participantState === 'Ringing') {
4829
+ else if (participantState === 'EarlyMedia' || participantState === 'Ringing') {
4793
4830
  return strings === null || strings === void 0 ? void 0 : strings.participantStateRinging;
4794
4831
  }
4795
4832
  else if (participantState === 'Hold') {
@@ -4800,7 +4837,7 @@ const DefaultPlaceholder = (props) => {
4800
4837
  return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
4801
4838
  React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles },
4802
4839
  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 }),
4803
- participantStateString && React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, participantStateString))));
4840
+ participantStateString && React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle$1) }, participantStateString))));
4804
4841
  };
4805
4842
  const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
4806
4843
  /**
@@ -4882,7 +4919,7 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
4882
4919
  isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator,
4883
4920
  /* @conditional-compile-remove(one-to-n-calling) */
4884
4921
  /* @conditional-compile-remove(PSTN-calls) */
4885
- state } = props;
4922
+ participantState } = props;
4886
4923
  const remoteVideoStreamProps = React.useMemo(() => ({
4887
4924
  isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
4888
4925
  isScreenSharingOn,
@@ -4913,12 +4950,12 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
4913
4950
  // Returning `undefined` results in the placeholder with avatar being shown
4914
4951
  return undefined;
4915
4952
  }
4916
- return React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving ? 'none' : 'loading' });
4953
+ return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }));
4917
4954
  }, [renderElement, isReceiving]);
4918
4955
  return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, showLabel: props.showLabel, personaMinSize: props.personaMinSize,
4919
4956
  /* @conditional-compile-remove(one-to-n-calling) */
4920
4957
  /* @conditional-compile-remove(PSTN-calls) */
4921
- participantState: state }));
4958
+ participantState: participantState }));
4922
4959
  });
4923
4960
 
4924
4961
  // Copyright (c) Microsoft Corporation.
@@ -5346,7 +5383,7 @@ const RemoteScreenShare = React__default['default'].memo((props) => {
5346
5383
  participant: displayName
5347
5384
  })
5348
5385
  : '';
5349
- return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving ? 'none' : 'loading' })) : undefined, onRenderPlaceholder: () => React__default['default'].createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
5386
+ return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React__default['default'].createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
5350
5387
  });
5351
5388
  const LoadingSpinner = (props) => {
5352
5389
  return (React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: loadingStyle },
@@ -6124,7 +6161,7 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
6124
6161
  * @public
6125
6162
  */
6126
6163
  const VideoGallery = (props) => {
6127
- var _a, _b, _c, _d;
6164
+ var _a, _b, _c, _d, _e;
6128
6165
  const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
6129
6166
  const ids = useIdentifiers();
6130
6167
  const theme = useTheme();
@@ -6138,6 +6175,8 @@ const VideoGallery = (props) => {
6138
6175
  const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
6139
6176
  const visibleVideoParticipants = React.useRef([]);
6140
6177
  const visibleAudioParticipants = React.useRef([]);
6178
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
6179
+ const visibleCallingParticipants = React.useRef([]);
6141
6180
  const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;
6142
6181
  const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;
6143
6182
  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
@@ -6156,10 +6195,20 @@ const VideoGallery = (props) => {
6156
6195
  lastVisibleParticipants: visibleVideoParticipants.current,
6157
6196
  maxDominantSpeakers: maxRemoteVideoStreams
6158
6197
  }).slice(0, maxRemoteVideoStreams);
6198
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
6199
+ visibleCallingParticipants.current = smartDominantSpeakerParticipants({
6200
+ participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => p.state === ('Connecting' ))) !== null && _b !== void 0 ? _b : [],
6201
+ dominantSpeakers,
6202
+ lastVisibleParticipants: visibleCallingParticipants.current,
6203
+ maxDominantSpeakers: 0
6204
+ });
6159
6205
  // This set will be used to filter out participants already in visibleVideoParticipants
6160
6206
  const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
6207
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
6208
+ const visibleCallingParticipantsSet = new Set(visibleCallingParticipants.current.map((p) => p.userId));
6161
6209
  visibleAudioParticipants.current = smartDominantSpeakerParticipants({
6162
- participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
6210
+ participants: (_c = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
6211
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !visibleCallingParticipantsSet.has(p.userId))) !== null && _c !== void 0 ? _c : [],
6163
6212
  dominantSpeakers,
6164
6213
  lastVisibleParticipants: visibleAudioParticipants.current,
6165
6214
  maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
@@ -6200,7 +6249,9 @@ const VideoGallery = (props) => {
6200
6249
  ]);
6201
6250
  const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
6202
6251
  const remoteVideoStream = participant.videoStream;
6203
- return (React__default['default'].createElement(_RemoteVideoTile, Object.assign({ key: participant.userId }, participant, { onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator })));
6252
+ return (React__default['default'].createElement(_RemoteVideoTile, Object.assign({ key: participant.userId }, participant, { onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator,
6253
+ /* @conditional-compile-remove(PSTN-calls) */
6254
+ participantState: participant.state })));
6204
6255
  }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]);
6205
6256
  const videoTiles = onRenderRemoteVideoTile
6206
6257
  ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
@@ -6212,25 +6263,38 @@ const VideoGallery = (props) => {
6212
6263
  : visibleAudioParticipants.current.map((participant) => {
6213
6264
  return defaultOnRenderVideoTile(participant, false);
6214
6265
  });
6266
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
6267
+ const callingTiles = onRenderRemoteVideoTile
6268
+ ? visibleCallingParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
6269
+ : visibleCallingParticipants.current.map((participant) => {
6270
+ return defaultOnRenderVideoTile(participant, false);
6271
+ });
6215
6272
  const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
6216
6273
  const screenShareActive = screenShareParticipant || (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn);
6217
- let gridTiles = [];
6218
- let horizontalGalleryTiles = [];
6219
- if (screenShareActive) {
6220
- // If screen sharing is active, assign video and audio participants as horizontal gallery participants
6221
- horizontalGalleryTiles = videoTiles.concat(audioTiles);
6222
- }
6223
- else {
6224
- // If screen sharing is not active, then assign all video tiles as grid tiles.
6225
- // If there are no video tiles, then assign audio tiles as grid tiles.
6226
- gridTiles = videoTiles.length > 0 ? videoTiles : audioTiles;
6227
- horizontalGalleryTiles = videoTiles.length > 0 ? audioTiles : [];
6228
- }
6274
+ const createGridTiles = () => {
6275
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
6276
+ return videoTiles.length > 0 ? videoTiles : audioTiles.concat(callingTiles);
6277
+ };
6278
+ const gridTiles = createGridTiles();
6279
+ const createHorizontalGalleryTiles = () => {
6280
+ if (screenShareActive) {
6281
+ // If screen sharing is active, assign video and audio participants as horizontal gallery participants
6282
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
6283
+ return videoTiles.concat(audioTiles.concat(callingTiles));
6284
+ }
6285
+ else {
6286
+ // If screen sharing is not active, then assign all video tiles as grid tiles.
6287
+ // If there are no video tiles, then assign audio tiles as grid tiles.
6288
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
6289
+ return videoTiles.length > 0 ? audioTiles.concat(callingTiles) : [];
6290
+ }
6291
+ };
6292
+ const horizontalGalleryTiles = createHorizontalGalleryTiles();
6229
6293
  if (!shouldFloatLocalVideo && localParticipant) {
6230
6294
  gridTiles.push(localVideoTile);
6231
6295
  }
6232
6296
  const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
6233
- const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.isReceiving })));
6297
+ const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_e = screenShareParticipant.screenShareStream) === null || _e === void 0 ? void 0 : _e.isReceiving })));
6234
6298
  const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
6235
6299
  const layerHostId = reactHooks.useId('layerhost');
6236
6300
  return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
@@ -6710,7 +6774,9 @@ const CameraButton = (props) => {
6710
6774
  const [announcerString, setAnnouncerString] = React.useState(undefined);
6711
6775
  let disabled = props.disabled || waitForCamera;
6712
6776
  /* @conditional-compile-remove(rooms) */
6713
- disabled = disabled || !_usePermissions().cameraButton;
6777
+ const permissions = _usePermissions();
6778
+ /* @conditional-compile-remove(rooms) */
6779
+ disabled = disabled || !permissions.cameraButton;
6714
6780
  const onRenderCameraOnIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOn" }));
6715
6781
  const onRenderCameraOffIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOff" }));
6716
6782
  if (waitForCamera && strings.tooltipVideoLoadingContent) {
@@ -7790,7 +7856,7 @@ const DialpadContainer = (props) => {
7790
7856
  onChange(onDisplayDialpadInput ? onDisplayDialpadInput(modifiedInput) : formatPhoneNumber(modifiedInput));
7791
7857
  }
7792
7858
  };
7793
- return (React__default['default'].createElement("div", { className: react.mergeStyles(containerStyles$1(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer" },
7859
+ return (React__default['default'].createElement("div", { className: react.mergeStyles(containerStyles$1(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer" },
7794
7860
  React__default['default'].createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: onDisplayDialpadInput ? onDisplayDialpadInput(textValue) : formatPhoneNumber(textValue),
7795
7861
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
7796
7862
  onChange: (e) => {
@@ -7926,7 +7992,7 @@ const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted
7926
7992
  isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,
7927
7993
  /* @conditional-compile-remove(one-to-n-calling) */
7928
7994
  /* @conditional-compile-remove(PSTN-calls) */
7929
- state: convertRemoteParticipantStateToVideoGalleryRemoteParticipantState(state)
7995
+ state
7930
7996
  };
7931
7997
  };
7932
7998
  const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
@@ -7940,29 +8006,6 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
7940
8006
  renderElement: (_b = stream.view) === null || _b === void 0 ? void 0 : _b.target
7941
8007
  };
7942
8008
  };
7943
- /* @conditional-compile-remove(one-to-n-calling) */
7944
- /* @conditional-compile-remove(PSTN-calls) */
7945
- /**
7946
- * We convert the Communication Participant states to simpler states that can be used with VideoTiles/VideoGallery.
7947
- */
7948
- const convertRemoteParticipantStateToVideoGalleryRemoteParticipantState = (state) => {
7949
- // `Idle` is the first state of the participant.
7950
- if (state === 'Idle' || state === 'Connecting') {
7951
- return 'Connecting';
7952
- }
7953
- // `EarlyMedia` is a state when the media is played before a participant connects to the call.
7954
- // It occurs immediately after the `Connecting` state.
7955
- if (state === 'EarlyMedia' || state === 'Ringing') {
7956
- return 'Ringing';
7957
- }
7958
- if (state === 'Hold') {
7959
- return 'Hold';
7960
- }
7961
- if (state === 'Connected') {
7962
- return 'Connected';
7963
- }
7964
- return;
7965
- };
7966
8009
 
7967
8010
  // Copyright (c) Microsoft Corporation.
7968
8011
  /**
@@ -15387,7 +15430,7 @@ const drawerContainerStyles$1 = {
15387
15430
  // Copyright (c) Microsoft Corporation.
15388
15431
  /** @private */
15389
15432
  const CallingDialpad = (props) => {
15390
- const { strings, isMobile, showDialpad, onDismissDialpad } = props;
15433
+ const { strings, isMobile, showDialpad, onDismissDialpad, onAddParticipant, alternateCallerId } = props;
15391
15434
  const [textFieldInput, setTextFieldInput] = React.useState('');
15392
15435
  const theme = react.useTheme();
15393
15436
  const onDismissTriggered = () => {
@@ -15395,15 +15438,22 @@ const CallingDialpad = (props) => {
15395
15438
  onDismissDialpad();
15396
15439
  };
15397
15440
  const onClickCall = () => {
15398
- //place holder for adding calling functionality
15399
- console.log(textFieldInput);
15441
+ if (onAddParticipant) {
15442
+ /**
15443
+ * Format the phone number in dialpad textfield to make sure the phone number is in E.164 format.
15444
+ * We assume the input number always include countrycode
15445
+ */
15446
+ const phoneNumber = { phoneNumber: '+' + textFieldInput.replace(/\D/g, '').replaceAll(' ', '') };
15447
+ onAddParticipant(phoneNumber, { alternateCallerId: { phoneNumber: alternateCallerId } });
15448
+ onDismissTriggered();
15449
+ }
15400
15450
  };
15401
15451
  const dialpadModelStyle = React.useMemo(() => themedDialpadModelStyle(theme), [theme]);
15402
15452
  const dialpadStyle = React.useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
15403
15453
  const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
15404
15454
  const dialpadComponent = () => {
15405
15455
  return (React__default['default'].createElement(React__default['default'].Fragment, null,
15406
- React__default['default'].createElement(Dialpad, { onChange: setTextFieldInput, styles: dialpadStyle }),
15456
+ React__default['default'].createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput }),
15407
15457
  React__default['default'].createElement(react.PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
15408
15458
  };
15409
15459
  if (isMobile) {
@@ -15455,7 +15505,7 @@ const drawerContainerStyles = {
15455
15505
  /** @private */
15456
15506
  const AddPeopleDropdown = (props) => {
15457
15507
  const theme = react.useTheme();
15458
- const { inviteLink, strings, mobileView } = props;
15508
+ const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;
15459
15509
  const [showDialpad, setShowDialpad] = React.useState(false);
15460
15510
  const menuStyleThemed = React.useMemo(() => themedMenuStyle(theme), [theme]);
15461
15511
  const copyLinkButtonStylesThemed = React.useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);
@@ -15477,21 +15527,25 @@ const AddPeopleDropdown = (props) => {
15477
15527
  onClick: () => copy__default['default'](inviteLink)
15478
15528
  });
15479
15529
  }
15480
- menuProps.items.push({
15481
- key: 'DialpadKey',
15482
- text: strings.openDialpadButtonLabel,
15483
- itemProps: { styles: copyLinkButtonStylesThemed },
15484
- iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },
15485
- onClick: () => setShowDialpad(true),
15486
- 'data-ui-id': 'call-with-chat-composite-dial-phone-number-button'
15487
- });
15530
+ // only show the dialpad option when alternateCallerId is set
15531
+ if (alternateCallerId) {
15532
+ menuProps.items.push({
15533
+ key: 'DialpadKey',
15534
+ text: strings.openDialpadButtonLabel,
15535
+ itemProps: { styles: copyLinkButtonStylesThemed },
15536
+ iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },
15537
+ onClick: () => setShowDialpad(true),
15538
+ 'data-ui-id': 'call-dial-phone-number-button'
15539
+ });
15540
+ }
15488
15541
  return menuProps;
15489
15542
  }, [
15490
15543
  strings.copyInviteLinkButtonLabel,
15491
15544
  strings.openDialpadButtonLabel,
15492
15545
  copyLinkButtonStylesThemed,
15493
15546
  inviteLink,
15494
- menuStyleThemed
15547
+ menuStyleThemed,
15548
+ alternateCallerId
15495
15549
  ]);
15496
15550
  const onDismissDialpad = () => {
15497
15551
  setShowDialpad(false);
@@ -15506,15 +15560,15 @@ const AddPeopleDropdown = (props) => {
15506
15560
  if (mobileView) {
15507
15561
  return (React__default['default'].createElement(react.Stack, null,
15508
15562
  React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
15509
- React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-with-chat-composite-add-people-button" })),
15510
- addPeopleDrawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles, "data-ui-id": "call-with-chat-composite-add-people-dropdown" },
15563
+ React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" })),
15564
+ addPeopleDrawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles, "data-ui-id": "call-add-people-dropdown" },
15511
15565
  React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),
15512
- React__default['default'].createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad })));
15566
+ alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
15513
15567
  }
15514
15568
  return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Stack, null,
15515
- React__default['default'].createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
15569
+ alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId })),
15516
15570
  React__default['default'].createElement(react.Stack, { styles: copyLinkButtonStackStyles },
15517
- React__default['default'].createElement(react.DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-with-chat-composite-add-people-button" })))));
15571
+ React__default['default'].createElement(react.DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" })))));
15518
15572
  };
15519
15573
  function PeoplePaneOpenDialpadIconNameTrampoline() {
15520
15574
  /* @conditional-compile-remove(PSTN-calls) */
@@ -15533,11 +15587,11 @@ const AddPeopleButton = (props) => {
15533
15587
  React.useMemo(() => react.concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles$1(mobileView, theme)), [mobileView, theme]);
15534
15588
  /* @conditional-compile-remove(PSTN-calls) */
15535
15589
  if (mobileView) {
15536
- return React__default['default'].createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink });
15590
+ return (React__default['default'].createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId }));
15537
15591
  }
15538
15592
  else {
15539
15593
  return (React__default['default'].createElement(react.Stack, { tokens: peoplePaneContainerTokens },
15540
- React__default['default'].createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink }),
15594
+ React__default['default'].createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId }),
15541
15595
  participantList));
15542
15596
  }
15543
15597
  };
@@ -15589,9 +15643,17 @@ const PeoplePaneContent = (props) => {
15589
15643
  if (props.mobileView) {
15590
15644
  return (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: peoplePaneContainerStyle, tokens: peoplePaneContainerTokens },
15591
15645
  React__default['default'].createElement(react.Stack.Item, { grow: true, styles: participantListContainerStyles }, participantList),
15592
- React__default['default'].createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings })));
15646
+ React__default['default'].createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings,
15647
+ /* @conditional-compile-remove(PSTN-calls) */
15648
+ onAddParticipant: props.onAddParticipant,
15649
+ /* @conditional-compile-remove(PSTN-calls) */
15650
+ alternateCallerId: props.alternateCallerId })));
15593
15651
  }
15594
- return (React__default['default'].createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings }));
15652
+ return (React__default['default'].createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings,
15653
+ /* @conditional-compile-remove(PSTN-calls) */
15654
+ onAddParticipant: props.onAddParticipant,
15655
+ /* @conditional-compile-remove(PSTN-calls) */
15656
+ alternateCallerId: props.alternateCallerId }));
15595
15657
  };
15596
15658
  /**
15597
15659
  * Create default contextual menu items for particant
@@ -15795,9 +15857,15 @@ const CallPane = (props) => {
15795
15857
  const removeParticipantFromCall = (participantId) => __awaiter$7(void 0, void 0, void 0, function* () {
15796
15858
  yield props.callAdapter.removeParticipant(participantId);
15797
15859
  });
15860
+ /* @conditional-compile-remove(PSTN-calls) */
15861
+ const addParticipantToCall = (participant, options) => __awaiter$7(void 0, void 0, void 0, function* () {
15862
+ yield props.callAdapter.addParticipant(participant, options);
15863
+ });
15798
15864
  const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
15799
15865
  const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
15800
15866
  const dataUiId = props.activePane === 'people' ? 'call-composite-people-pane' : '';
15867
+ /* @conditional-compile-remove(PSTN-calls) */
15868
+ const alternateCallerId = useAdapter().getState().alternateCallerId;
15801
15869
  return (React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": dataUiId, tokens: props.mobileView ? {} : sidePaneTokens },
15802
15870
  header,
15803
15871
  React__default['default'].createElement(react.Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
@@ -15805,7 +15873,11 @@ const CallPane = (props) => {
15805
15873
  React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
15806
15874
  React__default['default'].createElement(react.Stack, { styles: props.activePane === 'people' ? availableSpaceStyles : hiddenStyles },
15807
15875
  React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
15808
- React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { onRemoveParticipant: removeParticipantFromCall, setDrawerMenuItems: setDrawerMenuItems, strings: strings }))))))),
15876
+ React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { onRemoveParticipant: removeParticipantFromCall,
15877
+ /* @conditional-compile-remove(PSTN-calls) */
15878
+ onAddParticipant: addParticipantToCall, setDrawerMenuItems: setDrawerMenuItems, strings: strings,
15879
+ /* @conditional-compile-remove(PSTN-calls) */
15880
+ alternateCallerId: alternateCallerId }))))))),
15809
15881
  props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
15810
15882
  drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles },
15811
15883
  React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
@@ -15902,8 +15974,9 @@ const CallArrangement = (props) => {
15902
15974
  };
15903
15975
  /* @conditional-compile-remove(one-to-n-calling) */
15904
15976
  const callPaneContent = () => {
15977
+ var _a;
15905
15978
  if (adapter && callStatus === 'Connected') {
15906
- return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
15979
+ return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
15907
15980
  }
15908
15981
  return React__default['default'].createElement(React__default['default'].Fragment, null);
15909
15982
  };
@@ -15950,6 +16023,61 @@ const localVideoCameraCycleButtonSelector = reselect.createSelector([getDeviceMa
15950
16023
  };
15951
16024
  });
15952
16025
 
16026
+ // Copyright (c) Microsoft Corporation.
16027
+ const videoBaseStyle = react.mergeStyles({
16028
+ border: 0
16029
+ });
16030
+ /**
16031
+ * @private
16032
+ */
16033
+ react.mergeStyles(videoBaseStyle, {
16034
+ width: '100%',
16035
+ height: '100%'
16036
+ });
16037
+ /**
16038
+ * @private
16039
+ */
16040
+ react.mergeStyles(videoBaseStyle, {
16041
+ width: '100%',
16042
+ height: 0,
16043
+ position: 'relative',
16044
+ paddingTop: '56.25%' /* default to 16:9 Aspect Ratio for now*/
16045
+ });
16046
+ /**
16047
+ * @private
16048
+ */
16049
+ react.mergeStyles({
16050
+ position: 'absolute',
16051
+ top: 0,
16052
+ left: 0,
16053
+ width: '100%',
16054
+ height: '100%'
16055
+ });
16056
+ /**
16057
+ * @private
16058
+ */
16059
+ react.mergeStyles({
16060
+ height: '100%',
16061
+ width: '15%'
16062
+ });
16063
+ /**
16064
+ * @private
16065
+ */
16066
+ react.mergeStyles({
16067
+ height: '100%',
16068
+ width: '85%',
16069
+ position: 'relative'
16070
+ });
16071
+ /**
16072
+ * @private
16073
+ */
16074
+ const participantStateStyle = {
16075
+ textAlign: 'center',
16076
+ paddingTop: '0.5rem',
16077
+ fontWeight: 400,
16078
+ fontSize: '0.75rem'
16079
+ };
16080
+
15953
16081
  // Copyright (c) Microsoft Corporation.
15954
16082
  const VideoGalleryStyles = {
15955
16083
  root: {
@@ -15975,8 +16103,26 @@ const MediaGallery = (props) => {
15975
16103
  const cameraSwitcherProps = React.useMemo(() => {
15976
16104
  return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
15977
16105
  }, [cameraSwitcherCallback, cameraSwitcherCameras]);
15978
- const onRenderAvatar = React.useCallback((userId, options) => (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
15979
- React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))), [props.onFetchAvatarPersonaData]);
16106
+ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
16107
+ const locale = useLocale().component;
16108
+ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
16109
+ const videoTileStrings = locale.strings.videoTile;
16110
+ const onRenderAvatar = React.useCallback((userId, options) => {
16111
+ return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
16112
+ React__default['default'].createElement(react.Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } },
16113
+ React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })),
16114
+ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
16115
+ (options === null || options === void 0 ? void 0 : options.participantState) === 'Ringing' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateConnecting)),
16116
+ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
16117
+ (options === null || options === void 0 ? void 0 : options.participantState) === 'Connecting' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateRinging)),
16118
+ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
16119
+ (options === null || options === void 0 ? void 0 : options.participantState) === 'Hold' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateHold)))));
16120
+ }, [
16121
+ props.onFetchAvatarPersonaData,
16122
+ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateConnecting,
16123
+ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateRinging,
16124
+ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateHold
16125
+ ]);
15980
16126
  useLocalVideoStartTrigger(!!props.isVideoStreamOn);
15981
16127
  const VideoGalleryMemoized = React.useMemo(() => {
15982
16128
  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 })));
@@ -16341,9 +16487,11 @@ const LocalDeviceSettings = (props) => {
16341
16487
  let isSelectCamEnabled = props.cameraPermissionGranted;
16342
16488
  let isSelectMicEnabled = props.microphonePermissionGranted;
16343
16489
  /* @conditional-compile-remove(rooms) */
16344
- isSelectCamEnabled = isSelectCamEnabled && _usePermissions().cameraButton;
16490
+ const permissions = _usePermissions();
16491
+ /* @conditional-compile-remove(rooms) */
16492
+ isSelectCamEnabled = isSelectCamEnabled && permissions.cameraButton;
16345
16493
  /* @conditional-compile-remove(rooms) */
16346
- isSelectMicEnabled = isSelectMicEnabled && _usePermissions().microphoneButton;
16494
+ isSelectMicEnabled = isSelectMicEnabled && permissions.microphoneButton;
16347
16495
  // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
16348
16496
  // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for
16349
16497
  // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.
@@ -16781,7 +16929,8 @@ const LobbyPage = (props) => {
16781
16929
  modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby) })), dataUiId: 'lobby-page' }));
16782
16930
  };
16783
16931
  const disableLobbyPageControls = (callControlOptions) => {
16784
- let newOptions = callControlOptions;
16932
+ // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
16933
+ let newOptions = callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions;
16785
16934
  if (newOptions !== false) {
16786
16935
  if (newOptions === true || newOptions === undefined) {
16787
16936
  newOptions = {
@@ -17203,9 +17352,9 @@ class AzureCommunicationCallAdapter {
17203
17352
  });
17204
17353
  }
17205
17354
  _joinCall(audioOptions, videoOptions) {
17206
- const isTeamsMeeting = !('groupId' in this.locator);
17355
+ const isTeamsMeeting = 'teamsLink' in this.locator;
17207
17356
  /* @conditional-compile-remove(rooms) */
17208
- const isRoomsCall = !('roomId' in this.locator);
17357
+ const isRoomsCall = 'roomId' in this.locator;
17209
17358
  if (isTeamsMeeting) {
17210
17359
  return this.callAgent.join(this.locator, {
17211
17360
  audioOptions,
@@ -18133,7 +18282,9 @@ function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState)
18133
18282
  call: callWithChatAdapterState.call,
18134
18283
  devices: callWithChatAdapterState.devices,
18135
18284
  isTeamsCall: callWithChatAdapterState.isTeamsCall,
18136
- latestErrors: callWithChatAdapterState.latestCallErrors
18285
+ latestErrors: callWithChatAdapterState.latestCallErrors,
18286
+ /* @conditional-compile-remove(PSTN-calls) */
18287
+ alternateCallerId: callWithChatAdapterState.alternateCallerId
18137
18288
  };
18138
18289
  }
18139
18290
 
@@ -18406,6 +18557,8 @@ const CallWithChatPane = (props) => {
18406
18557
  const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;
18407
18558
  const callWithChatStrings = useCallWithChatCompositeStrings();
18408
18559
  const theme = useTheme();
18560
+ /* @conditional-compile-remove(PSTN-calls) */
18561
+ const alternateCallerId = props.callAdapter.getState().alternateCallerId;
18409
18562
  const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: callWithChatStrings, activeTab: props.activePane }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: callWithChatStrings, headingText: props.activePane === 'chat'
18410
18563
  ? callWithChatStrings.chatPaneTitle
18411
18564
  : props.activePane === 'people'
@@ -18426,8 +18579,16 @@ const CallWithChatPane = (props) => {
18426
18579
  yield props.callAdapter.removeParticipant(participantId);
18427
18580
  yield props.chatAdapter.removeParticipant(participantId);
18428
18581
  });
18582
+ /* @conditional-compile-remove(PSTN-calls) */
18583
+ const addParticipantToCall = (participant, options) => __awaiter$1(void 0, void 0, void 0, function* () {
18584
+ yield props.callAdapter.addParticipant(participant, options);
18585
+ });
18429
18586
  const peopleContent = (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
18430
- React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { onRemoveParticipant: removeParticipantFromCallWithChat, setDrawerMenuItems: setDrawerMenuItems, strings: callWithChatStrings }))));
18587
+ React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { onRemoveParticipant: removeParticipantFromCallWithChat, setDrawerMenuItems: setDrawerMenuItems, strings: callWithChatStrings,
18588
+ /* @conditional-compile-remove(PSTN-calls) */
18589
+ onAddParticipant: addParticipantToCall,
18590
+ /* @conditional-compile-remove(PSTN-calls) */
18591
+ alternateCallerId: alternateCallerId }))));
18431
18592
  const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
18432
18593
  const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
18433
18594
  const dataUiId = props.activePane === 'chat'
@@ -18615,7 +18776,9 @@ function callWithChatAdapterStateFromBackingStates(callAdapter, chatAdapter) {
18615
18776
  latestCallErrors: callAdapterState.latestErrors,
18616
18777
  latestChatErrors: chatAdapterState.latestErrors,
18617
18778
  /* @conditional-compile-remove(file-sharing) */
18618
- fileUploads: chatAdapterState.fileUploads
18779
+ fileUploads: chatAdapterState.fileUploads,
18780
+ /* @conditional-compile-remove(PSTN-calls) */
18781
+ alternateCallerId: callAdapterState.alternateCallerId
18619
18782
  };
18620
18783
  }
18621
18784
  /**