From 5d99d68a64ec0c81b42c5a8e6959376dab798feb Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 9 Dec 2016 11:43:23 +0000
Subject: [PATCH] Show the full date and time if the receipt was sent days
 after the event

---
 src/components/views/rooms/EventTile.js         | 11 +++++++++++
 src/components/views/rooms/ReadReceiptMarker.js | 17 ++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 85020b564a..42dbe78630 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/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}
                 />
             );
 
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index ddf271d6f4..37d4661f5d 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/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)"
-            title = new Date(this.props.timestamp).toLocaleTimeString() + " (" + this.props.member.userId + ")";
+            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 (