rattatwinko/bytechat
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed some

Browse Source
This commit is contained in:
rattatwinko
2025-08-31 22:41:22 +02:00
parent 1aefa1a58d
commit 556759342d
2 changed files with 134 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/static/rooms.js
View File

@@ -25,7 +25,7 @@ function closePublicRoomsBrowser() {
// Subscribe to live public rooms updates // Subscribe to live public rooms updates
function subscribeToPublicRooms() { function subscribeToPublicRooms() {
if (typeof socket !== 'undefined' && socket.connected && !isSubscribedToRooms) { if (typeof socket !== 'undefined' && socket !== null && socket.connected && !isSubscribedToRooms) {
socket.emit('subscribe_public_rooms'); socket.emit('subscribe_public_rooms');
isSubscribedToRooms = true; isSubscribedToRooms = true;
console.log('Subscribed to public rooms updates'); console.log('Subscribed to public rooms updates');
@@ -34,7 +34,7 @@ function subscribeToPublicRooms() {
// Unsubscribe from public rooms updates // Unsubscribe from public rooms updates
function unsubscribeFromPublicRooms() { function unsubscribeFromPublicRooms() {
if (typeof socket !== 'undefined' && socket.connected && isSubscribedToRooms) { if (typeof socket !== 'undefined' && socket !== null && socket.connected && isSubscribedToRooms) {
socket.emit('unsubscribe_public_rooms'); socket.emit('unsubscribe_public_rooms');
isSubscribedToRooms = false; isSubscribedToRooms = false;
console.log('Unsubscribed from public rooms updates'); console.log('Unsubscribed from public rooms updates');
@@ -49,7 +49,7 @@ function loadPublicRoomsWebSocket() {
currentSortBy = document.getElementById('roomsSortSelect').value; currentSortBy = document.getElementById('roomsSortSelect').value;
currentMinUsers = document.getElementById('minUsersFilter').value || 0; currentMinUsers = document.getElementById('minUsersFilter').value || 0;
if (typeof socket !== 'undefined' && socket.connected) { if (typeof socket !== 'undefined' && socket !== null && socket.connected) {
socket.emit('request_public_rooms', { socket.emit('request_public_rooms', {
sort: currentSortBy, sort: currentSortBy,
min_users: currentMinUsers, min_users: currentMinUsers,
@@ -106,29 +106,39 @@ function refreshPublicRooms() {
// Update stats display // Update stats display
function updateStatsDisplay(stats) { function updateStatsDisplay(stats) {
const statsElement = document.getElementById('roomsStats'); const statsElement = document.getElementById('roomsStats');
if (statsElement) {
statsElement.textContent = `${stats.public_rooms} public rooms • ${stats.total_users} users online`; statsElement.textContent = `${stats.public_rooms} public rooms • ${stats.total_users} users online`;
}
} }
// Show loading state // Show loading state
function showLoadingState() { function showLoadingState() {
document.getElementById('roomsLoading').style.display = 'flex'; const loadingElement = document.getElementById('roomsLoading');
document.getElementById('roomsList').style.display = 'none'; const listElement = document.getElementById('roomsList');
document.getElementById('roomsEmpty').style.display = 'none'; const emptyElement = document.getElementById('roomsEmpty');
if (loadingElement) loadingElement.style.display = 'flex';
if (listElement) listElement.style.display = 'none';
if (emptyElement) emptyElement.style.display = 'none';
} }
// Show error state // Show error state
function showErrorState() { function showErrorState() {
document.getElementById('roomsLoading').style.display = 'none'; const loadingElement = document.getElementById('roomsLoading');
document.getElementById('roomsList').style.display = 'none'; const listElement = document.getElementById('roomsList');
document.getElementById('roomsEmpty').style.display = 'flex';
const emptyElement = document.getElementById('roomsEmpty'); const emptyElement = document.getElementById('roomsEmpty');
if (loadingElement) loadingElement.style.display = 'none';
if (listElement) listElement.style.display = 'none';
if (emptyElement) {
emptyElement.style.display = 'flex';
emptyElement.innerHTML = ` emptyElement.innerHTML = `
<div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div> <div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
<h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">Failed to Load Rooms</h3> <h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">Failed to Load Rooms</h3>
<p style="margin: 0 0 1rem 0;">Unable to connect to the server. Please try again.</p> <p style="margin: 0 0 1rem 0;">Unable to connect to the server. Please try again.</p>
<button class="btn" onclick="refreshPublicRooms()">Retry</button> <button class="btn" onclick="refreshPublicRooms()">Retry</button>
`; `;
}
} }
// Display rooms // Display rooms
@@ -137,18 +147,19 @@ function displayRooms() {
const roomsLoading = document.getElementById('roomsLoading'); const roomsLoading = document.getElementById('roomsLoading');
const roomsEmpty = document.getElementById('roomsEmpty'); const roomsEmpty = document.getElementById('roomsEmpty');
roomsLoading.style.display = 'none'; if (roomsLoading) roomsLoading.style.display = 'none';
if (publicRoomsData.length === 0) { if (publicRoomsData.length === 0) {
roomsEmpty.style.display = 'flex'; if (roomsEmpty) roomsEmpty.style.display = 'flex';
roomsList.style.display = 'none'; if (roomsList) roomsList.style.display = 'none';
return; return;
} }
roomsEmpty.style.display = 'none'; if (roomsEmpty) roomsEmpty.style.display = 'none';
if (roomsList) {
roomsList.style.display = 'block'; roomsList.style.display = 'block';
roomsList.innerHTML = publicRoomsData.map(room => createRoomCard(room)).join(''); roomsList.innerHTML = publicRoomsData.map(room => createRoomCard(room)).join('');
}
} }
// Create room card HTML // Create room card HTML
@@ -221,10 +232,16 @@ function joinPublicRoom(roomId) {
closePublicRoomsBrowser(); closePublicRoomsBrowser();
// Fill in the room input with the selected room // Fill in the room input with the selected room
document.getElementById('roomInput').value = roomId; const roomInput = document.getElementById('roomInput');
if (roomInput) {
roomInput.value = roomId;
}
// Clear password field since these are public rooms // Clear password field since these are public rooms
document.getElementById('roomPasswordInput').value = ''; const roomPasswordInput = document.getElementById('roomPasswordInput');
if (roomPasswordInput) {
roomPasswordInput.value = '';
}
// Trigger your existing join room functionality // Trigger your existing join room functionality
const joinButton = document.getElementById('joinRoomBtn'); const joinButton = document.getElementById('joinRoomBtn');
@@ -233,29 +250,9 @@ function joinPublicRoom(roomId) {
} }
} }
// Event listeners for controls
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('roomsSortSelect').addEventListener('change', refreshPublicRooms);
document.getElementById('minUsersFilter').addEventListener('change', refreshPublicRooms);
});
// Close on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && document.getElementById('publicRoomsBrowser').style.display === 'block') {
closePublicRoomsBrowser();
}
});
// Close on backdrop click
document.getElementById('publicRoomsBrowser').addEventListener('click', function(e) {
if (e.target === this) {
closePublicRoomsBrowser();
}
});
// WebSocket event handlers for real-time updates // WebSocket event handlers for real-time updates
function setupPublicRoomsWebSocketHandlers() { function setupPublicRoomsWebSocketHandlers() {
if (typeof socket === 'undefined') { if (typeof socket === 'undefined' || socket === null) {
console.log('Socket not available, using HTTP fallback'); console.log('Socket not available, using HTTP fallback');
return; return;
} }
@@ -277,7 +274,8 @@ function setupPublicRoomsWebSocketHandlers() {
console.log('Received live public rooms update:', data); console.log('Received live public rooms update:', data);
// Only update if the browser is currently open and we're subscribed // Only update if the browser is currently open and we're subscribed
if (document.getElementById('publicRoomsBrowser').style.display === 'block' && isSubscribedToRooms) { const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement && browserElement.style.display === 'block' && isSubscribedToRooms) {
publicRoomsData = data.rooms || []; publicRoomsData = data.rooms || [];
if (data.stats) { if (data.stats) {
@@ -299,21 +297,55 @@ function setupPublicRoomsWebSocketHandlers() {
// Auto-setup WebSocket handlers when page loads // Auto-setup WebSocket handlers when page loads
function waitForSocketAndSetupHandlers() { function waitForSocketAndSetupHandlers() {
if (typeof socket !== 'undefined' && socket.connected) { if (typeof socket !== 'undefined' && socket !== null && socket.connected) {
setupPublicRoomsWebSocketHandlers(); setupPublicRoomsWebSocketHandlers();
} else { } else {
setTimeout(waitForSocketAndSetupHandlers, 100); setTimeout(waitForSocketAndSetupHandlers, 100);
} }
} }
// Start the setup process // Event listeners for controls
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Add null checks for DOM elements
const sortSelect = document.getElementById('roomsSortSelect');
const minUsersFilter = document.getElementById('minUsersFilter');
if (sortSelect) {
sortSelect.addEventListener('change', refreshPublicRooms);
}
if (minUsersFilter) {
minUsersFilter.addEventListener('change', refreshPublicRooms);
}
// Start the WebSocket setup process
waitForSocketAndSetupHandlers(); waitForSocketAndSetupHandlers();
// Auto-refresh every 30 seconds when browser is open // Auto-refresh every 30 seconds when browser is open
setInterval(function() { setInterval(function() {
if (document.getElementById('publicRoomsBrowser').style.display === 'block') { const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement && browserElement.style.display === 'block') {
refreshPublicRooms(); refreshPublicRooms();
} }
}, 30000); }, 30000);
}); });
// Close on escape key
document.addEventListener('keydown', function(e) {
const browserElement = document.getElementById('publicRoomsBrowser');
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();
}
});
}
});

52
src/templates/chat.html
View File

@@ -9,10 +9,6 @@
<link rel="stylesheet" href="{{ url_for('static', filename='stylesheet.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet.css') }}">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}"> <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.2/dist/socket.io.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.2/dist/socket.io.min.js"></script>
<!-- Everything Locally Hosted ( javascript files for frontend / client encryption )-->
<script src="{{ url_for('static', filename='script.js') }}"></script>
<script src="{{ url_for('static', filename='frontend.js') }}"></script>
<script src="{{ url_for("static", filename="rss.js")}}" async></script>
</head> </head>
<body style="overflow-y: auto;"> <body style="overflow-y: auto;">
<div class="chat-container"> <div class="chat-container">
@@ -33,10 +29,9 @@
<div id="welcomeScreen" class="welcome-screen" style="padding: 1rem;"> <div id="welcomeScreen" class="welcome-screen" style="padding: 1rem;">
<h1 class="welcome-title" style="font-size: clamp(1.75rem, 8vw, 3rem); margin-bottom: 0.75rem;">Anonymous Chatting</h1> <h1 class="welcome-title" style="font-size: clamp(1.75rem, 8vw, 3rem); margin-bottom: 0.75rem;">Anonymous Chatting</h1>
<p class="welcome-subtitle" style="font-size: clamp(0.9rem, 3.5vw, 1.1rem); margin-bottom: 2rem; padding: 0 0.5rem;"> <p class="welcome-subtitle" style="font-size: clamp(0.9rem, 3.5vw, 1.1rem); margin-bottom: 2rem; padding: 0 0.5rem;">
If you are coming from the "ngrok" link. Then you probably saw the warning page. That this Page may be maillicious. If you are coming from the "ngrok" link. Then you probably saw the warning page. That this Page may be malicious.
We are focused on privacy and encrypted messaging. We do not serve any harmful code. We are We are focused on privacy and encrypted messaging. We do not serve any harmful code. We are
<a style="text-decoration: none; color:#00ff88;font-style: inherit; font-style: italic;" href="https://rattatwinko.servecounterstrike.com/gitea/rattatwinko/bytechat" <a style="text-decoration: none; color:#00ff88;font-style: inherit; font-style: italic;" href="https://rattatwinko.servecounterstrike.com/gitea/rattatwinko/bytechat">OSS</a>
>OSS</a>
</p> </p>
<div class="room-section" style="width: 100%; max-width: 500px;"> <div class="room-section" style="width: 100%; max-width: 500px;">
@@ -62,7 +57,7 @@
</div> </div>
<!-- Browse Public Rooms Button --> <!-- Browse Public Rooms Button -->
<div style="display: flex; justify-content: center; width: 100%;"> <div style="display: flex; justify-content: center; width: 100%;">
<button class="btn btn-secondary" onclick="showPublicRoomsBrowser()" style="font-size: clamp(0.85rem, 3.5vw, 1rem); padding: 0.6rem 1.5rem;"> <button class="btn btn-secondary" id="browsePublicRoomsBtn" style="font-size: clamp(0.85rem, 3.5vw, 1rem); padding: 0.6rem 1.5rem;">
Browse Public Rooms Browse Public Rooms
</button> </button>
</div> </div>
@@ -87,7 +82,7 @@
<h2 style="font-size: clamp(1.25rem, 5vw, 1.75rem); margin-bottom: 1rem; color: #00ff88;">Desktop Application</h2> <h2 style="font-size: clamp(1.25rem, 5vw, 1.75rem); margin-bottom: 1rem; color: #00ff88;">Desktop Application</h2>
<p style="font-size: clamp(0.9rem, 3.5vw, 1.1rem); margin-bottom: 1.5rem; line-height: 1.6; color: #b0b0b0;"> <p style="font-size: clamp(0.9rem, 3.5vw, 1.1rem); margin-bottom: 1.5rem; line-height: 1.6; color: #b0b0b0;">
For a better experience, consider downloading our desktop application. It offers enhanced performance For a better experience, consider downloading our desktop application. It offers enhanced performance
trough native Encryption (instead of Browser-Reliant Encryption). Click the button below to download the latest version. through native Encryption (instead of Browser-Reliant Encryption). Click the button below to download the latest version.
</p> </p>
<!-- Desktop App Download Button --> <!-- Desktop App Download Button -->
@@ -118,6 +113,7 @@
</div> </div>
</div> </div>
<!-- Public Rooms Browser - Fixed structure -->
<div id="publicRoomsBrowser" style=" <div id="publicRoomsBrowser" style="
display: none; display: none;
position: fixed; position: fixed;
@@ -129,26 +125,14 @@
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
z-index: 2000; z-index: 2000;
padding: 1rem; padding: 1rem;
/* Center content */
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* Optional: allow content to scroll if it overflows on small screens */
overflow: auto; overflow: auto;
"> ">
<div id="browserContent" style=" <div id="browserContent" style="
max-width: 95%; max-width: 95%;
max-height: 95%; max-height: 95%;
overflow-y: auto; overflow-y: auto;
background: #fff; /* or whatever your modal background is */
border-radius: 8px;
padding: 1rem;
">
<div style="
max-width: 800px;
margin: 0 auto;
background: #1a1a1a; background: #1a1a1a;
border-radius: 12px; border-radius: 12px;
border: 1px solid #333; border: 1px solid #333;
@@ -180,7 +164,7 @@
</div> </div>
<button <button
class="btn btn-secondary" class="btn btn-secondary"
onclick="closePublicRoomsBrowser()" id="closePublicRoomsBrowserBtn"
style=" style="
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.9rem; font-size: 0.9rem;
@@ -232,7 +216,7 @@
<button <button
class="btn" class="btn"
onclick="refreshPublicRooms()" id="refreshPublicRoomsBtn"
style=" style="
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.9rem; font-size: 0.9rem;
@@ -254,7 +238,7 @@
gap: 1rem; gap: 1rem;
color: #888; color: #888;
"> ">
<div style=" <div class="loading-spinner" style="
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid #333; border: 2px solid #333;
@@ -277,7 +261,7 @@
<!-- Empty State --> <!-- Empty State -->
<div id="roomsEmpty" style=" <div id="roomsEmpty" style="
display: none; /* This should be none initially, not flex ; fuck CSS*/ display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 3rem; padding: 3rem;
@@ -285,7 +269,7 @@
text-align: center; text-align: center;
"> ">
<div> <div>
<h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">… No Public Rooms Found</h3> <h3 style="margin: 0 0 0.5rem 0; color: #ffffff;">No Public Rooms Found</h3>
<p style="margin: 0; color: #888;">Check back later or create your own room</p> <p style="margin: 0; color: #888;">Check back later or create your own room</p>
</div> </div>
</div> </div>
@@ -311,7 +295,6 @@
<!-- Messages will be inserted here --> <!-- Messages will be inserted here -->
</div> </div>
</div> </div>
</div>
<div class="input-section" id="inputSection" style="display: none; padding: 0.6rem 0.75rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(20, 20, 20, 0.98); backdrop-filter: blur(10px); border-top: 1px solid #333; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);"> <div class="input-section" id="inputSection" style="display: none; padding: 0.6rem 0.75rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(20, 20, 20, 0.98); backdrop-filter: blur(10px); border-top: 1px solid #333; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);">
<div class="input-container" style="gap: 0.4rem; max-width: 100%;"> <div class="input-container" style="gap: 0.4rem; max-width: 100%;">
@@ -337,6 +320,19 @@
</div> </div>
</div> </div>
</div> </div>
<script src="{{ url_for('static', filename="rooms.js") }}"></script> </div>
<!-- Load scripts at the bottom for better initialization -->
<script src="{{ url_for('static', filename='script.js') }}" defer></script>
<script src="{{ url_for('static', filename='frontend.js') }}" defer></script>
<script src="{{ url_for('static', filename='rooms.js') }}"></script>
<script src="{{ url_for('static', filename='rss.js') }}" defer></script>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</body> </body>
</html> </html>