[NEW] WebRTC-call in new tab for mobile devices

src/components/Calls/CallIFrame.js

@@ -9,6 +9,7 @@ import styles from './styles.scss';
 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')} allow='camera;microphone' src={url} />

src/components/Calls/CallNotification.js

@@ -6,24 +6,37 @@ 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 } = { 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);
+	};
+
 	const acceptClick = async () => {
 		setShow(!{ show });
 		await Livechat.updateCallStatus('inProgress', rid);
+
 		switch (callProvider) {
 			case constants.jitsiCallStartedMessageType: {
 				window.open(url);
 				break;
 			}
 			case constants.webrtcCallStartedMessageType: {
+				if (isMobileDevice()) {
+					callInNewTab();
+					break;
+				}
 				await dispatch({ ongoingCall: { callStatus: 'accept', time: { time } } });
 				break;
 			}

src/components/Calls/JoinCallButton.js

@@ -6,14 +6,14 @@ 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);
@@ -23,14 +23,10 @@ export const JoinCallButton = (props) => {
 				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'
+		{ props.callStatus === 'accept' || props.callStatus === 'ongoingCallInNewTab'
 			? <div className={createClassName(styles, 'joinCall')}>
 				<div className={createClassName(styles, 'joinCall__content')} >
 					<div className={createClassName(styles, 'joinCall__content-videoIcon')} >

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 {

src/lib/room.js

@@ -1,7 +1,7 @@
 import { route } from 'preact-router';
 
 import { Livechat } from '../api';
-import { setCookies, upsert, canRenderMessage, createToken } from '../components/helpers';
+import { setCookies, upsert, canRenderMessage, createToken, isMobileDevice } from '../components/helpers';
 import I18n from '../i18n';
 import { store } from '../store';
 import { normalizeAgent } from './api';
@@ -55,7 +55,7 @@ const processMessage = async (message) => {
 		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 || (ongoingCall && ongoingCall.callStatus === 'declined')) {
 		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);
@@ -201,16 +201,18 @@ export const loadMessages = async () => {
 	await store.setState({ messages: (messages || []).reverse(), noMoreMessages: false, loading: false });
 
 	if (messages && messages.length) {
-		const lastMessage = messages[messages.length - 1];
-		await store.setState({ lastReadMessageId: lastMessage && lastMessage._id });
-
-		if (lastMessage.t === constants.webrtcCallStartedMessageType || lastMessage.t === constants.jitsiCallStartedMessageType) {
-			if (lastMessage.endTs) {
-				await store.setState({ ongoingCall: { callStatus: 'ended', time: lastMessage.ts }, incomingCallAlert: null });
-				return;
+		for (let i = 0; i < messages.length; ++i) {
+			const message = messages[i];
+			if (message.actionLinks && message.actionLinks.length === 2) {
+				if (isMobileDevice()) {
+					store.setState({ ongoingCall: { callStatus: 'ongoingCallInNewTab', time: message.ts }, incomingCallAlert: { show: false, callProvider: message.t } });
+					return;
+				}
+				processCallMessage(message);
 			}
-			await processCallMessage(lastMessage);
 		}
+		const lastMessage = messages[messages.length - 1];
+		await store.setState({ lastReadMessageId: lastMessage && lastMessage._id });
 	}
 };