[mirotalksfu] - add participants search filter

public/css/Room.css

@@ -589,10 +589,24 @@ button:hover {
     padding: 8px;
 }
 
+#roomParticipants tr {
+    border-bottom: 1px solid #444444;
+}
 /* #roomParticipants tr:nth-child(even) {
     background-color: #0c0b0b;
 } */
 
+#searchParticipants {
+    margin-top: 15px;
+    width: 100%;
+    padding: 15px;
+    font-size: 1rem;
+    background-color: transparent;
+    color: #ffffff;
+    border: grey 1px solid;
+    border-radius: 10px;
+}
+
 /*--------------------------------------------------------------
 # Send File
 --------------------------------------------------------------*/

public/js/Room.js

@@ -1352,7 +1352,16 @@ async function getRoomParticipants(refresh = false) {
 
 async function getParticipantsTable(peers) {
     let table = `
-    <table>
+    <div>
+        <input
+            id="searchParticipants"
+            type="text"
+            placeholder=" 🔍 Search participants ..."
+            name="search"
+            onkeyup="rc.searchPeer();"
+        />
+    </div>
+    <table id="myTable">
     <tr>
         <th></th>
         <th></th>
@@ -1384,7 +1393,7 @@ async function getParticipantsTable(peers) {
         let peer_id = peer_info.peer_id;
         if (rc.peer_id === peer_id) {
             table += `
-            <tr>
+            <tr id='${peer_name}'>
                 <td>${peer_name} (me)</td>
                 <td><button>${peer_audio}</button></td>
                 <td><button>${peer_video}</button></td>

public/js/RoomClient.js

@@ -2362,6 +2362,29 @@ class RoomClient {
         }
     }
 
+    // ####################################################
+    // SEARCH PEER FILTER
+    // ####################################################
+
+    searchPeer() {
+        let input, filter, table, tr, td, i, txtValue;
+        input = this.getId('searchParticipants');
+        filter = input.value.toUpperCase();
+        table = this.getId('myTable');
+        tr = table.getElementsByTagName('tr');
+        for (i = 0; i < tr.length; i++) {
+            td = tr[i].getElementsByTagName('td')[0];
+            if (td) {
+                txtValue = td.textContent || td.innerText;
+                if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                    tr[i].style.display = '';
+                } else {
+                    tr[i].style.display = 'none';
+                }
+            }
+        }
+    }
+
     // ####################################################
     // UPDATE PEER INFO
     // ####################################################