communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
81 lines • 7.38 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { useTheme } from "../../../../../react-components/src";
import { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';
import { mergeStyles, Stack, Text } from '@fluentui/react';
// eslint-disable-next-line no-restricted-imports
import { Icon } from '@fluentui/react';
import { useLocale } from '../../localization';
import { containerStyle, headerContainerStyle, moreDetailsStyle, titleContainerStyle, titleStyle } from '../styles/NetworkReconnectTile.styles';
import { useHandlers } from '../hooks/useHandlers';
import { CallCompositeIcon } from '../../common/icons';
import { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../selectors/baseSelectors';
import { useSelector } from '../hooks/useSelector';
import { phoneInfoTextStyle, phoneInfoIcon, phoneInfoInstructionLine, phoneInfoStep, phoneInfoIconStyle, phoneInfoLabelStyle, titleClassName, titleContainerClassName, infoConnectionLinkStyle } from '../../common/styles/TeamsMeetingConferenceInfo.style';
import { formatPhoneNumberInfo, _formatPhoneNumber, formatPhoneNumberLink } from "../../../../../react-components/src";
import { _pxToRem } from "../../../../../acs-ui-common/src";
import { Link } from '@fluentui/react';
/**
* @private
*/
export const NetworkReconnectTile = (props) => {
var _a;
const videoStream = props.localParticipantVideoStream;
const isVideoReady = (_a = videoStream === null || videoStream === void 0 ? void 0 : videoStream.isAvailable) !== null && _a !== void 0 ? _a : false;
const palette = useTheme().palette;
const strings = useLocale().strings.call;
const localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;
const theme = useTheme();
const handlers = useHandlers(ExpandedLocalVideoTile);
const isTeamsMeeting = useSelector(getIsTeamsMeeting);
const meetingCoordinates = useSelector(getTeamsMeetingCoordinates);
return (React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(containerStyle), "aria-atomic": true },
React.createElement(Stack, { role: "alert", verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(headerContainerStyle) },
React.createElement(Stack, { horizontal: true, className: mergeStyles(titleContainerStyle) },
React.createElement(CallCompositeIcon, { iconName: "NetworkReconnectIcon", className: mergeStyles(titleStyle(palette, isVideoReady)) }),
React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)) }, strings.networkReconnectTitle)),
React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)) }, strings.networkReconnectMoreDetails)),
isTeamsMeeting && meetingCoordinates && meetingCoordinates[0] && (React.createElement(Stack, null,
React.createElement(Stack, { horizontal: true, horizontalAlign: "center", verticalAlign: "center", className: titleContainerClassName },
React.createElement(Text, { className: titleClassName }, localeStrings.meetingConferencePhoneInfoModalTitle)),
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", className: phoneInfoInstructionLine },
React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
React.createElement(Stack.Item, null,
React.createElement(Stack, { horizontal: true, className: phoneInfoStep },
React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
React.createElement(Stack, { verticalAlign: "center", horizontalAlign: "center" },
React.createElement(Icon, { iconName: "JoinByPhoneDialStepIcon", className: phoneInfoIconStyle(theme) }))),
React.createElement(Stack.Item, null,
React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalDialIn)))),
React.createElement(Stack.Item, { className: phoneInfoStep }, meetingCoordinates.map((phoneNumber, index) => (React.createElement(Stack.Item, { key: index },
React.createElement(Text, { className: phoneInfoTextStyle },
props.isMobile && (React.createElement(Link, { className: phoneInfoTextStyle, href: formatPhoneNumberLink(phoneNumber) }, _formatPhoneNumber(phoneNumber.phoneNumber, true))),
!props.isMobile && (React.createElement(Text, { className: phoneInfoTextStyle }, _formatPhoneNumber(phoneNumber.phoneNumber, true))),
' ',
phoneNumber.isTollFree
? localeStrings.meetingConferencePhoneInfoModalTollFree
: localeStrings.meetingConferencePhoneInfoModalToll),
React.createElement("br", null),
React.createElement(Text, { className: phoneInfoTextStyle },
" ",
formatPhoneNumberInfo(phoneNumber, localeStrings))))))),
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInstructionLine },
React.createElement(Stack.Item, null,
React.createElement(Stack, { horizontal: true },
!props.isMobile && React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
React.createElement(Icon, { iconName: "JoinByPhoneConferenceIdIcon", className: phoneInfoIconStyle(theme) })),
React.createElement(Stack.Item, null,
React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalMeetingId)))),
React.createElement(Text, { className: phoneInfoTextStyle },
meetingCoordinates[0].conferenceId,
"#")),
!props.isMobile && (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInstructionLine },
React.createElement(Stack, { horizontal: true },
React.createElement(Stack.Item, { className: phoneInfoIcon(theme), style: { marginLeft: _pxToRem(2) } },
React.createElement(Icon, { iconName: "JoinByPhoneWaitToBeAdmittedIcon", className: phoneInfoIconStyle(theme) })),
React.createElement(Stack.Item, null,
React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalWait)))))))) }, handlers)));
};
//# sourceMappingURL=NetworkReconnectTile.js.map