Add user icon in call pending interface
This CR adds a user "icon" (the first letter of its registered name) in the Calling/Receiving interface. It also adds the registered names of the other person in a call within the Call Interface.
GitLab: #141
GitLab: #175
Change-Id: I4d77b0125a192c658187ac1c1bf57427158b85db
diff --git a/client/src/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index f2bd7d6..23cbd50 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -26,6 +26,7 @@
CallingCancelButton,
CallingRefuseButton,
} from '../components/CallButtons';
+import ConversationAvatar from '../components/ConversationAvatar';
import { ConversationContext } from '../contexts/ConversationProvider';
export type CallPendingProps = {
@@ -39,6 +40,8 @@
type CommunicationMedium = 'audio' | 'video';
export const CallPending = (props: CallPendingProps) => {
+ const { conversation } = useContext(ConversationContext);
+
return (
<Stack
direction="column"
@@ -78,17 +81,12 @@
zIndex: 1,
}}
/>
- <img
- // TODO: Insert incoming caller icon here
+ <ConversationAvatar
alt="contact profile picture"
+ displayName={conversation.getDisplayNameNoFallback()}
style={{
- position: 'absolute',
- objectFit: 'cover',
width: '100%',
height: '100%',
- maxWidth: '100%',
- borderRadius: '50%',
- aspectRatio: '1',
}}
/>
</Box>