@azure/communication-react 1.3.3-alpha-202210140021.0 → 1.3.3-alpha-202210180021.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.
@@ -1488,6 +1488,10 @@ export declare interface CallCompositeStrings {
1488
1488
  * Control bar People button ToolTipContent
1489
1489
  */
1490
1490
  peopleButtonTooltipClose: string;
1491
+ /**
1492
+ * Label disaplayed on the lobby screen during a 1:1 outbound call.
1493
+ */
1494
+ outboundCallingNoticeString: string;
1491
1495
  }
1492
1496
 
1493
1497
  /**
@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
202
202
  // Copyright (c) Microsoft Corporation.
203
203
  // Licensed under the MIT license.
204
204
  // GENERATED FILE. DO NOT EDIT MANUALLY.
205
- var telemetryVersion = '1.3.3-alpha-202210140021.0';
205
+ var telemetryVersion = '1.3.3-alpha-202210180021.0';
206
206
 
207
207
  // Copyright (c) Microsoft Corporation.
208
208
  /**
@@ -13130,7 +13130,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
13130
13130
  */
13131
13131
  const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
13132
13132
 
13133
- var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
13133
+ var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number",outboundCallingNoticeString:"Calling..."};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
13134
13134
 
13135
13135
  var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
13136
13136
 
@@ -17794,26 +17794,39 @@ const LobbyTile = (props) => {
17794
17794
  * @private
17795
17795
  */
17796
17796
  const LobbyPage = (props) => {
17797
- var _a, _b, _c;
17797
+ var _a, _b, _c, _d;
17798
17798
  const errorBarProps = usePropsFor$1(ErrorBar);
17799
17799
  const lobbyProps = useSelector$1(lobbySelector);
17800
17800
  const strings = useLocale().strings.call;
17801
17801
  const callState = useSelector$1(getCallStatus);
17802
17802
  const inLobby = callState === 'InLobby';
17803
+ const participants = (_a = useSelector$1(getRemoteParticipants)) !== null && _a !== void 0 ? _a : {};
17803
17804
  useLocalVideoStartTrigger(lobbyProps.localParticipantVideoStream.isAvailable, inLobby);
17804
17805
  // Reduce the controls shown when mobile view is enabled.
17805
17806
  let callControlOptions = props.mobileView
17806
- ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
17807
- : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
17807
+ ? reduceCallControlsForMobile((_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls)
17808
+ : (_c = props.options) === null || _c === void 0 ? void 0 : _c.callControls;
17808
17809
  callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);
17809
- return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
17810
+ return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
17810
17811
  options: callControlOptions,
17811
17812
  increaseFlyoutItemSize: props.mobileView
17812
17813
  }, mobileView: props.mobileView,
17813
17814
  /* @conditional-compile-remove(one-to-n-calling) */
17814
- modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby) })), dataUiId: 'lobby-page' }));
17815
+ modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page' }));
17816
+ };
17817
+ const overlayProps = (strings, inLobby, remoteParticipants) => {
17818
+ /**
17819
+ * Only grab the first participant because there will only be one in this situation.
17820
+ * when starting a call with multiple people the call goes to the connected state and composite goes directly to
17821
+ * videoGallery.
17822
+ */
17823
+ const outboundCallParticipant = remoteParticipants ? remoteParticipants[0] : undefined;
17824
+ return inLobby
17825
+ ? overlayPropsWaitingToBeAdmitted(strings)
17826
+ : outboundCallParticipant
17827
+ ? overlayPropsOutboundCall(strings, outboundCallParticipant)
17828
+ : overlayPropsConnectingToCall(strings);
17815
17829
  };
17816
- const overlayProps = (strings, inLobby) => inLobby ? overlayPropsWaitingToBeAdmitted(strings) : overlayPropsConnectingToCall(strings);
17817
17830
  const overlayPropsConnectingToCall = (strings) => ({
17818
17831
  title: strings.lobbyScreenConnectingToCallTitle,
17819
17832
  moreDetails: strings.lobbyScreenConnectingToCallMoreDetails,
@@ -17824,6 +17837,23 @@ const overlayPropsWaitingToBeAdmitted = (strings) => ({
17824
17837
  moreDetails: strings.lobbyScreenWaitingToBeAdmittedMoreDetails,
17825
17838
  overlayIcon: React__default['default'].createElement(CallCompositeIcon, { iconName: "LobbyScreenWaitingToBeAdmitted" })
17826
17839
  });
17840
+ const overlayPropsOutboundCall = (strings, participant) => {
17841
+ if (communicationCommon.isPhoneNumberIdentifier(participant.identifier)) {
17842
+ return {
17843
+ title: participant.identifier.phoneNumber,
17844
+ moreDetails: outboundCallStringsTrampoline(strings)
17845
+ };
17846
+ }
17847
+ else {
17848
+ return {
17849
+ title: outboundCallStringsTrampoline(strings)
17850
+ };
17851
+ }
17852
+ };
17853
+ const outboundCallStringsTrampoline = (strings) => {
17854
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
17855
+ return strings.outboundCallingNoticeString;
17856
+ };
17827
17857
 
17828
17858
  // Copyright (c) Microsoft Corporation.
17829
17859
  /**
@@ -18317,15 +18347,17 @@ class CallContext {
18317
18347
  }
18318
18348
  updateClientState(clientState) {
18319
18349
  var _a;
18320
- const call = this.callId ? clientState.calls[this.callId] : undefined;
18350
+ let call = this.callId ? clientState.calls[this.callId] : undefined;
18321
18351
  const latestEndedCall = findLatestEndedCall(clientState.callsEnded);
18322
18352
  // As the state is transitioning to a new state, trigger appropriate callback events.
18323
18353
  const oldPage = this.state.page;
18324
18354
  const newPage = getCallCompositePage(call, latestEndedCall);
18325
18355
  if (!IsCallEndedPage(oldPage) && IsCallEndedPage(newPage)) {
18326
- this.emitter.emit('callEnded', {
18327
- callId: this.callId
18328
- });
18356
+ this.emitter.emit('callEnded', { callId: this.callId });
18357
+ // Reset the callId to undefined as the call has ended.
18358
+ this.setCurrentCallId(undefined);
18359
+ // Make sure that the call is set to undefined in the state.
18360
+ call = undefined;
18329
18361
  }
18330
18362
  if (this.state.page) {
18331
18363
  this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_a = clientState.callAgent) === null || _a === void 0 ? void 0 : _a.displayName, call, page: newPage, endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors }));
@@ -18545,11 +18577,10 @@ class AzureCommunicationCallAdapter {
18545
18577
  return __awaiter$4(this, void 0, void 0, function* () {
18546
18578
  yield this.handlers.onHangUp(forEveryone);
18547
18579
  this.unsubscribeCallEvents();
18548
- this.call = undefined;
18549
18580
  this.handlers = createDefaultCallingHandlers(this.callClient, this.callAgent, this.deviceManager, undefined);
18550
- this.context.setCurrentCallId(undefined);
18551
- // Resync state after callId is set
18552
- this.context.updateClientState(this.callClient.getState());
18581
+ // We set the adapter.call object to undefined immediately when a call is ended.
18582
+ // We do not set the context.callId to undefined because it is a part of the immutable data flow loop.
18583
+ this.call = undefined;
18553
18584
  this.stopCamera();
18554
18585
  this.mute();
18555
18586
  });
@@ -19921,7 +19952,7 @@ const CallWithChatScreen = (props) => {
19921
19952
  const isInLocalHold = currentPage === 'hold';
19922
19953
  const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState !== null && currentCallState !== void 0 ? currentCallState : 'None'));
19923
19954
  const showControlBar = isInLobbyOrConnecting || hasJoinedCall;
19924
- const isMobileWithActivePane = mobileView && activePane !== 'none';
19955
+ const isMobileWithActivePane = mobileView && hasJoinedCall && activePane !== 'none';
19925
19956
  /** Constant setting of id for the parent stack of the composite */
19926
19957
  const compositeParentDivId = reactHooks.useId('callWithChatCompositeParentDiv-internal');
19927
19958
  const toggleChat = React.useCallback(() => {
@@ -19975,6 +20006,10 @@ const CallWithChatScreen = (props) => {
19975
20006
  setShowDrawer(false);
19976
20007
  togglePeople();
19977
20008
  }, [togglePeople]);
20009
+ // On mobile, when there is an active call and some side pane is active,
20010
+ // we hide the call composite via CSS to show only the pane.
20011
+ // We only set `display` to `none` instead of unmounting the call composite component tree
20012
+ // to avoid the performance cost of rerendering video streams when we later show the composite again.
19978
20013
  const callCompositeContainerCSS = React.useMemo(() => {
19979
20014
  return { display: isMobileWithActivePane ? 'none' : 'flex' };
19980
20015
  }, [isMobileWithActivePane]);