From 2ebe4d982c1e3b3ac3ce97ec3bd3981e52de42d3 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Wed, 16 Dec 2020 11:21:29 +0100
Subject: [PATCH] Hide sender and time for back to back messages

---
 src/components/Chat.vue                        |  3 ++-
 .../messages/MessageIncomingAudio.vue          |  8 +++++---
 .../messages/MessageIncomingImage.vue          |  8 +++++---
 .../messages/MessageIncomingText.vue           |  8 +++++---
 src/components/messages/messageMixin.js        | 18 ++++++++++++++++++
 5 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 63cac97..b52bc1a 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -27,7 +27,7 @@
         @notify="handleChatContainerResize"
       />
 
-      <div v-for="event in events" :key="event.getId()">
+      <div v-for="(event,index) in events" :key="event.getId()">
         <div
           v-if="
             !event.isRelation() && !event.isRedacted() && !event.isRedaction()
@@ -49,6 +49,7 @@
               :is="componentForEvent(event)"
               :room="room"
               :event="event"
+              :nextEvent="events[index + 1]"
               :reactions="
                 timelineWindow._timelineSet.getRelationsForEvent(
                   event.getId(),
diff --git a/src/components/messages/MessageIncomingAudio.vue b/src/components/messages/MessageIncomingAudio.vue
index f8c08f9..a362fda 100644
--- a/src/components/messages/MessageIncomingAudio.vue
+++ b/src/components/messages/MessageIncomingAudio.vue
@@ -13,9 +13,11 @@
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
-    <div class="sender">{{ messageEventDisplayName(event) }}</div>
-    <div class="time">
-      {{ formatTime(event.event.origin_server_ts) }}
+    <div v-if="showSenderAndTime">
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue
index 6743633..2ab81fc 100644
--- a/src/components/messages/MessageIncomingImage.vue
+++ b/src/components/messages/MessageIncomingImage.vue
@@ -13,9 +13,11 @@
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
-    <div class="sender">{{ messageEventDisplayName(event) }}</div>
-    <div class="time">
-      {{ formatTime(event.event.origin_server_ts) }}
+    <div v-if="showSenderAndTime">
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/messages/MessageIncomingText.vue b/src/components/messages/MessageIncomingText.vue
index 4d3bc0b..31c0c30 100644
--- a/src/components/messages/MessageIncomingText.vue
+++ b/src/components/messages/MessageIncomingText.vue
@@ -24,9 +24,11 @@
     <v-btn icon class="op-button" @click.stop="showContextMenu"
       ><v-icon>more_vert</v-icon></v-btn
     >
-    <div class="sender">{{ messageEventDisplayName(event) }}</div>
-    <div class="time">
-      {{ formatTime(event.event.origin_server_ts) }}
+    <div v-if="showSenderAndTime">
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index 1661789..d1a4d65 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -17,6 +17,12 @@ export default {
         return {}
       }
     },
+    nextEvent: {
+      type: Object,
+      default: function () {
+        return null
+      }
+    },
     reactions: {
       type: Object,
       default: function () {
@@ -50,6 +56,18 @@ export default {
     }
   },
   computed: {
+    /**
+     * Don't show sender and time if the next event is within 2 minutes and also from us (= back to back messages)
+     */
+    showSenderAndTime() {
+      if (this.nextEvent && this.nextEvent.getSender() == this.event.getSender()) {
+        const ts1 = this.nextEvent.event.origin_server_ts;
+        const ts2 = this.event.event.origin_server_ts;
+        return (ts1 - ts2) < (2 * 60 * 1000); // less than 2 minutes
+      }
+      return true;
+    },
+
     inReplyToText() {
       const relatesTo = this.event.getWireContent()['m.relates_to'];
       if (relatesTo && relatesTo['m.in_reply_to'])