[mirotalkc2c] - add chat emoji picker

miroslavpejic85 · Oct 8, 2024 · 4a24452 · 4a24452
1 parent 67f9e3a
commit 4a24452
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 8 deletions.
diff --git a/backend/server.js b/backend/server.js
@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: [email protected] 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 - [email protected]
- * @version 1.1.31
+ * @version 1.1.32
  */
 
 require('dotenv').config();

diff --git a/frontend/css/chat.css b/frontend/css/chat.css
@@ -89,16 +89,21 @@
 .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;
     float: right;
     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';
+}
diff --git a/frontend/html/client.html b/frontend/html/client.html
@@ -39,6 +39,7 @@
         <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy-bundle.umd.min.js"></script>
         <script defer src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.37/ua-parser.min.js"></script>
         <script defer src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
         <script defer src="/socket.io/socket.io.js"></script>
         <script defer src="../js/storage.js"></script>
         <script defer src="../js/swal.js"></script>
@@ -154,8 +155,12 @@ <h1>Waiting</h1>
             <div class="body" id="chatBody"></div>
             <div class="footer">
                 <textarea id="chatInput" placeholder="Write a message..."></textarea>
-                <button id="chatSendBtn" class="fas fa-paper-plane"></button>
+                <div class="buttons">
+                    <button id="chatSendBtn" class="fas fa-paper-plane"></button>
+                    <button id="chatEmojiBtn" class="fas fa-smile"></button>
+                </div>
             </div>
+            <div id="chatEmoji" class="chatEmojiPicker hidden"></div>
         </div>
     </body>
 </html>
diff --git a/frontend/js/client.js b/frontend/js/client.js
@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: [email protected] 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 - [email protected]
- * @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
@@ -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",