communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
50 lines • 1.75 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
// eslint-disable-next-line no-restricted-imports
import { FontIcon, Stack, Text, mergeStyles, useTheme } from '@fluentui/react';
import { _pxToRem } from "../../../../../acs-ui-common/src";
import React, { useState } from 'react';
import { getReadableTime } from '../../CallComposite/utils/timerUtils';
/**
* @private
*/
export const Timer = (props) => {
const { timeStampInfo } = props;
const endTimeMs = new Date(timeStampInfo).getTime();
const theme = useTheme();
const [time, setTime] = useState(0);
const timeRemaining = getReadableTime(time);
React.useEffect(() => {
const interval = setInterval(() => {
setTime(Math.max(endTimeMs - Date.now(), 0));
}, 10);
return () => {
clearInterval(interval);
};
}, [endTimeMs]);
return (React.createElement(Stack, { horizontal: true, className: timerContainerClass(theme), tokens: { childrenGap: '0.5rem' } },
React.createElement(FontIcon, { iconName: 'Clock', className: iconClass }),
React.createElement(Text, { styles: timerTextStyle }, timeRemaining)));
};
const timerContainerClass = (theme) => mergeStyles({
backgroundColor: theme.palette.neutralLight,
display: 'flex',
alignItems: 'center',
borderColor: theme.palette.neutralQuaternaryAlt,
borderWidth: '0.0625rem',
borderRadius: '0.25rem',
padding: '0.5rem'
});
const iconClass = mergeStyles({
fontSize: 18
});
const timerTextStyle = {
root: {
color: 'inherit',
fontWeight: 400,
fontSize: _pxToRem(14),
lineHeight: _pxToRem(20),
margin: 'auto'
}
};
//# sourceMappingURL=Timer.js.map