From 4dc41bfbd78453f6bea5cdeca3f85f38a8ae5ac8 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 13 Apr 2026 09:25:01 +0200
Subject: [PATCH] [mirotalk] - feat: replace typewriter with shuffle text
 effect for room name generation

---
 .env.template              |  2 +-
 app/src/config.template.js |  2 +-
 app/src/server.js          |  2 +-
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 public/css/landing.css     |  6 +++++
 public/js/brand.js         |  2 +-
 public/js/client.js        |  4 ++--
 public/js/common.js        | 47 ++++++++++++++++++++++++++++----------
 9 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/.env.template b/.env.template
index e06d4606..eb1333ce 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.01 - Environment Configuration
+# MiroTalk P2P v.1.8.02 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index 119ac279..b42b2d10 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.01 - Configuration File
+ * MiroTalk P2P v.1.8.02 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.
diff --git a/app/src/server.js b/app/src/server.js
index c1f9190e..d76dc11b 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -45,7 +45,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.8.01
+ * @version 1.8.02
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 7334ae3b..ea931a3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.8.01",
+    "version": "1.8.02",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.8.01",
+            "version": "1.8.02",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.5.0",
diff --git a/package.json b/package.json
index 4a37b590..053eae28 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.01",
+    "version": "1.8.02",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/landing.css b/public/css/landing.css
index 6e8b7194..8889fcbd 100755
--- a/public/css/landing.css
+++ b/public/css/landing.css
@@ -4388,3 +4388,9 @@ body {
         grid-template-columns: repeat(4, 1fr);
     }
 }
+
+/* Shuffle text effect */
+.shuffle-active {
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+}
diff --git a/public/js/brand.js b/public/js/brand.js
index 460006cf..d8645989 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.01',
+        title: 'WebRTC P2P v1.8.02',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index e7884d0f..2056ca35 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.8.01
+ * @version 1.8.02
  *
  */
 
@@ -14966,7 +14966,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.01',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.02',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `
diff --git a/public/js/common.js b/public/js/common.js
index 2331079e..281a9a3e 100644
--- a/public/js/common.js
+++ b/public/js/common.js
@@ -144,27 +144,49 @@ function getRandomNumber(length) {
     return result;
 }
 
-// Typing Effect
+// Shuffle Text Effect
 
-let i = 0;
 let txt = num + adjective + noun;
-let speed = 100;
 
 /**
- * Set room name with typewriter effect
+ * Shuffle text effect for input fields
+ * @param {HTMLInputElement} input
+ * @param {string} finalValue
+ * @param {number} duration
  */
-function typeWriter() {
-    if (i < txt.length) {
-        roomName.value += txt.charAt(i);
-        i++;
-        setTimeout(typeWriter, speed);
-    }
+function shuffleText(input, finalValue, duration = 600) {
+    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    const steps = 10;
+    const interval = duration / steps;
+    let step = 0;
+
+    input.classList.add('shuffle-active');
+
+    const timer = setInterval(() => {
+        step++;
+        const progress = step / steps;
+        let display = '';
+        for (let i = 0; i < finalValue.length; i++) {
+            if (i < finalValue.length * progress) {
+                display += finalValue[i];
+            } else {
+                display += chars[Math.floor(Math.random() * chars.length)];
+            }
+        }
+        input.value = display;
+
+        if (step >= steps) {
+            clearInterval(timer);
+            input.value = finalValue;
+            setTimeout(() => input.classList.remove('shuffle-active'), 300);
+        }
+    }, interval);
 }
 
 const roomName = document.getElementById('roomName');
 if (roomName) {
     roomName.value = '';
-    typeWriter();
+    shuffleText(roomName, txt);
 
     roomName.onkeyup = (e) => {
         if (e.keyCode === 13) {
@@ -223,7 +245,8 @@ if (adultCnt) {
 }
 
 function genRoom() {
-    document.getElementById('roomName').value = getUUID4();
+    const input = document.getElementById('roomName');
+    shuffleText(input, getUUID4());
 }
 
 function getUUID4() {