98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
import type { FC } from '../../../lib/teact/teact';
|
|
import React, { memo, useMemo } from '../../../lib/teact/teact';
|
|
import { getActions } from '../../../global';
|
|
|
|
import type { ApiMessage, PhoneCallAction } from '../../../api/types';
|
|
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import { formatTime, formatTimeDuration } from '../../../util/dates/dateFormat';
|
|
import { ARE_CALLS_SUPPORTED } from '../../../util/windowEnvironment';
|
|
|
|
import useLastCallback from '../../../hooks/useLastCallback';
|
|
import useOldLang from '../../../hooks/useOldLang';
|
|
|
|
import Button from '../../ui/Button';
|
|
|
|
import styles from './MessagePhoneCall.module.scss';
|
|
|
|
type OwnProps = {
|
|
phoneCall: PhoneCallAction;
|
|
message: ApiMessage;
|
|
chatId: string;
|
|
};
|
|
|
|
const MessagePhoneCall: FC<OwnProps> = ({
|
|
phoneCall,
|
|
message,
|
|
chatId,
|
|
}) => {
|
|
const { requestMasterAndRequestCall } = getActions();
|
|
|
|
const lang = useOldLang();
|
|
const {
|
|
isOutgoing, isVideo, reason, duration,
|
|
} = phoneCall;
|
|
const isMissed = reason === 'missed';
|
|
const isCancelled = reason === 'busy' || duration === undefined;
|
|
|
|
const handleCall = useLastCallback(() => {
|
|
requestMasterAndRequestCall({ isVideo, userId: chatId });
|
|
});
|
|
|
|
const reasonText = useMemo(() => {
|
|
if (isVideo) {
|
|
if (isMissed) return isOutgoing ? 'CallMessageVideoOutgoingMissed' : 'CallMessageVideoIncomingMissed';
|
|
if (isCancelled) return 'CallMessageVideoIncomingDeclined';
|
|
|
|
return isOutgoing ? 'CallMessageVideoOutgoing' : 'CallMessageVideoIncoming';
|
|
} else {
|
|
if (isMissed) return isOutgoing ? 'CallMessageOutgoingMissed' : 'CallMessageIncomingMissed';
|
|
if (isCancelled) return 'CallMessageIncomingDeclined';
|
|
|
|
return isOutgoing ? 'CallMessageOutgoing' : 'CallMessageIncoming';
|
|
}
|
|
}, [isCancelled, isMissed, isOutgoing, isVideo]);
|
|
|
|
const formattedDuration = useMemo(() => {
|
|
return phoneCall.duration ? formatTimeDuration(lang, phoneCall.duration) : undefined;
|
|
}, [lang, phoneCall.duration]);
|
|
|
|
const timeFormatted = formatTime(lang, message.date * 1000);
|
|
return (
|
|
<div className={styles.root}>
|
|
<Button
|
|
size="smaller"
|
|
color="translucent"
|
|
round
|
|
ripple
|
|
onClick={handleCall}
|
|
className={styles.button}
|
|
disabled={!ARE_CALLS_SUPPORTED}
|
|
ariaLabel={lang(isOutgoing ? 'CallAgain' : 'CallBack')}
|
|
>
|
|
<i className={buildClassName('icon', isVideo ? 'icon-video-outlined' : 'icon-phone')} />
|
|
</Button>
|
|
<div className={styles.info}>
|
|
<div className={styles.reason}>{lang(reasonText)}</div>
|
|
<div className={styles.meta}>
|
|
<i
|
|
className={buildClassName(
|
|
'icon',
|
|
'icon-arrow-right',
|
|
styles.arrow,
|
|
isMissed && styles.missed,
|
|
isCancelled && styles.canceled,
|
|
!isOutgoing && styles.incoming,
|
|
)}
|
|
/>
|
|
<span className={styles.duration}>
|
|
{formattedDuration ? lang('CallMessageWithDuration', [timeFormatted, formattedDuration]) : timeFormatted}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(MessagePhoneCall);
|