From a45f5f520abf8a11cbc3edfdd203c9dd80029f92 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 28 Oct 2021 13:36:01 +1100
Subject: [PATCH] incoming call dialog show avatar + caller name

---
 _locales/en/messages.json                       |  2 +-
 .../session/calling/IncomingCallDialog.tsx      | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index f69e75b90..7762475d7 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -435,7 +435,7 @@
   "notificationSubtitle": "Notifications - $setting$",
   "surveyTitle": "Take our Session Survey",
   "goToOurSurvey": "Go to our survey",
-  "incomingCall": "Incoming call",
+  "incomingCallFrom": "Incoming call from '$name$'",
   "accept": "Accept",
   "decline": "Decline",
   "endCall": "End call",
diff --git a/ts/components/session/calling/IncomingCallDialog.tsx b/ts/components/session/calling/IncomingCallDialog.tsx
index 365c8c9cd..315c2b47f 100644
--- a/ts/components/session/calling/IncomingCallDialog.tsx
+++ b/ts/components/session/calling/IncomingCallDialog.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import _ from 'underscore';
 import { CallManager } from '../../../session/utils';
 import { getHasIncomingCall, getHasIncomingCallFrom } from '../../../state/selectors/conversations';
+import { Avatar, AvatarSize } from '../../Avatar';
 import { SessionButton, SessionButtonColor } from '../SessionButton';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 
@@ -21,6 +22,10 @@ export const CallWindow = styled.div`
   border: var(--session-border);
 `;
 
+const IncomingCallAvatatContainer = styled.div`
+  padding: 0 0 2rem 0;
+`;
+
 // TODO:
 /**
  * Add mute input, deafen, end call, possibly add person to call
@@ -48,9 +53,19 @@ export const IncomingCallDialog = () => {
     return null;
   }
 
+  const from = incomingCallProps?.profileName || incomingCallProps?.name || incomingCallProps?.id;
+
   if (hasIncomingCall) {
     return (
-      <SessionWrapperModal title={window.i18n('incomingCall')}>
+      <SessionWrapperModal title={window.i18n('incomingCallFrom', from)}>
+        <IncomingCallAvatatContainer>
+          <Avatar
+            size={AvatarSize.XL}
+            avatarPath={incomingCallProps?.avatarPath}
+            name={incomingCallProps?.profileName}
+            pubkey={incomingCallProps?.id}
+          />
+        </IncomingCallAvatatContainer>
         <div className="session-modal__button-group">
           <SessionButton text={window.i18n('decline')} onClick={handleDeclineIncomingCall} />
           <SessionButton