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 === 'webRTC_call_started' && message.callStatus === 'accept' ? <ShowCallTime stime={ts} /> : null}
 	</MessageContainer>
 ));

src/components/Messages/MessageList/livechatCall.js

@@ -0,0 +1,73 @@
+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';
+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';
+
+
+const DisplayCallIframe = (rid) => (
+	<Screen.Content nopadding>
+		<div className={createClassName(styles, 'iframe')}>
+			<iframe style='height:100%' src={`${ Livechat.client.host }/meet/${ rid.rid }`} />
+		</div>
+	</Screen.Content>
+);
+
+
+export const ShowCallTime = (props) => (
+	<div className={createClassName(styles, 'callTime')}>
+		<time
+			dateTime={new Date(props.stime).toISOString()}>
+			<div>{I18n.t('Call started at ')}{parseDate(props.stime)}</div>
+		</time>
+	</div>
+);
+
+
+export const CallNotification = (props) => {
+	const [isframe, setIframe] = useState(false);
+	const [show, setShow] = useState(true);
+
+	const acceptClick = async () => {
+		setShow(!{ show });
+		if (props.rid.t === 'jitsi_call_started') {
+			const result = await Livechat.videoCall(props.rid);
+			/* result:videoCall:
+                    domain: "meet.jit.si"
+                    provider: "jitsi"
+                    rid: "uJiZ3P5nbG4XMdqJp"
+                    room: "XLKhe6QE6dyRLtTkXuJiZ3P5nbG4XMdqJpRocketChat"
+                    timeout: "2021-07-15T09:10:02.736Z"*/
+			window.open(`https://${ result.videoCall.domain }/${ result.videoCall.room }`);
+			return;
+		}
+		setIframe(true);
+	};
+
+	const declineClick = () => {
+		setShow(false);
+	};
+
+	return (
+		<div>
+			{ show ? (<Screen.Content nopadding>
+				<div className={createClassName(styles, 'notifyCall')}>
+					<div className={createClassName(styles, 'avatar')}>
+						<Avatar
+							src={getAvatarUrl(props.rid.u.username)}
+						/></div>
+					{I18n.t('Incoming video Call')}
+					<div className={createClassName(styles, 'button')}>
+						<Button onClick={declineClick} className={createClassName(styles, 'declineButton')}> <PhoneDecline width={20} height={20} /> <span style='margin-left:5px'> {I18n.t('Decline')} </span> </Button>
+						<Button onClick={acceptClick} className={createClassName(styles, 'acceptButton')} > <PhoneAccept width={20} height={20} /> <span style='margin-left:5px'> {I18n.t('Accept')} </span> </Button></div></div></Screen.Content>) : null}
+			{isframe ? (<DisplayCallIframe session={props.rid.rid} />) : null }
+		</div>);
+};

src/components/Messages/MessageList/styles.scss

@@ -33,3 +33,97 @@
 		list-style: none;
 	}
 }
+
+.notifyCall {
+	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-size: 15px;
+	font-weight: 600;
+	font-style: normal;
+	line-height: 16px;
+	justify-content: space-between;
+}
+
+.callTime {
+	margin: 50px;
+
+	margin-left: 14%;
+
+	text-align: center;
+
+	color: #6c727a;
+
+	font-weight: 500;
+}
+
+.button {
+	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;
+}
+
+.declineButton {
+	margin-right: 10px;
+	margin-bottom: 0;
+
+	border-color: red;
+	background-color: #f5455c;
+}
+
+.acceptButton {
+	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/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 === 'webRTC_call_started' || 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 ? (