[mirotalksfu] - change emoji-picker

public/css/Room.css

@@ -518,15 +518,11 @@ body {
 # Chat room emoji picker
 --------------------------------------------------------------*/
 
-emoji-picker {
+em-emoji-picker {
     z-index: 0;
     position: absolute;
-    bottom: 100px;
+    bottom: 110px;
-    width: 100%;
+    left: 10px;
-    height: 50%;
-    --background: #16171b;
-    --num-columns: 8;
-    --emoji-size: 1.5rem;
 }
 
 /*--------------------------------------------------------------

public/js/Room.js

@@ -1102,10 +1102,14 @@ function handleInputs() {
         rc.checkLineBreaks();
     };
 
-    rc.getId('chatEmoji').addEventListener('emoji-click', (e) => {
+    const pickerOptions = { onEmojiSelect: addEmojiToMsg };
-        chatMessage.value += e.detail.emoji.unicode;
+    const emojiPicker = new EmojiMart.Picker(pickerOptions);
+    rc.getId('chatEmoji').appendChild(emojiPicker);
+
+    function addEmojiToMsg(data) {
+        chatMessage.value += data.native;
         rc.toggleChatEmoji();
-    });
+    }
 }
 
 // ####################################################

public/js/RoomClient.js

@@ -2176,6 +2176,11 @@ class RoomClient {
         this.getId('chatEmojiButton').style.color = this.isChatEmojiOpen ? '#FFFF00' : '#FFFFFF';
     }
 
+    addEmojiToMsg(data) {
+        msgerInput.value += data.native;
+        toggleChatEmoji();
+    }
+
     cleanMessage() {
         chatMessage.value = '';
         chatMessage.style.height = '43px';

public/views/Room.html

@@ -83,7 +83,7 @@
         <script defer src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/fabric@5.2.4-browser/dist/fabric.min.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.30"></script>
-        <script defer src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js" type="module"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
         <script defer src="https://unpkg.com/@popperjs/core@2"></script>
         <script defer src="https://unpkg.com/tippy.js@6"></script>
     </head>
@@ -417,9 +417,7 @@
                         <i class="fas fa-paper-plane"></i>
                     </button>
                 </div>
-                <div id="chatEmoji" class="hidden fadein">
+                <div id="chatEmoji" class="hidden fadein"></div>
-                    <emoji-picker class="dark"></emoji-picker>
-                </div>
             </section>
         </section>