diff --git a/backend/server.js b/backend/server.js index d3189ba..54b3705 100644 --- a/backend/server.js +++ b/backend/server.js @@ -9,7 +9,7 @@ * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com 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 - miroslav.pejic.85@gmail.com - * @version 1.1.34 + * @version 1.1.35 */ require('dotenv').config(); diff --git a/frontend/css/chat.css b/frontend/css/chat.css index 1a97c6d..26bedae 100644 --- a/frontend/css/chat.css +++ b/frontend/css/chat.css @@ -68,7 +68,8 @@ } .chat .body .msg { - margin-bottom: 20px; + display: flex; + flex-direction: column; } .chat .body .msg .from { @@ -77,6 +78,19 @@ color: var(--secondary-color); border-bottom: 0.1px solid #439fff; } + +.chat .body .msg.sent .from { + align-self: flex-start; + text-align: left; + margin: 0; +} + +.chat .body .msg.received .from { + align-self: flex-end; + text-align: right; + margin: 0; +} + .chat .body .msg .text { padding: 5px; border-radius: 10px; @@ -87,6 +101,18 @@ user-select: text; } +.chat .body .msg.sent .text { + background: #495057; + color: white; + border-radius: 10px 10px 10px 0; +} + +.chat .body .msg.received .text { + background: #1c7ed6; + color: white; + border-radius: 10px 10px 0 10px; +} + .chat .body .msg .text:hover { background-color: rgba(255, 255, 255, 0.05); } diff --git a/frontend/js/client.js b/frontend/js/client.js index d4f7e8c..af8eec4 100644 --- a/frontend/js/client.js +++ b/frontend/js/client.js @@ -9,7 +9,7 @@ * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com 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 - miroslav.pejic.85@gmail.com - * @version 1.1.34 + * @version 1.1.35 */ const roomId = new URLSearchParams(window.location.search).get('room'); @@ -1477,7 +1477,7 @@ function cleanChat() { } playSound('message'); Swal.fire({ - position: 'center', + position: 'top', title: 'Chat', text: 'Clean up chat messages?', showDenyButton: true, @@ -1543,11 +1543,12 @@ function emitDcMsg(msg) { } function appendMessage(name, msg) { - const time = getTime(); + const time = getTime(false); const div = document.createElement('div'); const span = document.createElement('span'); const p = document.createElement('pre'); - div.className = 'msg'; + const messageClass = name === peerName ? 'sent' : 'received'; + div.className = `msg ${messageClass}`; span.className = 'from'; span.innerText = name + ' ' + time; p.className = 'text'; diff --git a/frontend/js/utils.js b/frontend/js/utils.js index 39e2624..3221183 100644 --- a/frontend/js/utils.js +++ b/frontend/js/utils.js @@ -250,9 +250,9 @@ function secondsToHms(d) { return hDisplay + ' ' + mDisplay + ' ' + sDisplay; } -function getTime() { +function getTime(seconds = true) { const date = new Date(); - return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(); + return date.getHours() + ':' + date.getMinutes() + (seconds ? ':' + date.getSeconds() : ''); } function getDataTimeString() { diff --git a/package.json b/package.json index 0b53fd3..51ffd4f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalkc2c", - "version": "1.1.34", + "version": "1.1.35", "description": "A free WebRTC Cam-2-Cam browser-based video calls", "main": "server.js", "scripts": {