ghaymah_dev/codepill-sfu
2
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - add send private message

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2021-11-15 11:55:14 +01:00
الأصل 6480c96611
التزام 7ea39e9ecf
5 ملفات معدلة مع 59 إضافات و11 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

6
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/images/message.png Normal file
عرض الملف

ملف ثنائي غير معروض.
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 7.4 KiB

6
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>
`;

49
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>
`;