@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
73 lines • 4.71 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;
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 });
};
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