Hide sender and time for back to back messages

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(),

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>

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>

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>

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'])