[mirotalksfu] - add send private message

app/src/Server.js

@@ -470,10 +470,11 @@ io.on('connection', (socket) => {
 
     socket.on('message', (data) => {
         log.debug('message', data);
-        roomList.get(socket.room_id).broadCast(socket.id, 'message', {
-            peer_name: data.peer_name,
-            peer_msg: data.peer_msg,
-        });
+        if (data.to_peer_id == 'all') {
+            roomList.get(socket.room_id).broadCast(socket.id, 'message', data);
+        } else {
+            roomList.get(socket.room_id).sendTo(data.to_peer_id, 'message', data);
+        }
     });
 
     socket.on('disconnect', () => {

public/css/Room.css

@@ -43,6 +43,7 @@
     --wb-bg: linear-gradient(to left, #1f1e1e, #000000);
     --left-msg-bg: #222328;
     --right-msg-bg: #0a0b0c;
+    --private-msg-bg: #510717;
     --box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     --btns-hover-scale: scale(1.1);
     /* buttons bar horizontal */
@@ -334,7 +335,7 @@ body {
     color: #fff;
 }
 
-.left-msg .private-msg-bubble {
+.left-msg .msg-bubble-private {
     background: var(--private-msg-bg);
     border-bottom-left-radius: 0;
     color: #fff;
@@ -354,7 +355,7 @@ body {
     color: #fff;
 }
 
-.right-msg .private-msg-bubble {
+.right-msg .msg-bubble-private {
     background: var(--private-msg-bg);
     border-bottom-right-radius: 0;
     color: #fff;
@@ -377,6 +378,7 @@ body {
     background-size: cover;
 }
 
+.msg-bubble-private,
 .msg-bubble {
     max-width: 200px;
     padding: 15px;

public/js/Room.js

@@ -21,6 +21,7 @@ const _PEER = {
     lowerHand: '',
     ejectPeer: '<i class="fas fa-times"></i>',
     sendFile: '<i class="fas fa-upload"></i>',
+    sendMsg: '<i class="fas fa-paper-plane"></i>',
 };
 
 let participantsCount = 0;
@@ -1367,6 +1368,7 @@ async function getParticipantsTable(peers) {
         <th></th>
         <th></th>
         <th></th>
+        <th></th>
     </tr>`;
 
     table += `
@@ -1376,6 +1378,7 @@ async function getParticipantsTable(peers) {
         <td><button id="hideAllButton" onclick="rc.peerAction('me','${rc.peer_id}','hide',true,true)">${_PEER.videoOff}</button></td>
         <td></td>
         <td><button id="sendAllButton" onclick="rc.selectFileToShare('${rc.peer_id}')">${_PEER.sendFile}</button></td>
+        <td><button id="sendMessageToAll" onclick="rc.sendMessageTo('all')">${_PEER.sendMsg}</button></td>
         <td><button id="ejectAllButton" onclick="rc.peerAction('me','${rc.peer_id}','eject',true,true)">${_PEER.ejectPeer}</button></td>
     </tr>
     `;
@@ -1388,6 +1391,7 @@ async function getParticipantsTable(peers) {
         let peer_hand = peer_info.peer_hand ? _PEER.raiseHand : _PEER.lowerHand;
         let peer_eject = _PEER.ejectPeer;
         let peer_sendFile = _PEER.sendFile;
+        let peer_sendMsg = _PEER.sendMsg;
         let peer_id = peer_info.peer_id;
         if (rc.peer_id === peer_id) {
             table += `
@@ -1398,6 +1402,7 @@ async function getParticipantsTable(peers) {
                 <td><button>${peer_hand}</button></td>
                 <td></td>
                 <td></td>
+                <td></td>
             </tr>
             `;
         } else {
@@ -1408,6 +1413,7 @@ async function getParticipantsTable(peers) {
                 <td><button id='${peer_id}___pVideo' onclick="rc.peerAction('me',this.id,'hide')">${peer_video}</button></td>
                 <td><button>${peer_hand}</button></td>
                 <td><button id='${peer_id}' onclick="rc.selectFileToShare(this.id, false)">${peer_sendFile}</button></td>
+                <td><button id="sendMessageTo" onclick="rc.sendMessageTo('${peer_id}')">${peer_sendMsg}</button></td>
                 <td><button id='${peer_id}___pEject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject}</button></td>
             </tr>
             `;

public/js/RoomClient.js

@@ -21,6 +21,7 @@ const image = {
     users: '../images/participants.png',
     user: '../images/participant.png',
     youtube: '../images/youtube.png',
+    message: '../images/message.png',
 };
 
 const mediaType = {
@@ -1437,19 +1438,55 @@ class RoomClient {
         if (!peer_msg) return;
         let data = {
             peer_name: this.peer_name,
+            to_peer_id: 'all',
             peer_msg: peer_msg,
         };
         console.log('Send message:', data);
         this.socket.emit('message', data);
         this.setMsgAvatar('right', this.peer_name);
-        this.appendMessage('right', this.rightMsgAvatar, this.peer_name, peer_msg);
+        this.appendMessage('right', this.rightMsgAvatar, this.peer_name, peer_msg, 'all');
         chatMessage.value = '';
     }
 
+    sendMessageTo(to_peer_id) {
+        if (!this.thereIsParticipants()) {
+            chatMessage.value = '';
+            this.userLog('info', 'No participants in the room expect you', 'top-end');
+            return;
+        }
+        Swal.fire({
+            background: swalBackground,
+            position: 'center',
+            imageUrl: image.message,
+            input: 'text',
+            inputPlaceholder: '💬 Enter your message...',
+            showCancelButton: true,
+            confirmButtonText: `Send`,
+            showClass: {
+                popup: 'animate__animated animate__fadeInDown',
+            },
+            hideClass: {
+                popup: 'animate__animated animate__fadeOutUp',
+            },
+        }).then((result) => {
+            let peer_msg = this.formatMsg(result.value);
+            if (!peer_msg) return;
+            let data = {
+                peer_name: this.peer_name,
+                to_peer_id: to_peer_id,
+                peer_msg: peer_msg,
+            };
+            console.log('Send message:', data);
+            this.socket.emit('message', data);
+            this.setMsgAvatar('right', this.peer_name);
+            this.appendMessage('right', this.rightMsgAvatar, this.peer_name, peer_msg, to_peer_id);
+        });
+    }
+
     showMessage(data) {
         if (!this.isChatOpen) this.toggleChat();
         this.setMsgAvatar('left', data.peer_name);
-        this.appendMessage('left', this.leftMsgAvatar, data.peer_name, data.peer_msg);
+        this.appendMessage('left', this.leftMsgAvatar, data.peer_name, data.peer_msg, data.to_peer_id);
         this.sound('message');
     }
 
@@ -1458,17 +1495,19 @@ class RoomClient {
         avatar === 'left' ? (this.leftMsgAvatar = avatarImg) : (this.rightMsgAvatar = avatarImg);
     }
 
-    appendMessage(side, img, from, msg) {
+    appendMessage(side, img, from, msg, to) {
         let time = this.getTimeNow();
+        let msgBubble = to == 'all' ? 'msg-bubble' : 'msg-bubble-private';
+        let message = to == 'all' ? msg : msg + '<br/> (private message)';
         let msgHTML = `
         <div class="msg ${side}-msg">
             <div class="msg-img" style="background-image: url('${img}')"></div>
-            <div class="msg-bubble">
+            <div class=${msgBubble}>
                 <div class="msg-info">
                     <div class="msg-info-name">${from}</div>
                     <div class="msg-info-time">${time}</div>
                 </div>
-                <div class="msg-text">${msg}</div>
+                <div class="msg-text">${message}</div>
             </div>
         </div>
         `;