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

134
src/static/rooms.js
View File

@@ -25,7 +25,7 @@ function closePublicRoomsBrowser() {
// Subscribe to live public rooms updates
function subscribeToPublicRooms() {
if (typeof socket !== 'undefined' && socket.connected && !isSubscribedToRooms) {
if (typeof socket !== 'undefined' && socket !== null && socket.connected && !isSubscribedToRooms) {
socket.emit('subscribe_public_rooms');
isSubscribedToRooms = true;
console.log('Subscribed to public rooms updates');
@@ -34,7 +34,7 @@ function subscribeToPublicRooms() {
// Unsubscribe from public rooms updates
function unsubscribeFromPublicRooms() {
if (typeof socket !== 'undefined' && socket.connected && isSubscribedToRooms) {
if (typeof socket !== 'undefined' && socket !== null && socket.connected && isSubscribedToRooms) {
socket.emit('unsubscribe_public_rooms');
isSubscribedToRooms = false;
console.log('Unsubscribed from public rooms updates');
@@ -49,7 +49,7 @@ function loadPublicRoomsWebSocket() {
currentSortBy = document.getElementById('roomsSortSelect').value;
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', {
sort: currentSortBy,
min_users: currentMinUsers,
@@ -106,29 +106,39 @@ function refreshPublicRooms() {
// Update stats display
function updateStatsDisplay(stats) {
const statsElement = document.getElementById('roomsStats');
statsElement.textContent = `${stats.public_rooms} public rooms • ${stats.total_users} users online`;
if (statsElement) {
statsElement.textContent = `${stats.public_rooms} public rooms • ${stats.total_users} users online`;
}
}
// Show loading state
function showLoadingState() {
document.getElementById('roomsLoading').style.display = 'flex';
document.getElementById('roomsList').style.display = 'none';
document.getElementById('roomsEmpty').style.display = 'none';
const loadingElement = document.getElementById('roomsLoading');
const listElement = document.getElementById('roomsList');
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
function showErrorState() {
document.getElementById('roomsLoading').style.display = 'none';
document.getElementById('roomsList').style.display = 'none';
document.getElementById('roomsEmpty').style.display = 'flex';
const loadingElement = document.getElementById('roomsLoading');
const listElement = document.getElementById('roomsList');
const emptyElement = document.getElementById('roomsEmpty');
emptyElement.innerHTML = `
<div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
<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>
<button class="btn" onclick="refreshPublicRooms()">Retry</button>
`;
if (loadingElement) loadingElement.style.display = 'none';
if (listElement) listElement.style.display = 'none';
if (emptyElement) {
emptyElement.style.display = 'flex';
emptyElement.innerHTML = `
<div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
<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>
<button class="btn" onclick="refreshPublicRooms()">Retry</button>
`;
}
}
// Display rooms
@@ -137,18 +147,19 @@ function displayRooms() {
const roomsLoading = document.getElementById('roomsLoading');
const roomsEmpty = document.getElementById('roomsEmpty');
roomsLoading.style.display = 'none';
if (roomsLoading) roomsLoading.style.display = 'none';
if (publicRoomsData.length === 0) {
roomsEmpty.style.display = 'flex';
roomsList.style.display = 'none';
if (roomsEmpty) roomsEmpty.style.display = 'flex';
if (roomsList) roomsList.style.display = 'none';
return;
}
roomsEmpty.style.display = 'none';
roomsList.style.display = 'block';
roomsList.innerHTML = publicRoomsData.map(room => createRoomCard(room)).join('');
if (roomsEmpty) roomsEmpty.style.display = 'none';
if (roomsList) {
roomsList.style.display = 'block';
roomsList.innerHTML = publicRoomsData.map(room => createRoomCard(room)).join('');
}
}
// Create room card HTML
@@ -221,10 +232,16 @@ function joinPublicRoom(roomId) {
closePublicRoomsBrowser();
// 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
document.getElementById('roomPasswordInput').value = '';
const roomPasswordInput = document.getElementById('roomPasswordInput');
if (roomPasswordInput) {
roomPasswordInput.value = '';
}
// Trigger your existing join room functionality
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
function setupPublicRoomsWebSocketHandlers() {
if (typeof socket === 'undefined') {
if (typeof socket === 'undefined' || socket === null) {
console.log('Socket not available, using HTTP fallback');
return;
}
@@ -277,7 +274,8 @@ function setupPublicRoomsWebSocketHandlers() {
console.log('Received live public rooms update:', data);
// 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 || [];
if (data.stats) {
@@ -299,21 +297,55 @@ function setupPublicRoomsWebSocketHandlers() {
// Auto-setup WebSocket handlers when page loads
function waitForSocketAndSetupHandlers() {
if (typeof socket !== 'undefined' && socket.connected) {
if (typeof socket !== 'undefined' && socket !== null && socket.connected) {
setupPublicRoomsWebSocketHandlers();
} else {
setTimeout(waitForSocketAndSetupHandlers, 100);
}
}
// Start the setup process
// Event listeners for controls
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();
// Auto-refresh every 30 seconds when browser is open
setInterval(function() {
if (document.getElementById('publicRoomsBrowser').style.display === 'block') {
const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement && browserElement.style.display === 'block') {
refreshPublicRooms();
}
}, 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();
}
});
}
});

106
src/templates/chat.html
View File

@@ -9,10 +9,6 @@
<link rel="stylesheet" href="{{ url_for('static', filename='stylesheet.css') }}">
<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>
<!-- 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>
<body style="overflow-y: auto;">
<div class="chat-container">
@@ -33,10 +29,9 @@
<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>
<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
<a style="text-decoration: none; color:#00ff88;font-style: inherit; font-style: italic;" href="https://rattatwinko.servecounterstrike.com/gitea/rattatwinko/bytechat"
>OSS</a>
<a style="text-decoration: none; color:#00ff88;font-style: inherit; font-style: italic;" href="https://rattatwinko.servecounterstrike.com/gitea/rattatwinko/bytechat">OSS</a>
</p>
<div class="room-section" style="width: 100%; max-width: 500px;">
@@ -62,7 +57,7 @@
</div>
<!-- Browse Public Rooms Button -->
<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
</button>
</div>
@@ -87,7 +82,7 @@
<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;">
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>
<!-- Desktop App Download Button -->
@@ -118,6 +113,7 @@
</div>
</div>
<!-- Public Rooms Browser - Fixed structure -->
<div id="publicRoomsBrowser" style="
display: none;
position: fixed;
@@ -129,26 +125,14 @@
backdrop-filter: blur(10px);
z-index: 2000;
padding: 1rem;
/* Center content */
display: flex;
justify-content: center;
align-items: center;
/* Optional: allow content to scroll if it overflows on small screens */
overflow: auto;
">
<div id="browserContent" style="
max-width: 95%;
max-height: 95%;
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;
border-radius: 12px;
border: 1px solid #333;
@@ -180,7 +164,7 @@
</div>
<button
class="btn btn-secondary"
onclick="closePublicRoomsBrowser()"
id="closePublicRoomsBrowserBtn"
style="
padding: 0.5rem 1rem;
font-size: 0.9rem;
@@ -232,7 +216,7 @@
<button
class="btn"
onclick="refreshPublicRooms()"
id="refreshPublicRoomsBtn"
style="
padding: 0.5rem 1rem;
font-size: 0.9rem;
@@ -254,7 +238,7 @@
gap: 1rem;
color: #888;
">
<div style="
<div class="loading-spinner" style="
width: 20px;
height: 20px;
border: 2px solid #333;
@@ -277,7 +261,7 @@
<!-- Empty State -->
<div id="roomsEmpty" style="
display: none; /* This should be none initially, not flex ; fuck CSS*/
display: none;
justify-content: center;
align-items: center;
padding: 3rem;
@@ -285,7 +269,7 @@
text-align: center;
">
<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>
</div>
</div>
@@ -305,38 +289,50 @@
</div>
</div>
<!-- wrapper for scroll -->
<div class="messages-wrapper" id="messagesWrapper" style="padding: 0.75rem; padding-bottom: 80px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;">
<div class="messages-container" id="messagesContainer" role="log" aria-live="polite" aria-label="Chat messages">
<!-- Messages will be inserted here -->
<!-- wrapper for scroll -->
<div class="messages-wrapper" id="messagesWrapper" style="padding: 0.75rem; padding-bottom: 80px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;">
<div class="messages-container" id="messagesContainer" role="log" aria-live="polite" aria-label="Chat messages">
<!-- Messages will be inserted here -->
</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-container" style="gap: 0.4rem; max-width: 100%;">
<label for="messageInput" class="visually-hidden">Type your message</label>
<textarea
class="message-input"
id="messageInput"
placeholder="Message ByteChat…"
rows="1"
disabled
maxlength="4000"
aria-label="Type your message"
style="font-size: clamp(0.9rem, 4vw, 1rem); padding: 0.6rem 0.8rem; border-radius: 10px; resize: none; max-height: 120px; min-height: 44px; font-size: 16px; -webkit-appearance: none;"
autocomplete="off"
autocapitalize="sentences"
spellcheck="true"
></textarea>
<button class="send-button" id="sendButton" disabled aria-label="Send message" style="width: 40px; height: 40px; flex-shrink: 0; -webkit-tap-highlight-color: transparent;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m22 2-7 20-4-9-9-4 20-7z"/>
</svg>
</button>
</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-container" style="gap: 0.4rem; max-width: 100%;">
<label for="messageInput" class="visually-hidden">Type your message</label>
<textarea
class="message-input"
id="messageInput"
placeholder="Message ByteChat…"
rows="1"
disabled
maxlength="4000"
aria-label="Type your message"
style="font-size: clamp(0.9rem, 4vw, 1rem); padding: 0.6rem 0.8rem; border-radius: 10px; resize: none; max-height: 120px; min-height: 44px; font-size: 16px; -webkit-appearance: none;"
autocomplete="off"
autocapitalize="sentences"
spellcheck="true"
></textarea>
<button class="send-button" id="sendButton" disabled aria-label="Send message" style="width: 40px; height: 40px; flex-shrink: 0; -webkit-tap-highlight-color: transparent;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m22 2-7 20-4-9-9-4 20-7z"/>
</svg>
</button>
</div>
</div>
</div>
<script src="{{ url_for('static', filename="rooms.js") }}"></script>
<!-- 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>
</html>