computertech/chatty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major feature update: Add IRC-style chat, performance optimizations, and mobile support

Browse Source 
🚀 New Features:
- Real-time IRC-style text chat with commands (/me, /clear, /help, etc.)
- Full mobile optimization with responsive design and touch controls
- Performance monitoring and adaptive video quality
- Configuration-driven settings with config.json

💬 Chat System:
- IRC-style formatting with timestamps and usernames
- Mobile full-screen chat overlay
- Join/leave notifications and system messages
- Message history with automatic cleanup
- Desktop side panel + mobile overlay sync

📱 Mobile Optimizations:
- Touch-friendly controls with emoji icons
- Progressive Web App meta tags
- Orientation change handling
- Mobile-optimized video constraints
- Dedicated mobile chat interface

⚡ Performance Improvements:
- Adaptive video quality based on network conditions
- Video element pooling and efficient DOM operations
- Connection quality monitoring with visual indicators
- Enhanced peer connection management and cleanup
- SDP optimization for better codec preferences

🔧 Technical Changes:
- Renamed main.js to script.js for better organization
- Added comprehensive configuration system
- Fixed port mismatch (3232) and dynamic connection handling
- Improved ICE candidate routing and WebRTC stability
- Enhanced error handling and resource cleanup

🎨 UI/UX Improvements:
- Modern responsive design with light/dark themes
- Connection quality indicator in header
- Better button styling with icons and text
- Mobile-first responsive breakpoints
- Smooth animations and touch feedback
This commit is contained in:
Colby Lipsett
2025-10-02 20:01:03 +01:00
parent 209c690413
commit 357ed5798e
7 changed files with 2051 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
templates/index.html
View File

@@ -2,8 +2,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#212529">
<title>IRC VideoChat - Terminal</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
@@ -34,6 +38,10 @@
<div class="header-left">
<h1>#videochat</h1>
<span id="participantCount">1 user</span>
<span id="connectionQuality" class="connection-quality" title="Connection quality">
<span class="quality-indicator good">●</span>
<span class="quality-text">Good</span>
</span>
</div>
<div class="header-right">
<button id="themeToggle" class="header-btn" title="Toggle theme">
@@ -46,34 +54,75 @@
</header>
<main class="chat-main">
<div id="remoteVideos" class="video-grid" aria-label="Remote Videos"></div>
<div class="main-content">
<div id="remoteVideos" class="video-grid" aria-label="Remote Videos"></div>
<!-- Self View (Initially hidden) -->
<div id="selfViewContainer" class="self-view hidden">
<video id="selfVideo" autoplay muted></video>
<div class="self-view-label">
<span id="selfViewUsername">[SELF]</span>
</div>
</div>
</div>
<!-- Self View (Initially hidden) -->
<div id="selfViewContainer" class="self-view hidden">
<video id="selfVideo" autoplay muted></video>
<div class="self-view-label">
<span id="selfViewUsername">[SELF]</span>
<!-- IRC-style Chat Panel -->
<div id="chatPanel" class="chat-panel">
<div class="chat-header-bar">
<span class="chat-title">[#videochat]</span>
<button id="toggleChatButton" class="chat-toggle-btn" title="Toggle chat">
<span>💬</span>
</button>
</div>
<div class="chat-messages" id="chatMessages">
<div class="system-message">* Now talking in #videochat</div>
<div class="system-message">* Topic is: Welcome to the video chat room</div>
</div>
<div class="chat-input-container">
<span class="chat-prompt">&gt;</span>
<input type="text" id="chatInput" class="chat-input" placeholder="Type a message..." maxlength="500">
<button id="sendButton" class="send-button">Send</button>
</div>
</div>
</main>
<footer class="chat-controls">
<button id="muteButton" class="control-btn mute-btn">
<span>mic</span>
<span class="btn-icon">🎤</span>
<span class="btn-text">mic</span>
</button>
<button id="videoButton" class="control-btn video-btn">
<span>cam</span>
<span class="btn-icon">📹</span>
<span class="btn-text">cam</span>
</button>
<button id="mobileChatToggle" class="control-btn chat-btn mobile-only">
<span class="btn-icon">💬</span>
<span class="btn-text">chat</span>
</button>
<button id="hangupButton" class="control-btn hangup-btn">
<span>disconnect</span>
<span class="btn-icon">📞</span>
<span class="btn-text">disconnect</span>
</button>
</footer>
<!-- Mobile Chat Overlay -->
<div id="mobileChatOverlay" class="mobile-chat-overlay hidden">
<div class="mobile-chat-header">
<h3>#videochat</h3>
<button id="closeMobileChatButton" class="close-chat-btn">✕</button>
</div>
<div class="mobile-chat-messages" id="mobileChatMessages"></div>
<div class="mobile-chat-input-container">
<input type="text" id="mobileChatInput" class="mobile-chat-input" placeholder="Type a message..." maxlength="500">
<button id="mobileSendButton" class="mobile-send-button">Send</button>
</div>
</div>
</div>
<!-- Hidden local video for WebRTC -->
<video id="localVideo" autoplay muted style="display: none;"></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
<script src="{{ url_for('static', filename='main.js') }}"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>