[mirotalksfu] - improve getRoomParticipants

public/Room.html

@@ -150,6 +150,19 @@ access to use this app.
         </div>
         <div id="remoteAudios"></div>
 
+        <section id="participants" class="fadein center hidden">
+            <header id="participantsHeader" class="participants-header">
+                <div id="participantsTitle" class="participants-header-title"></div>
+                <div class="participants-header-options">
+                    <button id="participantsRefreshBtn" class="fas fa-sync-alt"></button>
+                    <button id="participantsCloseBtn" class="fas fa-times"></button>
+                </div>
+            </header>
+            <main>
+                <div id="roomParticipants"></div>
+            </main>
+        </section>
+
         <section id="chatRoom" class="chat-room center fadein">
             <section id="msger" class="msger">
                 <header id="chatHeader" class="chat-header">

public/css/Room.css

@@ -527,6 +527,31 @@ button:hover {
 # Room Participants
 --------------------------------------------------------------*/
 
+#participants {
+    z-index: 17;
+    position: absolute;
+    margin: auto;
+    padding: 10px;
+    min-width: 320px;
+    background: var(--body-bg);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.participants-header {
+    display: flex;
+    justify-content: space-between;
+    background: rgb(0, 0, 0);
+    border-radius: 10px;
+    padding: 10px;
+    color: #666;
+    cursor: move;
+}
+
+.participants-header-title {
+    color: white;
+}
+
 #roomParticipants {
     max-height: 480px;
     overflow: auto;

public/js/Room.js

@@ -4,6 +4,13 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
 
 const RoomURL = window.location.href;
 
+const swalBackground = 'linear-gradient(to left, #1f1e1e, #000000)';
+const swalImageUrl = '../images/pricing-illustration.svg';
+
+const url = {
+    ipLookup: 'https://extreme-ip-lookup.com/json/',
+};
+
 const _PEER = {
     audioOn: '<i class="fas fa-microphone"></i>',
     audioOff: '<i style="color: red;" class="fas fa-microphone-slash"></i>',
@@ -14,12 +21,7 @@ const _PEER = {
     ejectPeer: '<i class="fas fa-times"></i>',
 };
 
-const swalBackground = 'linear-gradient(to left, #1f1e1e, #000000)';
-const swalImageUrl = '../images/pricing-illustration.svg';
-
-const url = {
-    ipLookup: 'https://extreme-ip-lookup.com/json/',
-};
+let participantsCount = 0;
 
 let rc = null;
 let producer = null;
@@ -54,6 +56,8 @@ function getRandomNumber(length) {
 function initClient() {
     if (!DetectRTC.isMobileDevice) {
         setTippy('closeNavButton', 'Close', 'right');
+        setTippy('participantsRefreshBtn', 'Refresh', 'top');
+        setTippy('participantsCloseBtn', 'Close', 'top');
         setTippy('chatMessage', 'Press enter to send', 'top-start');
         setTippy('chatSendButton', 'Send', 'top');
         setTippy('chatEmojiButton', 'Emoji', 'top');
@@ -389,6 +393,7 @@ function roomIsReady() {
         setChatSize();
     } else {
         rc.makeDraggable(chatRoom, chatHeader);
+        rc.makeDraggable(participants, participantsHeader);
         if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) {
             show(startScreenButton);
         }
@@ -493,10 +498,10 @@ function stopRecordingTimer() {
 
 function handleButtons() {
     openNavButton.onclick = () => {
-        toggleNav();
+        rc.toggleNav();
     };
     closeNavButton.onclick = () => {
-        toggleNav();
+        rc.toggleNav();
     };
     exitButton.onclick = () => {
         rc.exit();
@@ -577,6 +582,12 @@ function handleButtons() {
     participantsButton.onclick = () => {
         getRoomParticipants();
     };
+    participantsRefreshBtn.onclick = () => {
+        getRoomParticipants(true);
+    };
+    participantsCloseBtn.onclick = () => {
+        toggleParticipants();
+    };
     lockRoomButton.onclick = () => {
         rc.roomAction('lock');
     };
@@ -737,10 +748,6 @@ function handleRoomClientEvents() {
     });
 }
 
-function toggleNav() {
-    control.classList.toggle('show');
-}
-
 // ####################################################
 // SHOW LOG
 // ####################################################
@@ -777,36 +784,30 @@ async function sound(name) {
 // HANDLE PARTICIPANTS
 // ####################################################
 
-async function getRoomParticipants() {
+function toggleParticipants() {
+    let participants = rc.getId('participants');
+    participants.classList.toggle('show');
+    participants.style.top = '50%';
+    participants.style.left = '50%';
+}
+
+async function getRoomParticipants(refresh = false) {
     let room_info = await rc.getRoomInfo();
     let peers = new Map(JSON.parse(room_info.peers));
     let table = await getParticipantsTable(peers);
 
-    sound('open');
+    participantsCount = peers.size;
+    roomParticipants.innerHTML = table;
+    refreshParticipantsCount(participantsCount);
 
-    Swal.fire({
-        background: swalBackground,
-        position: 'center',
-        title: `Participants ${peers.size}`,
-        html: table,
-        showCancelButton: true,
-        confirmButtonText: `Refresh`,
-        cancelButtonText: `Close`,
-        showClass: {
-            popup: 'animate__animated animate__fadeInDown',
-        },
-        hideClass: {
-            popup: 'animate__animated animate__fadeOutUp',
-        },
-    }).then((result) => {
-        if (result.isConfirmed) {
-            getRoomParticipants();
-        }
-    });
+    if (!refresh) {
+        toggleParticipants();
+        sound('open');
+    }
 }
 
 async function getParticipantsTable(peers) {
-    let table = `<div id="roomParticipants">
+    let table = `
     <table>
     <tr>
         <th></th>
@@ -856,10 +857,14 @@ async function getParticipantsTable(peers) {
             `;
         }
     }
-    table += `</table></div>`;
+    table += `</table>`;
     return table;
 }
 
+function refreshParticipantsCount(count) {
+    participantsTitle.innerHTML = `<i class="fas fa-users"></i> Participants ( ${count} )`;
+}
+
 // ####################################################
 // ABOUT
 // ####################################################

public/js/RoomClient.js

@@ -993,6 +993,10 @@ class RoomClient {
     // UTILITY
     // ####################################################
 
+    toggleNav() {
+        this.getId('control').classList.toggle('show');
+    }
+
     toggleDevices() {
         this.getId('settings').classList.toggle('show');
     }
@@ -1468,6 +1472,8 @@ class RoomClient {
 
         if (emit) {
             if (!broadcast) {
+                if (participantsCount === 1) return;
+
                 const words = peer_id.split('__');
                 peer_id = words[0];
 
@@ -1475,6 +1481,8 @@ class RoomClient {
                     case 'eject':
                         let peer = this.getId(peer_id);
                         if (peer) peer.parentNode.removeChild(peer);
+                        participantsCount--;
+                        refreshParticipantsCount(participantsCount);
                         break;
                     case 'mute':
                         let peerAudioButton = this.getId(peer_id + '__audio');
@@ -1485,19 +1493,23 @@ class RoomClient {
                         if (peerVideoButton) peerVideoButton.innerHTML = _PEER.videoOff;
                 }
             } else {
+                if (participantsCount === 1) return;
+
                 let actionButton = this.getId(action + 'AllButton');
                 if (actionButton) actionButton.style.display = 'none';
 
                 switch (action) {
                     case 'eject':
+                        participantsCount = 1;
+                        refreshParticipantsCount(participantsCount);
                         setTimeout(() => {
-                            getRoomParticipants();
+                            getRoomParticipants(true);
                         }, 6000);
                         break;
                     case 'mute':
                     case 'hide':
                         setTimeout(() => {
-                            getRoomParticipants();
+                            getRoomParticipants(true);
                         }, 2000);
                         break;
                 }