diff --git a/public/css/VideoGrid.css b/public/css/VideoGrid.css index 4d6b2115..e37dee11 100644 --- a/public/css/VideoGrid.css +++ b/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; diff --git a/public/js/Room.js b/public/js/Room.js index 9af9558a..2eabe7ba 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -9,7 +9,7 @@ const _PEER = { audioOff: '', videoOn: '', videoOff: '', - raiseHand: '', + raiseHand: '', lowerHand: '', ejectPeer: '', }; diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 5f1200f5..dc035802 100644 --- a/public/js/RoomClient.js +++ b/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,19 +1585,34 @@ 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', 'top-end', 10000, ); - this.sound('raiseHand'); + 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( diff --git a/src/Room.js b/src/Room.js index fd59ab52..d17c4969 100644 --- a/src/Room.js +++ b/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),