@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
77 lines • 4.03 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { Dialpad } from "../../../../../react-components/src";
import React, { useEffect, useMemo, useState } from 'react';
import { Stack, Text, useTheme } from '@fluentui/react';
import { getReadableTime } from '../utils/timerUtils';
import { DtmfDialpadContentTimerStyles } from '../styles/DtmfDialpadPage.styles';
import { isPhoneNumberIdentifier } from '@azure/communication-common';
import { useSelector } from '../hooks/useSelector';
import { getRemoteParticipants, getStartTime, getTargetCallees } from '../selectors/baseSelectors';
import { useAdapter } from '../adapter/CallAdapterProvider';
const DtmfDialpadPageContent = (props) => {
const theme = useTheme();
const targetCallees = useSelector(getTargetCallees);
const remoteParticipants = useSelector(getRemoteParticipants);
const calleeId = targetCallees === null || targetCallees === void 0 ? void 0 : targetCallees[0];
let calleeName;
if (remoteParticipants) {
const remoteParticipantValues = Object.values(remoteParticipants);
if (calleeId && isPhoneNumberIdentifier(calleeId)) {
calleeName = calleeId.phoneNumber;
}
else {
calleeName = remoteParticipantValues.find(p => p.identifier === calleeId);
}
}
const adapter = useAdapter();
return React.createElement(Stack, { style: {
height: '100%',
width: '100%',
background: theme.palette.white
} },
React.createElement(Stack, { verticalAlign: 'center', style: {
margin: 'auto'
} },
React.createElement(DtmfDialerContentTimer, null),
React.createElement(Text, { style: {
margin: 'auto'
} }, calleeName && calleeName !== 'Unnamed participant' ? calleeName === null || calleeName === void 0 ? void 0 : calleeName.toString() : ''),
React.createElement(Dialpad, { onSendDtmfTone: (tone) => __awaiter(void 0, void 0, void 0, function* () {
yield adapter.sendDtmfTone(tone);
}), longPressTrigger: props.mobileView ? 'touch' : 'mouseAndTouch', dialpadMode: 'dtmf', dtmfAudioContext: props.compositeAudioContext })));
};
const DtmfDialerContentTimer = () => {
const [time, setTime] = useState(0);
const elapsedTime = getReadableTime(time);
const statefulStartTime = useSelector(getStartTime);
const startTime = useMemo(() => {
return statefulStartTime !== null && statefulStartTime !== void 0 ? statefulStartTime : new Date(Date.now());
}, [statefulStartTime]);
useEffect(() => {
const interval = setInterval(() => {
var _a;
setTime((_a = new Date(Date.now()).getTime() - (startTime === null || startTime === void 0 ? void 0 : startTime.getTime())) !== null && _a !== void 0 ? _a : 0);
}, 10);
return () => {
clearInterval(interval);
};
}, [startTime]);
return React.createElement(Text, { styles: DtmfDialpadContentTimerStyles }, elapsedTime);
};
/**
* @internal
*/
export const DtmfDialpadPage = (props) => {
return React.createElement(DtmfDialpadPageContent, Object.assign({}, props, { mobileView: props.mobileView }));
};
//# sourceMappingURL=DtmfDialpadPage.js.map