From e5c8e3e7ad32794ad244f56cbffad9d76546f4b5 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 13 Oct 2017 20:57:15 -0600
Subject: [PATCH] Add option to unset room avatar

Signed-off-by: Travis Ralston <travpc@gmail.com>
---
 src/components/views/rooms/RoomHeader.js      | 12 ++++++++--
 src/components/views/settings/ChangeAvatar.js | 22 +++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 42cbb90cd9..3d2dee9e64 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/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")}
-                                width="17" height="15" />
+                                 alt={_t("Upload avatar")} title={_t("Upload avatar")}
+                                 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)) {
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index b3204ab86e..7d8b1d9534 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/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;