From da49980cf6573e05ebd5d5e485cc7feb10c033c9 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 29 Sep 2025 00:20:08 +0200
Subject: [PATCH] [mirotalksfu] - refactoring video menu bar

---
 app/src/Server.js       |  2 +-
 package-lock.json       |  4 +--
 package.json            |  2 +-
 public/js/Brand.js      |  2 +-
 public/js/Room.js       |  4 +--
 public/js/RoomClient.js | 57 ++++++++++++++++++++++++-----------------
 6 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/app/src/Server.js b/app/src/Server.js
index 4e4052d2..8dc1dfce 100644
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -64,7 +64,7 @@ dev dependencies: {
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.9.73
+ * @version 1.9.74
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 20f4043e..cc1b1956 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalksfu",
-    "version": "1.9.73",
+    "version": "1.9.74",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalksfu",
-            "version": "1.9.73",
+            "version": "1.9.74",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@aws-sdk/client-s3": "^3.896.0",
diff --git a/package.json b/package.json
index 04c4732a..982c8699 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.9.73",
+    "version": "1.9.74",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
diff --git a/public/js/Brand.js b/public/js/Brand.js
index 84b5a6ab..50f2d2fa 100644
--- a/public/js/Brand.js
+++ b/public/js/Brand.js
@@ -78,7 +78,7 @@ let BRAND = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.9.73</strong>',
+        title: '<strong>WebRTC SFU v1.9.74</strong>',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/Room.js b/public/js/Room.js
index 8de3552f..062dbaca 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.9.73
+ * @version 1.9.74
  *
  */
 
@@ -5693,7 +5693,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.73',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.74',
         html: `
             <br />
             <div id="about">
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index 79eab2c6..8c05361c 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.9.73
+ * @version 1.9.74
  *
  */
 
@@ -3078,6 +3078,7 @@ class RoomClient {
 
                 eVc = document.createElement('div');
                 eVc.className = 'expand-video-content';
+                eVc.id = id + '_videoExpandContent';
 
                 pip = this.createButton(id + '__pictureInPicture', html.pip);
                 mv = this.createButton(id + '__videoMirror', html.mirror);
@@ -3182,8 +3183,7 @@ class RoomClient {
 
                 this.isVideoPictureInPictureSupported && this.handlePIP(elem.id, pip.id);
                 this.isVideoFullScreenSupported && this.handleFS(elem.id, fs.id);
-                this.handleVBEC(eBtn, eVc, vb, d);
-                this.handleVB(d.id, vb.id);
+                this.handleVB(d.id, vb.id, eBtn.id, eVc.id);
                 this.handleDD(elem.id, remotePeerId);
                 this.handleTS(elem.id, ts.id);
                 this.handleMV(elem.id, mv.id);
@@ -4606,28 +4606,33 @@ class RoomClient {
     // HANDLE VIDEO AND MENU BAR
     // ####################################################
 
-    handleVBEC(eBtn, eVc, vb, d) {
-        const showDropdown = () => eVc.classList.add('show');
-        const hideDropdown = () => eVc.classList.remove('show');
-        const hideVideoBar = () => hide(vb) && hideDropdown();
-        if (!this.isMobileDevice) {
-            eBtn.addEventListener('mouseenter', showDropdown);
-            eBtn.addEventListener('mouseleave', hideDropdown);
-            eVc.addEventListener('mouseenter', showDropdown);
-            eVc.addEventListener('mouseleave', hideDropdown);
-            d.addEventListener('mouseleave', hideDropdown);
-        } else {
-            eBtn.addEventListener('click', showDropdown);
-            eVc.addEventListener('click', showDropdown);
-        }
-        document.addEventListener('click', hideVideoBar);
-    }
-
-    handleVB(videoId, videoBarId) {
+    handleVB(videoId, videoBarId, eBtnId = null, eVcId = null) {
         const videoPlayer = this.getId(videoId);
         const videoBar = this.getId(videoBarId);
+        const eBtn = this.getId(eBtnId);
+        const eVc = this.getId(eVcId);
+
+        if (eBtn && eVc) {
+            const showDropdown = () => eVc.classList.add('show');
+            const hideDropdown = () => eVc.classList.remove('show');
+
+            const handleDocumentClick = (e) => {
+                if (!eBtn.contains(e.target) && !eVc.contains(e.target)) {
+                    hideDropdown();
+                }
+            };
+
+            if (this.isDesktopDevice) {
+                eBtn.addEventListener('mouseenter', showDropdown);
+                eVc.addEventListener('mouseleave', hideDropdown);
+            } else {
+                eBtn.addEventListener('click', showDropdown);
+                document.addEventListener('click', handleDocumentClick);
+            }
+        }
+
         if (videoPlayer && videoBar) {
-            const eventType = this.isMobileDevice ? 'click' : 'mouseenter';
+            const eventType = this.isDesktopDevice ? 'mouseenter' : 'click';
             videoPlayer.addEventListener(eventType, async () => {
                 hideVideoMenuBar(videoBarId);
                 rc.resizeVideoMenuBar();
@@ -4641,12 +4646,18 @@ class RoomClient {
                         videoPlayer.style.setProperty('border', 'var(--videoBar-active)', 'important');
                     }
                 } else {
-                    animateCSS(videoBar, 'fadeOutUp').then((msg) => {
+                    animateCSS(videoBar, 'fadeOutUp').then(() => {
                         hide(videoBar);
                     });
                     videoPlayer.style.setProperty('border', 'none', 'important');
                 }
             });
+            if (this.isDesktopDevice) {
+                videoPlayer.addEventListener('mouseleave', () => {
+                    setCamerasBorderNone();
+                    hideVideoMenuBar('ALL');
+                });
+            }
         }
     }