[mirotalkc2c] - add chat save/clean btn

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.33
+ * @version 1.1.34
  */
 
 require('dotenv').config();

frontend/css/chat.css

@@ -33,21 +33,26 @@
 .chat .header .title {
     color: white;
     font-weight: 600;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     letter-spacing: 0.5px;
 }
 
+.chat .header .header-buttons {
+    display: inline;
+    float: right;
+}
+
 .chat .header button {
     background: transparent;
     border: none;
     color: white;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     cursor: pointer;
     transition: color 0.2s ease;
 }
 
 .chat .header button:hover {
-    color: #ff4c4c;
+    color: #439fff;
 }
 
 /* Chat Body */
@@ -118,13 +123,13 @@
     box-shadow: 0 0 5px #439fff;
 }
 
-.chat .footer .buttons {
+.chat .footer .footer-buttons {
     display: flex;
     gap: 8px;
     margin: 10px;
 }
 
-.chat .footer .buttons button {
+.chat .footer .footer-buttons button {
     width: 2rem;
     height: 2rem;
     padding: 5px;
@@ -141,7 +146,7 @@
     transition: all 0.3s ease-in-out;
 }
 
-.chat .footer .buttons button:hover {
+.chat .footer .footer-buttons button:hover {
     background-color: var(--secondary-color);
 }
 
@@ -197,7 +202,7 @@
         font-size: 0.9rem;
     }
 
-    .chat .footer .buttons button {
+    .chat .footer .footer-buttons button {
         padding: 10px;
         width: 2.5rem;
         height: 2.5rem;

frontend/html/client.html

@@ -5,7 +5,10 @@
 
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="viewport"
+            content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+        />
         <meta
             name="description"
             content="MiroTalk C2C WebRTC real-time cam-2-cam video calls and screen sharing, end-to-end encrypted."
@@ -150,12 +153,16 @@ <h1>Waiting</h1>
         <div id="chat" class="chat">
             <div class="header">
                 <span class="title">Chat</span>
-                <button id="chatCloseBtn" class="fas fa-times"></button>
+                <div class="header-buttons">
+                    <button id="chatCleanBtn" class="fas fa-trash"></button>
+                    <button id="chatSaveBtn" class="fas fa-save"></button>
+                    <button id="chatCloseBtn" class="fas fa-times"></button>
+                </div>
             </div>
             <div class="body" id="chatBody"></div>
             <div class="footer">
                 <textarea id="chatInput" placeholder="Write a message..."></textarea>
-                <div class="buttons">
+                <div class="footer-buttons">
                     <button id="chatSendBtn" class="fas fa-paper-plane"></button>
                     <button id="chatEmojiBtn" class="fas fa-smile"></button>
                 </div>

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.33
+ * @version 1.1.34
  */
 
 const roomId = new URLSearchParams(window.location.search).get('room');
@@ -48,12 +48,16 @@ const sessionTime = document.getElementById('sessionTime');
 const chat = document.getElementById('chat');
 const chatOpenBtn = document.getElementById('chatOpenBtn');
 const chatBody = document.getElementById('chatBody');
+const chatSaveBtn = document.getElementById('chatSaveBtn');
+const chatCleanBtn = document.getElementById('chatCleanBtn');
 const chatCloseBtn = document.getElementById('chatCloseBtn');
 const chatInput = document.getElementById('chatInput');
 const chatEmojiBtn = document.getElementById('chatEmojiBtn');
 const chatSendBtn = document.getElementById('chatSendBtn');
 const chatEmoji = document.getElementById('chatEmoji');
 
+let chatMessages = []; // collect chat messages to save it later
+
 const roomURL = window.location.origin + '/?room=' + roomId;
 
 const LS = new LocalStorage();
@@ -884,6 +888,12 @@ function handleEvents() {
     chatOpenBtn.onclick = () => {
         toggleChat();
     };
+    chatSaveBtn.onclick = () => {
+        saveChat();
+    };
+    chatCleanBtn.onclick = () => {
+        cleanChat();
+    };
     chatCloseBtn.onclick = () => {
         toggleChat();
     };
@@ -1448,6 +1458,45 @@ function toggleChat() {
     }
 }
 
+function saveChat() {
+    if (chatMessages.length === 0) {
+        return popupMessage('toast', 'Chat', 'No chat messages to save', 'top-end');
+    }
+    let a = document.createElement('a');
+    a.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(chatMessages, null, 1));
+    a.download = getDataTimeString() + '-chat.txt';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    playSound('download');
+}
+
+function cleanChat() {
+    if (chatMessages.length === 0) {
+        return popupMessage('toast', 'Chat', 'No chat messages to delete', 'top-end');
+    }
+    playSound('message');
+    Swal.fire({
+        position: 'center',
+        title: 'Chat',
+        text: 'Clean up chat messages?',
+        showDenyButton: true,
+        confirmButtonText: `Yes`,
+        denyButtonText: `No`,
+        showClass: { popup: 'animate__animated animate__fadeInDown' },
+        hideClass: { popup: 'animate__animated animate__fadeOutUp' },
+    }).then((result) => {
+        if (result.isConfirmed) {
+            const chatBodyMessages = chatBody.firstChild;
+            while (chatBody.firstChild) {
+                chatBody.removeChild(chatBody.firstChild);
+            }
+            chatMessages = [];
+            playSound('delete');
+        }
+    });
+}
+
 function toggleChatEmoji() {
     chatEmoji.classList.toggle('show');
 }
@@ -1494,18 +1543,24 @@ function emitDcMsg(msg) {
 }
 
 function appendMessage(name, msg) {
+    const time = getTime();
     const div = document.createElement('div');
     const span = document.createElement('span');
     const p = document.createElement('pre');
     div.className = 'msg';
     span.className = 'from';
-    span.innerText = name + ' ' + getTime();
+    span.innerText = name + ' ' + time;
     p.className = 'text';
     p.innerText = msg;
     div.appendChild(span);
     div.appendChild(p);
     chatBody.appendChild(div);
     chatBody.scrollTop += 500;
+    chatMessages.push({
+        time: time,
+        from: name,
+        message: msg,
+    });
 }
 
 function handleMessage(config) {

frontend/js/utils.js

@@ -255,6 +255,13 @@ function getTime() {
     return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
 }
 
+function getDataTimeString() {
+    const d = new Date();
+    const date = d.toISOString().split('T')[0];
+    const time = d.toTimeString().split(' ')[0];
+    return `${date}-${time}`;
+}
+
 function escapeSpecialChars(regex) {
     return regex.replace(/([()[{*+.$^\\|?])/g, '\\$1');
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalkc2c",
-    "version": "1.1.33",
+    "version": "1.1.34",
     "description": "A free WebRTC Cam-2-Cam browser-based video calls",
     "main": "server.js",
     "scripts": {