Add read receipt times to the hovertip of read markers

Fixes #2709. Surprisingly, this data was never passed down to
ReadReceiptMarker.

src/components/views/avatars/MemberAvatar.js

@@ -33,6 +33,7 @@ module.exports = React.createClass({
         onClick: React.PropTypes.func,
         // Whether the onClick of the avatar should be overriden to dispatch 'view_user'
         viewUserOnClick: React.PropTypes.bool,
+        title: React.PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -58,7 +59,7 @@ module.exports = React.createClass({
         }
         return {
             name: props.member.name,
-            title: props.member.userId,
+            title: props.title || props.member.userId,
             imageUrl: Avatar.avatarUrlForMember(props.member,
                                          props.width,
                                          props.height,

src/components/views/rooms/EventTile.js

@@ -290,6 +290,18 @@ module.exports = WithMatrixClient(React.createClass({
 
         var left = 0;
 
+        var readReceiptData = Object.create(null);
+        var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
+        if (room) {
+            // [ {type/userId/data} ]
+            room.getReceiptsForEvent(this.props.mxEvent).forEach(function(r) {
+                if (r.type !== "m.read" || !r.data.ts) {
+                    return;
+                }
+                readReceiptData[r.userId] = r.data;
+            })
+        }
+
         var receipts = this.props.readReceipts || [];
         for (var i = 0; i < receipts.length; ++i) {
             var member = receipts[i];
@@ -312,6 +324,8 @@ module.exports = WithMatrixClient(React.createClass({
 
             //console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
 
+            var rData = readReceiptData[member.userId];
+
             // add to the start so the most recent is on the end (ie. ends up rightmost)
             avatars.unshift(
                 <ReadReceiptMarker key={userId} member={member}
@@ -320,6 +334,7 @@ module.exports = WithMatrixClient(React.createClass({
                     checkUnmounting={this.props.checkUnmounting}
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
+                    timestamp={rData ? rData.ts : null}
                 />
             );
 

src/components/views/rooms/ReadReceiptMarker.js

@@ -60,6 +60,9 @@ module.exports = React.createClass({
 
         // callback for clicks on this RR
         onClick: React.PropTypes.func,
+
+        // Timestamp when the receipt was read
+        timestamp: React.PropTypes.number,
     },
 
     getDefaultProps: function() {
@@ -162,6 +165,12 @@ module.exports = React.createClass({
             visibility: this.props.hidden ? 'hidden' : 'visible',
         };
 
+        var title;
+        if (this.props.timestamp) {
+            // "7:05:45 PM (@alice:matrix.org)"
+            title = new Date(this.props.timestamp).toLocaleTimeString() + " (" + this.props.member.userId + ")";
+        }
+
         return (
             <Velociraptor
                     startStyles={this.state.startStyles}
@@ -170,6 +179,7 @@ module.exports = React.createClass({
                     member={this.props.member}
                     width={14} height={14} resizeMethod="crop"
                     style={style}
+                    title={title}
                     onClick={this.props.onClick}
                 />
             </Velociraptor>