Apply review suggestions

- Use date-fns library to calculate call duration

src/components/Calls/styles.scss

@@ -121,16 +121,6 @@
 	}
 }
 
-.callTime {
-	margin: 50px;
-
-	text-align: center;
-
-	color: #6c727a;
-
-	font-weight: 300;
-}
-
 @media screen and (min-width: 410px) {
 	.joinCall {
 		margin-left: 3%;

src/components/Messages/Message/index.js

@@ -1,3 +1,7 @@
+import { formatDistance } from 'date-fns';
+import format from 'date-fns/format';
+import { parseISO } from 'date-fns/fp';
+import isToday from 'date-fns/isToday';
 import { h } from 'preact';
 
 import I18n from '../../../i18n';
@@ -23,6 +27,7 @@ import {
 	MESSAGE_TYPE_LIVECHAT_CLOSED,
 	MESSAGE_TYPE_LIVECHAT_STARTED,
 	MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY,
+	MESSAGE_WEBRTC_CALL,
 } from '../constants';
 
 const renderContent = ({
@@ -80,7 +85,14 @@ const renderContent = ({
 	),
 ].filter(Boolean);
 
-const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, u }) =>
+const resolveWebRTCEndCallMessage = ({ endTs: callEndTime, ts: callStartTime }) => {
+	const callDuration = formatDistance(new Date(callEndTime), new Date(callStartTime));
+	const timestamp = new Date(callEndTime).toISOString();
+	const time = format(parseISO(timestamp), isToday(parseISO(timestamp)) ? 'HH:mm' : 'dddd HH:mm');
+	return `${ I18n.t('Call ended at %{time}', { time }) } ${ I18n.t(' - Lasted %{callDuration}', { callDuration }) }`;
+};
+
+const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, u, endTs, ts }) =>
 	(t === MESSAGE_TYPE_ROOM_NAME_CHANGED && I18n.t('Room name changed'))
 	|| (t === MESSAGE_TYPE_USER_ADDED && I18n.t('User added by'))
 	|| (t === MESSAGE_TYPE_USER_REMOVED && I18n.t('User removed by'))
@@ -89,7 +101,8 @@ const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, u
 	|| (t === MESSAGE_TYPE_WELCOME && I18n.t('Welcome'))
 	|| (t === MESSAGE_TYPE_LIVECHAT_CLOSED && (conversationFinishedMessage || I18n.t('Conversation finished')))
 	|| (t === MESSAGE_TYPE_LIVECHAT_STARTED && I18n.t('Chat started'))
-	|| (t === MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY && normalizeTransferHistoryMessage(transferData, u));
+	|| (t === MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY && normalizeTransferHistoryMessage(transferData, u))
+	|| (t === MESSAGE_WEBRTC_CALL && endTs && ts && resolveWebRTCEndCallMessage({ endTs, ts }));
 
 const getMessageUsernames = (compact, message) => {
 	if (compact || !message.u) {
@@ -108,7 +121,6 @@ export const Message = memo(({
 	avatarResolver,
 	attachmentResolver = getAttachmentUrl,
 	use,
-	ts,
 	me,
 	compact,
 	className,
@@ -140,6 +152,6 @@ export const Message = memo(({
 				attachmentResolver,
 			})}
 		</MessageContent>
-		{!compact && !message.t && <MessageTime normal={!me} inverse={me} ts={ts} />}
+		{!compact && !message.t && <MessageTime normal={!me} inverse={me} ts={message.ts} />}
 	</MessageContainer>
 ));

src/components/Messages/MessageList/index.js

@@ -4,8 +4,8 @@ import { h } from 'preact';
 
 import constants from '../../../lib/constants';
 import store from '../../../store';
-import { CallTime } from '../../Calls/CallTime';
 import { JoinCallButton } from '../../Calls/JoinCallButton';
+import { isCallOngoing } from '../../Calls/constants';
 import { createClassName, getAttachmentUrl, MemoizedComponent } from '../../helpers';
 import { Message } from '../Message';
 import { MessageSeparator } from '../MessageSeparator';
@@ -109,29 +109,23 @@ export class MessageList extends MemoizedComponent {
 		typingUsernames,
 	}) => {
 		const items = [];
+		const { incomingCallAlert } = store.state;
+		const { ongoingCall } = store.state;
 
 		for (let i = 0; i < messages.length; ++i) {
 			const previousMessage = messages[i - 1];
 			const message = messages[i];
 			const nextMessage = messages[i + 1];
-			const { incomingCallAlert } = store.state;
-			const { ongoingCall } = store.state;
 
-			if ((message.t === constants.webRTCCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType) && message.actionLinks && message.actionLinks.length && ongoingCall) {
+			if ((message.t === constants.webRTCCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType)
+				&& message.actionLinks && message.actionLinks.length
+				&& ongoingCall && isCallOngoing(ongoingCall.callStatus)
+				&& !message.endTs) {
 				const { url, callProvider, rid } = incomingCallAlert || {};
 				items.push(
 					<JoinCallButton callStatus={ongoingCall.callStatus} url={url} callProvider={callProvider} rid={rid} />,
 				);
-			}
-
-			if (message.endTs) {
-				let timestamp;
-				if (message.endTs.$date) {
-					timestamp = new Date(message.endTs.$date).toISOString();
-				}
-				items.push(
-					<CallTime time={parseISO(message.ts)} endTime={timestamp ? parseISO(timestamp) : parseISO(message.endTs)} />,
-				);
+				continue;
 			}
 
 			const showDateSeparator = !previousMessage || !isSameDay(parseISO(message.ts), parseISO(previousMessage.ts));