Add small UX improvements to call
- Notification saying you have missed a call if you are already in a call
- Indication about the call in the conversation list item
GitLab: #197
GitLab: #173
Change-Id: Ibe4ff0d9f3ffd95cd0d83afd2041c5fad513a7e0
diff --git a/client/src/contexts/CallManagerProvider.tsx b/client/src/contexts/CallManagerProvider.tsx
index 7d8d843..c04010f 100644
--- a/client/src/contexts/CallManagerProvider.tsx
+++ b/client/src/contexts/CallManagerProvider.tsx
@@ -17,8 +17,10 @@
*/
import { CallBegin, WebSocketMessageType } from 'jami-web-common';
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
+import { AlertSnackbar } from '../components/AlertSnackbar';
import { RemoteVideoOverlay } from '../components/VideoOverlay';
import { useUrlParams } from '../hooks/useUrlParams';
import { Conversation } from '../models/conversation';
@@ -60,6 +62,8 @@
const navigate = useNavigate();
const { conversation } = useConversationQuery(callData?.conversationId);
const { urlParams } = useUrlParams<ConversationRouteParams>();
+ const [missedCallConversationId, setMissedCallConversationId] = useState<string>();
+ const { t } = useTranslation();
const failStartCall = useCallback(() => {
throw new Error('Cannot start call: Already in a call');
@@ -77,16 +81,18 @@
}, [callData]);
useEffect(() => {
- if (callData) {
- // TODO: Currently, we simply do not bind the CallBegin listener if already in a call.
- // In the future, we should handle receiving a call while already in another.
- return;
- }
if (!webSocket) {
return;
}
const callBeginListener = ({ conversationId, withVideoOn }: CallBegin) => {
+ if (callData) {
+ // TODO: Currently, we display a notification if already in a call.
+ // In the future, we should handle receiving a call while already in another.
+ setMissedCallConversationId(conversationId);
+ return;
+ }
+
startCall({ conversationId: conversationId, role: 'receiver', withVideoOn });
navigate(`/conversation/${conversationId}`);
};
@@ -109,15 +115,24 @@
);
return (
- <CallManagerContext.Provider value={value}>
- <WebRtcProvider>
- <CallProvider>
- {callData && callData.conversationId !== urlParams.conversationId && (
- <RemoteVideoOverlay callConversationId={callData.conversationId} />
- )}
- {children}
- </CallProvider>
- </WebRtcProvider>
- </CallManagerContext.Provider>
+ <>
+ <AlertSnackbar
+ severity={'info'}
+ open={missedCallConversationId !== undefined}
+ onClose={() => setMissedCallConversationId(undefined)}
+ >
+ {t('missed_incoming_call', { conversationId: missedCallConversationId })}
+ </AlertSnackbar>
+ <CallManagerContext.Provider value={value}>
+ <WebRtcProvider>
+ <CallProvider>
+ {callData && callData.conversationId !== urlParams.conversationId && (
+ <RemoteVideoOverlay callConversationId={callData.conversationId} />
+ )}
+ {children}
+ </CallProvider>
+ </WebRtcProvider>
+ </CallManagerContext.Provider>
+ </>
);
};