diff --git a/public/css/Room.css b/public/css/Room.css index 60eee61a..675decef 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -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 */ diff --git a/public/images/participants.png b/public/images/participants.png new file mode 100644 index 00000000..f5ee2a61 Binary files /dev/null and b/public/images/participants.png differ diff --git a/public/js/Room.js b/public/js/Room.js index db38bc06..e0a9fb95 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -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 = { @@ -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'; @@ -1313,7 +1319,6 @@ async function getRoomParticipants(refresh = false) { participantsCount = peers.size; roomParticipants.innerHTML = table; refreshParticipantsCount(participantsCount); - setTableButtonsTippy(); if (!refresh) { toggleParticipants(); @@ -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 = ` Participants ( ${count} )`; } diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 62aa31a3..3fc1ffcf 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -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', }; @@ -1076,7 +1077,7 @@ class RoomClient { this.sound('open'); Swal.fire({ - background: swalBackground, + background: swalBg, position: 'center', title: 'Leave this room?', showDenyButton: true, @@ -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; @@ -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': diff --git a/public/view/Room.html b/public/view/Room.html index 045362ac..8d841a75 100644 --- a/public/view/Room.html +++ b/public/view/Room.html @@ -203,8 +203,7 @@ access to use this app.

About


- -
+