Show proper user data in room list

src/js/room-picker.js

@@ -107,7 +107,22 @@ class Room extends ElemJS {
 		// if the room has no alias, use the names of its members ("heroes")
 		const users = this.data.summary["m.heroes"]
 		if (users && users.length) {
-			const usernames = users.map(u => (u.match(/^@([^:]+):/) || [])[1] || u)
+			const usernames = users.map(u => {
+				// if the member is in the room, use their display name
+				if (this.members.has(u)) {
+					const displayname = this.members.get(u).value().content.displayname
+					if (displayname) {
+						return displayname
+					}
+				}
+				// we don't have the member, so extract the localpart from the mxid
+				const match = u.match(/^@([^:]+):/)
+				if (match) {
+					return match[1]
+				}
+				// localpart extraction failed, use the whole mxid
+				return u
+			})
 			return usernames.join(", ")
 		}
 		// the room is empty
@@ -115,6 +130,7 @@ class Room extends ElemJS {
 	}
 
 	getIcon() {
+		// if the room has a normal avatar
 		const avatar = this.data.state.events.find(e => e.type === "m.room.avatar")
 		if (avatar) {
 			const url = avatar.content.url || avatar.content.avatar_url
@@ -122,6 +138,15 @@ class Room extends ElemJS {
 				return resolveMxc(url, 32, "crop")
 			}
 		}
+		// if the room has no avatar set, use a member's avatar
+		const users = this.data.summary["m.heroes"]
+		if (users && users[0] && this.members.has(users[0])) {
+			// console.log(users[0], this.members.get(users[0]))
+			const userAvatar = this.members.get(users[0]).value().content.avatar_url
+			if (userAvatar) {
+				return resolveMxc(userAvatar, 32, "crop")
+			}
+		}
 		return null
 	}