Merge pull request #586 from matrix-org/kegan/read-receipt-show-time-on-hover

Add read receipt times to the hovertip of read markers

src/components/structures/MessagePanel.js

@@ -471,27 +471,33 @@ module.exports = React.createClass({
                 !== new Date(nextEventTs).toDateString());
     },
 
-    // get a list of the userids whose read receipts should
+    // get a list of read receipts that should be shown next to this event
-    // be shown next to this event
+    // Receipts are objects which have a 'roomMember' and 'ts'.
     _getReadReceiptsForEvent: function(event) {
-        var myUserId = MatrixClientPeg.get().credentials.userId;
+        const myUserId = MatrixClientPeg.get().credentials.userId;
 
         // get list of read receipts, sorted most recent first
-        var room = MatrixClientPeg.get().getRoom(event.getRoomId());
+        const room = MatrixClientPeg.get().getRoom(event.getRoomId());
         if (!room) {
-            // huh.
             return null;
         }
+        let receipts = [];
+        room.getReceiptsForEvent(event).forEach((r) => {
+            if (!r.userId || r.type !== "m.read" || r.userId === myUserId) {
+                return; // ignore non-read receipts and receipts from self.
+            }
+            let member = room.getMember(r.userId);
+            if (!member) {
+                return; // ignore unknown user IDs
+            }
+            receipts.push({
+                roomMember: member,
+                ts: r.data ? r.data.ts : 0,
+            });
+        });
 
-        return room.getReceiptsForEvent(event).filter(function(r) {
+        return receipts.sort((r1, r2) => {
-            return r.type === "m.read" && r.userId != myUserId;
+            return r2.ts - r1.ts;
-        }).sort(function(r1, r2) {
-            return r2.data.ts - r1.data.ts;
-        }).map(function(r) {
-            return room.getMember(r.userId);
-        }).filter(function(m) {
-            // check that the user is a known room member
-            return m;
         });
     },
 

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

@@ -103,7 +103,7 @@ module.exports = WithMatrixClient(React.createClass({
         /* callback called when dynamic content in events are loaded */
         onWidgetLoad: React.PropTypes.func,
 
-        /* a list of Room Members whose read-receipts we should show */
+        /* a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'. */
         readReceipts: React.PropTypes.arrayOf(React.PropTypes.object),
 
         /* opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -231,7 +231,7 @@ module.exports = WithMatrixClient(React.createClass({
                     return false;
                 }
                 for (var j = 0; j < rA.length; j++) {
-                    if (rA[j].userId !== rB[j].userId) {
+                    if (rA[j].roomMember.userId !== rB[j].roomMember.userId) {
                         return false;
                     }
                 }
@@ -287,19 +287,28 @@ module.exports = WithMatrixClient(React.createClass({
     getReadAvatars: function() {
         var ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
         var avatars = [];
-
         var left = 0;
 
+        // It's possible that the receipt was sent several days AFTER the event.
+        // If it is, we want to display the complete date along with the HH:MM:SS,
+        // rather than just HH:MM:SS.
+        let dayAfterEvent = new Date(this.props.mxEvent.getTs());
+        dayAfterEvent.setDate(dayAfterEvent.getDate() + 1)
+        dayAfterEvent.setHours(0);
+        dayAfterEvent.setMinutes(0);
+        dayAfterEvent.setSeconds(0);
+        let dayAfterEventTime = dayAfterEvent.getTime();
+
         var receipts = this.props.readReceipts || [];
         for (var i = 0; i < receipts.length; ++i) {
-            var member = receipts[i];
+            var receipt = receipts[i];
 
             var hidden = true;
             if ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) {
                 hidden = false;
             }
 
-            var userId = member.userId;
+            var userId = receipt.roomMember.userId;
             var readReceiptInfo;
 
             if (this.props.readReceiptMap) {
@@ -311,15 +320,16 @@ module.exports = WithMatrixClient(React.createClass({
             }
 
             //console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
-
             // add to the start so the most recent is on the end (ie. ends up rightmost)
             avatars.unshift(
-                <ReadReceiptMarker key={userId} member={member}
+                <ReadReceiptMarker key={userId} member={receipt.roomMember}
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
                     checkUnmounting={this.props.checkUnmounting}
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
+                    timestamp={receipt.ts}
+                    showFullTimestamp={receipt.ts >= dayAfterEventTime}
                 />
             );
 

src/components/views/rooms/ReadReceiptMarker.js

@@ -60,6 +60,12 @@ module.exports = React.createClass({
 
         // callback for clicks on this RR
         onClick: React.PropTypes.func,
+
+        // Timestamp when the receipt was read
+        timestamp: React.PropTypes.number,
+
+        // True to show the full date/time rather than just the time
+        showFullTimestamp: React.PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -162,6 +168,20 @@ module.exports = React.createClass({
             visibility: this.props.hidden ? 'hidden' : 'visible',
         };
 
+        let title;
+        if (this.props.timestamp) {
+            let suffix = " (" + this.props.member.userId + ")";
+            let ts = new Date(this.props.timestamp);
+            if (this.props.showFullTimestamp) {
+                // "15/12/2016, 7:05:45 PM (@alice:matrix.org)"
+                title = ts.toLocaleString() + suffix;
+            }
+            else {
+                // "7:05:45 PM (@alice:matrix.org)"
+                title = ts.toLocaleTimeString() + suffix;
+            }
+        }
+
         return (
             <Velociraptor
                     startStyles={this.state.startStyles}
@@ -170,6 +190,7 @@ module.exports = React.createClass({
                     member={this.props.member}
                     width={14} height={14} resizeMethod="crop"
                     style={style}
+                    title={title}
                     onClick={this.props.onClick}
                 />
             </Velociraptor>