From 7ea39e9ecffb6c1ddd76657d3018ced1d30b3b70 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 15 Nov 2021 11:55:14 +0100
Subject: [PATCH] [mirotalksfu] - add send private message

---
 app/src/Server.js         |   9 +++----
 public/css/Room.css       |   6 +++--
 public/images/message.png | Bin 0 -> 7540 bytes
 public/js/Room.js         |   6 +++++
 public/js/RoomClient.js   |  49 ++++++++++++++++++++++++++++++++++----
 5 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 public/images/message.png

diff --git a/app/src/Server.js b/app/src/Server.js
index fe2add7..a095248 100644
--- a/app/src/Server.js
+++ b/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', () => {
diff --git a/public/css/Room.css b/public/css/Room.css
index f69148c..35f79d0 100644
--- a/public/css/Room.css
+++ b/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;
diff --git a/public/images/message.png b/public/images/message.png
new file mode 100644
index 0000000000000000000000000000000000000000..c12b38e1e97e2049e3b6094bf8df2d11c1d424e8
GIT binary patch
literal 7540
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
aPgq6s-xT-x2+00ZJl`m3DAv5P2>Tz!KYJkn

literal 0
HcmV?d00001

diff --git a/public/js/Room.js b/public/js/Room.js
index 64c5991..d0b0fb2 100644
--- a/public/js/Room.js
+++ b/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>
             `;
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index 7f563f6..9a83754 100644
--- a/public/js/RoomClient.js
+++ b/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>
         `;