[mirotalkc2c] - feat(emoji): make emoticon conversion an opt-in setting

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk C2C v.1.4.85 - Environment Configuration
+# MiroTalk C2C v.1.4.86 - Environment Configuration
 # ====================================================
 
 # App environment

backend/server.js

@@ -7,7 +7,7 @@
  * @link    Live demo: https://c2c.mirotalk.com
  * @license Open source: AGPLv3 | Commercial/closed source (official channel): https://docs.mirotalk.com/sites/c2c/
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.85
+ * @version 1.4.86
  */
 
 require('dotenv').config();

frontend/html/client.html

@@ -314,6 +314,12 @@ <h1>Preparing your call</h1>
                         <label for="switchLightTheme"><i class="fas fa-sun"></i> Light theme</label>
                         <input id="switchLightTheme" class="toggle" type="checkbox" />
                     </div>
+                    <div class="settings-toggle-row">
+                        <label for="switchConvertEmoticons"
+                            ><i class="fas fa-smile"></i> Convert emoticons to emoji</label
+                        >
+                        <input id="switchConvertEmoticons" class="toggle" type="checkbox" />
+                    </div>
                     <div id="noiseSuppressionDiv" class="settings-toggle-row">
                         <label id="labelNoiseSuppression" for="switchNoiseSuppression"
                             ><i class="fas fa-ear-listen"></i> Noise suppression</label

frontend/js/client.js

@@ -7,7 +7,7 @@
  * @link    Live demo: https://c2c.mirotalk.com
  * @license Open source: AGPLv3 | Commercial/closed source (official channel): https://docs.mirotalk.com/sites/c2c/
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.85
+ * @version 1.4.86
  */
 
 const savedTheme = window.localStorage.getItem('home-theme');
@@ -71,6 +71,7 @@ const maxVideoQualityDiv = document.getElementById('maxVideoQualityDiv');
 const pushToTalkDiv = document.getElementById('pushToTalkDiv');
 const noiseSuppressionDiv = document.getElementById('noiseSuppressionDiv');
 const switchLightTheme = document.getElementById('switchLightTheme');
+const switchConvertEmoticons = document.getElementById('switchConvertEmoticons');
 const switchNoiseSuppression = document.getElementById('switchNoiseSuppression');
 const switchMaxVideoQuality = document.getElementById('switchMaxVideoQuality');
 const switchKeepAspectRatio = document.getElementById('switchKeepAspectRatio');
@@ -180,6 +181,7 @@ const chatInputEmoji = {
     ':N': '🥶',
     ':J': '🥴',
 };
+const chatInputEmoticons = Object.keys(chatInputEmoji).sort((a, b) => b.length - a.length);
 
 const isVideoPIPSupported = document.pictureInPictureEnabled;
 const isWebRTCSupported = checkWebRTCSupported();
@@ -206,7 +208,6 @@ let isSpaceDown = false;
 let pushToTalkAudioContext = null;
 let isMyAudioActiveBefore = false;
 let isMyVideoActiveBefore = false;
-let isChatPasteTxt = false;
 let noiseProcessor = null;
 let noiseSuppressionRequest = 0;
 let noiseSuppressionConstraints = Promise.resolve();
@@ -1473,6 +1474,11 @@ function handleEvents() {
         window.localStorage.setItem('home-theme', theme);
         playSound('switch');
     };
+    switchConvertEmoticons.onchange = (e) => {
+        localStorageConfig.chat.settings.convert_emoticons = e.currentTarget.checked;
+        saveLocalStorageConfig();
+        playSound('switch');
+    };
     //switchMaxVideoQuality.checked = localStorageConfig.video.settings.best_quality;
     switchMaxVideoQuality.onchange = (e) => {
         localStorageConfig.video.settings.best_quality = e.currentTarget.checked;
@@ -1564,18 +1570,15 @@ function handleEvents() {
             chatSendBtn.click();
         }
     };
-    chatInput.oninput = function () {
-        if (isChatPasteTxt) return;
-        for (let i in chatInputEmoji) {
-            let regex = new RegExp(i.replace(/([()[{*+.$^\\|?])/g, '\\$1'), 'gim');
-            this.value = this.value.replace(regex, chatInputEmoji[i]);
+    chatInput.oninput = function (event) {
+        if (localStorageConfig.chat.settings.convert_emoticons && event.inputType !== 'insertFromPaste') {
+            for (const emoticon of chatInputEmoticons) {
+                const regex = new RegExp(emoticon.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
+                this.value = this.value.replace(regex, chatInputEmoji[emoticon]);
+            }
         }
         checkLineBreaks();
     };
-    chatInput.onpaste = () => {
-        isChatPasteTxt = true;
-        checkLineBreaks();
-    };
     leaveBtn.onclick = () => {
         endCall();
     };
@@ -2426,6 +2429,7 @@ function loadLocalStorageConfig() {
         audioOutputSource.selectedIndex = localStorageConfig?.speaker?.devices?.select?.index ?? 0;
     }
     switchNoiseSuppression.checked = localStorageConfig?.audio?.settings?.noise_suppression ?? false;
+    switchConvertEmoticons.checked = localStorageConfig.chat.settings.convert_emoticons;
     switchMaxVideoQuality.checked = localStorageConfig.video.settings.best_quality;
     switchKeepAspectRatio.checked = localStorageConfig.video.settings.aspect_ratio;
     screenCameraSelect.value = getScreenCameraPosition();
@@ -2943,7 +2947,6 @@ function sendMessage() {
 
 function emitDcMsg(msg) {
     if (msg) {
-        isChatPasteTxt = false;
         console.log('Send msg: ' + msg);
         appendMessage(peerName, msg);
         Object.keys(dataChannels).map((peerId) =>

frontend/js/storage.js

@@ -57,6 +57,11 @@ class LocalStorage {
                     screen_camera: 'off', // camera bubble over the shared screen: off | bottom-right | bottom-left | top-right | top-left
                 },
             },
+            chat: {
+                settings: {
+                    convert_emoticons: false,
+                },
+            },
         };
     }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalkc2c",
-    "version": "1.4.85",
+    "version": "1.4.86",
     "description": "A free WebRTC Cam-2-Cam browser-based video calls",
     "main": "server.js",
     "scripts": {
@@ -40,7 +40,7 @@
     "dependencies": {
         "@mattermost/client": "11.9.0",
         "@ngrok/ngrok": "1.7.0",
-        "@sentry/node": "^11.9.0",
+        "@sentry/node": "^11.10.0",
         "colors": "^1.4.0",
         "compression": "^1.8.2",
         "cors": "^2.8.6",
@@ -53,11 +53,11 @@
         "httpolyglot": "0.1.2",
         "js-yaml": "^5.5.0",
         "jsdom": "^30.1.3",
-        "nodemailer": "^10.2.1",
+        "nodemailer": "^10.3.1",
         "socket.io": "^4.8.4",
         "swagger-ui-express": "5.0.1",
         "uuid": "14.0.3",
-        "xss": "^1.0.16"
+        "xss": "^1.0.17"
     },
     "devDependencies": {
         "mocha": "^12.0.3",