Make ChangeAvatar support room avatars and tweak RoomAvatar respond to componentWillReceiveProps

src/controllers/atoms/RoomAvatar.js

@@ -34,13 +34,24 @@ module.exports = {
     },
 
     getInitialState: function() {
-        this.urlList = this.getUrlList();
-        this.urlListIndex = -1;
+        this._update();
         return {
             imageUrl: this._nextUrl()
         };
     },
 
+    componentWillReceiveProps: function(nextProps) {
+        this._update();
+        this.setState({
+            imageUrl: this._nextUrl()
+        });
+    },
+
+    _update: function() {
+        this.urlList = this.getUrlList();
+        this.urlListIndex = -1;
+    },
+
     _nextUrl: function() {
         do {
             ++this.urlListIndex;

src/controllers/molecules/ChangeAvatar.js

@@ -19,7 +19,8 @@ var MatrixClientPeg = require("../../MatrixClientPeg");
 
 module.exports = {
     propTypes: {
-        initialAvatarUrl: React.PropTypes.string.isRequired,
+        initialAvatarUrl: React.PropTypes.string,
+        room: React.PropTypes.object,
     },
 
     Phases: {
@@ -44,7 +45,16 @@ module.exports = {
         var self = this;
         MatrixClientPeg.get().uploadContent(file).then(function(url) {
             newUrl = url;
-            return MatrixClientPeg.get().setAvatarUrl(url);
+            if (self.props.room) {
+                return MatrixClientPeg.get().sendStateEvent(
+                    self.props.room.roomId,
+                    'm.room.avatar',
+                    {url: url},
+                    ''
+                );
+            } else {
+                return MatrixClientPeg.get().setAvatarUrl(url);
+            }
         }).done(function() {
             self.setState({
                 phase: self.Phases.Display,
@@ -52,7 +62,7 @@ module.exports = {
             });
         }, function(error) {
             self.setState({
-                phase: this.Phases.Error
+                phase: self.Phases.Error
             });
             self.onError(error);
         });

src/controllers/organisms/RoomList.js

@@ -28,6 +28,7 @@ module.exports = {
         cli.on("Room", this.onRoom);
         cli.on("Room.timeline", this.onRoomTimeline);
         cli.on("Room.name", this.onRoomName);
+        cli.on("RoomState.events", this.onRoomStateEvents);
 
         var rooms = this.getRoomList();
         this.setState({
@@ -84,6 +85,10 @@ module.exports = {
         this.refreshRoomList();
     },
 
+    onRoomStateEvents: function(ev, state) {
+        this.refreshRoomList();
+    },
+
     refreshRoomList: function() {
         var rooms = this.getRoomList();
         this.setState({