ComputerTech312
357ed5798e
🚀 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
128 lines
5.5 KiB
HTML
128 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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') }}">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- Username Modal -->
|
|
<div id="usernameModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>IRC Video Chat Server</h2>
|
|
<p>* Connecting to #videochat...</p>
|
|
<p>* Enter your nickname to join</p>
|
|
</div>
|
|
<form id="usernameForm">
|
|
<div class="input-group">
|
|
<input type="text" id="usernameInput" placeholder="your_nickname" maxlength="20" required>
|
|
</div>
|
|
<button type="submit" id="joinButton">
|
|
Join Channel
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chat Interface -->
|
|
<div id="chatInterface" class="hidden">
|
|
<header class="chat-header">
|
|
<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">
|
|
🌙
|
|
</button>
|
|
<button id="toggleSelfViewButton" class="header-btn" title="Toggle self view">
|
|
View
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="chat-main">
|
|
<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>
|
|
|
|
<!-- 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">></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 class="btn-icon">🎤</span>
|
|
<span class="btn-text">mic</span>
|
|
</button>
|
|
<button id="videoButton" class="control-btn video-btn">
|
|
<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 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='script.js') }}"></script>
|
|
</body>
|
|
</html> |