communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
83 lines • 5.05 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { ErrorBar } from "../../../../../react-components/src";
import { useSelector } from '../hooks/useSelector';
import { lobbySelector } from '../selectors/lobbySelector';
import { CallArrangement } from '../components/CallArrangement';
import { usePropsFor } from '../hooks/usePropsFor';
import { LobbyTile } from '../components/LobbyTile';
import { getCallStatus, getRemoteParticipants } from '../selectors/baseSelectors';
import { disableCallControls, reduceCallControlsForMobile } from '../utils';
import { useLocale } from '../../localization';
import { CallCompositeIcon } from '../../common/icons';
import { isPhoneNumberIdentifier } from '@azure/communication-common';
/**
* @private
*/
export const LobbyPage = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const errorBarProps = usePropsFor(ErrorBar);
const lobbyProps = useSelector(lobbySelector);
const strings = useLocale().strings.call;
const callState = useSelector(getCallStatus);
const inLobby = callState === 'InLobby';
const participants = (_a = useSelector(getRemoteParticipants)) !== null && _a !== void 0 ? _a : {};
// Reduce the controls shown when mobile view is enabled.
let callControlOptions = props.mobileView
? reduceCallControlsForMobile((_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls)
: (_c = props.options) === null || _c === void 0 ? void 0 : _c.callControls;
callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);
return (React.createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.errorBar) !== false && errorBarProps, showErrorNotifications: (_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== null && _f !== void 0 ? _f : true, callControlProps: {
options: callControlOptions,
increaseFlyoutItemSize: props.mobileView
}, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React.createElement(LobbyTile, Object.assign({}, lobbyProps, { showLocalVideoCameraCycleButton: props.mobileView, overlayProps: overlayProps(strings, inLobby, Object.values(participants)) }))), dataUiId: 'lobby-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError, latestNotifications: props.latestNotifications, onDismissNotification: props.onDismissNotification,
/* @conditional-compile-remove(call-readiness) */
doNotShowCameraAccessNotifications: ((_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.deviceChecks) === null || _h === void 0 ? void 0 : _h.camera) === 'doNotPrompt' }));
};
const overlayProps = (strings, inLobby, remoteParticipants) => {
/**
* Only grab the first participant because there will only be one in this situation.
* when starting a call with multiple people the call goes to the connected state and composite goes directly to
* videoGallery.
*
* We also need to check the participant state since in a group call the remote participants array will populate just before
* the user joins. In this situation we also check the participant states. in a groupCall the state of the participants
* will be 'Idle'.
*/
const outboundCallParticipant = remoteParticipants[0] &&
['Ringing', 'Connecting'].includes(remoteParticipants[0].state) &&
remoteParticipants.length === 1
? remoteParticipants[0]
: undefined;
return inLobby
? overlayPropsWaitingToBeAdmitted(strings)
: outboundCallParticipant
? overlayPropsOutboundCall(strings, outboundCallParticipant)
: overlayPropsConnectingToCall(strings);
};
const overlayPropsConnectingToCall = (strings) => ({
title: strings.lobbyScreenConnectingToCallTitle,
moreDetails: strings.lobbyScreenConnectingToCallMoreDetails,
overlayIcon: React.createElement(CallCompositeIcon, { iconName: "LobbyScreenConnectingToCall" })
});
const overlayPropsWaitingToBeAdmitted = (strings) => ({
title: strings.lobbyScreenWaitingToBeAdmittedTitle,
moreDetails: strings.lobbyScreenWaitingToBeAdmittedMoreDetails,
overlayIcon: React.createElement(CallCompositeIcon, { iconName: "LobbyScreenWaitingToBeAdmitted" })
});
const overlayPropsOutboundCall = (strings, participant) => {
var _a;
if (isPhoneNumberIdentifier(participant.identifier)) {
return {
title: participant.identifier.phoneNumber,
moreDetails: strings.outboundCallingNoticeString
};
}
else {
return {
title: (_a = strings.outboundCallingNoticeString) !== null && _a !== void 0 ? _a : ''
};
}
};
//# sourceMappingURL=LobbyPage.js.map