Skip to content

Commit

Permalink
[mirotalksfu] - confirm mute, hide, eject participants
Browse files Browse the repository at this point in the history
  • Loading branch information
Miroslav Pejic committed Nov 5, 2021
1 parent abc47af commit b9f055c
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 33 deletions.
6 changes: 5 additions & 1 deletion public/css/Room.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,12 +192,16 @@ body {
border-radius: 5px;
}

#sessionTime {
margin-left: 8px;
cursor: default;
}

/*--------------------------------------------------------------
# Style the tab
--------------------------------------------------------------*/
.tab {
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
}

/* Style the buttons inside the tab */
Expand Down
Binary file added public/images/participants.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 6 additions & 10 deletions public/js/Room.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
const RoomURL = window.location.href;

const swalBackground = 'linear-gradient(to left, #1f1e1e, #000000)';
const swalBg = 'rgba(0, 0, 0, 0.7)';
const swalImageUrl = '../images/pricing-illustration.svg';

const url = {
Expand Down Expand Up @@ -268,6 +269,11 @@ function whoAreYou() {
joinRoom(peer_name, room_id);
});

if (!DetectRTC.isMobileDevice) {
setTippy('initAudioButton', 'Enable / Disable audio', 'left');
setTippy('initVideoButton', 'Enable / Disable video', 'right');
}

initAudioButton = document.getElementById('initAudioButton');
initVideoButton = document.getElementById('initVideoButton');
if (!isAudioAllowed) initAudioButton.className = 'hidden';
Expand Down Expand Up @@ -1313,7 +1319,6 @@ async function getRoomParticipants(refresh = false) {
participantsCount = peers.size;
roomParticipants.innerHTML = table;
refreshParticipantsCount(participantsCount);
setTableButtonsTippy();

if (!refresh) {
toggleParticipants();
Expand Down Expand Up @@ -1381,15 +1386,6 @@ async function getParticipantsTable(peers) {
return table;
}

function setTableButtonsTippy() {
if (!DetectRTC.isMobileDevice) {
setTippy('muteAllButton', 'Mute all participants', 'top');
setTippy('hideAllButton', 'Hide all participants', 'top');
setTippy('sendAllButton', 'Send file to all participants', 'top');
setTippy('ejectAllButton', 'Eject all participants', 'top');
}
}

function refreshParticipantsCount(count) {
participantsTitle.innerHTML = `<i class="fas fa-users"></i> Participants ( ${count} )`;
}
Expand Down
85 changes: 65 additions & 20 deletions public/js/RoomClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const image = {
locked: '../images/locked.png',
mute: '../images/mute.png',
hide: '../images/hide.png',
users: '../images/participants.png',
youtube: '../images/youtube.png',
};

Expand Down Expand Up @@ -1076,7 +1077,7 @@ class RoomClient {
this.sound('open');

Swal.fire({
background: swalBackground,
background: swalBg,
position: 'center',
title: 'Leave this room?',
showDenyButton: true,
Expand Down Expand Up @@ -2183,6 +2184,13 @@ class RoomClient {
peerAction(from_peer_name, id, action, emit = true, broadcast = false) {
let peer_id = id;
if (emit) {
let data = {
from_peer_name: this.peer_name,
peer_id: peer_id,
action: action,
broadcast: broadcast,
};

if (!broadcast) {
if (participantsCount === 1) return;

Expand All @@ -2206,36 +2214,73 @@ class RoomClient {
let peerVideoButton = this.getId(peer_id + '___pVideo');
if (peerVideoButton) peerVideoButton.innerHTML = _PEER.videoOff;
}
this.socket.emit('peerAction', data);
} else {
if (participantsCount === 1) return;

let actionButton = this.getId(action + 'AllButton');
if (actionButton) actionButton.style.display = 'none';

switch (action) {
case 'eject':
participantsCount = 1;
refreshParticipantsCount(participantsCount);
setTimeout(() => {
getRoomParticipants(true);
}, 6000);
Swal.fire({
background: swalBackground,
position: 'center',
imageUrl: image.users,
title: 'Eject All participants except yourself?',
showDenyButton: true,
confirmButtonText: `Yes`,
denyButtonText: `No`,
showClass: {
popup: 'animate__animated animate__fadeInDown',
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp',
},
}).then((result) => {
if (result.isConfirmed) {
let actionButton = this.getId(action + 'AllButton');
if (actionButton) actionButton.style.display = 'none';
participantsCount = 1;
refreshParticipantsCount(participantsCount);
this.socket.emit('peerAction', data);
setTimeout(() => {
getRoomParticipants(true);
}, 6000);
}
});
break;
case 'mute':
case 'hide':
setTimeout(() => {
getRoomParticipants(true);
}, 2000);
Swal.fire({
background: swalBackground,
position: 'center',
imageUrl: action == 'mute' ? image.mute : image.hide,
title:
action == 'mute' ? 'Mute everyone except yourself?' : 'Hide everyone except yourself?',
text:
action == 'mute'
? "Once muted, you won't be able to unmute them, but they can unmute themselves at any time."
: "Once hided, you won't be able to unhide them, but they can unhide themselves at any time.",
showDenyButton: true,
confirmButtonText: `Yes`,
denyButtonText: `No`,
showClass: {
popup: 'animate__animated animate__fadeInDown',
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp',
},
}).then((result) => {
if (result.isConfirmed) {
let actionButton = this.getId(action + 'AllButton');
if (actionButton) actionButton.style.display = 'none';
this.socket.emit('peerAction', data);
setTimeout(() => {
getRoomParticipants(true);
}, 2000);
}
});
break;
}
}

let data = {
from_peer_name: this.peer_name,
peer_id: peer_id,
action: action,
broadcast: broadcast,
};
this.socket.emit('peerAction', data);
} else {
switch (action) {
case 'eject':
Expand Down
3 changes: 1 addition & 2 deletions public/view/Room.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,7 @@ <h1>Loading...</h1>
<p>About</p>
</button>
<br />
<button id="sessionTime"></button>
<br />
<p id="sessionTime"></p>
</div>

<div id="tabRecording" class="tabcontent">
Expand Down

0 comments on commit b9f055c

Please sign in to comment.