[mirotalkc2c] - improve chat UI

miroslavpejic85 · Oct 8, 2024 · abe2be6 · abe2be6
1 parent 4a24452
commit abe2be6
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 68 deletions.
diff --git a/backend/server.js b/backend/server.js
@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: [email protected] or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - [email protected]
- * @version 1.1.32
+ * @version 1.1.33
  */
 
 require('dotenv').config();

diff --git a/frontend/css/chat.css b/frontend/css/chat.css
@@ -1,59 +1,71 @@
+/* Chat Container */
 .chat {
     z-index: 8;
     display: none;
     position: absolute;
     top: 0;
     right: 0;
-    width: var(--chat-width);
+    width: 350px;
+    max-width: 100%;
     height: 100%;
-    background: var(--chat-bg);
+    background: linear-gradient(145deg, #282c34, #1c1e24);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
+    flex-direction: column;
     overflow: hidden;
-    border: var(--border);
-    border-radius: var(--border-radius) 0% 0%;
+    transition:
+        transform 0.3s ease,
+        opacity 0.3s ease;
 }
 
-.chat .header,
-.chat .body {
-    padding: 5px;
-}
+/* Header */
 .chat .header {
-    height: 30px;
-    background: var(--chat-bg);
-    border-bottom: var(--border);
-    border-radius: var(--border-radius) 0% 0%;
-}
-.chat .body {
-    margin-top: 0;
-    min-height: 85%;
-    max-height: 85%;
-    background: var(--chat-bg);
-    overflow: auto;
-}
-.chat .footer {
-    position: fixed;
-    bottom: 0px;
-    width: var(--chat-width);
-    background: var(--chat-bg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    background: var(--primary-color);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--border-radius) 0 0 0;
 }
 
 .chat .header .title {
-    padding: 8px;
-    float: left;
-    font-weight: bold;
     color: white;
+    font-weight: 600;
+    font-size: 1.4rem;
+    letter-spacing: 0.5px;
 }
+
 .chat .header button {
-    padding: 5px;
-    float: right;
+    background: transparent;
     border: none;
-    font-size: 1.2rem;
-    color: var(--text-color);
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.chat .header button:hover {
+    color: #ff4c4c;
+}
+
+/* Chat Body */
+.chat .body {
+    padding: 10px;
     background: var(--chat-bg);
+    overflow-y: auto;
+    height: 80vh;
+    flex-grow: 1;
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary-color) transparent;
+    transition: max-height 0.3s ease;
 }
 
 .chat .body .msg {
-    margin-top: 10px;
+    margin-bottom: 20px;
 }
+
 .chat .body .msg .from {
     padding: 5px;
     font-weight: bold;
@@ -62,49 +74,69 @@
 }
 .chat .body .msg .text {
     padding: 5px;
+    border-radius: 10px;
     background: var(--chat-bg);
     color: var(--text-color);
     overflow: auto;
+    word-wrap: break-word;
     user-select: text;
 }
 
-.chat .footer textarea {
+.chat .body .msg .text:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Footer */
+.chat .footer {
     position: absolute;
-    padding: 10px;
-    bottom: 0;
-    left: 0;
+    bottom: 0px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    background: #2b2d36;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.chat .footer textarea {
+    flex-grow: 1;
+    padding: 5px;
     height: 20px;
-    width: 93%;
+    border: 1px solid var(--primary-color);
+    border-radius: 8px;
+    background: #2b2d36;
     color: var(--text-color);
-    background: var(--chat-bg);
-    border: var(--border);
-    border-radius: var(--border-radius) 0% 0%;
-    -webkit-transition: height 1s;
-    -moz-transition: height 1s;
-    -ms-transition: height 1s;
-    -o-transition: height 1s;
-    transition: height 1s;
     resize: none;
+    font-size: 1rem;
+    transition: height 0.3s ease;
 }
+
 .chat .footer textarea:focus {
-    border: 1px solid #439fff;
+    border-color: #439fff;
+    height: 60px;
+    outline: none;
+    box-shadow: 0 0 5px #439fff;
 }
 
 .chat .footer .buttons {
-    display: inline;
+    display: flex;
+    gap: 8px;
+    margin: 10px;
 }
 
 .chat .footer .buttons button {
-    position: relative;
-    bottom: 13px;
-    right: 5px;
+    background: #439fff;
     border: none;
-    float: right;
-    background: transparent;
-    color: #439fff;
+    color: white;
+    font-size: 1.4rem;
+    cursor: pointer;
+    border-radius: 50%;
+    padding: 6px;
+    transition: background-color 0.2s ease;
 }
+
 .chat .footer .buttons button:hover {
-    color: var(--text-color);
+    background-color: var(--secondary-color);
 }
 
 .chat .body::-webkit-scrollbar,
@@ -127,11 +159,39 @@
 
 .chatEmojiPicker {
     position: absolute;
-    bottom: 0px;
+    bottom: 70px;
+    right: 10px;
     background: var(--chat-bg);
-    border: var(--border);
-    border-radius: 5px;
-    --rgb-background: var(--chat-bg);
-    --color-border-over: var(--chat-bg);
-    --font-family: 'Montserrat';
-}
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    display: none;
+    padding: 10px;
+}
+
+.chatEmojiPicker.show {
+    display: block;
+}
+
+@media (max-width: 768px) {
+    .chat {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 10px 10px 0 0;
+    }
+
+    .chat .header .title {
+        font-size: 1rem;
+    }
+
+    .chat .footer textarea {
+        height: 35px;
+        font-size: 0.9rem;
+    }
+
+    .chat .footer .buttons button {
+        font-size: 1.3rem;
+    }
+}
diff --git a/frontend/css/client.css b/frontend/css/client.css
@@ -19,7 +19,6 @@
     --my-video-wrap-width: 360px; /* Safari */
     --my-video-wrap-height: 205px;
     --settings-width: 280px;
-    --chat-width: 320px;
     --btn-hover-scale: scale(1.1);
     --box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 1);
 }

diff --git a/frontend/js/client.js b/frontend/js/client.js
@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: [email protected] or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - [email protected]
- * @version 1.1.32
+ * @version 1.1.33
  */
 
 const roomId = new URLSearchParams(window.location.search).get('room');
@@ -848,7 +848,6 @@ function handleEvents() {
     if (isMobileDevice) {
         elemDisplay(maxVideoQualityDiv, false);
         elemDisplay(pushToTalkDiv, false);
-        document.documentElement.style.setProperty('--chat-width', '100%');
     } else {
         switchPushToTalk.onchange = (e) => {
             isPushToTalkActive = e.currentTarget.checked;
@@ -1449,7 +1448,7 @@ function toggleChat() {
     }
 }
 
-function toggleChatEmoji(){
+function toggleChatEmoji() {
     chatEmoji.classList.toggle('show');
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalkc2c",
-    "version": "1.1.32",
+    "version": "1.1.33",
     "description": "A free WebRTC Cam-2-Cam browser-based video calls",
     "main": "server.js",
     "scripts": {