[mirotalksfu] - add raise hand filter

public/css/Room.css

@@ -887,6 +887,10 @@ button:hover {
     color: red !important;
 }
 
+.green {
+    color: rgb(0, 255, 71) !important;
+}
+
 /*--------------------------------------------------------------
 # Lobby users list
 --------------------------------------------------------------*/

public/js/Room.js

@@ -220,6 +220,7 @@ function initClient() {
         setTippy('chatMaxButton', 'Maximize', 'bottom');
         setTippy('chatMinButton', 'Minimize', 'bottom');
         setTippy('participantsSaveBtn', 'Save participants info', 'bottom');
+        setTippy('participantsRaiseHandBtn', 'Toggle raise hands', 'bottom');
         setTippy('participantsUnreadMessagesBtn', 'Toggle unread messages', 'bottom');
         setTippy('transcriptionCloseBtn', 'Close', 'bottom');
         setTippy('transcriptionTogglePinBtn', 'Toggle pin', 'bottom');
@@ -1468,6 +1469,9 @@ function handleButtons() {
     participantsUnreadMessagesBtn.onclick = () => {
         rc.toggleUnreadMsg();
     };
+    participantsRaiseHandBtn.onclick = () => {
+        rc.toggleRaiseHands();
+    };
     searchParticipantsFromList.onkeyup = () => {
         rc.searchPeer();
     };

public/js/RoomClient.js

@@ -201,6 +201,7 @@ class RoomClient {
         this.isChatPinned = false;
         this.isChatMaximized = false;
         this.isToggleUnreadMsg = false;
+        this.isToggleRaiseHand = false;
         this.pinnedVideoPlayerId = null;
         this.camVideo = false;
         this.camera = 'user';
@@ -5472,6 +5473,24 @@ class RoomClient {
         }
     }
 
+    // ####################################################
+    // FILTER PEER WITH RAISE HAND
+    // ####################################################
+
+    toggleRaiseHands() {
+        const participantsList = this.getId('participantsList');
+        const participantsListItems = participantsList.getElementsByTagName('li');
+
+        for (let i = 0; i < participantsListItems.length; i++) {
+            const li = participantsListItems[i];
+            const hasPulsateClass = li.querySelector('i.pulsate') !== null;
+            const shouldDisplay = (hasPulsateClass && !this.isToggleRaiseHand) || this.isToggleRaiseHand;
+            li.style.display = shouldDisplay ? '' : 'none';
+        }
+        this.isToggleRaiseHand = !this.isToggleRaiseHand;
+        setColor(participantsRaiseHandBtn, this.isToggleRaiseHand ? 'lime' : 'white');
+    }
+
     // ####################################################
     // FILTER PEER WITH UNREAD MESSAGES
     // ####################################################

public/views/Room.html

@@ -1008,10 +1008,13 @@ access to use this app.
                     <div>
                         <button id="chatShareRoomBtn"><i class="fas fa-user-plus"></i> Invite user</button>
                         <button id="chatHideParticipantsList" class="float-right">
-                            <i class="fa-solid fa-circle-arrow-left"></i>
+                            <i class="fas fa-circle-arrow-left"></i>
+                        </button>
+                        <button id="participantsRaiseHandBtn" class="float-right">
+                            <i class="fas fa-hand-paper"></i>
                         </button>
                         <button id="participantsUnreadMessagesBtn" class="float-right">
-                            <i class="fa-solid fa-comments"></i>
+                            <i class="fas fa-comments"></i>
                         </button>
                         <button id="participantsSaveBtn" class="float-right hidden">
                             <i class="fas fa-save"></i>