diff --git a/app/src/server.js b/app/src/server.js
index c64505899..5e2600337 100755
--- 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 license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.77
+ * @version 1.3.78
*
*/
diff --git a/package.json b/package.json
index cc0b778c6..df1e07161 100644
--- 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
index 2ce14d9a9..6a267730c 100755
--- 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
index 8dbeea6a9..c156f4e7c 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @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: 'WebRTC P2P v1.3.77',
+ title: 'WebRTC P2P v1.3.78',
imageAlt: 'mirotalk-about',
imageUrl: images.about,
customClass: { image: 'img-about' },
diff --git a/public/views/client.html b/public/views/client.html
index 7b940e901..ab78f3b1e 100755
--- a/public/views/client.html
+++ b/public/views/client.html
@@ -104,12 +104,17 @@ Loading
+
+
+
+
+