[NEW] WebRTC-call in new tab for mobile devices (#629)

* open webrtc call in new tab for mobile devices * improve codebase * add helper function * update one file * checking call status from room object * update one file * handle refresh case * change message filter condition Co-authored-by: Murtaza Patrawala <34130764+murtaza98@users.noreply.github.com>
RocketChat · Nov 16, 2021 · 5820ea5 · 5820ea5
1 parent 853399d
commit 5820ea5
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git 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
@@ -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 (<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')} >

diff --git a/src/components/helpers.js b/src/components/helpers.js
@@ -175,6 +175,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
@@ -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);
 	}
 };