[mirotalksfu] improve raise hand

public/css/VideoGrid.css

@@ -46,6 +46,21 @@
     background: rgba(0, 0, 0, 0.4);
 }
 
+#videoMediaContainer i {
+    position: absolute;
+    display: none;
+    top: 0;
+    color: rgb(0, 255, 71);
+    font-size: 14px;
+    align-items: center;
+    padding: 5px;
+    margin: 5px;
+    width: auto;
+    height: 25px;
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.4);
+}
+
 video {
     width: 100%;
     height: 100%;
@@ -70,6 +85,14 @@ video:fullscreen {
     transform: rotateY(180deg);
 }
 
+.blur {
+    -webkit-filter: blur(5px);
+    -moz-filter: blur(5px);
+    -o-filter: blur(5px);
+    -ms-filter: blur(5px);
+    filter: blur(5px);
+}
+
 @keyframes show {
     0% {
         opacity: 0;

public/js/Room.js

@@ -9,7 +9,7 @@ const _PEER = {
     audioOff: '<i style="color: red;" class="fas fa-microphone-slash"></i>',
     videoOn: '<i class="fas fa-video"></i>',
     videoOff: '<i style="color: red;" class="fas fa-video-slash"></i>',
-    raiseHand: '<i style="color: rgb(0, 180, 50);" class="fas fa-hand-paper pulsate"></i>',
+    raiseHand: '<i style="color: rgb(0, 255, 71);" class="fas fa-hand-paper pulsate"></i>',
     lowerHand: '',
     ejectPeer: '<i class="fas fa-times"></i>',
 };

public/js/RoomClient.js

@@ -615,7 +615,7 @@ class RoomClient {
     }
 
     async handleProducer(id, type, stream) {
-        let elem, d, p;
+        let elem, d, p, i;
         d = document.createElement('div');
         d.className = 'Camera';
         d.id = id + '__d';
@@ -626,10 +626,14 @@ class RoomClient {
         elem.poster = image.poster;
         this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror');
         p = document.createElement('p');
-        p.id = id + '__name';
+        p.id = this.peer_id + '__name';
         p.innerHTML = '👤 ' + this.peer_name + ' (me)';
+        i = document.createElement('i');
+        i.id = this.peer_id + '__peerHand';
+        i.className = 'fas fa-hand-paper pulsate';
         d.appendChild(elem);
         d.appendChild(p);
+        d.appendChild(i);
         this.videoMediaContainer.appendChild(d);
         this.attachMediaStream(elem, stream, type, 'Producer');
         this.myVideoEl = elem;
@@ -798,7 +802,7 @@ class RoomClient {
     }
 
     handleConsumer(id, type, stream, peer_name, peer_info) {
-        let elem, d, p;
+        let elem, d, p, i;
         switch (type) {
             case mediaType.video:
                 d = document.createElement('div');
@@ -811,15 +815,20 @@ class RoomClient {
                 elem.className = '';
                 elem.poster = image.poster;
                 p = document.createElement('p');
-                p.id = id + '__name';
+                p.id = peer_info.peer_id + '__name';
                 p.innerHTML = '👤 ' + peer_name;
+                i = document.createElement('i');
+                i.id = peer_info.peer_id + '__peerHand';
+                i.className = 'fas fa-hand-paper pulsate';
                 d.appendChild(elem);
                 d.appendChild(p);
+                d.appendChild(i);
                 this.videoMediaContainer.appendChild(d);
                 this.attachMediaStream(elem, stream, type, 'Consumer');
                 this.handleFS(elem.id);
                 this.setTippy(elem.id, 'Full Screen', 'top-end');
                 this.popupPeerInfo(p.id, peer_info);
+                this.checkPeerInfoStatus(peer_info);
                 this.sound('joined');
                 resizeVideoMedia();
                 break;
@@ -1551,10 +1560,13 @@ class RoomClient {
                     break;
                 case 'hand':
                     this.peer_info.peer_hand = status;
+                    let peer_hand = this.getId(peer_id + '__peerHand');
                     if (status) {
+                        peer_hand.style.display = 'flex';
                         this.event(_EVENTS.raiseHand);
                         this.sound('raiseHand');
                     } else {
+                        peer_hand.style.display = 'none';
                         this.event(_EVENTS.lowerHand);
                     }
                     break;
@@ -1573,7 +1585,9 @@ class RoomClient {
                 case 'video':
                     break;
                 case 'hand':
-                    if (status)
+                    let peer_hand = this.getId(peer_id + '__peerHand');
+                    if (status) {
+                        peer_hand.style.display = 'flex';
                         this.userLog(
                             'warning',
                             peer_name + '  ' + _PEER.raiseHand + ' has raised the hand',
@@ -1581,11 +1595,24 @@ class RoomClient {
                             10000,
                         );
                         this.sound('raiseHand');
+                    } else {
+                        peer_hand.style.display = 'none';
+                    }
                     break;
             }
         }
     }
 
+    checkPeerInfoStatus(peer_info) {
+        let peer_id = peer_info.peer_id;
+        let peer_hand_status = peer_info.peer_hand;
+        if (peer_hand_status) {
+            let peer_hand = this.getId(peer_id + '__peerHand');
+            peer_hand.style.display = 'flex';
+        }
+        //...
+    }
+
     popupPeerInfo(id, peer_info) {
         if (this.debug) {
             this.setTippy(

src/Room.js

@@ -140,6 +140,7 @@ module.exports = class Room {
                         producer_id: producer.id,
                         producer_socket_id: socket_id,
                         peer_name: this.peers.get(socket_id).peer_name,
+                        peer_info: this.peers.get(socket_id).peer_info,
                     },
                 ]);
             }.bind(this),