[mirotalkc2c] - improve chat UI

miroslavpejic85 · Oct 13, 2024 · 51a13cc · 51a13cc
1 parent 5fc2ebd
commit 51a13cc
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 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: license.mirotalk@gmail.com 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 - miroslav.pejic.85@gmail.com
- * @version 1.1.34
+ * @version 1.1.35
  */
 
 require('dotenv').config();

diff --git a/frontend/css/chat.css b/frontend/css/chat.css
@@ -68,7 +68,8 @@
 }
 
 .chat .body .msg {
-    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
 }
 
 .chat .body .msg .from {
@@ -77,6 +78,19 @@
     color: var(--secondary-color);
     border-bottom: 0.1px solid #439fff;
 }
+
+.chat .body .msg.sent .from {
+    align-self: flex-start;
+    text-align: left;
+    margin: 0;
+}
+
+.chat .body .msg.received .from {
+    align-self: flex-end;
+    text-align: right;
+    margin: 0;
+}
+
 .chat .body .msg .text {
     padding: 5px;
     border-radius: 10px;
@@ -87,6 +101,18 @@
     user-select: text;
 }
 
+.chat .body .msg.sent .text {
+    background: #495057;
+    color: white;
+    border-radius: 10px 10px 10px 0;
+}
+
+.chat .body .msg.received .text {
+    background: #1c7ed6;
+    color: white;
+    border-radius: 10px 10px 0 10px;
+}
+
 .chat .body .msg .text:hover {
     background-color: rgba(255, 255, 255, 0.05);
 }

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: license.mirotalk@gmail.com 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 - miroslav.pejic.85@gmail.com
- * @version 1.1.34
+ * @version 1.1.35
  */
 
 const roomId = new URLSearchParams(window.location.search).get('room');
@@ -1477,7 +1477,7 @@ function cleanChat() {
     }
     playSound('message');
     Swal.fire({
-        position: 'center',
+        position: 'top',
         title: 'Chat',
         text: 'Clean up chat messages?',
         showDenyButton: true,
@@ -1543,11 +1543,12 @@ function emitDcMsg(msg) {
 }
 
 function appendMessage(name, msg) {
-    const time = getTime();
+    const time = getTime(false);
     const div = document.createElement('div');
     const span = document.createElement('span');
     const p = document.createElement('pre');
-    div.className = 'msg';
+    const messageClass = name === peerName ? 'sent' : 'received';
+    div.className = `msg ${messageClass}`;
     span.className = 'from';
     span.innerText = name + ' ' + time;
     p.className = 'text';

diff --git a/frontend/js/utils.js b/frontend/js/utils.js
@@ -250,9 +250,9 @@ function secondsToHms(d) {
     return hDisplay + ' ' + mDisplay + ' ' + sDisplay;
 }
 
-function getTime() {
+function getTime(seconds = true) {
     const date = new Date();
-    return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
+    return date.getHours() + ':' + date.getMinutes() + (seconds ? ':' + date.getSeconds() : '');
 }
 
 function getDataTimeString() {

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