[mirotalk] - add username emoji, update dep

miroslavpejic85 · Oct 1, 2024 · 329985a · 329985a
1 parent a820943
commit 329985a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/app/src/server.js b/app/src/server.js
@@ -39,7 +39,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at [email protected] or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - [email protected]
- * @version 1.3.77
+ * @version 1.3.78
  *
  */
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.3.77",
+    "version": "1.3.78",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
@@ -55,7 +55,7 @@
         "js-yaml": "^4.1.0",
         "ngrok": "^5.0.0-beta.2",
         "nodemailer": "^6.9.15",
-        "openai": "^4.63.0",
+        "openai": "^4.67.0",
         "qs": "^6.13.0",
         "socket.io": "^4.8.0",
         "swagger-ui-express": "^5.0.1",

diff --git a/public/css/client.css b/public/css/client.css
@@ -852,6 +852,17 @@ button:hover {
 # Chat/room/user emoji picker
 --------------------------------------------------------------*/
 
+#usernameEmoji {
+    position: absolute;
+    z-index: 9999;
+    background: var(--body-bg);
+    border: var(--border);
+    border-radius: 5px;
+    --rgb-background: var(--body-bg) !important;
+    --color-border-over: var(--body-bg) !important;
+    --font-family: 'Montserrat';
+}
+
 .chatEmojiPicker {
     z-index: 12;
     position: absolute;

diff --git a/public/js/client.js b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at [email protected] or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - [email protected]
- * @version 1.3.77
+ * @version 1.3.78
  *
  */
 
@@ -231,9 +231,11 @@ const initVideoBtn = getId('initVideoBtn');
 const initAudioBtn = getId('initAudioBtn');
 const initScreenShareBtn = getId('initScreenShareBtn');
 const initVideoMirrorBtn = getId('initVideoMirrorBtn');
+const initUsernameEmojiButton = getId('initUsernameEmojiButton');
 const initVideoSelect = getId('initVideoSelect');
 const initMicrophoneSelect = getId('initMicrophoneSelect');
 const initSpeakerSelect = getId('initSpeakerSelect');
+const usernameEmoji = getId('usernameEmoji');
 
 // Buttons bar
 const buttonsBar = getId('buttonsBar');
@@ -766,6 +768,7 @@ function setButtonsToolTip() {
     // Init buttons
     setTippy(initScreenShareBtn, 'Toggle screen sharing', 'top');
     setTippy(initVideoMirrorBtn, 'Toggle video mirror', 'top');
+    setTippy(initUsernameEmojiButton, 'Toggle username emoji', 'top');
     // Main buttons
     refreshMainButtonsToolTipPlacement();
     // Chat room buttons
@@ -1258,6 +1261,7 @@ async function handleConnect() {
         }
         getHtmlElementsById();
         setButtonsToolTip();
+        handleUsernameEmojiPicker();
         manageLeftButtons();
         handleButtonsRule();
         setupMySettings();
@@ -1478,6 +1482,9 @@ async function whoAreYou() {
     initVideoMirrorBtn.onclick = (e) => {
         toggleInitVideoMirror();
     };
+    initUsernameEmojiButton.onclick = (e) => {
+        toggleUsernameEmoji();
+    };
 
     await loadLocalStorage();
 
@@ -1512,7 +1519,7 @@ async function whoAreYou() {
         position: 'center',
         input: 'text',
         inputPlaceholder: 'Enter your email or name',
-        inputAttributes: { maxlength: 32 },
+        inputAttributes: { maxlength: 32, id: 'usernameInput' },
         inputValue: window.localStorage.peer_name ? window.localStorage.peer_name : '',
         html: initUser, // inject html
         confirmButtonText: `Join meeting`,
@@ -1537,6 +1544,10 @@ async function whoAreYou() {
             if (await checkUserName()) {
                 return 'Username is already in use!';
             } else {
+                // Hide username emoji
+                if (!usernameEmoji.classList.contains('hidden')) {
+                    usernameEmoji.classList.add('hidden');
+                }
                 window.localStorage.peer_name = myPeerName;
                 whoAreYouJoin();
             }
@@ -5675,6 +5686,30 @@ async function handleLocalCameraMirror() {
     }
 }
 
+/**
+ * Toggle username emoji
+ */
+function toggleUsernameEmoji() {
+    usernameEmoji.classList.toggle('hidden');
+}
+
+/**
+ * Handle username emoji picker
+ */
+function handleUsernameEmojiPicker() {
+    const pickerOptions = {
+        theme: 'dark',
+        onEmojiSelect: addEmojiToUsername,
+    };
+    const emojiUsernamePicker = new EmojiMart.Picker(pickerOptions);
+    usernameEmoji.appendChild(emojiUsernamePicker);
+
+    function addEmojiToUsername(data) {
+        getId('usernameInput').value += data.native;
+        toggleUsernameEmoji();
+    }
+}
+
 /**
  * Toggle vide mirror
  */
@@ -10533,7 +10568,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: '<strong>WebRTC P2P v1.3.77</strong>',
+        title: '<strong>WebRTC P2P v1.3.78</strong>',
         imageAlt: 'mirotalk-about',
         imageUrl: images.about,
         customClass: { image: 'img-about' },

diff --git a/public/views/client.html b/public/views/client.html
@@ -104,12 +104,17 @@ <h1>Loading</h1>
                 <button id="initAudioBtn" class="fas fa-microphone"></button>
                 <button id="initScreenShareBtn" class="fas fa-desktop"></button>
                 <button id="initVideoMirrorBtn" class="fas fa-arrow-right-arrow-left"></button>
+                <button id="initUsernameEmojiButton" class="fas fa-smile"></button>
                 <select id="initVideoSelect" class="form-select text-light bg-dark"></select>
                 <select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
                 <select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>
             </div>
         </div>
 
+        <!-- Add emoji to username -->
+
+        <div id="usernameEmoji" class="usernameEmoji fadein center hidden"></div>
+
         <!-- Start buttons bar https://fontawesome.com/icons?d=gallery -->
 
         <div id="buttonsBar" class="fadein">