From e6763b4cc68a61f4338081c14470dd6a3d586c2a Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Wed, 24 May 2023 17:36:11 +0000
Subject: [PATCH] added compact mode

---
 .../app/src/components/LiveChat/index.jsx     | 39 ++++++++++------
 .../app/src/components/LiveChat/index.less    | 46 ++++++++++++++++++-
 2 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/packages/app/src/components/LiveChat/index.jsx b/packages/app/src/components/LiveChat/index.jsx
index 636adf8e..d3681e97 100755
--- a/packages/app/src/components/LiveChat/index.jsx
+++ b/packages/app/src/components/LiveChat/index.jsx
@@ -336,23 +336,34 @@ export default class LiveChat extends React.Component {
         return <div
             className={classnames(
                 "liveChat",
-                { ["empty"]: this.state.timeline.length === 0 }
+                {
+                    ["empty"]: this.state.timeline.length === 0,
+                    ["compact"]: this.props.compact
+                }
             )}
         >
             {
-                this.state.timeline.length === 0 ?
-                    <antd.Empty description="Welcome to the room" /> :
-                    <div
-                        className="liveChat_timeline"
-                        ref={this.timelineRef}
-                        id="liveChat_timeline"
-                    >
-                        {
-                            this.state.timeline.map((line, index) => {
-                                return <Line key={index} {...line} />
-                            })
-                        }
-                    </div>
+                !this.props.compact && this.state.timeline.length === 0 && <antd.Empty description="Welcome to the room" />
+            }
+
+            {
+                this.props.compact && this.state.timeline.length === 0 && <p>
+                    Welcome to the room
+                </p>
+            }
+
+            {
+                this.state.timeline.length !== 0 && <div
+                    className="liveChat_timeline"
+                    ref={this.timelineRef}
+                    id="liveChat_timeline"
+                >
+                    {
+                        this.state.timeline.map((line, index) => {
+                            return <Line key={index} {...line} />
+                        })
+                    }
+                </div>
             }
 
             <div className="liveChat_textInput">
diff --git a/packages/app/src/components/LiveChat/index.less b/packages/app/src/components/LiveChat/index.less
index acc6eb3b..d078df17 100755
--- a/packages/app/src/components/LiveChat/index.less
+++ b/packages/app/src/components/LiveChat/index.less
@@ -9,15 +9,59 @@
 
     overflow: hidden;
 
+    transition: all 250ms ease-in-out;
+
     &.empty {
         justify-content: center;
         align-items: center;
+
+        &.compact {
+            height: 5vh!important;
+        }
+    }
+    
+    &.compact {
+        height: 15vh;
+
+        justify-content: flex-end;
+
+        .liveChat_timeline {
+            position: relative;
+
+            display: flex;
+            flex-direction: column;
+
+            padding: 0;
+            margin: 0;
+
+            margin-bottom: 10px;
+
+            gap: 5px;
+
+            .textRoom_line {
+                padding: 0;
+                margin: 0;
+
+                h4 {
+                    font-size: 0.8rem;
+                }
+            }
+        }
+
+        .liveChat_textInput {
+            position: relative;
+
+            bottom: 0;
+            left: 0;
+
+            margin-bottom: 0;
+        }
     }
 
     &.floating {
         .textRoom_line {
             display: relative;
-            
+
             background-color: rgba(var(--layoutBackgroundColor), 0.7);
             backdrop-filter: blur(20px);
         }