90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import React, {
|
|
FC, memo, useCallback, useMemo,
|
|
} from '../../../lib/teact/teact';
|
|
import { getActions } from '../../../global';
|
|
|
|
import { ApiMessage, PhoneCallAction } from '../../../api/types';
|
|
|
|
import useLang from '../../../hooks/useLang';
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import { formatTimeDuration, formatTime } from '../../../util/dateFormat';
|
|
import { ARE_CALLS_SUPPORTED } from '../../../util/environment';
|
|
|
|
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 { requestCall } = getActions();
|
|
|
|
const lang = useLang();
|
|
const { isOutgoing, isVideo, reason } = phoneCall;
|
|
const isMissed = reason === 'missed';
|
|
const isCancelled = reason === 'busy' && !isOutgoing;
|
|
|
|
const handleCall = useCallback(() => {
|
|
requestCall({ isVideo, userId: chatId });
|
|
}, [chatId, isVideo, requestCall]);
|
|
|
|
const reasonText = useMemo(() => {
|
|
if (isVideo) {
|
|
if (isCancelled) return 'CallMessageVideoIncomingDeclined';
|
|
if (isMissed) return isOutgoing ? 'CallMessageVideoOutgoingMissed' : 'CallMessageVideoIncomingMissed';
|
|
|
|
return isOutgoing ? 'CallMessageVideoOutgoing' : 'CallMessageVideoIncoming';
|
|
} else {
|
|
if (isCancelled) return 'CallMessageIncomingDeclined';
|
|
if (isMissed) return isOutgoing ? 'CallMessageOutgoingMissed' : 'CallMessageIncomingMissed';
|
|
|
|
return isOutgoing ? 'CallMessageOutgoing' : 'CallMessageIncoming';
|
|
}
|
|
}, [isCancelled, isMissed, isOutgoing, isVideo]);
|
|
|
|
const duration = 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={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-arrow-right', styles.arrow, isMissed && styles.missed, !isOutgoing && styles.incoming,
|
|
)}
|
|
/>
|
|
<span className={styles.duration}>
|
|
{duration ? lang('CallMessageWithDuration', [timeFormatted, duration]) : timeFormatted}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(MessagePhoneCall);
|