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),