[mirotalksfu] - improve chat

public/css/Room.css

@@ -501,10 +501,6 @@ body {
     padding: 10px;
 }
 
-.chat-msger-buttons button {
-    width: 32px;
-}
-
 #chatSendButton {
     position: absolute;
     right: 10px;

public/js/Room.js

@@ -1050,6 +1050,7 @@ function handleInputs() {
             let regex = new RegExp(i.replace(/([()[{*+.$^\\|?])/g, '\\$1'), 'gim');
             this.value = this.value.replace(regex, chatInputEmoji[i]);
         }
+        rc.checkLineBreaks();
     };
 
     chatMessage.onpaste = () => {
@@ -1255,10 +1256,6 @@ function setVideoButtonsDisabled(disabled) {
     stopVideoButton.disabled = disabled;
 }
 
-// ####################################################
-// UTILITY
-// ####################################################
-
 async function sound(name) {
     if (!isSoundEnabled) return;
     let sound = '../sounds/' + name + '.wav';

public/js/RoomClient.js

@@ -2061,14 +2061,16 @@ class RoomClient {
 
     cleanMessage() {
         chatMessage.value = '';
+        chatMessage.style.height = '';
     }
 
     pasteMessage() {
         navigator.clipboard
             .readText()
             .then((text) => {
-                chatMessage.value = text;
+                chatMessage.value += text;
                 isChatPasteTxt = true;
+                this.checkLineBreaks();
             })
             .catch((err) => {
                 console.error('Failed to read clipboard contents: ', err);
@@ -2077,14 +2079,14 @@ class RoomClient {
 
     sendMessage() {
         if (!this.thereIsParticipants()) {
-            chatMessage.value = '';
+            this.cleanMessage();
             isChatPasteTxt = false;
             this.userLog('info', 'No participants in the room', 'top-end');
             return;
         }
         let peer_msg = this.formatMsg(chatMessage.value);
         if (!peer_msg) {
-            chatMessage.value = '';
+            this.cleanMessage();
             return;
         }
         let data = {
@@ -2097,13 +2099,13 @@ class RoomClient {
         this.socket.emit('message', data);
         this.setMsgAvatar('right', this.peer_name);
         this.appendMessage('right', this.rightMsgAvatar, this.peer_name, this.peer_id, peer_msg, 'all', 'all');
-        chatMessage.value = '';
+        this.cleanMessage();
     }
 
     sendMessageTo(to_peer_id, to_peer_name) {
         if (!this.thereIsParticipants()) {
             isChatPasteTxt = false;
-            chatMessage.value = '';
+            this.cleanMessage();
             this.userLog('info', 'No participants in the room expect you', 'top-end');
             return;
         }
@@ -2125,7 +2127,7 @@ class RoomClient {
             if (result.value) {
                 let peer_msg = this.formatMsg(result.value);
                 if (!peer_msg) {
-                    chatMessage.value = '';
+                    this.cleanMessage();
                     return;
                 }
                 let data = {
@@ -2269,8 +2271,7 @@ class RoomClient {
             isChatPasteTxt = false;
             return pre;
         }
-        let numberOfLineBreaks = (message.match(/\n/g) || []).length;
-        if (numberOfLineBreaks > 1) {
+        if (this.getLineBreaks(message) > 1) {
             return pre;
         }
         return message;
@@ -2300,6 +2301,17 @@ class RoomClient {
         return url.protocol === 'http:' || url.protocol === 'https:';
     }
 
+    getLineBreaks(message) {
+        return (message.match(/\n/g) || []).length;
+    }
+
+    checkLineBreaks() {
+        chatMessage.style.height = '';
+        if (this.getLineBreaks(chatMessage.value) > 1) {
+            chatMessage.style.height = '200px';
+        }
+    }
+
     collectMessages(time, from, msg) {
         this.chatMessages.push({
             time: time,