From 5820ea5bf86fdaec6fcba82d16c70fb51a5f38ac Mon Sep 17 00:00:00 2001 From: Deepak Agarwal Date: Thu, 19 Aug 2021 21:30:47 +0530 Subject: [PATCH] [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> --- src/components/Calls/CallNotification.js | 14 +++++++++++- src/components/Calls/JoinCallButton.js | 14 +++++------- src/components/helpers.js | 8 +++++++ src/lib/room.js | 28 +++++++++++++++--------- 4 files changed, 44 insertions(+), 20 deletions(-) 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 357147854..c6a4eefd4 100644 --- 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 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); } };