add callnotification,callStartmsg,iframe code

src/components/Messages/Message/index.js

@@ -10,6 +10,7 @@ import MessageBlocks from '../MessageBlocks';
 import { MessageBubble } from '../MessageBubble';
 import { MessageContainer } from '../MessageContainer';
 import { MessageContent } from '../MessageContent';
+import { ShowCallTime } from '../MessageList/livechatCall';
 import { MessageText } from '../MessageText';
 import { MessageTime } from '../MessageTime';
 import { VideoAttachment } from '../VideoAttachment';
@@ -141,5 +142,6 @@ export const Message = memo(({
 			})}
 		</MessageContent>
 		{!compact && !message.t && <MessageTime normal={!me} inverse={me} ts={ts} />}
+		{message.t === 'jitsi_call_started' && message.callStatus === 'accept' ? <ShowCallTime stime={ts} /> : null}
 	</MessageContainer>
 ));

src/components/Messages/MessageList/livechatCall.js

@@ -0,0 +1,62 @@
+import { h } from 'preact';
+import { useState } from 'preact/compat';
+
+import PhoneAccept from '../../../icons/phone.svg';
+import PhoneDecline from '../../../icons/phoneOff.svg';
+import { Avatar } from '../../Avatar';
+import { Button } from '../../Button';
+import { Screen } from '../../Screen';
+import { createClassName, getAvatarUrl } from '../../helpers';
+import { parseDate } from '../MessageTime/index';
+import styles from './styles.scss';
+
+// get roomid(DisolayIframe(rid)) and put rid id in iframe link
+// <iframe style="height:80%" src="localhost:3000/livechat/roomId"></iframe>
+// For example, for now I have add link of jitsi and its working fine, similarly we can add link of our video/audio call implemented with webrtc.
+const DisplayIframe = (rid) => (
+	<Screen.Content nopadding>
+		<div className={createClassName(styles, 'iframe')}>
+			<iframe style='height:100%' src='https://meet.jit.si/RocketChatXLKhe6QE6dyRLtTkX'{...rid} />
+		</div>
+	</Screen.Content>
+);
+
+// show call start time function.
+export const ShowCallTime = (props) => (
+	<div className={createClassName(styles, 'callTime')}>
+		<time
+			dateTime={new Date(props.stime).toISOString()}>
+			<div>Call started at {parseDate(props.stime)}</div>
+		</time>
+	</div>
+);
+
+// call notification with accept and reject option.
+export const CallNotification = (props) => {
+	const [isframe, setIframe] = useState(false);
+	const [show, setShow] = useState(true);
+
+	const acceptClick = () => {
+		setShow(!{ show });
+		setIframe(true);
+	};
+
+	const declineClick = () => {
+		setShow(false);
+	};
+
+	return (
+		<div>
+			{ show ? (<Screen.Content nopadding>
+				<div className={createClassName(styles, 'call')}>
+					<div className={createClassName(styles, 'avatar')}>
+						<Avatar
+							src={getAvatarUrl(props.rid.u.username)}
+						/></div>
+					Incoming video Call
+					<div className={createClassName(styles, 'btn')}>
+						<Button onClick={declineClick} className={createClassName(styles, 'btn1')}> <PhoneDecline width={20} height={20} /> Decline</Button>
+						<Button onClick={acceptClick} className={createClassName(styles, 'btn2')} > <PhoneAccept width={20} height={20} /> Accept</Button></div></div></Screen.Content>) : null}
+			{isframe ? (<DisplayIframe session={props.rid} />) : null }
+		</div>);
+};

src/components/Messages/MessageList/styles.scss

@@ -33,3 +33,86 @@
 		list-style: none;
 	}
 }
+
+.call {
+	position: absolute;
+	top: 0;
+
+	display: flex;
+	flex-direction: column;
+
+	width: 100%;
+	height: 50%;
+	margin-bottom: 5px;
+
+	padding-top: 40px;
+	padding-bottom: 0;
+
+	text-align: center;
+
+	color: #ffffff;
+
+	border: 1px solid black;
+
+	background: #1f2329;
+
+	font-family: Inter;
+	font-size: 15px;
+	font-weight: 600;
+	font-style: normal;
+	line-height: 16px;
+	justify-content: space-between;
+}
+
+.btn {
+	display: flex;
+	flex-direction: row;
+
+	margin-bottom: 1px;
+	padding: 10px;
+	padding-top: 0;
+
+	color: white;
+	justify-content: center;
+}
+
+.avatar {
+	display: flex;
+	flex-direction: row;
+
+	margin-bottom: -17%;
+	justify-content: center;
+}
+
+.btn1 {
+	margin-right: 10px;
+	margin-bottom: 0;
+
+	border-color: red;
+	background-color: #f5455c;
+}
+
+.btn2 {
+	margin-bottom: 0;
+	margin-left: 10px;
+
+	border-color: green;
+	background-color: #2de0a5;
+}
+
+.iframe {
+	position: absolute;
+	top: 0;
+
+	display: flex;
+	flex-direction: column;
+
+	width: 100%;
+	height: 50%;
+}
+
+@media screen and (min-width: 410px) {
+	.avatar {
+		margin-bottom: -7%;
+	}
+}

src/lib/room.js

@@ -125,6 +125,11 @@ Livechat.onMessage(async (message) => {
 	if (message.ts instanceof Date) {
 		message.ts = message.ts.toISOString();
 	}
+	/* add typeCall(accept, decline, end) in message schema for webrtc. Once the webrtc implementation
+	is done, we can check for message.t==='webrtc' instead of message.t === 'jitsi_call_started'.*/
+	if (message.t === 'jitsi_call_started') {
+		message.callStatus = 'accept';
+	}
 
 	message = await normalizeMessage(message);
 	if (!message) {

src/routes/Chat/component.js

@@ -7,6 +7,7 @@ import { FilesDropTarget } from '../../components/FilesDropTarget';
 import { FooterOptions, CharCounter } from '../../components/Footer';
 import { Menu } from '../../components/Menu';
 import { MessageList } from '../../components/Messages';
+import { CallNotification } from '../../components/Messages/MessageList/livechatCall';
 import { Screen } from '../../components/Screen';
 import { createClassName } from '../../components/helpers';
 import I18n from '../../i18n';
@@ -165,6 +166,9 @@ export default class Chat extends Component {
 							autoFocus={true}
 						/>}
 					</div>
+					<div>
+						{(messages[messages.length - 1] ? messages[messages.length - 1].t === 'jitsi_call_started' : messages[messages.length - 1]) ? <CallNotification rid={(messages[messages.length - 1])} /> : null}
+					</div>
 				</Screen.Content>
 				<Screen.Footer
 					options={options ? (