From d31a1b5fff0cde07c3444919c73ebec52a667688 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 20 Aug 2020 10:26:28 +0200
Subject: [PATCH] render display name in timeline

---
 .../room/timeline/tiles/MessageTile.js        |  2 +-
 .../room/timeline/tiles/RoomMemberTile.js     | 23 ++++++++++---------
 .../room/timeline/entries/EventEntry.js       |  8 +++++++
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/MessageTile.js b/src/domain/session/room/timeline/tiles/MessageTile.js
index 8ad0b22e..550764c7 100644
--- a/src/domain/session/room/timeline/tiles/MessageTile.js
+++ b/src/domain/session/room/timeline/tiles/MessageTile.js
@@ -31,7 +31,7 @@ export class MessageTile extends SimpleTile {
     }
 
     get sender() {
-        return this._entry.sender;
+        return this._entry.displayName || this._entry.sender;
     }
 
     get senderColorNumber() {
diff --git a/src/domain/session/room/timeline/tiles/RoomMemberTile.js b/src/domain/session/room/timeline/tiles/RoomMemberTile.js
index 0abc0766..f1f790e2 100644
--- a/src/domain/session/room/timeline/tiles/RoomMemberTile.js
+++ b/src/domain/session/room/timeline/tiles/RoomMemberTile.js
@@ -23,35 +23,36 @@ export class RoomMemberTile extends SimpleTile {
     }
 
     get announcement() {
-        const {sender, content, prevContent, stateKey} = this._entry;
+        const {sender, content, prevContent} = this._entry;
+        const name = this._entry.displayName || sender;
         const membership = content && content.membership;
         const prevMembership = prevContent && prevContent.membership;
 
         if (prevMembership === "join" && membership === "join") {
             if (content.avatar_url !== prevContent.avatar_url) {
-                return `${stateKey} changed their avatar`; 
+                return `${name} changed their avatar`; 
             } else if (content.displayname !== prevContent.displayname) {
-                return `${stateKey} changed their name to ${content.displayname}`; 
+                return `${name} changed their name to ${content.displayname}`; 
             }
         } else if (membership === "join") {
-            return `${stateKey} joined the room`;
+            return `${name} joined the room`;
         } else if (membership === "invite") {
-            return `${stateKey} was invited to the room by ${sender}`;
+            return `${name} was invited to the room by ${sender}`;
         } else if (prevMembership === "invite") {
             if (membership === "join") {
-                return `${stateKey} accepted the invitation to join the room`;
+                return `${name} accepted the invitation to join the room`;
             } else if (membership === "leave") {
-                return `${stateKey} declined the invitation to join the room`;
+                return `${name} declined the invitation to join the room`;
             }
         } else if (membership === "leave") {
-            if (stateKey === sender) {
-                return `${stateKey} left the room`;
+            if (name === sender) {
+                return `${name} left the room`;
             } else {
                 const reason = content.reason;
-                return `${stateKey} was kicked from the room by ${sender}${reason ? `: ${reason}` : ""}`;
+                return `${name} was kicked from the room by ${sender}${reason ? `: ${reason}` : ""}`;
             }
         } else if (membership === "ban") {
-            return `${stateKey} was banned from the room by ${sender}`;
+            return `${name} was banned from the room by ${sender}`;
         }
         
         return `${sender} membership changed to ${content.membership}`;
diff --git a/src/matrix/room/timeline/entries/EventEntry.js b/src/matrix/room/timeline/entries/EventEntry.js
index ead383fa..d1d5b64c 100644
--- a/src/matrix/room/timeline/entries/EventEntry.js
+++ b/src/matrix/room/timeline/entries/EventEntry.js
@@ -50,6 +50,14 @@ export class EventEntry extends BaseEntry {
         return this._eventEntry.event.sender;
     }
 
+    get displayName() {
+        return this._eventEntry.displayName;
+    }
+
+    get avatarUrl() {
+        return this._eventEntry.avatarUrl;
+    }
+
     get timestamp() {
         return this._eventEntry.event.origin_server_ts;
     }