More on read receipts: listen for events, add keys & class / very minimal css.

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();
     },

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;
+}

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() {