diff --git a/backend/server.js b/backend/server.js index fad5125..df376bf 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.31 + * @version 1.1.32 */ require('dotenv').config(); diff --git a/frontend/css/chat.css b/frontend/css/chat.css index 9967a75..cce57b0 100644 --- a/frontend/css/chat.css +++ b/frontend/css/chat.css @@ -89,8 +89,13 @@ .chat .footer textarea:focus { border: 1px solid #439fff; } -.chat .footer button { - position: absolute; + +.chat .footer .buttons { + display: inline; +} + +.chat .footer .buttons button { + position: relative; bottom: 13px; right: 5px; border: none; @@ -98,7 +103,7 @@ background: transparent; color: #439fff; } -.chat .footer button:hover { +.chat .footer .buttons button:hover { color: var(--text-color); } @@ -119,3 +124,14 @@ .chat .footer textarea::-webkit-scrollbar-thumb { background: var(--primary-color); } + +.chatEmojiPicker { + position: absolute; + bottom: 0px; + background: var(--chat-bg); + border: var(--border); + border-radius: 5px; + --rgb-background: var(--chat-bg); + --color-border-over: var(--chat-bg); + --font-family: 'Montserrat'; +} \ No newline at end of file diff --git a/frontend/html/client.html b/frontend/html/client.html index 28c0529..7219aee 100644 --- a/frontend/html/client.html +++ b/frontend/html/client.html @@ -39,6 +39,7 @@ + @@ -154,8 +155,12 @@

Waiting

+ diff --git a/frontend/js/client.js b/frontend/js/client.js index 207f8dd..842ebf8 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.31 + * @version 1.1.32 */ const roomId = new URLSearchParams(window.location.search).get('room'); @@ -50,7 +50,9 @@ const chatOpenBtn = document.getElementById('chatOpenBtn'); const chatBody = document.getElementById('chatBody'); const chatCloseBtn = document.getElementById('chatCloseBtn'); const chatInput = document.getElementById('chatInput'); +const chatEmojiBtn = document.getElementById('chatEmojiBtn'); const chatSendBtn = document.getElementById('chatSendBtn'); +const chatEmoji = document.getElementById('chatEmoji'); const roomURL = window.location.origin + '/?room=' + roomId; @@ -215,6 +217,7 @@ function thereIsPeerConnections() { document.addEventListener('DOMContentLoaded', function () { initClient(); + handleChatEmojiPicker(); }); function initClient() { @@ -885,6 +888,9 @@ function handleEvents() { chatCloseBtn.onclick = () => { toggleChat(); }; + chatEmojiBtn.onclick = () => { + toggleChatEmoji(); + }; chatSendBtn.onclick = () => { sendMessage(); }; @@ -1443,6 +1449,25 @@ function toggleChat() { } } +function toggleChatEmoji(){ + chatEmoji.classList.toggle('show'); +} + +function handleChatEmojiPicker() { + const pickerOptions = { + theme: 'dark', + perLine: 8, + onEmojiSelect: addEmojiToMsg, + }; + const emojiPicker = new EmojiMart.Picker(pickerOptions); + chatEmoji.appendChild(emojiPicker); + + function addEmojiToMsg(data) { + chatInput.value += data.native; + toggleChatEmoji(); + } +} + function sendMessage() { console.log(typeof chatInput.value); if (!chatInput.value) return; diff --git a/package.json b/package.json index 1ce3ca8..d91743a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalkc2c", - "version": "1.1.31", + "version": "1.1.32", "description": "A free WebRTC Cam-2-Cam browser-based video calls", "main": "server.js", "scripts": { @@ -40,7 +40,7 @@ "compression": "^1.7.4", "cors": "^2.8.5", "dotenv": "^16.4.5", - "express": "^4.21.0", + "express": "^4.21.1", "express-openid-connect": "^2.17.1", "js-yaml": "^4.1.0", "ngrok": "^5.0.0-beta.2",