From 2150c96dfc77e1c7b1ed73ba9ad396e1c91dd210 Mon Sep 17 00:00:00 2001 From: murtaza98 Date: Mon, 20 Sep 2021 21:18:26 +0530 Subject: [PATCH] Improve overall codebase - Define an enum like structure for call statuses - Fix formatting and spelling issues - General refactoring --- src/components/Calls/CallIFrame.js | 3 +- src/components/Calls/CallNotification.js | 49 ++++++++------- src/components/Calls/JoinCallButton.js | 30 +++++---- src/components/Calls/constants.js | 8 +++ src/components/Messages/MessageList/index.js | 2 +- src/components/helpers.js | 11 +--- src/lib/constants.js | 2 +- src/lib/room.js | 64 +++++++++++--------- src/routes/Chat/component.js | 3 +- 9 files changed, 97 insertions(+), 75 deletions(-) create mode 100644 src/components/Calls/constants.js diff --git a/src/components/Calls/CallIFrame.js b/src/components/Calls/CallIFrame.js index bc68c0ed0..cf0f244bb 100644 --- a/src/components/Calls/CallIFrame.js +++ b/src/components/Calls/CallIFrame.js @@ -3,6 +3,7 @@ import { h } from 'preact'; import { Livechat } from '../../api'; import store from '../../store'; import { createClassName } from '../helpers'; +import { CallStatus } from './constants'; import styles from './styles.scss'; @@ -17,7 +18,7 @@ export const CallIframe = () => { ); return store.setState({ incomingCallAlert: { ...incomingCallAlert, show: false }, - ongoingCall: { ...ongoingCall, callStatus: 'ongoingCallInNewTab' }, + ongoingCall: { ...ongoingCall, callStatus: CallStatus.ON_GOING_CALL_IN_NEW_TAB }, }); }; return ( diff --git a/src/components/Calls/CallNotification.js b/src/components/Calls/CallNotification.js index 05dd26abf..79d90d2d4 100644 --- a/src/components/Calls/CallNotification.js +++ b/src/components/Calls/CallNotification.js @@ -10,6 +10,7 @@ import store from '../../store'; import { Avatar } from '../Avatar'; import { Button } from '../Button'; import { createClassName, getAvatarUrl, isMobileDevice } from '../helpers'; +import { CallStatus } from './constants'; import styles from './styles.scss'; @@ -17,9 +18,9 @@ export const CallNotification = ({ callProvider, callerUsername, url, dispatch, 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 } }); + const { token } = store.state; + const url = `${ Livechat.client.host }/meet/${ rid }?token=${ token }`; + await dispatch({ ongoingCall: { callStatus: CallStatus.ON_GOING_CALL_IN_NEW_TAB, time: { time } }, incomingCallAlert: { show: false, callProvider } }); window.open(url, rid); }; @@ -28,16 +29,16 @@ export const CallNotification = ({ callProvider, callerUsername, url, dispatch, switch (callProvider) { case constants.jitsiCallStartedMessageType: { window.open(url, rid); - await dispatch({ incomingCallAlert: { show: false, url, callProvider }, ongoingCall: { callStatus: 'accept', time: { time } } }); + await dispatch({ incomingCallAlert: { show: false, url, callProvider }, ongoingCall: { callStatus: CallStatus.ACCEPT, time: { time } } }); break; } case constants.webrtcCallStartedMessageType: { - await Livechat.updateCallStatus('inProgress', rid, callId); + await Livechat.updateCallStatus(CallStatus.INPROGRESS, rid, callId); if (isMobileDevice()) { callInNewTab(); break; } - await dispatch({ ongoingCall: { callStatus: 'accept', time: { time } } }); + await dispatch({ ongoingCall: { callStatus: CallStatus.ACCEPT, time: { time } } }); break; } } @@ -46,34 +47,36 @@ export const CallNotification = ({ callProvider, callerUsername, url, dispatch, const declineClick = async () => { await Livechat.updateCallStatus('declined', rid, callId); await Livechat.notifyCallDeclined(rid); - await dispatch({ incomingCallAlert: null, ongoingCall: { callStatus: 'declined', time: { time } } }); + await dispatch({ incomingCallAlert: null, ongoingCall: { callStatus: CallStatus.DECLINED, time: { time } } }); }; return (
- { show - ? ( -
-
- + { + show && ( +
+
+
-
+
{ I18n.t('Incoming video Call') }
-
- -
) - : null } -
); +
+ ); }; diff --git a/src/components/Calls/JoinCallButton.js b/src/components/Calls/JoinCallButton.js index 8afad1bf2..e8479f8c7 100644 --- a/src/components/Calls/JoinCallButton.js +++ b/src/components/Calls/JoinCallButton.js @@ -7,6 +7,7 @@ import constants from '../../lib/constants'; import store from '../../store'; import { Button } from '../Button'; import { createClassName } from '../helpers'; +import { CallStatus } from './constants'; import styles from './styles.scss'; @@ -19,22 +20,29 @@ export const JoinCallButton = (props) => { window.open(props.url, room._id); break; } - case constants.webrtcCallStartedMessageType: { + case constants.webRTCCallStartedMessageType: { window.open(`${ Livechat.client.host }/meet/${ room._id }?token=${ token }`, room._id); break; } } }; - return (
- { props.callStatus === 'accept' || props.callStatus === 'ongoingCallInNewTab' - ?
-
-
- + return ( +
+ { + (props.callStatus === CallStatus.ACCEPT || props.callStatus === CallStatus.ON_GOING_CALL_IN_NEW_TAB) + && ( +
+
+ +
+ { I18n.t('Join my room to start the video call') } +
- {I18n.t('Join my room to start the video call')} -
- -
: null }
+ ) + } +
); }; diff --git a/src/components/Calls/constants.js b/src/components/Calls/constants.js new file mode 100644 index 000000000..b3bd258b6 --- /dev/null +++ b/src/components/Calls/constants.js @@ -0,0 +1,8 @@ +export const CallStatus = { + ACCEPT: 'accept', + DECLINED: 'declined', + RINGING: 'ringing', + INPROGRESS: 'inProgress', + ON_GOING_CALL_IN_NEW_TAB: 'ongoingCallInNewTab', + ENDED: 'ended', +}; diff --git a/src/components/Messages/MessageList/index.js b/src/components/Messages/MessageList/index.js index c1c151427..bbff2a98d 100644 --- a/src/components/Messages/MessageList/index.js +++ b/src/components/Messages/MessageList/index.js @@ -117,7 +117,7 @@ export class MessageList extends MemoizedComponent { const { incomingCallAlert } = store.state; const { ongoingCall } = store.state; - if ((message.t === constants.webrtcCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType) && message.actionLinks && message.actionLinks.length > 0 && ongoingCall) { + if ((message.t === constants.webRTCCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType) && message.actionLinks && message.actionLinks.length && ongoingCall) { const { url, callProvider, rid } = incomingCallAlert || {}; items.push( , diff --git a/src/components/helpers.js b/src/components/helpers.js index c6a4eefd4..cef3b6b70 100644 --- a/src/components/helpers.js +++ b/src/components/helpers.js @@ -174,15 +174,6 @@ 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 { @@ -253,3 +244,5 @@ export const isActiveSession = () => { return sessionId === firstSessionId; }; + +export const isMobileDevice = () => window.innerWidth <= 800 && window.innerHeight >= 630; diff --git a/src/lib/constants.js b/src/lib/constants.js index bfa55307a..717175546 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -4,6 +4,6 @@ export default { livechatConnectedAlertId: 'LIVECHAT_CONNECTED', livechatDisconnectedAlertId: 'LIVECHAT_DISCONNECTED', livechatQueueMessageId: 'LIVECHAT_QUEUE_MESSAGE', - webrtcCallStartedMessageType: 'livechat_webrtc_video_call', + webRTCCallStartedMessageType: 'livechat_webrtc_video_call', jitsiCallStartedMessageType: 'jitsi_call_started', }; diff --git a/src/lib/room.js b/src/lib/room.js index 9b38c418c..ca78e2e1b 100644 --- a/src/lib/room.js +++ b/src/lib/room.js @@ -1,6 +1,7 @@ import { route } from 'preact-router'; import { Livechat } from '../api'; +import { CallStatus } from '../components/Calls/constants'; import { setCookies, upsert, canRenderMessage, createToken } from '../components/helpers'; import I18n from '../i18n'; import { store } from '../store'; @@ -26,23 +27,24 @@ export const closeChat = async ({ transcriptRequested } = {}) => { }; // TODO: use a separate event to listen to call start event. Listening on the message type isn't a good solution -export const processCallMessage = async (message) => { +export const processIncomingCallMessage = async (message) => { const { alerts } = store.state; try { - await store.setState({ incomingCallAlert: { - show: true, - callProvider: message.t, - callerUsername: message.u.username, - rid: message.rid, - time: message.ts, - callId: message._id, - url: message.t === constants.jitsiCallStartedMessageType ? message.customFields.jitsiCallUrl : '', - }, - ongoingCall: { - callStatus: 'ring', - time: message.ts, - } }, - ); + await store.setState({ + incomingCallAlert: { + show: true, + callProvider: message.t, + callerUsername: message.u.username, + rid: message.rid, + time: message.ts, + callId: message._id, + url: message.t === constants.jitsiCallStartedMessageType ? message.customFields.jitsiCallUrl : '', + }, + ongoingCall: { + callStatus: CallStatus.RINGING, + time: message.ts, + }, + }); } catch (err) { console.error(err); const alert = { id: createToken(), children: I18n.t('error_getting_call_alert'), error: true, timeout: 5000 }; @@ -56,9 +58,9 @@ const processMessage = async (message) => { } else if (message.t === 'command') { commands[message.msg] && commands[message.msg](); } else if (message.endTs) { - await store.setState({ ongoingCall: { callStatus: 'ended', time: message.ts }, incomingCallAlert: null }); - } else if (message.t === constants.webrtcCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType) { - await processCallMessage(message); + await store.setState({ ongoingCall: { callStatus: CallStatus.ENDED, time: message.ts }, incomingCallAlert: null }); + } else if (message.t === constants.webRTCCallStartedMessageType || message.t === constants.jitsiCallStartedMessageType) { + await processIncomingCallMessage(message); } }; @@ -184,7 +186,7 @@ Livechat.onMessage(async (message) => { }); export const getGreetingMessages = (messages) => messages && messages.filter((msg) => msg.trigger); -export const getLatestCallMessage = (messages) => messages && messages.filter((msg) => msg.t === constants.webrtcCallStartedMessageType || msg.t === constants.jitsiCallStartedMessageType).pop(); +export const getLatestCallMessage = (messages) => messages && messages.filter((msg) => msg.t === constants.webRTCCallStartedMessageType || msg.t === constants.jitsiCallStartedMessageType).pop(); export const loadMessages = async () => { const { ongoingCall } = store.state; @@ -207,20 +209,26 @@ export const loadMessages = async () => { await store.setState({ lastReadMessageId: lastMessage && lastMessage._id }); } - if (ongoingCall && (ongoingCall.callStatus === 'accept' || ongoingCall.callStatus === 'ongoingCallInNewTab')) { + if (ongoingCall && (ongoingCall.callStatus === CallStatus.ACCEPT || ongoingCall.callStatus === CallStatus.ON_GOING_CALL_IN_NEW_TAB)) { return; } const latestCallMessage = getLatestCallMessage(messages); - if (latestCallMessage && latestCallMessage.t === constants.jitsiCallStartedMessageType) { - store.setState({ ongoingCall: { callStatus: 'ongoingCallInNewTab', time: latestCallMessage.ts }, incomingCallAlert: { show: false, callProvider: latestCallMessage.t, url: latestCallMessage.customFields.jitsiCallUrl } }); - } else if (callStatus === 'inProgress') { - if (!latestCallMessage) { - return; + if (!latestCallMessage) { + return; + } + if (latestCallMessage.t === constants.jitsiCallStartedMessageType) { + await store.setState({ ongoingCall: { callStatus: CallStatus.ON_GOING_CALL_IN_NEW_TAB, time: latestCallMessage.ts }, incomingCallAlert: { show: false, callProvider: latestCallMessage.t, url: latestCallMessage.customFields.jitsiCallUrl } }); + return; + } + switch (callStatus) { + case CallStatus.INPROGRESS: { + await store.setState({ ongoingCall: { callStatus: CallStatus.ON_GOING_CALL_IN_NEW_TAB, time: latestCallMessage.ts }, incomingCallAlert: { show: false, callProvider: latestCallMessage.t } }); + break; + } + case CallStatus.RINGING: { + processIncomingCallMessage(latestCallMessage); } - store.setState({ ongoingCall: { callStatus: 'ongoingCallInNewTab', time: latestCallMessage.ts }, incomingCallAlert: { show: false, callProvider: latestCallMessage.t } }); - } else if (callStatus === 'ringing') { - processCallMessage(latestCallMessage); } }; diff --git a/src/routes/Chat/component.js b/src/routes/Chat/component.js index 6be5cfa6b..2088bcd8f 100644 --- a/src/routes/Chat/component.js +++ b/src/routes/Chat/component.js @@ -4,6 +4,7 @@ import { h, Component } from 'preact'; import { Button } from '../../components/Button'; import { CallIframe } from '../../components/Calls/CallIFrame'; import { CallNotification } from '../../components/Calls/CallNotification'; +import { CallStatus } from '../../components/Calls/constants'; import { Composer, ComposerAction, ComposerActions } from '../../components/Composer'; import { FilesDropTarget } from '../../components/FilesDropTarget'; import { FooterOptions, CharCounter } from '../../components/Footer'; @@ -150,7 +151,7 @@ export default class Chat extends Component { > { incomingCallAlert && !!incomingCallAlert.show && } - { incomingCallAlert?.show && ongoingCall && ongoingCall.callStatus === 'accept' ? : null } + { incomingCallAlert?.show && ongoingCall && ongoingCall.callStatus === CallStatus.ACCEPT ? : null }