Add option to unset room avatar

Signed-off-by: Travis Ralston <travpc@gmail.com>

src/components/views/rooms/RoomHeader.js

@@ -129,6 +129,10 @@ module.exports = React.createClass({
         }).done();
     },
 
+    onAvatarRemoveClick: function() {
+        MatrixClientPeg.get().sendStateEvent(this.props.room.roomId, 'm.room.avatar', {url: null}, '');
+    },
+
     onShowRhsClick: function(ev) {
         dis.dispatch({ action: 'show_right_panel' });
     },
@@ -268,11 +272,15 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_avatarPicker_edit">
                         <label htmlFor="avatarInput" ref="file_label">
                             <img src="img/camera.svg"
-                                alt={_t("Upload avatar")} title={_t("Upload avatar")}
+                                 alt={_t("Upload avatar")} title={_t("Upload avatar")}
-                                width="17" height="15" />
+                                 width="17" height="15" />
                         </label>
                         <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
                     </div>
+                    <div className="mx_RoomHeader_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
+                        <img src="img/cancel.svg" width="10"
+                             alt={_t("Remove avatar")} title={_t("Remove avatar")} />
+                    </div>
                 </div>
             );
         } else if (this.props.room || (this.props.oobData && this.props.oobData.name)) {

src/components/views/settings/ChangeAvatar.js

@@ -53,6 +53,10 @@ module.exports = React.createClass({
         };
     },
 
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+    },
+
     componentWillReceiveProps: function(newProps) {
         if (this.avatarSet) {
             // don't clobber what the user has just set
@@ -63,6 +67,24 @@ module.exports = React.createClass({
         });
     },
 
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
+        }
+    },
+
+    onRoomStateEvents: function(ev) {
+        if (ev.getRoomId() !== this.props.room.roomId || ev.getType() !== 'm.room.avatar'
+            || ev.getSender() !== MatrixClientPeg.get().getUserId()) {
+            return;
+        }
+
+        if (!ev.getContent().url) {
+            this.avatarSet = false;
+            this.setState({}); // force update
+        }
+    },
+
     setAvatarFromFile: function(file) {
         let newUrl = null;