+
💬
- ${room.message_count || 0} message${(room.message_count || 0) !== 1 ? 's' : ''}
+ ${messageCount} message${messageCount !== 1 ? 's' : ''}
-
+
🕐
Active ${timeAgo}
-
+
🆔
- ${escapeHtml(room.room_id || 'Unknown')}
+ ${roomId}
`;
}
-// Get activity indicator class
+// Enhanced activity classification
function getActivityClass(minutesAgo) {
if (minutesAgo <= 5) return 'activity-active';
if (minutesAgo <= 30) return 'activity-recent';
+ if (minutesAgo <= 120) return 'activity-moderate';
return 'activity-old';
}
-// Format time ago
+// Enhanced time formatting
function formatTimeAgo(minutes) {
if (minutes < 1) return 'just now';
if (minutes < 60) return `${Math.floor(minutes)}m ago`;
@@ -232,21 +469,37 @@ function formatTimeAgo(minutes) {
if (hours < 24) return `${hours}h ago`;
const days = Math.floor(hours / 24);
- return `${days}d ago`;
+ if (days < 7) return `${days}d ago`;
+
+ const weeks = Math.floor(days / 7);
+ return `${weeks}w ago`;
}
-// Escape HTML to prevent XSS
+// Enhanced text sanitization
+function sanitizeText(text) {
+ if (typeof text !== 'string') return '';
+ return text.trim().substring(0, 200); // Limit length and trim
+}
+
+// Enhanced HTML escaping
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
- div.textContent = text;
+ div.textContent = String(text);
return div.innerHTML;
}
-// Join a public room - integrated with your existing system
+// Enhanced room joining with validation
function joinPublicRoom(roomId) {
- if (!roomId) {
- console.error('No room ID provided');
+ if (!roomId || typeof roomId !== 'string') {
+ console.error('Invalid room ID provided:', roomId);
+ return;
+ }
+
+ // Validate room ID format
+ const roomIdPattern = /^[a-zA-Z0-9\-_]{1,32}$/;
+ if (!roomIdPattern.test(roomId)) {
+ console.error('Invalid room ID format:', roomId);
return;
}
@@ -255,52 +508,65 @@ function joinPublicRoom(roomId) {
// Close the browser
closePublicRoomsBrowser();
- // Fill in the room input with the selected room
+ // Fill in the room input
const roomInput = document.getElementById('roomInput');
if (roomInput) {
roomInput.value = roomId;
+ roomInput.dispatchEvent(new Event('input', { bubbles: true }));
}
- // Clear password field since these are public rooms
+ // Clear password field for public rooms
const roomPasswordInput = document.getElementById('roomPasswordInput');
if (roomPasswordInput) {
roomPasswordInput.value = '';
}
- // Trigger your existing join room functionality
- const joinButton = document.getElementById('joinRoomBtn');
- if (joinButton) {
- joinButton.click();
- }
+ // Trigger join room functionality with delay to ensure UI updates
+ setTimeout(() => {
+ const joinButton = document.getElementById('joinRoomBtn');
+ if (joinButton) {
+ joinButton.click();
+ } else {
+ console.error('Join button not found');
+ }
+ }, 100);
}
-// WebSocket event handlers for real-time updates
+// Enhanced WebSocket handlers
function setupPublicRoomsWebSocketHandlers() {
- if (typeof socket === 'undefined' || socket === null) {
- console.log('Socket not available, using HTTP fallback');
+ if (!isSocketAvailable()) {
+ console.log('Socket not available, WebSocket handlers not attached');
return;
}
// Handle public rooms data response
socket.on('public_rooms_data', function(data) {
console.log('Received public rooms data via WebSocket:', data);
- publicRoomsData = data && data.rooms ? data.rooms : [];
+
+ if (data && Array.isArray(data.rooms)) {
+ publicRoomsData = data.rooms;
+ } else {
+ console.warn('Invalid public rooms data format');
+ publicRoomsData = [];
+ }
if (data && data.stats) {
updateStatsDisplay(data.stats);
}
- displayRooms();
+ if (isRoomsBrowserOpen) {
+ displayRooms();
+ }
});
- // Handle live updates to public rooms
+ // Handle live updates
socket.on('public_rooms_updated', function(data) {
console.log('Received live public rooms update:', data);
- // 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 && data.rooms ? data.rooms : [];
+ if (isRoomsBrowserOpen && isSubscribedToRooms) {
+ if (data && Array.isArray(data.rooms)) {
+ publicRoomsData = data.rooms;
+ }
if (data && data.stats) {
updateStatsDisplay(data.stats);
@@ -310,57 +576,89 @@ function setupPublicRoomsWebSocketHandlers() {
}
});
- // Handle WebSocket errors for public rooms
+ // Handle WebSocket errors
socket.on('public_rooms_error', function(data) {
console.error('Public rooms WebSocket error:', data);
- showErrorState();
+ if (isRoomsBrowserOpen) {
+ showErrorState();
+ }
});
- console.log('Public rooms WebSocket handlers attached');
+ // Handle connection events
+ socket.on('connect', function() {
+ console.log('Socket connected, resubscribing if browser is open');
+ if (isRoomsBrowserOpen && !isSubscribedToRooms) {
+ subscribeToPublicRooms();
+ }
+ });
+
+ socket.on('disconnect', function() {
+ console.log('Socket disconnected');
+ isSubscribedToRooms = false;
+ });
+
+ console.log('Enhanced public rooms WebSocket handlers attached');
}
-// Auto-setup WebSocket handlers when page loads
+// Enhanced socket initialization
function waitForSocketAndSetupHandlers(retryCount = 0) {
- // Check if socket is properly initialized and connected
- if (typeof socket !== 'undefined' && socket !== null && typeof socket.connected !== 'undefined' && socket.connected) {
+ if (isSocketAvailable()) {
setupPublicRoomsWebSocketHandlers();
console.log('WebSocket handlers setup successfully');
return;
}
- // If we've retried too many times, give up and use HTTP only
if (retryCount > 100) { // 100 * 250ms = 25 seconds max wait
- console.warn('Socket failed to initialize after 25 seconds, falling back to HTTP-only mode');
+ console.warn('Socket failed to initialize after 25 seconds, using HTTP-only mode');
return;
}
- // Log current socket state for debugging
if (retryCount % 20 === 0) { // Log every 5 seconds
console.log(`Waiting for socket... (attempt ${retryCount + 1})`);
- console.log('Socket type:', typeof socket);
- console.log('Socket value:', socket);
- console.log('Socket.io library loaded:', typeof io !== 'undefined');
}
- // Continue waiting
setTimeout(() => waitForSocketAndSetupHandlers(retryCount + 1), 250);
}
-// Event listeners for controls
+// Enhanced event listeners with better error handling
document.addEventListener('DOMContentLoaded', function() {
- // Add null checks for DOM elements
- const sortSelect = document.getElementById('roomsSortSelect');
- const minUsersFilter = document.getElementById('minUsersFilter');
+ console.log('Setting up public rooms browser event listeners');
+ // Browse button (this was missing!)
+ const browseButton = document.getElementById('browsePublicRoomsBtn');
+ if (browseButton) {
+ browseButton.addEventListener('click', showPublicRoomsBrowser);
+ console.log('Browse public rooms button listener attached');
+ } else {
+ console.warn('Browse public rooms button not found');
+ }
+
+ // Close button
+ const closeButton = document.getElementById('closePublicRoomsBrowserBtn');
+ if (closeButton) {
+ closeButton.addEventListener('click', closePublicRoomsBrowser);
+ }
+
+ // Sort selector
+ const sortSelect = document.getElementById('roomsSortSelect');
if (sortSelect) {
sortSelect.addEventListener('change', refreshPublicRooms);
}
+ // Min users filter
+ const minUsersFilter = document.getElementById('minUsersFilter');
if (minUsersFilter) {
minUsersFilter.addEventListener('change', refreshPublicRooms);
+ minUsersFilter.addEventListener('input', debounce(refreshPublicRooms, 1000));
}
- // Setup backdrop click handler
+ // Refresh button
+ const refreshButton = document.getElementById('refreshPublicRoomsBtn');
+ if (refreshButton) {
+ refreshButton.addEventListener('click', refreshPublicRooms);
+ }
+
+ // Backdrop click handler
const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement) {
browserElement.addEventListener('click', function(e) {
@@ -370,22 +668,70 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
- // Start the WebSocket setup process
- waitForSocketAndSetupHandlers();
-
- // Auto-refresh every 30 seconds when browser is open
- setInterval(function() {
- const browserElement = document.getElementById('publicRoomsBrowser');
- if (browserElement && browserElement.style.display === 'block') {
+ // Keyboard shortcuts
+ document.addEventListener('keydown', function(e) {
+ if (!isRoomsBrowserOpen) return;
+
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ closePublicRoomsBrowser();
+ } else if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {
+ e.preventDefault();
refreshPublicRooms();
}
- }, 30000);
+ });
+
+ // Start WebSocket setup
+ waitForSocketAndSetupHandlers();
+
+ console.log('Public rooms browser setup complete');
});
-// Close on escape key
-document.addEventListener('keydown', function(e) {
- const browserElement = document.getElementById('publicRoomsBrowser');
- if (e.key === 'Escape' && browserElement && browserElement.style.display === 'block') {
- closePublicRoomsBrowser();
+// Utility: Debounce function
+function debounce(func, wait) {
+ let timeout;
+ return function executedFunction(...args) {
+ const later = () => {
+ clearTimeout(timeout);
+ func.apply(this, args);
+ };
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ };
+}
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', function() {
+ if (isSubscribedToRooms) {
+ unsubscribeFromPublicRooms();
}
-});
\ No newline at end of file
+ if (roomsRefreshInterval) {
+ clearInterval(roomsRefreshInterval);
+ }
+});
+
+// Add CSS for activity indicators if not already present
+if (!document.getElementById('roomsActivityStyles')) {
+ const style = document.createElement('style');
+ style.id = 'roomsActivityStyles';
+ style.textContent = `
+ .activity-active {
+ background-color: #00ff88 !important;
+ box-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
+ }
+ .activity-recent {
+ background-color: #ffaa00 !important;
+ }
+ .activity-moderate {
+ background-color: #888 !important;
+ }
+ .activity-old {
+ background-color: #444 !important;
+ }
+ .room-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ }
+ `;
+ document.head.appendChild(style);
+}
\ No newline at end of file