render display name in timeline

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() {

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}`;

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;
     }