diff --git a/.loki/reference/chrome_Components_Icons_all.png b/.loki/reference/chrome_Components_Icons_all.png
index 9ee15f4ff..173c74e32 100644
Binary files a/.loki/reference/chrome_Components_Icons_all.png and b/.loki/reference/chrome_Components_Icons_all.png differ
diff --git a/.loki/reference/chrome_Components_Icons_phone.png b/.loki/reference/chrome_Components_Icons_phone.png
new file mode 100644
index 000000000..ea142fac6
Binary files /dev/null and b/.loki/reference/chrome_Components_Icons_phone.png differ
diff --git a/.loki/reference/chrome_Components_Icons_phoneOff.png b/.loki/reference/chrome_Components_Icons_phoneOff.png
new file mode 100644
index 000000000..d621a0f3a
Binary files /dev/null and b/.loki/reference/chrome_Components_Icons_phoneOff.png differ
diff --git a/src/components/Messages/Message/index.js b/src/components/Messages/Message/index.js
index 70d815955..bd9540c03 100644
--- a/src/components/Messages/Message/index.js
+++ b/src/components/Messages/Message/index.js
@@ -1,7 +1,7 @@
import { h } from 'preact';
import I18n from '../../../i18n';
-import { getAttachmentUrl, memo, normalizeTransferHistoryMessage } from '../../helpers';
+import { getAttachmentUrl, memo, normalizeTransferHistoryMessage, normalizeCallTimeMessage } from '../../helpers';
import { AudioAttachment } from '../AudioAttachment';
import { FileAttachment } from '../FileAttachment';
import { ImageAttachment } from '../ImageAttachment';
@@ -22,6 +22,8 @@ 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';
@@ -80,7 +82,7 @@ const renderContent = ({
),
].filter(Boolean);
-const getSystemMessageText = ({ t, conversationFinishedMessage, transferData }) =>
+const getSystemMessageText = ({ t, conversationFinishedMessage, transferData, callStatus }) =>
(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,6 +91,8 @@ const getSystemMessageText = ({ t, conversationFinishedMessage, transferData })
|| (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) => {
diff --git a/src/components/Messages/MessageList/livechatCall.js b/src/components/Messages/MessageList/livechatCall.js
new file mode 100644
index 000000000..ae2625e32
--- /dev/null
+++ b/src/components/Messages/MessageList/livechatCall.js
@@ -0,0 +1,68 @@
+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 { store } from '../../../store';
+import { Avatar } from '../../Avatar';
+import { Button } from '../../Button';
+import { Screen } from '../../Screen';
+import { createClassName, getAvatarUrl, createToken } from '../../helpers';
+import styles from './styles.scss';
+
+
+const DisplayCallIframe = (rid) => (
+
+
+
+
+
+);
+
+
+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 { state } = store;
+ const { alerts } = state;
+ try {
+ const result = await Livechat.videoCall(props.rid);
+ window.open(`https://${ result.videoCall.domain }/${ result.videoCall.room }`);
+ return;
+ } catch (error) {
+ console.error(error);
+ const alert = { id: createToken(), children: I18n.t('Error in connecting call'), error: true, timeout: 5000 };
+ await store.setState({ alerts: (alerts.push(alert), alerts) });
+ return;
+ }
+ }
+ setIframe(true);
+ await Livechat.updateCallStatus('accept');
+ };
+
+ const declineClick = async () => {
+ setShow(false);
+ await Livechat.updateCallStatus('decline');
+ };
+
+ return (
+
+ { show ? (
+
+
+ {I18n.t('Incoming video Call')}
+
+
+
) : null}
+ {isframe ? (
) : null }
+
+ {(messages[messages.length - 1] ? messages[messages.length - 1].t === 'webRTC_call_started' || messages[messages.length - 1].t === 'jitsi_call_started' : messages[messages.length - 1]) ? : null}
+