diff --git a/src/static/rooms.js b/src/static/rooms.js index a1a4b4a..acf830b 100644 --- a/src/static/rooms.js +++ b/src/static/rooms.js @@ -6,14 +6,20 @@ let isSubscribedToRooms = false; // Show the public rooms browser function showPublicRoomsBrowser() { - document.getElementById('publicRoomsBrowser').style.display = 'block'; - loadPublicRoomsWebSocket(); - subscribeToPublicRooms(); + const browserElement = document.getElementById('publicRoomsBrowser'); + if (browserElement) { + browserElement.style.display = 'block'; + loadPublicRoomsWebSocket(); + subscribeToPublicRooms(); + } } // Close the public rooms browser function closePublicRoomsBrowser() { - document.getElementById('publicRoomsBrowser').style.display = 'none'; + const browserElement = document.getElementById('publicRoomsBrowser'); + if (browserElement) { + browserElement.style.display = 'none'; + } unsubscribeFromPublicRooms(); // Clear auto-refresh @@ -46,8 +52,11 @@ function loadPublicRoomsWebSocket() { try { showLoadingState(); - currentSortBy = document.getElementById('roomsSortSelect').value; - currentMinUsers = document.getElementById('minUsersFilter').value || 0; + const sortSelect = document.getElementById('roomsSortSelect'); + const minUsersFilter = document.getElementById('minUsersFilter'); + + currentSortBy = sortSelect ? sortSelect.value : 'activity'; + currentMinUsers = minUsersFilter ? (minUsersFilter.value || 0) : 0; if (typeof socket !== 'undefined' && socket !== null && socket.connected) { socket.emit('request_public_rooms', { @@ -71,8 +80,11 @@ async function loadPublicRoomsHTTP() { try { showLoadingState(); - const sortBy = document.getElementById('roomsSortSelect').value; - const minUsers = document.getElementById('minUsersFilter').value || 0; + const sortSelect = document.getElementById('roomsSortSelect'); + const minUsersFilter = document.getElementById('minUsersFilter'); + + const sortBy = sortSelect ? sortSelect.value : 'activity'; + const minUsers = minUsersFilter ? (minUsersFilter.value || 0) : 0; const response = await fetch(`/api/rooms/public?sort=${sortBy}&min_users=${minUsers}&limit=50`); @@ -84,10 +96,14 @@ async function loadPublicRoomsHTTP() { publicRoomsData = data.rooms || []; // Also load stats - const statsResponse = await fetch('/api/rooms/stats'); - if (statsResponse.ok) { - const stats = await statsResponse.json(); - updateStatsDisplay(stats); + try { + const statsResponse = await fetch('/api/rooms/stats'); + if (statsResponse.ok) { + const stats = await statsResponse.json(); + updateStatsDisplay(stats); + } + } catch (statsError) { + console.warn('Failed to load room stats:', statsError); } displayRooms(); @@ -106,8 +122,8 @@ function refreshPublicRooms() { // Update stats display function updateStatsDisplay(stats) { const statsElement = document.getElementById('roomsStats'); - if (statsElement) { - statsElement.textContent = `${stats.public_rooms} public rooms • ${stats.total_users} users online`; + if (statsElement && stats) { + statsElement.textContent = `${stats.public_rooms || 0} public rooms • ${stats.total_users || 0} users online`; } } @@ -149,7 +165,7 @@ function displayRooms() { if (roomsLoading) roomsLoading.style.display = 'none'; - if (publicRoomsData.length === 0) { + if (!publicRoomsData || publicRoomsData.length === 0) { if (roomsEmpty) roomsEmpty.style.display = 'flex'; if (roomsList) roomsList.style.display = 'none'; return; @@ -164,13 +180,15 @@ function displayRooms() { // Create room card HTML function createRoomCard(room) { - const activityClass = getActivityClass(room.minutes_since_activity); - const timeAgo = formatTimeAgo(room.minutes_since_activity); + if (!room) return ''; + + const activityClass = getActivityClass(room.minutes_since_activity || 0); + const timeAgo = formatTimeAgo(room.minutes_since_activity || 0); return ` -
+
- ${escapeHtml(room.title || room.room_id)} + ${escapeHtml(room.title || room.room_id || 'Unnamed Room')}
@@ -179,11 +197,11 @@ function createRoomCard(room) {
👥 - ${room.user_count} user${room.user_count !== 1 ? 's' : ''} + ${room.user_count || 0} user${(room.user_count || 0) !== 1 ? 's' : ''}
💬 - ${room.message_count} message${room.message_count !== 1 ? 's' : ''} + ${room.message_count || 0} message${(room.message_count || 0) !== 1 ? 's' : ''}
🕐 @@ -191,7 +209,7 @@ function createRoomCard(room) {
🆔 - ${room.room_id} + ${escapeHtml(room.room_id || 'Unknown')}
@@ -208,7 +226,7 @@ function getActivityClass(minutesAgo) { // Format time ago function formatTimeAgo(minutes) { if (minutes < 1) return 'just now'; - if (minutes < 60) return `${minutes}m ago`; + if (minutes < 60) return `${Math.floor(minutes)}m ago`; const hours = Math.floor(minutes / 60); if (hours < 24) return `${hours}h ago`; @@ -219,6 +237,7 @@ function formatTimeAgo(minutes) { // Escape HTML to prevent XSS function escapeHtml(text) { + if (!text) return ''; const div = document.createElement('div'); div.textContent = text; return div.innerHTML; @@ -226,6 +245,11 @@ function escapeHtml(text) { // Join a public room - integrated with your existing system function joinPublicRoom(roomId) { + if (!roomId) { + console.error('No room ID provided'); + return; + } + console.log(`Joining public room: ${roomId}`); // Close the browser @@ -260,9 +284,9 @@ function setupPublicRoomsWebSocketHandlers() { // Handle public rooms data response socket.on('public_rooms_data', function(data) { console.log('Received public rooms data via WebSocket:', data); - publicRoomsData = data.rooms || []; + publicRoomsData = data && data.rooms ? data.rooms : []; - if (data.stats) { + if (data && data.stats) { updateStatsDisplay(data.stats); } @@ -276,9 +300,9 @@ function setupPublicRoomsWebSocketHandlers() { // Only update if the browser is currently open and we're subscribed const browserElement = document.getElementById('publicRoomsBrowser'); if (browserElement && browserElement.style.display === 'block' && isSubscribedToRooms) { - publicRoomsData = data.rooms || []; + publicRoomsData = data && data.rooms ? data.rooms : []; - if (data.stats) { + if (data && data.stats) { updateStatsDisplay(data.stats); } @@ -300,7 +324,14 @@ function waitForSocketAndSetupHandlers() { if (typeof socket !== 'undefined' && socket !== null && socket.connected) { setupPublicRoomsWebSocketHandlers(); } else { - setTimeout(waitForSocketAndSetupHandlers, 100); + // Check if socket exists but is still connecting + if (typeof socket !== 'undefined' && socket !== null) { + // Socket exists but might not be connected yet + setTimeout(waitForSocketAndSetupHandlers, 100); + } else { + // Socket doesn't exist yet, keep waiting + setTimeout(waitForSocketAndSetupHandlers, 250); + } } } @@ -318,6 +349,16 @@ document.addEventListener('DOMContentLoaded', function() { minUsersFilter.addEventListener('change', refreshPublicRooms); } + // Setup backdrop click handler + const browserElement = document.getElementById('publicRoomsBrowser'); + if (browserElement) { + browserElement.addEventListener('click', function(e) { + if (e.target === this) { + closePublicRoomsBrowser(); + } + }); + } + // Start the WebSocket setup process waitForSocketAndSetupHandlers(); @@ -336,16 +377,4 @@ document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && browserElement && browserElement.style.display === 'block') { closePublicRoomsBrowser(); } -}); - -// Close on backdrop click -document.addEventListener('DOMContentLoaded', function() { - const browserElement = document.getElementById('publicRoomsBrowser'); - if (browserElement) { - browserElement.addEventListener('click', function(e) { - if (e.target === this) { - closePublicRoomsBrowser(); - } - }); - } }); \ No newline at end of file