diff --git a/public/Room.html b/public/Room.html index 4227d97..f4972d6 100644 --- a/public/Room.html +++ b/public/Room.html @@ -150,6 +150,19 @@ access to use this app.
+ +
diff --git a/public/css/Room.css b/public/css/Room.css index 325c501..2d4361b 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -527,6 +527,31 @@ button:hover { # Room Participants --------------------------------------------------------------*/ +#participants { + z-index: 17; + position: absolute; + margin: auto; + padding: 10px; + min-width: 320px; + background: var(--body-bg); + border-radius: 10px; + overflow: hidden; +} + +.participants-header { + display: flex; + justify-content: space-between; + background: rgb(0, 0, 0); + border-radius: 10px; + padding: 10px; + color: #666; + cursor: move; +} + +.participants-header-title { + color: white; +} + #roomParticipants { max-height: 480px; overflow: auto; diff --git a/public/js/Room.js b/public/js/Room.js index df8f4f3..65a27f1 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -4,6 +4,13 @@ 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 swalImageUrl = '../images/pricing-illustration.svg'; + +const url = { + ipLookup: 'https://extreme-ip-lookup.com/json/', +}; + const _PEER = { audioOn: '', audioOff: '', @@ -14,12 +21,7 @@ const _PEER = { ejectPeer: '', }; -const swalBackground = 'linear-gradient(to left, #1f1e1e, #000000)'; -const swalImageUrl = '../images/pricing-illustration.svg'; - -const url = { - ipLookup: 'https://extreme-ip-lookup.com/json/', -}; +let participantsCount = 0; let rc = null; let producer = null; @@ -54,6 +56,8 @@ function getRandomNumber(length) { function initClient() { if (!DetectRTC.isMobileDevice) { setTippy('closeNavButton', 'Close', 'right'); + setTippy('participantsRefreshBtn', 'Refresh', 'top'); + setTippy('participantsCloseBtn', 'Close', 'top'); setTippy('chatMessage', 'Press enter to send', 'top-start'); setTippy('chatSendButton', 'Send', 'top'); setTippy('chatEmojiButton', 'Emoji', 'top'); @@ -389,6 +393,7 @@ function roomIsReady() { setChatSize(); } else { rc.makeDraggable(chatRoom, chatHeader); + rc.makeDraggable(participants, participantsHeader); if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) { show(startScreenButton); } @@ -493,10 +498,10 @@ function stopRecordingTimer() { function handleButtons() { openNavButton.onclick = () => { - toggleNav(); + rc.toggleNav(); }; closeNavButton.onclick = () => { - toggleNav(); + rc.toggleNav(); }; exitButton.onclick = () => { rc.exit(); @@ -577,6 +582,12 @@ function handleButtons() { participantsButton.onclick = () => { getRoomParticipants(); }; + participantsRefreshBtn.onclick = () => { + getRoomParticipants(true); + }; + participantsCloseBtn.onclick = () => { + toggleParticipants(); + }; lockRoomButton.onclick = () => { rc.roomAction('lock'); }; @@ -737,10 +748,6 @@ function handleRoomClientEvents() { }); } -function toggleNav() { - control.classList.toggle('show'); -} - // #################################################### // SHOW LOG // #################################################### @@ -777,36 +784,30 @@ async function sound(name) { // HANDLE PARTICIPANTS // #################################################### -async function getRoomParticipants() { +function toggleParticipants() { + let participants = rc.getId('participants'); + participants.classList.toggle('show'); + participants.style.top = '50%'; + participants.style.left = '50%'; +} + +async function getRoomParticipants(refresh = false) { let room_info = await rc.getRoomInfo(); let peers = new Map(JSON.parse(room_info.peers)); let table = await getParticipantsTable(peers); - sound('open'); + participantsCount = peers.size; + roomParticipants.innerHTML = table; + refreshParticipantsCount(participantsCount); - Swal.fire({ - background: swalBackground, - position: 'center', - title: `Participants ${peers.size}`, - html: table, - showCancelButton: true, - confirmButtonText: `Refresh`, - cancelButtonText: `Close`, - showClass: { - popup: 'animate__animated animate__fadeInDown', - }, - hideClass: { - popup: 'animate__animated animate__fadeOutUp', - }, - }).then((result) => { - if (result.isConfirmed) { - getRoomParticipants(); - } - }); + if (!refresh) { + toggleParticipants(); + sound('open'); + } } async function getParticipantsTable(peers) { - let table = `
+ let table = ` @@ -856,10 +857,14 @@ async function getParticipantsTable(peers) { `; } } - table += `
`; + table += ``; return table; } +function refreshParticipantsCount(count) { + participantsTitle.innerHTML = ` Participants ( ${count} )`; +} + // #################################################### // ABOUT // #################################################### diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 6f0afde..cbf049a 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -993,6 +993,10 @@ class RoomClient { // UTILITY // #################################################### + toggleNav() { + this.getId('control').classList.toggle('show'); + } + toggleDevices() { this.getId('settings').classList.toggle('show'); } @@ -1468,6 +1472,8 @@ class RoomClient { if (emit) { if (!broadcast) { + if (participantsCount === 1) return; + const words = peer_id.split('__'); peer_id = words[0]; @@ -1475,6 +1481,8 @@ class RoomClient { case 'eject': let peer = this.getId(peer_id); if (peer) peer.parentNode.removeChild(peer); + participantsCount--; + refreshParticipantsCount(participantsCount); break; case 'mute': let peerAudioButton = this.getId(peer_id + '__audio'); @@ -1485,19 +1493,23 @@ class RoomClient { if (peerVideoButton) peerVideoButton.innerHTML = _PEER.videoOff; } } 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(); + getRoomParticipants(true); }, 6000); break; case 'mute': case 'hide': setTimeout(() => { - getRoomParticipants(); + getRoomParticipants(true); }, 2000); break; } diff --git a/src/Server.js b/src/Server.js index adc432c..ff97ad9 100644 --- a/src/Server.js +++ b/src/Server.js @@ -150,6 +150,20 @@ async function ngrokStart() { // #################################################### httpsServer.listen(config.listenPort, () => { + log.debug( + `%c + + ███████╗██╗ ██████╗ ███╗ ██╗ ███████╗███████╗██████╗ ██╗ ██╗███████╗██████╗ + ██╔════╝██║██╔════╝ ████╗ ██║ ██╔════╝██╔════╝██╔══██╗██║ ██║██╔════╝██╔══██╗ + ███████╗██║██║ ███╗██╔██╗ ██║█████╗███████╗█████╗ ██████╔╝██║ ██║█████╗ ██████╔╝ + ╚════██║██║██║ ██║██║╚██╗██║╚════╝╚════██║██╔══╝ ██╔══██╗╚██╗ ██╔╝██╔══╝ ██╔══██╗ + ███████║██║╚██████╔╝██║ ╚████║ ███████║███████╗██║ ██║ ╚████╔╝ ███████╗██║ ██║ + ╚══════╝╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚══════╝╚══════╝╚═╝ ╚═╝ ╚═══╝ ╚══════╝╚═╝ ╚═╝ started... + + `, + 'font-family:monospace', + ); + if (config.ngrokAuthToken !== '') { ngrokStart(); return; @@ -364,6 +378,7 @@ io.on('connection', (socket) => { socket.on('getRoomInfo', (_, cb) => { cb(roomList.get(socket.room_id).toJson()); + log.debug('Send Room Info'); }); socket.on('message', (data) => {