Show the full date and time if the receipt was sent days after the event

src/components/views/rooms/EventTile.js

@@ -289,6 +289,16 @@ module.exports = WithMatrixClient(React.createClass({
         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 receipt = receipts[i];
@@ -319,6 +329,7 @@ module.exports = WithMatrixClient(React.createClass({
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                     timestamp={receipt.ts}
+                    showFullTimestamp={receipt.ts >= dayAfterEventTime}
                 />
             );
 

src/components/views/rooms/ReadReceiptMarker.js

@@ -63,6 +63,9 @@ module.exports = React.createClass({
 
         // 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() {
@@ -165,10 +168,18 @@ module.exports = React.createClass({
             visibility: this.props.hidden ? 'hidden' : 'visible',
         };
 
-        var title;
+        let title;
         if (this.props.timestamp) {
-            // "7:05:45 PM (@alice:matrix.org)"
+            let suffix = " (" + this.props.member.userId + ")";
-            title = new Date(this.props.timestamp).toLocaleTimeString() + " (" + 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 (