From a7ab37a4f5102d506f9897b08375418bc89bb92e Mon Sep 17 00:00:00 2001
From: m1k1o <sedivy.miro@gmail.com>
Date: Sun, 4 Apr 2021 16:10:56 +0200
Subject: [PATCH] dense chat messages.

---
 README.md                      |  1 +
 client/src/components/chat.vue | 25 +++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 20c42679..4970e246 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
 - Abiltiy to include neko as a component in another Vue.Js project (by @gbrian).
 - Added HEALTHCHECK to Dockerfile.
 - Arguments in broadcast pipeline are optional, not positional and can be repeated `{url} {device} {display}`.
+- Chat messages are dense, when repeated, they are joined together.
 
 ### Roadmap & TODOs
 - Catch errors from gst pipeline, tell user if broadcast failed.
diff --git a/client/src/components/chat.vue b/client/src/components/chat.vue
index e47a2514..166bc653 100644
--- a/client/src/components/chat.vue
+++ b/client/src/components/chat.vue
@@ -2,7 +2,14 @@
   <div class="chat">
     <ul class="chat-history" ref="history" @click="onClick">
       <template v-for="(message, index) in history">
-        <li :key="index" class="message" v-if="message.type === 'text'">
+        <li
+          :key="index"
+          class="message"
+          v-if="message.type === 'text'"
+          :class="{
+            bulk: index > 0 && history[index - 1].id == message.id && history[index - 1].type === 'text',
+          }"
+        >
           <div class="author" @contextmenu.stop.prevent="onContext($event, { member: member(message.id) })">
             <neko-avatar class="avatar" :seed="member(message.id).displayname" :size="40" />
           </div>
@@ -94,6 +101,7 @@
         word-wrap: break-word;
 
         &.message {
+          padding-top: 15px;
           font-size: 16px;
 
           .author {
@@ -104,7 +112,7 @@
             height: 40px;
             border-radius: 50%;
             background: $style-primary;
-            margin: 0px 10px 10px 0px;
+            margin-right: 10px;
 
             .avatar {
               width: 100%;
@@ -219,6 +227,19 @@
               }
             }
           }
+
+          &.bulk {
+            padding-top: 0px;
+
+            .author {
+              visibility: hidden;
+              height: 0;
+            }
+
+            .content-head {
+              display: none;
+            }
+          }
         }
 
         &.event {