From 345ecef1738f5974502f6ad5c2e2a815865482d7 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Wed, 6 May 2026 23:14:04 +0200
Subject: [PATCH] [mirotalk] - fix: cancel pending rAF in showDisconnectBanner
 to prevent stuck banner on fast reconnect

---
 .env.template              |  2 +-
 app/src/config.template.js |  2 +-
 app/src/server.js          |  2 +-
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 public/js/brand.js         |  2 +-
 public/js/client.js        | 19 ++++++++++++++-----
 7 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/.env.template b/.env.template
index ad9e2e88..ce324c5d 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.32 - Environment Configuration
+# MiroTalk P2P v.1.8.33 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index f58bf171..bc90823a 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.32 - Configuration File
+ * MiroTalk P2P v.1.8.33 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.
diff --git a/app/src/server.js b/app/src/server.js
index 50b9620f..67f366e6 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.32
+ * @version 1.8.33
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 9d34b505..85edda90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.8.32",
+    "version": "1.8.33",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.8.32",
+            "version": "1.8.33",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.6.0",
diff --git a/package.json b/package.json
index 8f9b2140..58f18163 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.32",
+    "version": "1.8.33",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/js/brand.js b/public/js/brand.js
index 897a15b9..18612edc 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.32',
+        title: 'WebRTC P2P v1.8.33',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index d0d32eb0..30ddd534 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.32
+ * @version 1.8.33
  *
  */
 
@@ -517,6 +517,7 @@ const icon = getId('disconnectBannerIcon');
 const title = getId('disconnectBannerTitle');
 const msg = getId('disconnectBannerMsg');
 const spinner = getId('disconnectBannerSpinner');
+let disconnectBannerRafId = null;
 
 //....
 
@@ -15812,7 +15813,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.32',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.33',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: renderRoomTemplate('tpl-about-modal', {
@@ -16075,15 +16076,23 @@ function showDisconnectBanner() {
     title.textContent = 'Connection lost';
     msg.innerHTML = 'Reconnecting to signaling server\u2026';
     spinner.style.opacity = '1';
-    // Trigger transition
-    requestAnimationFrame(() => banner.classList.add('visible'));
+    if (disconnectBannerRafId) cancelAnimationFrame(disconnectBannerRafId);
+    disconnectBannerRafId = requestAnimationFrame(() => {
+        disconnectBannerRafId = null;
+        banner.classList.add('visible');
+    });
 }
 
 /**
  * Hide the disconnect banner (or briefly show a reconnected confirmation).
  */
 function hideDisconnectBanner() {
-    if (!banner || !banner.classList.contains('visible')) return;
+    if (!banner) return;
+    if (disconnectBannerRafId) {
+        cancelAnimationFrame(disconnectBannerRafId);
+        disconnectBannerRafId = null;
+    }
+    if (!banner.classList.contains('visible')) return;
     banner.classList.add('reconnected');
     icon.className = 'fa-solid fa-circle-check';
     title.textContent = 'Back online';