Refresh room & member avatars when a roommember.name event comes in

src/controllers/atoms/MemberAvatar.js

@@ -35,6 +35,10 @@ module.exports = {
         }
     },
 
+    componentWillReceiveProps: function(nextProps) {
+        this.refreshUrl();
+    },
+
     defaultAvatarUrl: function(member, width, height, resizeMethod) {
         if (this.skinnedDefaultAvatarUrl) {
             return this.skinnedDefaultAvatarUrl(member, width, height, resizeMethod);
@@ -52,7 +56,7 @@ module.exports = {
         });
     },
 
-    getInitialState: function() {
+    _computeUrl: function() {
         var url = this.props.member.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
             this.props.width,
@@ -68,8 +72,20 @@ module.exports = {
                 this.props.resizeMethod
             );
         }
+        return url;
+    },
+
+    refreshUrl: function() {
+        var newUrl = this._computeUrl();
+        if (newUrl != this.currentUrl) {
+            this.currentUrl = newUrl;
+            this.setState({imageUrl: newUrl});
+        }
+    },
+
+    getInitialState: function() {
         return {
-            imageUrl: url
+            imageUrl: this._computeUrl()
         };
     }
 };

src/controllers/atoms/RoomAvatar.js

@@ -41,10 +41,29 @@ module.exports = {
     },
 
     componentWillReceiveProps: function(nextProps) {
-        this._update();
-        this.setState({
-            imageUrl: this._nextUrl()
-        });
+        this.refreshImageUrl();
+    },
+
+    refreshImageUrl: function(nextProps) {
+        // If the list has changed, we start from scratch and re-check, but
+        // don't do so unless the list has changed or we'd re-try fetching
+        // images each time we re-rendered
+        var newList = this.getUrlList();
+        var differs = false;
+        for (var i = 0; i < newList.length && i < this.urlList.length; ++i) {
+            if (this.urlList[i] != newList[i]) differs = true;
+        }
+        if (this.urlList.length != newList.length) differs = true;
+
+        if (differs) {
+            console.log("list differs");
+            this._update();
+            this.setState({
+                imageUrl: this._nextUrl()
+            });
+        } else {
+            console.log("list is the same");
+        }
     },
 
     _update: function() {

src/controllers/organisms/MemberList.js

@@ -38,6 +38,7 @@ module.exports = {
     componentWillMount: function() {
         var cli = MatrixClientPeg.get();
         cli.on("RoomState.members", this.onRoomStateMember);
+        cli.on("RoomMember.name", this.onRoomMemberName);
         cli.on("Room", this.onRoom); // invites
     },
 
@@ -97,6 +98,10 @@ module.exports = {
         this._updateList();
     },
 
+    onRoomMemberName: function(ev, member) {
+        this._updateList();
+    },
+
     _updateList: function() {
         this.memberDict = this.getMemberDict();
 

src/controllers/organisms/RoomList.js

@@ -29,6 +29,7 @@ module.exports = {
         cli.on("Room.timeline", this.onRoomTimeline);
         cli.on("Room.name", this.onRoomName);
         cli.on("RoomState.events", this.onRoomStateEvents);
+        cli.on("RoomMember.name", this.onRoomMemberName);
 
         var rooms = this.getRoomList();
         this.setState({
@@ -89,6 +90,10 @@ module.exports = {
         this.refreshRoomList();
     },
 
+    onRoomMemberName: function(ev, member) {
+        this.refreshRoomList();
+    },
+
     refreshRoomList: function() {
         var rooms = this.getRoomList();
         this.setState({

src/controllers/pages/MatrixChat.js

@@ -320,7 +320,7 @@ module.exports = {
         Notifier.start();
         UserActivity.start();
         Presence.start();
-        cli.startClient();
+        cli.startClient({resolveInvitesToProfiles: true});
     },
 
     onKeyDown: function(ev) {