diff --git a/src/components/Calls/CallNotification.js b/src/components/Calls/CallNotification.js
index 4f0f5083f..2b700924e 100644
--- a/src/components/Calls/CallNotification.js
+++ b/src/components/Calls/CallNotification.js
@@ -6,15 +6,23 @@ import I18n from '../../i18n';
import PhoneAccept from '../../icons/phone.svg';
import PhoneDecline from '../../icons/phoneOff.svg';
import constants from '../../lib/constants';
+import store from '../../store';
import { Avatar } from '../Avatar';
import { Button } from '../Button';
-import { createClassName, getAvatarUrl } from '../helpers';
+import { createClassName, getAvatarUrl, isMobileDevice } from '../helpers';
import styles from './styles.scss';
export const CallNotification = ({ callProvider, callerUsername, url, dispatch, time, rid, callId } = { callProvider: undefined, callerUsername: undefined, dispatch: undefined, time: undefined }) => {
const [show, setShow] = useState(true);
+ const callInNewTab = async () => {
+ const { token, room } = store.state;
+ const url = `${ Livechat.client.host }/meet/${ room._id }?token=${ token }`;
+ await dispatch({ ongoingCall: { callStatus: 'ongoingCallInNewTab', time: { time } }, incomingCallAlert: { show: false, callProvider } });
+ window.open(url, room._id);
+ };
+
const acceptClick = async () => {
setShow(!{ show });
await Livechat.updateCallStatus('inProgress', rid, callId);
@@ -24,6 +32,10 @@ export const CallNotification = ({ callProvider, callerUsername, url, dispatch,
break;
}
case constants.webrtcCallStartedMessageType: {
+ if (isMobileDevice()) {
+ callInNewTab();
+ break;
+ }
await dispatch({ ongoingCall: { callStatus: 'accept', time: { time } } });
break;
}
diff --git a/src/components/Calls/JoinCallButton.js b/src/components/Calls/JoinCallButton.js
index 3cc8a82ed..eb5aa8e48 100644
--- a/src/components/Calls/JoinCallButton.js
+++ b/src/components/Calls/JoinCallButton.js
@@ -6,31 +6,27 @@ 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 { createClassName } from '../helpers';
import styles from './styles.scss';
export const JoinCallButton = (props) => {
const { token, room } = store.state;
- const clickJoinCall = async () => {
- const { alerts } = store.state;
+
+ const clickJoinCall = () => {
switch (props.callProvider) {
case constants.jitsiCallStartedMessageType: {
window.open(props.url);
break;
}
case constants.webrtcCallStartedMessageType: {
- window.open(`${ Livechat.client.host }/meet/${ room._id }?token=${ token }`);
+ window.open(`${ Livechat.client.host }/meet/${ room._id }?token=${ token }`, room._id);
break;
}
- default: {
- const alert = { id: createToken(), children: I18n.t('Call already ended'), timeout: 5000 };
- await store.setState({ alerts: (alerts.push(alert), alerts) });
- }
}
};
return (
- { props.callStatus === 'accept'
+ { props.callStatus === 'accept' || props.callStatus === 'ongoingCallInNewTab'
?
diff --git a/src/components/helpers.js b/src/components/helpers.js
index 0ec5ed373..2192b2a16 100644
--- a/src/components/helpers.js
+++ b/src/components/helpers.js
@@ -157,6 +157,14 @@ export const parseOfflineMessage = (fields = {}) => {
export const normalizeDOMRect = ({ left, top, right, bottom }) => ({ left, top, right, bottom });
+export const isMobileDevice = () => {
+ if (window.innerWidth <= 800 && window.innerHeight >= 630) {
+ return true;
+ }
+ return false;
+};
+
+
export const visibility = (() => {
if (typeof document.hidden !== 'undefined') {
return {
diff --git a/src/lib/room.js b/src/lib/room.js
index 58bdb8e48..6be7a2f40 100644
--- a/src/lib/room.js
+++ b/src/lib/room.js
@@ -50,13 +50,13 @@ export const processCallMessage = async (message) => {
};
const processMessage = async (message) => {
- const { incomingCallAlert, ongoingCall } = store.state;
+ const { incomingCallAlert } = store.state;
if (message.t === 'livechat-close') {
closeChat(message);
} else if (message.t === 'command') {
commands[message.msg] && commands[message.msg]();
- } else if (message.endTs && ((ongoingCall && ongoingCall.callStatus === 'declined') || incomingCallAlert)) {
+ } else if (message.endTs) {
await store.setState({ ongoingCall: { callStatus: 'ended', time: message.ts }, incomingCallAlert: null });
} else if (!incomingCallAlert && (message.t === constants.webrtcCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType)) {
await processCallMessage(message);
@@ -185,11 +185,13 @@ Livechat.onMessage(async (message) => {
});
export const getGreetingMessages = (messages) => messages && messages.filter((msg) => msg.trigger);
+export const getLatestCallMessage = (messages) => messages && messages.filter((msg) => msg.t === 'livechat_webrtc_video_call' || msg.t === 'livechat_video_call').pop();
export const loadMessages = async () => {
- const { messages: storedMessages, room: { _id: rid } = {} } = store.state;
- const previousMessages = getGreetingMessages(storedMessages);
+ const { ongoingCall } = store.state;
+ const { messages: storedMessages, room: { _id: rid, callStatus } = {} } = store.state;
+ const previousMessages = getGreetingMessages(storedMessages);
if (!rid) {
return;
}
@@ -204,14 +206,20 @@ export const loadMessages = async () => {
if (messages && messages.length) {
const lastMessage = messages[messages.length - 1];
await store.setState({ lastReadMessageId: lastMessage && lastMessage._id });
+ }
+
+ if (ongoingCall && (ongoingCall.callStatus === 'accept' || ongoingCall.callStatus === 'ongoingCallInNewTab')) {
+ return;
+ }
- if (lastMessage.t === constants.webrtcCallStartedMessageType || lastMessage.t === constants.jitsiCallStartedMessageType) {
- if (lastMessage.endTs) {
- await store.setState({ ongoingCall: { callStatus: 'ended', time: lastMessage.ts }, incomingCallAlert: null });
- return;
- }
- await processCallMessage(lastMessage);
+ const latestCallMessage = getLatestCallMessage(messages);
+ if (callStatus === 'inProgress') {
+ if (!latestCallMessage) {
+ return;
}
+ store.setState({ ongoingCall: { callStatus: 'ongoingCallInNewTab', time: latestCallMessage.ts }, incomingCallAlert: { show: false, callProvider: latestCallMessage.t } });
+ } else if (callStatus === 'ringing') {
+ processCallMessage(latestCallMessage);
}
};