Upload files to "/"
This commit is contained in:
427
main.js
Normal file
427
main.js
Normal file
@@ -0,0 +1,427 @@
|
||||
let localStream;
|
||||
let peerConnections = {};
|
||||
let username = '';
|
||||
let isVideoEnabled = true;
|
||||
let isAudioEnabled = true;
|
||||
let isSelfViewVisible = false;
|
||||
|
||||
// DOM elements
|
||||
const usernameModal = document.getElementById('usernameModal');
|
||||
const usernameForm = document.getElementById('usernameForm');
|
||||
const usernameInput = document.getElementById('usernameInput');
|
||||
const chatInterface = document.getElementById('chatInterface');
|
||||
const localVideo = document.getElementById('localVideo');
|
||||
const selfVideo = document.getElementById('selfVideo');
|
||||
const remoteVideos = document.getElementById('remoteVideos');
|
||||
const muteButton = document.getElementById('muteButton');
|
||||
const videoButton = document.getElementById('videoButton');
|
||||
const hangupButton = document.getElementById('hangupButton');
|
||||
const toggleSelfViewButton = document.getElementById('toggleSelfViewButton');
|
||||
const selfViewContainer = document.getElementById('selfViewContainer');
|
||||
const participantCount = document.getElementById('participantCount');
|
||||
const selfViewUsername = document.getElementById('selfViewUsername');
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
|
||||
// Initialize Socket.IO connection (but don't connect yet)
|
||||
let socket;
|
||||
|
||||
// ICE servers configuration for WebRTC
|
||||
const iceServers = {
|
||||
iceServers: [
|
||||
{ urls: 'stun:stun.l.google.com:19302' },
|
||||
{ urls: 'stun:stun1.l.google.com:19302' }
|
||||
]
|
||||
};
|
||||
|
||||
// Username form submission
|
||||
usernameForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const inputUsername = usernameInput.value.trim();
|
||||
|
||||
if (inputUsername.length < 1) {
|
||||
alert('Please enter a valid username');
|
||||
return;
|
||||
}
|
||||
|
||||
username = inputUsername;
|
||||
selfViewUsername.textContent = username;
|
||||
|
||||
try {
|
||||
// Get user media
|
||||
localStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
|
||||
localVideo.srcObject = localStream;
|
||||
selfVideo.srcObject = localStream;
|
||||
|
||||
console.log('Local stream obtained');
|
||||
|
||||
// Hide modal and show chat interface
|
||||
usernameModal.classList.add('hidden');
|
||||
chatInterface.classList.remove('hidden');
|
||||
|
||||
// Add your own video to the grid
|
||||
addLocalVideoToGrid();
|
||||
|
||||
// Initialize Socket.IO connection
|
||||
initializeSocket();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error accessing media devices:', error);
|
||||
alert('Unable to access camera/microphone. Please check your permissions and try again.');
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize Socket.IO connection
|
||||
function initializeSocket() {
|
||||
socket = io('https://localhost:3000', {
|
||||
secure: true,
|
||||
rejectUnauthorized: false // For self-signed certificates in development
|
||||
});
|
||||
|
||||
setupSocketListeners();
|
||||
}
|
||||
|
||||
// Setup Socket.IO event listeners
|
||||
function setupSocketListeners() {
|
||||
socket.on('connect', () => {
|
||||
console.log('Connected to server');
|
||||
// Join the room after connecting
|
||||
socket.emit('join_room', { username: username });
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('Disconnected from server');
|
||||
});
|
||||
|
||||
socket.on('user_joined', (data) => {
|
||||
console.log('User joined:', data.id, data.username);
|
||||
createPeerConnection(data.id, true, data.username); // This client will create offer
|
||||
updateParticipantCount();
|
||||
});
|
||||
|
||||
socket.on('existing_users', (data) => {
|
||||
console.log('Existing users:', data.users);
|
||||
// Connect to existing users (they will create offers to us)
|
||||
data.users.forEach(user => {
|
||||
createPeerConnection(user.id, false, user.username); // Don't create offer, wait for existing users to offer
|
||||
});
|
||||
updateParticipantCount();
|
||||
});
|
||||
|
||||
socket.on('user_disconnected', (data) => {
|
||||
console.log('User disconnected:', data.id);
|
||||
handleUserDisconnected(data.id);
|
||||
updateParticipantCount();
|
||||
});
|
||||
|
||||
socket.on('offer', async (data) => {
|
||||
console.log('Received offer from:', data.id);
|
||||
await handleOffer(data);
|
||||
});
|
||||
|
||||
socket.on('answer', async (data) => {
|
||||
console.log('Received answer from:', data.id);
|
||||
await handleAnswer(data);
|
||||
});
|
||||
|
||||
socket.on('ice_candidate', async (data) => {
|
||||
console.log('Received ICE candidate');
|
||||
await handleIceCandidate(data);
|
||||
});
|
||||
}
|
||||
|
||||
// WebRTC functions
|
||||
function createPeerConnection(userId, shouldCreateOffer = false, remoteUsername = null) {
|
||||
const peerConnection = new RTCPeerConnection(iceServers);
|
||||
peerConnections[userId] = {
|
||||
pc: peerConnection,
|
||||
username: remoteUsername
|
||||
};
|
||||
|
||||
// Add local stream to peer connection
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach(track => {
|
||||
peerConnection.addTrack(track, localStream);
|
||||
});
|
||||
}
|
||||
|
||||
// Handle remote stream
|
||||
peerConnection.ontrack = (event) => {
|
||||
console.log('Received remote stream from:', userId);
|
||||
addRemoteVideo(userId, event.streams[0], remoteUsername);
|
||||
};
|
||||
|
||||
// Handle ICE candidates
|
||||
peerConnection.onicecandidate = (event) => {
|
||||
if (event.candidate) {
|
||||
console.log('Sending ICE candidate');
|
||||
socket.emit('ice_candidate', {
|
||||
candidate: event.candidate,
|
||||
target_id: userId
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Create offer if this is the initiating peer
|
||||
if (shouldCreateOffer) {
|
||||
createOffer(peerConnection, userId);
|
||||
}
|
||||
|
||||
return peerConnection;
|
||||
}
|
||||
|
||||
async function createOffer(peerConnection, userId) {
|
||||
try {
|
||||
const offer = await peerConnection.createOffer();
|
||||
await peerConnection.setLocalDescription(offer);
|
||||
|
||||
socket.emit('offer', {
|
||||
offer: offer,
|
||||
target_id: userId
|
||||
});
|
||||
console.log('Offer sent to:', userId);
|
||||
} catch (error) {
|
||||
console.error('Error creating offer:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleOffer(data) {
|
||||
try {
|
||||
const peerConnection = createPeerConnection(data.id, false);
|
||||
|
||||
await peerConnection.setRemoteDescription(data.offer);
|
||||
const answer = await peerConnection.createAnswer();
|
||||
await peerConnection.setLocalDescription(answer);
|
||||
|
||||
socket.emit('answer', {
|
||||
answer: answer,
|
||||
id: data.id
|
||||
});
|
||||
console.log('Answer sent to:', data.id);
|
||||
} catch (error) {
|
||||
console.error('Error handling offer:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAnswer(data) {
|
||||
try {
|
||||
const peerConnectionObj = peerConnections[data.id];
|
||||
if (peerConnectionObj) {
|
||||
await peerConnectionObj.pc.setRemoteDescription(data.answer);
|
||||
console.log('Answer processed from:', data.id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error handling answer:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleIceCandidate(data) {
|
||||
try {
|
||||
const peerConnectionObj = peerConnections[data.target_id] || peerConnections[Object.keys(peerConnections)[0]];
|
||||
if (peerConnectionObj && data.candidate) {
|
||||
await peerConnectionObj.pc.addIceCandidate(data.candidate);
|
||||
console.log('ICE candidate added');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error handling ICE candidate:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function addRemoteVideo(userId, stream, remoteUsername = null) {
|
||||
// Remove existing video if any
|
||||
const existingContainer = document.getElementById(userId);
|
||||
if (existingContainer) {
|
||||
existingContainer.remove();
|
||||
}
|
||||
|
||||
const remoteVideoContainer = document.createElement('div');
|
||||
remoteVideoContainer.className = 'remoteVideoContainer';
|
||||
remoteVideoContainer.id = userId;
|
||||
|
||||
const remoteVideo = document.createElement('video');
|
||||
remoteVideo.className = 'remoteVideo';
|
||||
remoteVideo.autoplay = true;
|
||||
remoteVideo.srcObject = stream;
|
||||
remoteVideoContainer.appendChild(remoteVideo);
|
||||
|
||||
const usernameElement = document.createElement('div');
|
||||
usernameElement.className = 'remoteUsername';
|
||||
usernameElement.textContent = `${remoteUsername || `user_${userId.substring(0, 8)}`}`;
|
||||
remoteVideoContainer.appendChild(usernameElement);
|
||||
|
||||
remoteVideos.appendChild(remoteVideoContainer);
|
||||
}
|
||||
|
||||
// Add local video to the main grid
|
||||
function addLocalVideoToGrid() {
|
||||
const localVideoContainer = document.createElement('div');
|
||||
localVideoContainer.className = 'remoteVideoContainer';
|
||||
localVideoContainer.id = 'local-video-display';
|
||||
|
||||
const localVideoDisplay = document.createElement('video');
|
||||
localVideoDisplay.className = 'remoteVideo';
|
||||
localVideoDisplay.autoplay = true;
|
||||
localVideoDisplay.muted = true; // Prevent echo
|
||||
localVideoDisplay.srcObject = localStream;
|
||||
localVideoDisplay.style.transform = 'scaleX(-1)'; // Mirror effect
|
||||
localVideoContainer.appendChild(localVideoDisplay);
|
||||
|
||||
const localUsernameElement = document.createElement('div');
|
||||
localUsernameElement.className = 'remoteUsername';
|
||||
localUsernameElement.textContent = `${username} (you)`;
|
||||
localVideoContainer.appendChild(localUsernameElement);
|
||||
|
||||
remoteVideos.appendChild(localVideoContainer);
|
||||
}
|
||||
|
||||
// Update participant count
|
||||
function updateParticipantCount() {
|
||||
const count = Object.keys(peerConnections).length + 1; // +1 for local user
|
||||
participantCount.textContent = `${count} user${count !== 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
function handleUserDisconnected(userId) {
|
||||
const videoContainer = document.getElementById(userId);
|
||||
if (videoContainer) {
|
||||
videoContainer.remove();
|
||||
}
|
||||
|
||||
const peerConnectionObj = peerConnections[userId];
|
||||
if (peerConnectionObj) {
|
||||
peerConnectionObj.pc.close();
|
||||
delete peerConnections[userId];
|
||||
}
|
||||
}
|
||||
|
||||
// Button event handlers
|
||||
muteButton.addEventListener('click', () => {
|
||||
if (localStream) {
|
||||
const audioTrack = localStream.getAudioTracks()[0];
|
||||
if (audioTrack) {
|
||||
audioTrack.enabled = !audioTrack.enabled;
|
||||
isAudioEnabled = audioTrack.enabled;
|
||||
|
||||
const span = muteButton.querySelector('span');
|
||||
|
||||
if (isAudioEnabled) {
|
||||
span.textContent = 'mic';
|
||||
muteButton.classList.remove('muted');
|
||||
} else {
|
||||
span.textContent = 'muted';
|
||||
muteButton.classList.add('muted');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
videoButton.addEventListener('click', () => {
|
||||
if (localStream) {
|
||||
const videoTrack = localStream.getVideoTracks()[0];
|
||||
if (videoTrack) {
|
||||
videoTrack.enabled = !videoTrack.enabled;
|
||||
isVideoEnabled = videoTrack.enabled;
|
||||
|
||||
const span = videoButton.querySelector('span');
|
||||
|
||||
// Update local video display visibility
|
||||
const localVideoDisplay = document.querySelector('#local-video-display .remoteVideo');
|
||||
|
||||
if (isVideoEnabled) {
|
||||
span.textContent = 'cam';
|
||||
videoButton.classList.remove('disabled');
|
||||
if (localVideoDisplay) {
|
||||
localVideoDisplay.style.visibility = 'visible';
|
||||
}
|
||||
if (selfVideo && isSelfViewVisible) {
|
||||
selfVideo.style.visibility = 'visible';
|
||||
}
|
||||
} else {
|
||||
span.textContent = 'nocam';
|
||||
videoButton.classList.add('disabled');
|
||||
if (localVideoDisplay) {
|
||||
localVideoDisplay.style.visibility = 'hidden';
|
||||
}
|
||||
if (selfVideo) {
|
||||
selfVideo.style.visibility = 'hidden';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
toggleSelfViewButton.addEventListener('click', () => {
|
||||
isSelfViewVisible = !isSelfViewVisible;
|
||||
|
||||
if (isSelfViewVisible) {
|
||||
selfViewContainer.classList.remove('hidden');
|
||||
toggleSelfViewButton.textContent = '[HIDE]';
|
||||
toggleSelfViewButton.title = 'Hide self view';
|
||||
// Sync video state with main video
|
||||
if (selfVideo && !isVideoEnabled) {
|
||||
selfVideo.style.visibility = 'hidden';
|
||||
}
|
||||
} else {
|
||||
selfViewContainer.classList.add('hidden');
|
||||
toggleSelfViewButton.textContent = '[VIEW]';
|
||||
toggleSelfViewButton.title = 'Show self view';
|
||||
}
|
||||
});
|
||||
|
||||
hangupButton.addEventListener('click', () => {
|
||||
// Close all peer connections
|
||||
Object.values(peerConnections).forEach(pcObj => pcObj.pc.close());
|
||||
peerConnections = {};
|
||||
|
||||
// Stop local stream
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach(track => track.stop());
|
||||
localVideo.srcObject = null;
|
||||
selfVideo.srcObject = null;
|
||||
}
|
||||
|
||||
// Remove all videos (including local video display)
|
||||
while (remoteVideos.firstChild) {
|
||||
remoteVideos.firstChild.remove();
|
||||
}
|
||||
|
||||
// Disconnect from server
|
||||
if (socket) {
|
||||
socket.disconnect();
|
||||
}
|
||||
|
||||
// Reset UI
|
||||
chatInterface.classList.add('hidden');
|
||||
usernameModal.classList.remove('hidden');
|
||||
usernameInput.value = '';
|
||||
selfViewContainer.classList.add('hidden');
|
||||
isSelfViewVisible = false;
|
||||
|
||||
console.log('Left the chat');
|
||||
});
|
||||
|
||||
// Theme toggle functionality
|
||||
function initTheme() {
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
updateThemeToggleIcon(savedTheme);
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
updateThemeToggleIcon(newTheme);
|
||||
}
|
||||
|
||||
function updateThemeToggleIcon(theme) {
|
||||
themeToggle.textContent = theme === 'light' ? '🌙' : '☀️';
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', toggleTheme);
|
||||
|
||||
// Focus username input on load and initialize theme
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
usernameInput.focus();
|
||||
initTheme();
|
||||
});
|
||||
438
styles.css
Normal file
438
styles.css
Normal file
@@ -0,0 +1,438 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--bg-tertiary: #e9ecef;
|
||||
--text-primary: #212529;
|
||||
--text-secondary: #6c757d;
|
||||
--text-muted: #adb5bd;
|
||||
--border-color: #dee2e6;
|
||||
--accent-color: #0d6efd;
|
||||
--success-color: #198754;
|
||||
--danger-color: #dc3545;
|
||||
--warning-color: #ffc107;
|
||||
--shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #212529;
|
||||
--bg-secondary: #2d3338;
|
||||
--bg-tertiary: #343a40;
|
||||
--text-primary: #f8f9fa;
|
||||
--text-secondary: #adb5bd;
|
||||
--text-muted: #6c757d;
|
||||
--border-color: #495057;
|
||||
--accent-color: #0d6efd;
|
||||
--success-color: #198754;
|
||||
--danger-color: #dc3545;
|
||||
--warning-color: #ffc107;
|
||||
--shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Username Modal */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
max-width: 420px;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: modalSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
color: var(--text-primary);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-header p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-secondary);
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.input-group input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#joinButton {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#joinButton:hover {
|
||||
background: #0b5ed7;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* Chat Interface */
|
||||
#chatInterface {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px;
|
||||
height: calc(100vh - 20px);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.chat-header {
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-left h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#participantCount {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
background: var(--bg-primary);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--accent-color);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.header-btn:hover {
|
||||
background: #0b5ed7;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Main Chat Area */
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Video Grid */
|
||||
.video-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.remoteVideoContainer {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
min-width: 200px;
|
||||
aspect-ratio: 16 / 9;
|
||||
box-shadow: var(--shadow);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.remoteVideoContainer:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.remoteVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.remoteUsername {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Responsive grid sizing */
|
||||
.remoteVideoContainer:only-child {
|
||||
width: min(70vw, 800px);
|
||||
}
|
||||
|
||||
.video-grid:has(.remoteVideoContainer:nth-child(2)) .remoteVideoContainer {
|
||||
width: min(45vw, 500px);
|
||||
}
|
||||
|
||||
.video-grid:has(.remoteVideoContainer:nth-child(3)) .remoteVideoContainer {
|
||||
width: min(30vw, 350px);
|
||||
}
|
||||
|
||||
.video-grid:has(.remoteVideoContainer:nth-child(4)) .remoteVideoContainer {
|
||||
width: min(22vw, 280px);
|
||||
}
|
||||
|
||||
/* Self View */
|
||||
.self-view {
|
||||
position: fixed;
|
||||
bottom: 4rem;
|
||||
right: 1rem;
|
||||
width: 200px;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.self-view:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
#selfVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transform: scaleX(-1); /* Mirror effect */
|
||||
}
|
||||
|
||||
.self-view-label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Chat Controls */
|
||||
.chat-controls {
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border-color: var(--accent-color);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.control-btn span {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.mute-btn.muted {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.mute-btn.muted:hover {
|
||||
background: #c82333;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.video-btn.disabled {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.video-btn.disabled:hover {
|
||||
background: #c82333;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.hangup-btn {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.hangup-btn:hover {
|
||||
background: #c82333;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.chat-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header-left h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.remoteVideoContainer:only-child {
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.video-grid:has(.remoteVideoContainer:nth-child(2)) .remoteVideoContainer {
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
.video-grid:has(.remoteVideoContainer:nth-child(3)) .remoteVideoContainer {
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
.video-grid:has(.remoteVideoContainer:nth-child(4)) .remoteVideoContainer {
|
||||
width: 45vw;
|
||||
}
|
||||
|
||||
.self-view {
|
||||
width: 120px;
|
||||
bottom: 6rem;
|
||||
}
|
||||
|
||||
.chat-controls {
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 0.75rem;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.control-btn span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user