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/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index 3f5dad3..e4be263 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -24,6 +24,7 @@
import { useAuthContext } from '../contexts/AuthProvider';
import { CallManagerContext } from '../contexts/CallManagerProvider';
+import { CallStatus, useCallContext } from '../contexts/CallProvider';
import { useConversationContext } from '../contexts/ConversationProvider';
import { MessengerContext } from '../contexts/MessengerProvider';
import { Conversation } from '../models/conversation';
@@ -52,6 +53,9 @@
const conversationId = conversationContext?.conversationId;
const contextMenuHandler = useContextMenuHandler();
const { newContactId, setNewContactId } = useContext(MessengerContext);
+ const callContext = useCallContext(true);
+ const { callData } = useContext(CallManagerContext);
+ const { t } = useTranslation();
const pathId = conversationId ?? newContactId;
const isSelected = conversation.getDisplayUri() === pathId;
@@ -68,6 +72,28 @@
}
}, [navigate, conversation, userId, setNewContactId]);
+ const getSecondaryText = () => {
+ const propsConversationId = conversation.id;
+
+ if (!propsConversationId) {
+ return '';
+ }
+
+ if (!callContext || !callData || callData.conversationId !== propsConversationId) {
+ return conversation.getDisplayUri();
+ }
+
+ if (callContext.callStatus === CallStatus.InCall) {
+ return callContext.isAudioOn ? t('ongoing_call_unmuted') : t('ongoing_call_muted');
+ }
+
+ if (callContext.callStatus === CallStatus.Connecting) {
+ return t('connecting_call');
+ }
+
+ return callContext.callRole === 'caller' ? t('outgoing_call') : t('incoming_call');
+ };
+
return (
<Box onContextMenu={contextMenuHandler.handleAnchorPosition}>
<ConversationMenu
@@ -81,7 +107,7 @@
<ListItemAvatar>
<ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
</ListItemAvatar>
- <ListItemText primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
+ <ListItemText primary={conversation.getDisplayName()} secondary={getSecondaryText()} />
</ListItem>
</Box>
);