From 2a4a02f36e6263eb85b92ccb73c257feb8c670f6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 3 Nov 2015 13:44:40 +0000
Subject: [PATCH] More on read receipts: listen for events, add keys & class /
 very minimal css.

---
 src/controllers/organisms/RoomView.js         | 8 ++++++++
 src/skins/vector/css/molecules/EventTile.css  | 9 +++++++++
 src/skins/vector/views/molecules/EventTile.js | 4 ++--
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index 746dd98ac3..ff62a41b7d 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -48,6 +48,7 @@ module.exports = {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.name", this.onRoomName);
+        MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
         MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
         this.atBottom = true;
@@ -65,6 +66,7 @@ module.exports = {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
+            MatrixClientPeg.get().removeListener("Room.receipt", this.onRoomReceipt);
             MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
         }
@@ -164,6 +166,12 @@ module.exports = {
         }
     },
 
+    onRoomReceipt: function(receiptEvent, room) {
+        if (room.roomId == this.props.roomId) {
+            this.forceUpdate();
+        }
+    },
+
     onRoomMemberTyping: function(ev, member) {
         this.forceUpdate();
     },
diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css
index eb59711e81..25fe9646d0 100644
--- a/src/skins/vector/css/molecules/EventTile.css
+++ b/src/skins/vector/css/molecules/EventTile.css
@@ -123,3 +123,12 @@ limitations under the License.
 .mx_EventTile.menu .mx_MessageTimestamp {
     visibility: visible;
 }
+
+.mx_EventTile_readAvatars {
+    float: right;
+}
+
+.mx_EventTile_readAvatars .mx_MemberAvatar {
+    margin-left: 1px;
+    margin-right: 1px;
+}
diff --git a/src/skins/vector/views/molecules/EventTile.js b/src/skins/vector/views/molecules/EventTile.js
index caaada62bb..0cbeb86442 100644
--- a/src/skins/vector/views/molecules/EventTile.js
+++ b/src/skins/vector/views/molecules/EventTile.js
@@ -85,11 +85,11 @@ module.exports = React.createClass({
         for (var i = 0; i < userIds.length; ++i) {
             var member = room.getMember(userIds[i]);
             avatars.push(
-                <MemberAvatar member={member} width={14} height={14} resizeMethod="crop" />
+                <MemberAvatar key={member.userId} member={member} width={14} height={14} resizeMethod="crop" />
             );
         }
 
-        return <span>{ avatars }</span>;
+        return <span className="mx_EventTile_readAvatars">{ avatars }</span>;
     },
 
     render: function() {