add joinCallBtn, endCall message, callRing functionalities. (#618)

* add callnotification,msg,iframe code

* fix eslint issues

* fix eslint file path issues

* fix stylelint issues

* done ui changes

* add join call button

* add icons and improve ui

* fix error

* remove-icons

* add icons

* ui changes

* add icon and timeout functionality

* add I18n.t

* add i18n.t, change classname, improve ui

* remove font-family

* change iframe link

* add check for jitsi

* add jitsi link

* add time message in system message and add catch

* display alert, change function name

* Improve overall codebase

* Convert tabs to spaces for translation file

* Accept jitsi url info from the message and remove dependency from Livechat.videoCall endpoint

* Update index.js

* add message in i18n file

* add joincall btn, call time, timeout

* fix lint error

* Update ShowJoinCallButton.js

* fix conflicts

* improve codebase

* fix bugs

* update some files

* improve css, codebase and change condition

* add correct link for iframe and joinCallBtn, show correct time

* update call status at rc-core

* update api file

* rebase file

* change link, use store class

* update callIframe file

* handle corner cases

* remove file

* Update room.js file

Co-authored-by: Murtaza Patrawala <34130764+murtaza98@users.noreply.github.com>

* update one file

* revert roomjs file

* add common condition in room.js file

Co-authored-by: Murtaza Patrawala <34130764+murtaza98@users.noreply.github.com>

src/components/Calls/CallIFrame.js

@@ -1,14 +1,17 @@
 import { h } from 'preact';
 
-import { Screen } from '../Screen';
+import { Livechat } from '../../api';
+import store from '../../store';
 import { createClassName } from '../helpers';
 import styles from './styles.scss';
 
 
-export const CallIFrame = (url) => (
-	<Screen.Content nopadding>
+export const CallIframe = () => {
+	const { token, room } = store.state;
+	const url = `${ Livechat.client.host }/meet/${ room._id }?token=${ token }`;
+	return (
 		<div className={createClassName(styles, 'call-iframe')}>
-			<iframe className={createClassName(styles, 'call-iframe__content')} src={url} />
+			<iframe className={createClassName(styles, 'call-iframe__content')} allow='camera;microphone' 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,27 +12,27 @@ 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);
 
 	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 dispatch({ incomingCallAlert: null });
+		await Livechat.updateCallStatus('declined', rid);
+		await dispatch({ incomingCallAlert: null, ongoingCall: { callStatus: 'declined', time: { time } } });
 	};
 
 	return (
@@ -49,10 +50,10 @@ export const CallNotification = ({ callProvider, callerUsername, url, dispatch }
 							{ 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')}>
+							<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-decline')} >
+							<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>

src/components/Calls/CallTime.js

@@ -0,0 +1,31 @@
+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';
+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.`;
+	}
+	const timestamp = new Date(props.endTime).toISOString();
+	const time = format(parseISO(timestamp), isToday(parseISO(timestamp)) ? 'HH:mm' : 'dddd HH:mm');
+	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 { token, room } = store.state;
+	const clickJoinCall = async () => {
+		const { alerts } = store.state;
+		switch (props.callProvider) {
+			case constants.jitsiCallStartedMessageType: {
+				window.open(props.url);
+				break;
+			}
+			case constants.webrtcCallStartedMessageType: {
+				window.open(`${ Livechat.client.host }/meet/${ room._id }?token=${ token }`);
+				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

@@ -64,15 +64,75 @@
 }
 
 .call-iframe {
-	position: relative;
+	position: absolute;
 	top: 0;
 
-	display: flex;
-
 	width: 100%;
-	height: 50%;
+	height: 41%;
 
 	&__content {
+		width: 100%;
 		height: 100%;
 	}
 }
+
+.joinCall {
+	width: 300px;
+	margin: 15px;
+
+	padding: 5px;
+
+	border: 1px solid #e4e7ea;
+
+	&__content {
+		display: flex;
+		flex-direction: row;
+
+		padding: 15px;
+
+		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: 3%;
+	}
+}

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,25 @@ 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.actionLinks && message.actionLinks.length === 2 && ongoingCall) {
+				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)} />,
+				);
+			}
 
 			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';

src/components/helpers.js

@@ -1,6 +1,3 @@
-import format from 'date-fns/format';
-import { parseISO } from 'date-fns/fp';
-import isToday from 'date-fns/isToday';
 import { Component } from 'preact';
 
 import { Livechat } from '../api';
@@ -116,7 +113,7 @@ export const createToken = () => Math.random().toString(36).substring(2, 15) + M
 
 export const getAvatarUrl = (username) => (username ? `${ Livechat.client.host }/avatar/${ username }` : null);
 
-export const msgTypesNotRendered = ['livechat_video_call', 'livechat_navigation_history', 'au', 'command', 'uj', 'ul', 'livechat-close', 'webRTC_call_started', 'jitsi_call_started'];
+export const msgTypesNotRendered = ['livechat_video_call', 'livechat_navigation_history', 'au', 'command', 'uj', 'ul', 'livechat-close'];
 
 export const canRenderMessage = ({ t }) => !msgTypesNotRendered.includes(t);
 
@@ -129,19 +126,6 @@ export const sortArrayByColumn = (array, column, inverted) => array.sort((a, b)
 	return 1;
 });
 
-export const normalizeCallTimeMessage = (callStatus) => {
-	const timestamp = new Date().toISOString();
-	const time = format(parseISO(timestamp), isToday(parseISO(timestamp)) ? 'HH:mm' : 'dddd HH:mm');
-	if (!callStatus) {
-		return;
-	}
-	if (callStatus === 'accept') {
-		return I18n.t('call_start_time', { time });
-	}
-	if (callStatus === 'endCall') {
-		return I18n.t('call_end_time', { time });
-	}
-};
 
 export const normalizeTransferHistoryMessage = (transferData) => {
 	if (!transferData) {

src/lib/constants.js

@@ -4,6 +4,6 @@ export default {
 	livechatConnectedAlertId: 'LIVECHAT_CONNECTED',
 	livechatDisconnectedAlertId: 'LIVECHAT_DISCONNECTED',
 	livechatQueueMessageId: 'LIVECHAT_QUEUE_MESSAGE',
-	webrtcCallStartedMessageType: 'webRTC_call_started',
+	webrtcCallStartedMessageType: 'livechat_webrtc_video_call',
 	jitsiCallStartedMessageType: 'jitsi_call_started',
 };