@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
79 lines • 4.16 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 { PrimaryButton, Stack, Text } from '@fluentui/react';
import React, { useRef, useState } from 'react';
import { useLocale } from '../../localization';
import { HoldButton } from "../../../../../react-components/src";
import { usePropsFor } from '../hooks/usePropsFor';
import { holdPaneContentStyles, holdPaneLabelStyles, holdPaneTimerStyles, paneStyles, resumeButtonStyles } from '../styles/HoldPane.styles';
/**
* Hold pane to display when the user places themselves on hold
*
* @beta
*/
export const HoldPane = () => {
var _a, _b, _c, _d, _e;
const holdButtonProps = usePropsFor(HoldButton);
const locale = useLocale();
const strings = {
holdScreenLabel: (_a = locale.strings.call.holdScreenLabel) !== null && _a !== void 0 ? _a : '',
resumeCallButtonLabel: (_b = locale.strings.call.resumeCallButtonLabel) !== null && _b !== void 0 ? _b : '',
resumeCallButtonAriaLabel: (_c = locale.strings.call.resumeCallButtonAriaLabel) !== null && _c !== void 0 ? _c : '',
resumingCallButtonLabel: (_d = locale.strings.call.resumingCallButtonLabel) !== null && _d !== void 0 ? _d : '',
resumingCallButtonAriaLabel: (_e = locale.strings.call.resumingCallButtonAriaLabel) !== null && _e !== void 0 ? _e : ''
};
const [time, setTime] = useState(0);
const elapsedTime = getReadableTime(time);
const startTime = useRef(performance.now());
const [resumingCall, setResumingCall] = useState(false);
React.useEffect(() => {
const interval = setInterval(() => {
setTime(performance.now() - startTime.current);
}, 10);
return () => {
clearInterval(interval);
};
}, [startTime]);
return React.createElement(Stack, { styles: paneStyles },
React.createElement(Stack, { horizontal: true, styles: holdPaneContentStyles },
React.createElement(Text, { styles: holdPaneTimerStyles }, elapsedTime),
React.createElement(Text, { styles: holdPaneLabelStyles, role: "alert", "aria-live": "assertive" }, strings.holdScreenLabel),
React.createElement(PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
setResumingCall(true);
try {
yield holdButtonProps.onToggleHold();
}
catch (e) {
setResumingCall(false);
throw e;
}
}), "data-ui-id": "hold-page-resume-call-button", autoFocus: true })));
};
const getMinutes = (time) => {
return Math.floor(getSeconds(time) / 60);
};
const getSeconds = (time) => {
return Math.floor(time / 1000);
};
const getHours = (time) => {
return Math.floor(getMinutes(time) / 60);
};
/**
* @internal
*/
export const getReadableTime = (time) => {
const hours = getHours(time);
const readableMinutes = ('0' + getMinutes(time) % 60).slice(-2);
const readableSeconds = ('0' + getSeconds(time) % 60).slice(-2);
return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
};
//# sourceMappingURL=HoldPane.js.map