From 11c38014e57c59689be3b13a411e6b90fec9897e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 2 Nov 2015 18:55:28 +0000
Subject: [PATCH] Sort of display read avatars but without live updating

---
 src/skins/vector/views/molecules/EventTile.js | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/skins/vector/views/molecules/EventTile.js b/src/skins/vector/views/molecules/EventTile.js
index c5cb81951b..caaada62bb 100644
--- a/src/skins/vector/views/molecules/EventTile.js
+++ b/src/skins/vector/views/molecules/EventTile.js
@@ -20,6 +20,7 @@ var React = require('react');
 var classNames = require("classnames");
 
 var sdk = require('matrix-react-sdk')
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg')
 
 var EventTileController = require('matrix-react-sdk/lib/controllers/molecules/EventTile')
 var ContextualMenu = require('../../../../ContextualMenu');
@@ -72,6 +73,25 @@ module.exports = React.createClass({
         this.setState({menu: true});
     },
 
+    getReadAvatars: function() {
+        var avatars = [];
+
+        var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+
+        var userIds = room.getUsersReadUpTo(this.props.mxEvent);
+
+        var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
+
+        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" />
+            );
+        }
+
+        return <span>{ avatars }</span>;
+    },
+
     render: function() {
         var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
         var SenderProfile = sdk.getComponent('molecules.SenderProfile');
@@ -112,6 +132,8 @@ module.exports = React.createClass({
         else if (msgtype === 'm.video') aux = "sent a video";
         else if (msgtype === 'm.file') aux = "uploaded a file";
 
+        var readAvatars = this.getReadAvatars();
+
         var avatar, sender;
         if (!this.props.continuation) {
             if (this.props.mxEvent.sender) {
@@ -132,6 +154,7 @@ module.exports = React.createClass({
                 <div className="mx_EventTile_line">
                     { timestamp }
                     { editButton }
+                    { readAvatars }
                     <EventTileType mxEvent={this.props.mxEvent} searchTerm={this.props.searchTerm} />
                 </div>
             </div>