From b1dc4a49f8558ab0e494edd3e15fe6e6666cecb5 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sat, 1 Nov 2025 19:32:14 +0100
Subject: [PATCH] [mirotalksfu] - add attachParticipantsDropdownHover, fix
 dropdown typo

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

diff --git a/app/src/Server.js b/app/src/Server.js
index e1a4695f..194a35ce 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.94
+ * @version 1.9.95
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index ff50f1ef..5c28769a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalksfu",
-    "version": "1.9.94",
+    "version": "1.9.95",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalksfu",
-            "version": "1.9.94",
+            "version": "1.9.95",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@aws-sdk/client-s3": "^3.922.0",
diff --git a/package.json b/package.json
index 97a40bff..364dd5b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.9.94",
+    "version": "1.9.95",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
diff --git a/public/js/Brand.js b/public/js/Brand.js
index b7501cf2..cce701a7 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.94</strong>',
+        title: '<strong>WebRTC SFU v1.9.95</strong>',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/Room.js b/public/js/Room.js
index 9351fd98..e4ba170b 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.94
+ * @version 1.9.95
  *
  */
 
@@ -3910,8 +3910,8 @@ function handleDropdownHover() {
     if (!supportsHover) return;
 
     const dropdowns = document.querySelectorAll('.dropdown');
-    
-    dropdowns.forEach(dropdown => {
+
+    dropdowns.forEach((dropdown) => {
         const toggle = dropdown.querySelector('.dropdown-toggle');
         const menu = dropdown.querySelector('.dropdown-menu');
 
@@ -3924,7 +3924,7 @@ function handleDropdownHover() {
             const bsDropdown = new bootstrap.Dropdown(toggle);
             bsDropdown.show();
         });
-        
+
         dropdown.addEventListener('mouseleave', () => {
             timeoutId = setTimeout(() => {
                 const bsDropdown = bootstrap.Dropdown.getInstance(toggle);
@@ -3933,7 +3933,7 @@ function handleDropdownHover() {
                 }
             }, 200);
         });
-        
+
         menu.addEventListener('mouseenter', () => {
             clearTimeout(timeoutId);
         });
@@ -4766,11 +4766,58 @@ async function getRoomParticipants() {
     const lists = getParticipantsList(peers);
     participantsCount = peers.size;
     participantsList.innerHTML = lists;
+    attachParticipantsDropdownHover();
     refreshParticipantsCount(participantsCount, false);
     setParticipantsTippy(peers);
     console.log('*** Refresh Chat participant lists ***');
 }
 
+function attachParticipantsDropdownHover() {
+    const supportsHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+    if (!supportsHover) {
+        console.log('Dropdown hover: Device does not support hover');
+        return;
+    }
+
+    const dropdowns = participantsList.querySelectorAll('.dropdown');
+    console.log('Dropdown hover: Found', dropdowns.length, 'dropdowns in participants list');
+
+    dropdowns.forEach((dropdown) => {
+        const toggle = dropdown.querySelector('.dropdown-toggle');
+        const menu = dropdown.querySelector('.dropdown-menu');
+
+        if (!toggle || !menu) {
+            console.log('Dropdown hover: Missing toggle or menu');
+            return;
+        }
+
+        let timeoutId;
+
+        dropdown.addEventListener('mouseenter', () => {
+            clearTimeout(timeoutId);
+            const bsDropdown = bootstrap.Dropdown.getInstance(toggle) || new bootstrap.Dropdown(toggle);
+            bsDropdown.show();
+        });
+
+        dropdown.addEventListener('mouseleave', () => {
+            timeoutId = setTimeout(() => {
+                const bsDropdown = bootstrap.Dropdown.getInstance(toggle);
+                if (bsDropdown) {
+                    bsDropdown.hide();
+                }
+            }, 200);
+        });
+
+        menu.addEventListener('mouseenter', () => {
+            clearTimeout(timeoutId);
+        });
+
+        toggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+    });
+}
+
 function getParticipantsList(peers) {
     let li = '';
 
@@ -4846,7 +4893,7 @@ function getParticipantsList(peers) {
     // ONLY PRESENTER CAN EXECUTE THIS CMD
     if (!isRulesActive || isPresenter) {
         li += `
-        <div style="class="dropdown">
+        <div class="dropdown">
             <button 
                 class="dropdown-toggle" 
                 type="button" 
@@ -4931,7 +4978,7 @@ function getParticipantsList(peers) {
                         <div class="status"> <i class="fa fa-circle online"></i> online <i id="${peer_id}-unread-msg" class="fas fa-comments hidden"></i> </div>
                     </div>
 
-                    <div style="class="dropdown">
+                    <div class="dropdown">
                         <button 
                             class="dropdown-toggle" 
                             type="button" 
@@ -5010,7 +5057,7 @@ function getParticipantsList(peers) {
                 // NO ROOM BROADCASTING
                 if (!isBroadcastingEnabled) {
                     li += `
-                    <div style="class="dropdown">
+                    <div class="dropdown">
                         <button 
                             class="dropdown-toggle" 
                             type="button" 
@@ -5762,7 +5809,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.94',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.95',
         html: `
             <br />
             <div id="about">
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index e60847b9..e56ed3af 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.94
+ * @version 1.9.95
  *
  */