Call status update

package.json

@@ -97,6 +97,7 @@
 		"markdown-it": "^11.0.0",
 		"mem": "^6.1.0",
 		"mitt": "^2.1.0",
+		"moment": "^2.29.1",
 		"preact": "^10.4.6",
 		"preact-i18nline": "^2.0.0",
 		"preact-router": "^3.2.1",

src/components/Calls/CallIFrame.js

@@ -1,14 +1,18 @@
 import { h } from 'preact';
 
+import { Livechat } from '../../api';
 import { Screen } from '../Screen';
 import { createClassName } from '../helpers';
 import styles from './styles.scss';
 
 
-export const CallIFrame = (url) => (
-	<Screen.Content nopadding>
-		<div className={createClassName(styles, 'call-iframe')}>
-			<iframe className={createClassName(styles, 'call-iframe__content')} src={url} />
-		</div>
-	</Screen.Content>
-);
+export const CallIframe = (props) => {
+	const url = `${ Livechat.client.host }/meet/${ props.rid }`;
+	return (
+		<Screen.Content nopadding>
+			<div className={createClassName(styles, 'call-iframe')}>
+				<iframe className={createClassName(styles, 'call-iframe__content')} src={url} />
+			</div>
+		</Screen.Content>
+	);
+};

src/components/Calls/CallNotification.js

@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import { useState } from 'preact/compat';
 
+import { Livechat } from '../../api';
 import I18n from '../../i18n';
 import PhoneAccept from '../../icons/phone.svg';
 import PhoneDecline from '../../icons/phoneOff.svg';
@@ -11,50 +12,55 @@ import { createClassName, getAvatarUrl } from '../helpers';
 import styles from './styles.scss';
 
 
-export const CallNotification = ({ callProvider, callerUsername, url, dispatch } = { callProvider: undefined, callerUsername: undefined, dispatch: undefined }) => {
-	const [show, setShow] = useState(!!callProvider && !!callerUsername && !!dispatch && !!url);
+export const CallNotification = ({ callProvider, callerUsername, url, dispatch, time, rid } = { callProvider: undefined, callerUsername: undefined, dispatch: undefined, time: undefined }) => {
+	const [show, setShow] = useState(true);
+	console.log('asd', show);
 
 	const acceptClick = async () => {
 		setShow(!{ show });
-
+		await Livechat.updateCallStatus('inProgress', rid);
 		switch (callProvider) {
 			case constants.jitsiCallStartedMessageType: {
 				window.open(url);
-				await dispatch({ incomingCallAlert: null });
 				break;
 			}
 			case constants.webrtcCallStartedMessageType: {
 				// TODO: add webrtc code here
+				await dispatch({ ongoingCall: { callStatus: 'accept', time: { time } } });
 				break;
 			}
 		}
 	};
 
 	const declineClick = async () => {
+		await Livechat.updateCallStatus('declined', rid);
 		await dispatch({ incomingCallAlert: null });
+		await dispatch({ ongoingCall: { callStatus: 'decline', time: { time } } });
 	};
 
 	return (
-		<div className={createClassName(styles, 'call-notification')}>
+		<div>
 			{ show
 				? (
-					<div className={createClassName(styles, 'call-notification__content')}>
-						<div className={createClassName(styles, 'call-notification__content-avatar')}>
-							<Avatar
-								src={getAvatarUrl(callerUsername)}
-								large
-							/>
-						</div>
-						<div className={createClassName(styles, 'call-notification__content-message')}>
-							{ I18n.t('Incoming video Call') }
-						</div>
-						<div className={createClassName(styles, 'call-notification__content-actions')}>
-							<Button onClick={declineClick} className={createClassName(styles, 'call-notification__content-actions-accept')}>
-								<PhoneDecline width={20} height={20} /> <span style='margin-left:5px'> {I18n.t('Decline')} </span>
-							</Button>
-							<Button onClick={acceptClick} className={createClassName(styles, 'call-notification__content-actions-decline')} >
-								<PhoneAccept width={20} height={20} /><span style='margin-left:5px'> {I18n.t('Accept')} </span>
-							</Button>
+					<div className={createClassName(styles, 'call-notification')}>
+						<div className={createClassName(styles, 'call-notification__content')}>
+							<div className={createClassName(styles, 'call-notification__content-avatar')}>
+								<Avatar
+									src={getAvatarUrl(callerUsername)}
+									large
+								/>
+							</div>
+							<div className={createClassName(styles, 'call-notification__content-message')}>
+								{ I18n.t('Incoming video Call') }
+							</div>
+							<div className={createClassName(styles, 'call-notification__content-actions')}>
+								<Button onClick={declineClick} className={createClassName(styles, 'call-notification__content-actions-decline')}>
+									<PhoneDecline width={20} height={20} /> <span style='margin-left:5px'> {I18n.t('Decline')} </span>
+								</Button>
+								<Button onClick={acceptClick} className={createClassName(styles, 'call-notification__content-actions-accept')} >
+									<PhoneAccept width={20} height={20} /><span style='margin-left:5px'> {I18n.t('Accept')} </span>
+								</Button>
+							</div>
 						</div>
 					</div>
 				)

src/components/Calls/CallTime.js

@@ -0,0 +1,30 @@
+import moment from 'moment';
+import { h } from 'preact';
+
+import I18n from '../../i18n';
+import { createClassName } from '../helpers';
+import styles from './styles.scss';
+
+
+export const CallTime = (props) => {
+	const hh = parseInt(Math.abs(props.endTime - props.time) / 36e5);
+	const mm = parseInt(Math.abs(props.endTime - props.time) / 6e4) % 60;
+	const ss = parseInt(Math.abs(props.endTime - props.time) / 1000) % 60;
+	let callDuration = '';
+	if (hh > 0) {
+		callDuration += `${ hh } hours ${ mm } minutes ${ ss } seconds.`;
+	} else if (mm > 0) {
+		callDuration += `${ mm } minutes ${ ss } seconds.`;
+	} else {
+		callDuration += `${ ss } seconds.`;
+	}
+	console.log('zer', callDuration);
+	const time = moment(props.endTime).format('h:mm A');
+	console.log('bdf', time);
+	return (
+		<div className={createClassName(styles, 'callTime')}>
+			{I18n.t('Call ended at %{time}', { time })}
+			{I18n.t(' - Lasted %{callDuration}', { callDuration })}
+		</div>
+	);
+};

src/components/Calls/JoinCallButton.js

@@ -0,0 +1,44 @@
+import { h } from 'preact';
+
+import { Livechat } from '../../api';
+import I18n from '../../i18n';
+import VideoIcon from '../../icons/video.svg';
+import constants from '../../lib/constants';
+import store from '../../store';
+import { Button } from '../Button';
+import { createClassName, createToken } from '../helpers';
+import styles from './styles.scss';
+
+
+export const JoinCallButton = (props) => {
+	const clickJoinCall = async () => {
+		const { alerts } = store.state;
+		switch (props.callProvider) {
+			case constants.jitsiCallStartedMessageType: {
+				window.open(props.url);
+				break;
+			}
+			case constants.webrtcCallStartedMessageType: {
+				// TODO: add webrtc code here
+				window.open(`${ Livechat.client.host }/meet/${ props.rid }`);
+				break;
+			}
+			default: {
+				const alert = { id: createToken(), children: I18n.t('Call already ended'), timeout: 5000 };
+				await store.setState({ alerts: (alerts.push(alert), alerts) });
+			}
+		}
+	};
+	return (<div>
+		{ props.callStatus === 'accept'
+			? <div className={createClassName(styles, 'joinCall')}>
+				<div className={createClassName(styles, 'joinCall__content')} >
+					<div className={createClassName(styles, 'joinCall__content-videoIcon')} >
+						<VideoIcon width={20} height={20} />
+					</div>
+					{I18n.t('Join my room to start the video call')}
+				</div>
+				<Button onClick={clickJoinCall} className={createClassName(styles, 'joinCall__content-action')}> <VideoIcon width={20} height={20} /> {I18n.t('Join Call')} </Button>
+	    </div> : null } </div>
+	);
+};

src/components/Calls/styles.scss

@@ -4,17 +4,12 @@
 .call-notification {
 	position: relative;
 
-	display: flex;
-
-	width: 100%;
-	height: 50%;
-
 	&__content {
 		display: flex;
 		flex-direction: column;
 
 		width: 100%;
-		height: 100%;
+		height: 200px;
 
 		background: #1f2329;
 
@@ -73,6 +68,71 @@
 	height: 50%;
 
 	&__content {
-		height: 100%;
+		width: 100%;
+		height: 200%;
+	}
+}
+
+.joinCall {
+	width: 300px;
+	margin: 15px;
+
+	padding: 5px;
+
+	border: 1px solid #e4e7ea;
+
+	&__content {
+		display: flex;
+		flex-direction: row;
+
+		padding: 15px;
+
+		font-size: 15px;
+		font-weight: 600;
+		font-style: normal;
+		line-height: 16px;
+		justify-content: space-around;
+
+		&-videoIcon {
+			display: flex;
+
+			height: 7%;
+			margin-right: 10px;
+
+			padding: 5px;
+
+			border: 1px solid white;
+			background-color: #d1ebfe;
+		}
+
+		&-action {
+			display: block;
+
+			width: 120px;
+			margin-top: 0;
+			margin-bottom: 3%;
+			margin-left: 20%;
+			padding: 5px;
+
+			color: white;
+			border: 1px solid  blue;
+			background-color: #1d74f5;
+		}
+	}
+}
+
+.callTime {
+	margin: 50px;
+
+	text-align: center;
+
+	color: #6c727a;
+
+	font-weight: 300;
+}
+
+@media screen and (min-width: 410px) {
+	.joinCall {
+		margin-left: 38%;
 	}
 }

src/components/Messages/Message/index.js

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 
 import I18n from '../../../i18n';
-import { getAttachmentUrl, memo, normalizeTransferHistoryMessage, normalizeCallTimeMessage } from '../../helpers';
+import { getAttachmentUrl, memo, normalizeTransferHistoryMessage } from '../../helpers';
 import { AudioAttachment } from '../AudioAttachment';
 import { FileAttachment } from '../FileAttachment';
 import { ImageAttachment } from '../ImageAttachment';
@@ -22,8 +22,6 @@ import {
 	MESSAGE_TYPE_WELCOME,
 	MESSAGE_TYPE_LIVECHAT_CLOSED,
 	MESSAGE_TYPE_LIVECHAT_STARTED,
-	MESSAGE_WEBRTC_CALL,
-	MESSAGE_JITSI_CALL,
 	MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY,
 } from '../constants';
 
@@ -82,7 +80,7 @@ const renderContent = ({
 	),
 ].filter(Boolean);
 
-const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, callStatus }) =>
+const getSystemMessageText = ({ t, conversationFinishedMessage, transferData }) =>
 	(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'))
@@ -91,8 +89,6 @@ const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, ca
 	|| (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_WEBRTC_CALL && normalizeCallTimeMessage(callStatus))
-	|| (t === MESSAGE_JITSI_CALL && normalizeCallTimeMessage(callStatus))
 	|| (t === MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY && normalizeTransferHistoryMessage(transferData));
 
 const getMessageUsernames = (compact, message) => {

src/components/Messages/MessageList/index.js

@@ -2,13 +2,15 @@ import { parseISO } from 'date-fns/fp';
 import isSameDay from 'date-fns/isSameDay';
 import { h } from 'preact';
 
+import store from '../../../store';
+import { CallTime } from '../../Calls/CallTime';
+import { JoinCallButton } from '../../Calls/JoinCallButton';
 import { createClassName, getAttachmentUrl, MemoizedComponent } from '../../helpers';
 import { Message } from '../Message';
 import { MessageSeparator } from '../MessageSeparator';
 import { TypingIndicator } from '../TypingIndicator';
 import styles from './styles.scss';
 
-
 export class MessageList extends MemoizedComponent {
 	static defaultProps = {
 		typingUsernames: [],
@@ -111,6 +113,21 @@ export class MessageList extends MemoizedComponent {
 			const previousMessage = messages[i - 1];
 			const message = messages[i];
 			const nextMessage = messages[i + 1];
+			const { incomingCallAlert } = store.state;
+			const { ongoingCall } = store.state;
+
+			if (message.msg === 'Join my room to start the video call' && ongoingCall) {
+				const { url, callProvider, rid } = incomingCallAlert || '';
+				items.push(
+					<JoinCallButton callStatus={ongoingCall.callStatus} url={url} callProvider={callProvider} rid={rid} />,
+				);
+			}
+
+			if (message.endTs) {
+				items.push(
+					<CallTime time={parseISO(message.ts)} endTime={parseISO(message.endTs)} />,
+				);
+			}
 
 			const showDateSeparator = !previousMessage || !isSameDay(parseISO(message.ts), parseISO(previousMessage.ts));
 			if (showDateSeparator) {

src/components/Messages/constants.js

@@ -7,5 +7,5 @@ export const MESSAGE_TYPE_WELCOME = 'wm';
 export const MESSAGE_TYPE_LIVECHAT_CLOSED = 'livechat-close';
 export const MESSAGE_TYPE_LIVECHAT_STARTED = 'livechat-started';
 export const MESSAGE_TYPE_LIVECHAT_TRANSFER_HISTORY = 'livechat_transfer_history';
-export const MESSAGE_JITSI_CALL = 'webrtc_call_started';
-export const MESSAGE_WEBRTC_CALL = 'jitsi_call_started';
+export const MESSAGE_JITSI_CALL = 'jitsi_call_started';
+export const MESSAGE_WEBRTC_CALL = 'livechat_webrtc_video_call';