diff --git a/public/js/WhoAreYou.js b/public/js/WhoAreYou.js index 227a5991..a0933dc8 100644 --- a/public/js/WhoAreYou.js +++ b/public/js/WhoAreYou.js @@ -4,81 +4,86 @@ console.log(window.location); const mediaQuery = window.matchMedia('(max-width: 640px)'); -const settings = JSON.parse(localStorage.getItem('SFU_SETTINGS')); +const settings = JSON.parse(localStorage.getItem('SFU_SETTINGS')) || {}; +console.log('Settings:', settings); -console.log('Settings', settings); - -const autoJoinRoom = false; // automatically join the guest to the meeting - -const intervalTime = 5000; // check room status every 5 seconds +const autoJoinRoom = false; // Automatically join the guest to the meeting +const intervalTime = 5000; // Interval to check room status const presenterLoginBtn = document.getElementById('presenterLoginButton'); const guestJoinRoomBtn = document.getElementById('guestJoinRoomButton'); +// Disable the guest join button initially guestJoinRoomBtn.classList.add('disabled'); +// Extract room ID from URL path using XSS filtering const pathParts = window.location.pathname.split('/'); const roomId = filterXSS(pathParts[pathParts.length - 1]); -let intervalId; +let intervalId = null; let roomActive = false; -presenterLoginBtn.onclick = () => { +// Button event handlers +presenterLoginBtn.addEventListener('click', () => { window.location.href = '/login'; -}; +}); -guestJoinRoomBtn.onclick = () => { - window.location.href = '/join/' + roomId; -}; +guestJoinRoomBtn.addEventListener('click', () => { + window.location.href = `/join/${roomId}`; +}); -function sound(name) { +// Function to play sound +function playSound(name) { if (!settings.sounds) return; - const sound = '../sounds/' + name + '.wav'; - const audio = new Audio(sound); + + const soundSrc = `../sounds/${name}.wav`; + const audio = new Audio(soundSrc); audio.volume = 0.5; + audio.play().catch((err) => { - return false; + console.error(`Error playing sound: ${err}`); }); } +// Handle screen resize to adjust presenter login button visibility function handleScreenResize(e) { - if (roomActive) return; - presenterLoginBtn.style.display = e.matches ? 'flex' : 'inline-flex'; + if (!roomActive) { + presenterLoginBtn.style.display = e.matches ? 'flex' : 'inline-flex'; + } } -function checkRoomStatus(roomId) { +// Function to check room status from the server +async function checkRoomStatus(roomId) { if (!roomId) { - console.warn('Room ID empty!'); + console.warn('Room ID is empty!'); return; } - axios - .post('/isRoomActive', { roomId }) - .then((response) => { - console.log('isRoomActive', response.data); - roomActive = response.data.message; - if (roomActive) { - sound('roomActive'); - guestJoinRoomBtn.classList.remove('disabled'); - presenterLoginBtn.style.display = 'none'; - if (autoJoinRoom) guestJoinRoomBtn.click(); - } else { - guestJoinRoomBtn.classList.add('disabled'); - handleScreenResize(mediaQuery); + + try { + const response = await axios.post('/isRoomActive', { roomId }); + const isActive = response.data.message; + console.log('Room active status:', isActive); + + roomActive = isActive; + if (roomActive) { + playSound('roomActive'); + guestJoinRoomBtn.classList.remove('disabled'); + presenterLoginBtn.style.display = 'none'; + + if (autoJoinRoom) { + guestJoinRoomBtn.click(); } - }) - .catch((error) => { - console.error('Error checking room status', error); - }); + } else { + guestJoinRoomBtn.classList.add('disabled'); + handleScreenResize(mediaQuery); + } + } catch (error) { + console.error('Error checking room status:', error); + } } -handleScreenResize(mediaQuery); - -checkRoomStatus(roomId); - -mediaQuery.addEventListener('change', handleScreenResize); - -function startCheckingRoomStatus() { - // Function to run every 5 seconds +// Start interval to check room status every 5 seconds +function startRoomStatusCheck() { intervalId = setInterval(() => { if (document.visibilityState === 'visible') { checkRoomStatus(roomId); @@ -86,27 +91,33 @@ function startCheckingRoomStatus() { }, intervalTime); } -// Fallback to setTimeout if needed for better control -function fallbackCheckRoomStatus() { +// Fallback to setTimeout for room status checks +function fallbackRoomStatusCheck() { if (document.visibilityState === 'visible') { checkRoomStatus(roomId); } - setTimeout(fallbackCheckRoomStatus, intervalTime); + setTimeout(fallbackRoomStatusCheck, intervalTime); } -// Use Page Visibility API to pause/resume the checks -document.addEventListener('visibilitychange', () => { - checkRoomStatus(roomId); - // +// Page visibility change handler to pause or resume status checks +function handleVisibilityChange() { if (document.visibilityState === 'visible') { console.log('Page is visible. Resuming room status checks.'); - if (!intervalId) startCheckingRoomStatus(); + checkRoomStatus(roomId); + if (!intervalId) startRoomStatusCheck(); } else { console.log('Page is hidden. Pausing room status checks.'); clearInterval(intervalId); intervalId = null; } -}); +} + +// Initialize event listeners +mediaQuery.addEventListener('change', handleScreenResize); +document.addEventListener('visibilitychange', handleVisibilityChange); + +// Start checking room status on page load +handleScreenResize(mediaQuery); +checkRoomStatus(roomId); +startRoomStatusCheck(); -// Start checking room status when the page is first loaded -startCheckingRoomStatus();