Initial setup
This commit is contained in:
Peter Stockings
627
public/app.js
Normal file
627
public/app.js
Normal file
@@ -0,0 +1,627 @@
|
||||
// ===== VlcSync Client =====
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
// --- State ---
|
||||
let ws = null;
|
||||
let username = "";
|
||||
let roomCode = "";
|
||||
let localFile = null; // File object for the creator
|
||||
let joinFile = null; // File object for the joiner
|
||||
let ignoreSync = false; // flag to avoid feedback loops
|
||||
let syncTimeout = null;
|
||||
let driftInterval = null;
|
||||
let serverState = { playing: false, position: 0, speed: 1 };
|
||||
|
||||
// User colors for chat
|
||||
const userColors = [
|
||||
"#3ea6ff", "#ff7043", "#66bb6a", "#ab47bc",
|
||||
"#ffa726", "#ef5350", "#26c6da", "#ec407a",
|
||||
];
|
||||
const userColorMap = {};
|
||||
|
||||
function getUserColor(name) {
|
||||
if (!userColorMap[name]) {
|
||||
const idx = Object.keys(userColorMap).length % userColors.length;
|
||||
userColorMap[name] = userColors[idx];
|
||||
}
|
||||
return userColorMap[name];
|
||||
}
|
||||
|
||||
// --- DOM Refs ---
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const lobbyView = $("lobby");
|
||||
const roomView = $("room");
|
||||
const usernameInput = $("username-input");
|
||||
const createFileInput = $("create-file-input");
|
||||
const createFileInfo = $("create-file-info");
|
||||
const createRoomBtn = $("create-room-btn");
|
||||
const roomCodeInput = $("room-code-input");
|
||||
const joinRoomBtn = $("join-room-btn");
|
||||
const lobbyError = $("lobby-error");
|
||||
|
||||
// Modal
|
||||
const fileCheckModal = $("file-check-modal");
|
||||
const requiredFileInfo = $("required-file-info");
|
||||
const joinFileInput = $("join-file-input");
|
||||
const joinFileStatus = $("join-file-status");
|
||||
const modalCancelBtn = $("modal-cancel-btn");
|
||||
const modalConfirmBtn = $("modal-confirm-btn");
|
||||
|
||||
// Room
|
||||
const roomCodeDisplay = $("room-code-display");
|
||||
const copyCodeBtn = $("copy-code-btn");
|
||||
const roomFileBadge = $("room-file-badge");
|
||||
const leaveRoomBtn = $("leave-room-btn");
|
||||
const videoPlayer = $("video-player");
|
||||
const videoWrapper = $("video-wrapper");
|
||||
const bigPlayBtn = $("big-play-btn");
|
||||
const seekBar = $("seek-bar");
|
||||
const playPauseBtn = $("play-pause-btn");
|
||||
const playIcon = $("play-icon");
|
||||
const pauseIcon = $("pause-icon");
|
||||
const volumeBtn = $("volume-btn");
|
||||
const volOnIcon = $("vol-on-icon");
|
||||
const volOffIcon = $("vol-off-icon");
|
||||
const volumeSlider = $("volume-slider");
|
||||
const currentTimeEl = $("current-time");
|
||||
const durationEl = $("duration");
|
||||
const speedSelect = $("speed-select");
|
||||
const fullscreenBtn = $("fullscreen-btn");
|
||||
const userCountEl = $("user-count");
|
||||
const usersList = $("users-list");
|
||||
const chatMessages = $("chat-messages");
|
||||
const chatInput = $("chat-input");
|
||||
const chatSendBtn = $("chat-send-btn");
|
||||
|
||||
// --- Helpers ---
|
||||
function formatTime(seconds) {
|
||||
if (!isFinite(seconds) || seconds < 0) return "0:00";
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
if (h > 0) {
|
||||
return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function formatSize(bytes) {
|
||||
if (bytes < 1024) return bytes + " B";
|
||||
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB";
|
||||
if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + " MB";
|
||||
return (bytes / 1073741824).toFixed(2) + " GB";
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
lobbyError.textContent = msg;
|
||||
lobbyError.classList.remove("hidden");
|
||||
setTimeout(() => lobbyError.classList.add("hidden"), 4000);
|
||||
}
|
||||
|
||||
function showView(viewEl) {
|
||||
document.querySelectorAll(".view").forEach((v) => v.classList.remove("active"));
|
||||
viewEl.classList.add("active");
|
||||
}
|
||||
|
||||
// --- WebSocket ---
|
||||
function connect() {
|
||||
const protocol = location.protocol === "https:" ? "wss:" : "ws:";
|
||||
ws = new WebSocket(`${protocol}//${location.host}/ws`);
|
||||
|
||||
ws.addEventListener("open", () => {
|
||||
console.log("WebSocket connected");
|
||||
});
|
||||
|
||||
ws.addEventListener("message", (e) => {
|
||||
const msg = JSON.parse(e.data);
|
||||
handleMessage(msg);
|
||||
});
|
||||
|
||||
ws.addEventListener("close", () => {
|
||||
console.log("WebSocket disconnected");
|
||||
// Attempt reconnect after 2s if in room
|
||||
if (roomCode) {
|
||||
setTimeout(() => connect(), 2000);
|
||||
}
|
||||
});
|
||||
|
||||
ws.addEventListener("error", (err) => {
|
||||
console.error("WebSocket error:", err);
|
||||
});
|
||||
}
|
||||
|
||||
function send(data) {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify(data));
|
||||
}
|
||||
}
|
||||
|
||||
// --- Message Handler ---
|
||||
function handleMessage(msg) {
|
||||
switch (msg.type) {
|
||||
case "room_created":
|
||||
roomCode = msg.code;
|
||||
enterRoom(msg);
|
||||
break;
|
||||
|
||||
case "room_file_check":
|
||||
showFileCheckModal(msg);
|
||||
break;
|
||||
|
||||
case "room_joined":
|
||||
roomCode = msg.code;
|
||||
fileCheckModal.classList.add("hidden");
|
||||
enterRoom(msg);
|
||||
// Apply initial state
|
||||
if (msg.state) {
|
||||
applySync(msg.state);
|
||||
}
|
||||
// Load chat history
|
||||
if (msg.chatHistory) {
|
||||
msg.chatHistory.forEach((m) => addChatMessage(m.username, m.message, m.timestamp));
|
||||
}
|
||||
break;
|
||||
|
||||
case "user_joined":
|
||||
updateUsers(msg.users);
|
||||
addSystemMessage(`${msg.username} joined`);
|
||||
break;
|
||||
|
||||
case "user_left":
|
||||
updateUsers(msg.users);
|
||||
addSystemMessage(`${msg.username} left`);
|
||||
break;
|
||||
|
||||
case "sync":
|
||||
applySync(msg);
|
||||
addSyncNotification(msg);
|
||||
break;
|
||||
|
||||
case "chat":
|
||||
addChatMessage(msg.username, msg.message, msg.timestamp);
|
||||
break;
|
||||
|
||||
case "state":
|
||||
if (msg.state) applySync(msg.state);
|
||||
break;
|
||||
|
||||
case "error":
|
||||
showError(msg.message);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Room Entry ---
|
||||
function enterRoom(msg) {
|
||||
roomCodeDisplay.textContent = msg.code;
|
||||
roomFileBadge.textContent = `📄 ${msg.fileInfo.name} (${formatSize(msg.fileInfo.size)})`;
|
||||
updateUsers(msg.users);
|
||||
showView(roomView);
|
||||
|
||||
// Load local file into video player
|
||||
const file = localFile || joinFile;
|
||||
if (file) {
|
||||
const url = URL.createObjectURL(file);
|
||||
videoPlayer.src = url;
|
||||
}
|
||||
|
||||
// Start drift correction
|
||||
startDriftCorrection();
|
||||
}
|
||||
|
||||
// --- File Check Modal ---
|
||||
let pendingRoomFileInfo = null;
|
||||
|
||||
function showFileCheckModal(msg) {
|
||||
pendingRoomFileInfo = msg.fileInfo;
|
||||
joinFile = null;
|
||||
joinFileStatus.classList.add("hidden");
|
||||
modalConfirmBtn.disabled = true;
|
||||
|
||||
// Display required file info
|
||||
requiredFileInfo.innerHTML = `
|
||||
<div class="label">Filename</div>
|
||||
<div class="value">${msg.fileInfo.name}</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="label">Size</div>
|
||||
<div class="value">${formatSize(msg.fileInfo.size)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">Duration</div>
|
||||
<div class="value">${msg.fileInfo.duration ? formatTime(msg.fileInfo.duration) : "—"}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
fileCheckModal.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// --- Users ---
|
||||
function updateUsers(users) {
|
||||
userCountEl.textContent = users.length;
|
||||
usersList.innerHTML = users
|
||||
.map(
|
||||
(u) =>
|
||||
`<div class="user-chip"><span class="user-dot" style="background:${getUserColor(u)}"></span>${u}</div>`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
// --- Chat ---
|
||||
function addChatMessage(author, text, timestamp) {
|
||||
const chatWelcome = $("chat-welcome");
|
||||
if (chatWelcome) chatWelcome.remove();
|
||||
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-msg";
|
||||
const time = new Date(timestamp);
|
||||
const timeStr = time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
div.innerHTML = `<span class="msg-author" style="color:${getUserColor(author)}">${escapeHtml(author)}</span><span class="msg-text">${escapeHtml(text)}</span><span class="msg-time">${timeStr}</span>`;
|
||||
chatMessages.appendChild(div);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
function addSystemMessage(text) {
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-msg system-msg";
|
||||
div.textContent = text;
|
||||
chatMessages.appendChild(div);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
function addSyncNotification(msg) {
|
||||
if (!msg.username || msg.username === username) return;
|
||||
let text = "";
|
||||
if (msg.action === "play") text = `${msg.username} pressed play`;
|
||||
else if (msg.action === "pause") text = `${msg.username} paused`;
|
||||
else if (msg.action === "seek") text = `${msg.username} seeked to ${formatTime(msg.position)}`;
|
||||
else if (msg.action === "speed") text = `${msg.username} changed speed to ${msg.speed}x`;
|
||||
if (text) addSystemMessage(text);
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// --- Video Sync ---
|
||||
function applySync(data) {
|
||||
ignoreSync = true;
|
||||
|
||||
if (data.speed !== undefined && videoPlayer.playbackRate !== data.speed) {
|
||||
videoPlayer.playbackRate = data.speed;
|
||||
speedSelect.value = String(data.speed);
|
||||
}
|
||||
|
||||
if (data.position !== undefined) {
|
||||
const diff = Math.abs(videoPlayer.currentTime - data.position);
|
||||
if (diff > 0.5) {
|
||||
videoPlayer.currentTime = data.position;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.playing !== undefined) {
|
||||
if (data.playing && videoPlayer.paused) {
|
||||
videoPlayer.play().catch(() => {});
|
||||
videoWrapper.classList.add("playing");
|
||||
} else if (!data.playing && !videoPlayer.paused) {
|
||||
videoPlayer.pause();
|
||||
videoWrapper.classList.remove("playing");
|
||||
}
|
||||
}
|
||||
|
||||
updatePlayPauseIcon();
|
||||
|
||||
// Clear ignore flag after a short delay
|
||||
clearTimeout(syncTimeout);
|
||||
syncTimeout = setTimeout(() => {
|
||||
ignoreSync = false;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function updatePlayPauseIcon() {
|
||||
if (videoPlayer.paused) {
|
||||
playIcon.classList.remove("hidden");
|
||||
pauseIcon.classList.add("hidden");
|
||||
} else {
|
||||
playIcon.classList.add("hidden");
|
||||
pauseIcon.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function startDriftCorrection() {
|
||||
if (driftInterval) clearInterval(driftInterval);
|
||||
driftInterval = setInterval(() => {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
send({ type: "request_state" });
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// --- Get video duration from a file (used for file info) ---
|
||||
function getVideoDuration(file) {
|
||||
return new Promise((resolve) => {
|
||||
const video = document.createElement("video");
|
||||
video.preload = "metadata";
|
||||
video.onloadedmetadata = () => {
|
||||
resolve(video.duration);
|
||||
URL.revokeObjectURL(video.src);
|
||||
};
|
||||
video.onerror = () => {
|
||||
resolve(0);
|
||||
URL.revokeObjectURL(video.src);
|
||||
};
|
||||
video.src = URL.createObjectURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
function renderFileInfo(container, file, duration) {
|
||||
container.innerHTML = `
|
||||
<div class="file-name">${file.name}</div>
|
||||
<div class="file-meta">${formatSize(file.size)}${duration ? " · " + formatTime(duration) : ""}</div>
|
||||
`;
|
||||
container.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// ===== EVENT LISTENERS =====
|
||||
|
||||
// --- Lobby: Username ---
|
||||
usernameInput.addEventListener("input", () => {
|
||||
const hasName = usernameInput.value.trim().length > 0;
|
||||
createRoomBtn.disabled = !hasName || !localFile;
|
||||
joinRoomBtn.disabled = !hasName || roomCodeInput.value.trim().length < 4;
|
||||
});
|
||||
|
||||
// --- Lobby: Create Room File ---
|
||||
createFileInput.addEventListener("change", async () => {
|
||||
const file = createFileInput.files[0];
|
||||
if (!file) return;
|
||||
localFile = file;
|
||||
const duration = await getVideoDuration(file);
|
||||
localFile._duration = duration;
|
||||
renderFileInfo(createFileInfo, file, duration);
|
||||
createRoomBtn.disabled = !usernameInput.value.trim();
|
||||
});
|
||||
|
||||
// --- Lobby: Create Room ---
|
||||
createRoomBtn.addEventListener("click", () => {
|
||||
username = usernameInput.value.trim();
|
||||
if (!username || !localFile) return;
|
||||
connect();
|
||||
// Wait for connection to be open
|
||||
const waitForOpen = setInterval(() => {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
clearInterval(waitForOpen);
|
||||
send({
|
||||
type: "create_room",
|
||||
username,
|
||||
fileInfo: {
|
||||
name: localFile.name,
|
||||
size: localFile.size,
|
||||
duration: localFile._duration || 0,
|
||||
},
|
||||
});
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// --- Lobby: Room Code ---
|
||||
roomCodeInput.addEventListener("input", () => {
|
||||
const hasName = usernameInput.value.trim().length > 0;
|
||||
const hasCode = roomCodeInput.value.trim().length >= 4;
|
||||
joinRoomBtn.disabled = !hasName || !hasCode;
|
||||
});
|
||||
|
||||
// --- Lobby: Join Room ---
|
||||
joinRoomBtn.addEventListener("click", () => {
|
||||
username = usernameInput.value.trim();
|
||||
const code = roomCodeInput.value.trim().toUpperCase();
|
||||
if (!username || !code) return;
|
||||
connect();
|
||||
const waitForOpen = setInterval(() => {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
clearInterval(waitForOpen);
|
||||
send({ type: "join_room", username, code });
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// --- Modal: File Select ---
|
||||
joinFileInput.addEventListener("change", async () => {
|
||||
const file = joinFileInput.files[0];
|
||||
if (!file || !pendingRoomFileInfo) return;
|
||||
joinFile = file;
|
||||
const duration = await getVideoDuration(file);
|
||||
joinFile._duration = duration;
|
||||
|
||||
const nameMatch = file.name === pendingRoomFileInfo.name;
|
||||
const sizeMatch = file.size === pendingRoomFileInfo.size;
|
||||
|
||||
if (nameMatch && sizeMatch) {
|
||||
joinFileStatus.className = "file-match-status match";
|
||||
joinFileStatus.textContent = "✓ File matches!";
|
||||
joinFileStatus.classList.remove("hidden");
|
||||
modalConfirmBtn.disabled = false;
|
||||
} else {
|
||||
let reason = "";
|
||||
if (!nameMatch) reason += `Name: "${file.name}" ≠ "${pendingRoomFileInfo.name}". `;
|
||||
if (!sizeMatch) reason += `Size: ${formatSize(file.size)} ≠ ${formatSize(pendingRoomFileInfo.size)}.`;
|
||||
joinFileStatus.className = "file-match-status mismatch";
|
||||
joinFileStatus.textContent = `✗ File does not match. ${reason}`;
|
||||
joinFileStatus.classList.remove("hidden");
|
||||
modalConfirmBtn.disabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
// --- Modal: Cancel ---
|
||||
modalCancelBtn.addEventListener("click", () => {
|
||||
fileCheckModal.classList.add("hidden");
|
||||
joinFile = null;
|
||||
pendingRoomFileInfo = null;
|
||||
if (ws) ws.close();
|
||||
});
|
||||
|
||||
// --- Modal: Confirm Join ---
|
||||
modalConfirmBtn.addEventListener("click", () => {
|
||||
if (!joinFile || !pendingRoomFileInfo) return;
|
||||
localFile = joinFile; // use join file as the video source
|
||||
send({
|
||||
type: "confirm_join",
|
||||
fileInfo: {
|
||||
name: joinFile.name,
|
||||
size: joinFile.size,
|
||||
duration: joinFile._duration || 0,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// --- Room: Copy Code ---
|
||||
copyCodeBtn.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(roomCode).then(() => {
|
||||
copyCodeBtn.title = "Copied!";
|
||||
setTimeout(() => (copyCodeBtn.title = "Copy room code"), 2000);
|
||||
});
|
||||
});
|
||||
|
||||
// --- Room: Leave ---
|
||||
leaveRoomBtn.addEventListener("click", () => {
|
||||
if (ws) ws.close();
|
||||
roomCode = "";
|
||||
localFile = null;
|
||||
joinFile = null;
|
||||
if (driftInterval) clearInterval(driftInterval);
|
||||
videoPlayer.src = "";
|
||||
chatMessages.innerHTML = '<div class="chat-welcome" id="chat-welcome"><p>Welcome to the room! 👋</p></div>';
|
||||
createFileInfo.classList.add("hidden");
|
||||
createFileInput.value = "";
|
||||
createRoomBtn.disabled = true;
|
||||
showView(lobbyView);
|
||||
});
|
||||
|
||||
// --- Video Controls ---
|
||||
// Play/Pause
|
||||
function togglePlayPause() {
|
||||
if (videoPlayer.paused) {
|
||||
videoPlayer.play().catch(() => {});
|
||||
videoWrapper.classList.add("playing");
|
||||
if (!ignoreSync) {
|
||||
send({ type: "sync", action: "play", position: videoPlayer.currentTime });
|
||||
}
|
||||
} else {
|
||||
videoPlayer.pause();
|
||||
videoWrapper.classList.remove("playing");
|
||||
if (!ignoreSync) {
|
||||
send({ type: "sync", action: "pause", position: videoPlayer.currentTime });
|
||||
}
|
||||
}
|
||||
updatePlayPauseIcon();
|
||||
}
|
||||
|
||||
playPauseBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
togglePlayPause();
|
||||
});
|
||||
bigPlayBtn.addEventListener("click", togglePlayPause);
|
||||
videoWrapper.addEventListener("click", (e) => {
|
||||
if (e.target === videoPlayer || e.target === videoWrapper || e.target.closest(".video-overlay")) {
|
||||
togglePlayPause();
|
||||
}
|
||||
});
|
||||
|
||||
// Keyboard: space to play/pause
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
|
||||
if (e.code === "Space" && roomView.classList.contains("active")) {
|
||||
e.preventDefault();
|
||||
togglePlayPause();
|
||||
}
|
||||
});
|
||||
|
||||
// Time update
|
||||
videoPlayer.addEventListener("timeupdate", () => {
|
||||
if (!videoPlayer.duration) return;
|
||||
currentTimeEl.textContent = formatTime(videoPlayer.currentTime);
|
||||
const pct = (videoPlayer.currentTime / videoPlayer.duration) * 1000;
|
||||
seekBar.value = pct;
|
||||
});
|
||||
|
||||
videoPlayer.addEventListener("loadedmetadata", () => {
|
||||
durationEl.textContent = formatTime(videoPlayer.duration);
|
||||
});
|
||||
|
||||
// Seek
|
||||
let isSeeking = false;
|
||||
|
||||
seekBar.addEventListener("input", () => {
|
||||
isSeeking = true;
|
||||
const time = (seekBar.value / 1000) * videoPlayer.duration;
|
||||
currentTimeEl.textContent = formatTime(time);
|
||||
});
|
||||
|
||||
seekBar.addEventListener("change", () => {
|
||||
const time = (seekBar.value / 1000) * videoPlayer.duration;
|
||||
videoPlayer.currentTime = time;
|
||||
isSeeking = false;
|
||||
if (!ignoreSync) {
|
||||
send({ type: "sync", action: "seek", position: time });
|
||||
}
|
||||
});
|
||||
|
||||
// Volume
|
||||
volumeBtn.addEventListener("click", () => {
|
||||
videoPlayer.muted = !videoPlayer.muted;
|
||||
volOnIcon.classList.toggle("hidden", videoPlayer.muted);
|
||||
volOffIcon.classList.toggle("hidden", !videoPlayer.muted);
|
||||
});
|
||||
|
||||
volumeSlider.addEventListener("input", () => {
|
||||
videoPlayer.volume = volumeSlider.value / 100;
|
||||
videoPlayer.muted = videoPlayer.volume === 0;
|
||||
volOnIcon.classList.toggle("hidden", videoPlayer.muted);
|
||||
volOffIcon.classList.toggle("hidden", !videoPlayer.muted);
|
||||
});
|
||||
|
||||
// Speed
|
||||
speedSelect.addEventListener("change", () => {
|
||||
const speed = parseFloat(speedSelect.value);
|
||||
videoPlayer.playbackRate = speed;
|
||||
if (!ignoreSync) {
|
||||
send({ type: "sync", action: "speed", speed });
|
||||
}
|
||||
});
|
||||
|
||||
// Fullscreen
|
||||
fullscreenBtn.addEventListener("click", () => {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
videoWrapper.requestFullscreen().catch(() => {});
|
||||
}
|
||||
});
|
||||
|
||||
// --- Chat ---
|
||||
chatSendBtn.addEventListener("click", sendChat);
|
||||
chatInput.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") sendChat();
|
||||
});
|
||||
|
||||
function sendChat() {
|
||||
const text = chatInput.value.trim();
|
||||
if (!text) return;
|
||||
send({ type: "chat", message: text });
|
||||
chatInput.value = "";
|
||||
}
|
||||
|
||||
// Double click to fullscreen
|
||||
videoPlayer.addEventListener("dblclick", (e) => {
|
||||
e.preventDefault();
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
videoWrapper.requestFullscreen().catch(() => {});
|
||||
}
|
||||
});
|
||||
})();
|
||||
208
public/index.html
Normal file
208
public/index.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VideoSync — Watch Together</title>
|
||||
<meta name="description"
|
||||
content="Sync video playback with friends in real-time. Load a local file, create a room, and watch together.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- ===== LOBBY VIEW ===== -->
|
||||
<div id="lobby" class="view active">
|
||||
<div class="lobby-container">
|
||||
<div class="lobby-brand">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 48 48" width="56" height="56" fill="none">
|
||||
<rect x="4" y="8" width="40" height="32" rx="4" fill="#3ea6ff" opacity="0.15" />
|
||||
<rect x="4" y="8" width="40" height="32" rx="4" stroke="#3ea6ff" stroke-width="2.5" />
|
||||
<polygon points="20,16 34,24 20,32" fill="#3ea6ff" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1>VideoSync</h1>
|
||||
<p class="tagline">Watch together, anywhere</p>
|
||||
</div>
|
||||
|
||||
<div class="lobby-card">
|
||||
<div class="input-group">
|
||||
<label for="username-input">Your Name</label>
|
||||
<input type="text" id="username-input" placeholder="Enter a display name" maxlength="20" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="lobby-divider"><span>then</span></div>
|
||||
|
||||
<div class="lobby-actions">
|
||||
<div class="action-panel create-panel">
|
||||
<h3>Create a Room</h3>
|
||||
<p class="action-desc">Select a video file to start watching</p>
|
||||
<label class="file-select-btn" id="create-file-label">
|
||||
<input type="file" id="create-file-input" accept="video/*" hidden>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm4 18H6V4h7v5h5v11z" />
|
||||
</svg>
|
||||
<span>Choose Video File</span>
|
||||
</label>
|
||||
<div id="create-file-info" class="file-info hidden"></div>
|
||||
<button id="create-room-btn" class="btn-primary" disabled>Create Room</button>
|
||||
</div>
|
||||
|
||||
<div class="lobby-or"><span>or</span></div>
|
||||
|
||||
<div class="action-panel join-panel">
|
||||
<h3>Join a Room</h3>
|
||||
<p class="action-desc">Enter a room code from a friend</p>
|
||||
<input type="text" id="room-code-input" placeholder="e.g. ABC123" maxlength="6" autocomplete="off"
|
||||
style="text-transform: uppercase">
|
||||
<button id="join-room-btn" class="btn-secondary" disabled>Join Room</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="lobby-error" class="error-toast hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== FILE CHECK MODAL ===== -->
|
||||
<div id="file-check-modal" class="modal hidden">
|
||||
<div class="modal-backdrop"></div>
|
||||
<div class="modal-content">
|
||||
<h2>File Required</h2>
|
||||
<p>To join this room, you need the following file:</p>
|
||||
<div id="required-file-info" class="file-info-card"></div>
|
||||
<p class="modal-instruction">Select your copy of this file:</p>
|
||||
<label class="file-select-btn" id="join-file-label">
|
||||
<input type="file" id="join-file-input" accept="video/*" hidden>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm4 18H6V4h7v5h5v11z" />
|
||||
</svg>
|
||||
<span>Choose File</span>
|
||||
</label>
|
||||
<div id="join-file-status" class="file-match-status hidden"></div>
|
||||
<div class="modal-actions">
|
||||
<button id="modal-cancel-btn" class="btn-secondary">Cancel</button>
|
||||
<button id="modal-confirm-btn" class="btn-primary" disabled>Join Room</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== ROOM VIEW ===== -->
|
||||
<div id="room" class="view">
|
||||
<div class="room-layout">
|
||||
<!-- Video Area -->
|
||||
<div class="video-area">
|
||||
<div class="video-topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="room-badge">Room: <strong id="room-code-display"></strong></span>
|
||||
<button id="copy-code-btn" class="icon-btn" title="Copy room code">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
|
||||
<path
|
||||
d="M16 1H4a2 2 0 00-2 2v14h2V3h12V1zm3 4H8a2 2 0 00-2 2v14a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h11v14z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="file-badge" id="room-file-badge"></div>
|
||||
<button id="leave-room-btn" class="btn-leave">Leave</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-wrapper" id="video-wrapper">
|
||||
<video id="video-player" preload="auto"></video>
|
||||
<div class="video-overlay" id="video-overlay">
|
||||
<div class="big-play-btn" id="big-play-btn">
|
||||
<svg viewBox="0 0 68 68" width="68" height="68" fill="none">
|
||||
<circle cx="34" cy="34" r="33" fill="rgba(0,0,0,0.6)" stroke="white" stroke-width="2" />
|
||||
<polygon points="27,20 50,34 27,48" fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls-bar" id="controls-bar">
|
||||
<div class="seek-bar-container">
|
||||
<input type="range" id="seek-bar" class="seek-bar" value="0" min="0" max="1000" step="1">
|
||||
</div>
|
||||
<div class="controls-row">
|
||||
<div class="controls-left">
|
||||
<button id="play-pause-btn" class="ctrl-btn" title="Play/Pause">
|
||||
<svg id="play-icon" viewBox="0 0 24 24" width="28" height="28" fill="white">
|
||||
<polygon points="6,4 20,12 6,20" />
|
||||
</svg>
|
||||
<svg id="pause-icon" viewBox="0 0 24 24" width="28" height="28" fill="white" class="hidden">
|
||||
<rect x="5" y="4" width="4" height="16" />
|
||||
<rect x="15" y="4" width="4" height="16" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="volume-control">
|
||||
<button id="volume-btn" class="ctrl-btn" title="Mute/Unmute">
|
||||
<svg id="vol-on-icon" viewBox="0 0 24 24" width="22" height="22" fill="white">
|
||||
<path
|
||||
d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0014 8.5v7a4.49 4.49 0 002.5-3.5zM14 3.23v2.06a6.51 6.51 0 010 13.42v2.06A8.51 8.51 0 0014 3.23z" />
|
||||
</svg>
|
||||
<svg id="vol-off-icon" viewBox="0 0 24 24" width="22" height="22" fill="white" class="hidden">
|
||||
<path
|
||||
d="M16.5 12A4.5 4.5 0 0014 8.5v2.09l2.44 2.44c.03-.17.06-.34.06-.53zm2.5 0a6.5 6.5 0 01-.55 2.63l1.52 1.52A8.46 8.46 0 0021 12a8.51 8.51 0 00-7-8.77v2.06A6.51 6.51 0 0119 12zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.51-1.42.93-2.25 1.18v2.06a8.46 8.46 0 003.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
|
||||
</svg>
|
||||
</button>
|
||||
<input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="100">
|
||||
</div>
|
||||
<span class="time-display">
|
||||
<span id="current-time">0:00</span> / <span id="duration">0:00</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="controls-right">
|
||||
<select id="speed-select" class="speed-select" title="Playback speed">
|
||||
<option value="0.25">0.25x</option>
|
||||
<option value="0.5">0.5x</option>
|
||||
<option value="0.75">0.75x</option>
|
||||
<option value="1" selected>1x</option>
|
||||
<option value="1.25">1.25x</option>
|
||||
<option value="1.5">1.5x</option>
|
||||
<option value="2">2x</option>
|
||||
</select>
|
||||
<button id="fullscreen-btn" class="ctrl-btn" title="Fullscreen">
|
||||
<svg viewBox="0 0 24 24" width="22" height="22" fill="white">
|
||||
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Sidebar -->
|
||||
<div class="chat-area">
|
||||
<div class="chat-header">
|
||||
<h3>Live Chat</h3>
|
||||
<div class="users-indicator">
|
||||
<span class="online-dot"></span>
|
||||
<span id="user-count">0</span> watching
|
||||
</div>
|
||||
</div>
|
||||
<div class="users-list" id="users-list"></div>
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="chat-welcome" id="chat-welcome">
|
||||
<p>Welcome to the room! 👋</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input-area">
|
||||
<input type="text" id="chat-input" placeholder="Send a message..." autocomplete="off" maxlength="500">
|
||||
<button id="chat-send-btn" class="chat-send-btn" title="Send">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
958
public/style.css
Normal file
958
public/style.css
Normal file
@@ -0,0 +1,958 @@
|
||||
/* ===== Reset & Base ===== */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-primary: #0f0f0f;
|
||||
--bg-secondary: #1a1a1a;
|
||||
--bg-tertiary: #272727;
|
||||
--bg-hover: #333333;
|
||||
--bg-card: #1e1e1e;
|
||||
--text-primary: #f1f1f1;
|
||||
--text-secondary: #aaaaaa;
|
||||
--text-muted: #717171;
|
||||
--accent: #3ea6ff;
|
||||
--accent-hover: #65b8ff;
|
||||
--accent-glow: rgba(62, 166, 255, 0.25);
|
||||
--danger: #ff4e45;
|
||||
--success: #2ecc71;
|
||||
--warning: #f39c12;
|
||||
--border: #333333;
|
||||
--border-light: #3a3a3a;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--shadow: 0 4px 24px rgba(0,0,0,0.4);
|
||||
--transition: 0.2s ease;
|
||||
--font: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: var(--font);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
input, button, select {
|
||||
font-family: var(--font);
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
.view {
|
||||
display: none;
|
||||
height: 100vh;
|
||||
}
|
||||
.view.active { display: flex; }
|
||||
|
||||
/* ===== LOBBY ===== */
|
||||
#lobby {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, rgba(62,166,255,0.06) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 50%, rgba(62,166,255,0.04) 0%, transparent 50%),
|
||||
var(--bg-primary);
|
||||
animation: lobbyBg 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes lobbyBg {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
.lobby-container {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lobby-brand {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
margin-bottom: 12px;
|
||||
animation: logoPulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes logoPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.lobby-brand h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
background: linear-gradient(135deg, #ffffff 30%, var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
margin-top: 4px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.lobby-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 28px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 6px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
#room-code-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.input-group input:focus,
|
||||
#room-code-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
}
|
||||
|
||||
.lobby-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 20px 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.lobby-divider::before,
|
||||
.lobby-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.lobby-actions {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.action-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-panel h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.lobby-or {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.lobby-or::before,
|
||||
.lobby-or::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: var(--border);
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
.lobby-or span {
|
||||
writing-mode: vertical-rl;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* File select button */
|
||||
.file-select-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px dashed var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.file-select-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: rgba(62, 166, 255, 0.08);
|
||||
}
|
||||
|
||||
/* File info display */
|
||||
.file-info {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: rgba(62, 166, 255, 0.08);
|
||||
border: 1px solid rgba(62, 166, 255, 0.2);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.file-info .file-name {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-info .file-meta {
|
||||
margin-top: 4px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 0 16px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-secondary:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Error toast */
|
||||
.error-toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 12px 24px;
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 20px rgba(255,78,69,0.3);
|
||||
z-index: 1000;
|
||||
animation: toastIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes toastIn {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
|
||||
/* ===== FILE CHECK MODAL ===== */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 28px;
|
||||
max-width: 480px;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow);
|
||||
animation: modalIn 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes modalIn {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.modal-content p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.modal-instruction {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
|
||||
.file-info-card {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.file-info-card .label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.file-info-card .value {
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-info-card .row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-info-card .row > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.file-match-status {
|
||||
margin-top: 12px;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-match-status.match {
|
||||
background: rgba(46,204,113,0.1);
|
||||
border: 1px solid rgba(46,204,113,0.3);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.file-match-status.mismatch {
|
||||
background: rgba(255,78,69,0.1);
|
||||
border: 1px solid rgba(255,78,69,0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal-actions .btn-secondary,
|
||||
.modal-actions .btn-primary {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ===== ROOM VIEW ===== */
|
||||
.room-layout {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Video Area */
|
||||
.video-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.video-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.topbar-left,
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.room-badge {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.room-badge strong {
|
||||
color: var(--accent);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.file-badge {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-tertiary);
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-leave {
|
||||
padding: 6px 16px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--danger);
|
||||
color: var(--danger);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.btn-leave:hover {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Video wrapper */
|
||||
.video-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity var(--transition);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.big-play-btn {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-wrapper:not(.playing) .big-play-btn,
|
||||
.video-wrapper.show-play .big-play-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.big-play-btn:hover svg circle {
|
||||
fill: rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
/* Controls bar */
|
||||
.controls-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0,0,0,0.85));
|
||||
padding: 20px 12px 10px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.video-wrapper:hover .controls-bar,
|
||||
.video-wrapper:not(.playing) .controls-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.seek-bar-container {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.seek-bar {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: height 0.15s ease;
|
||||
}
|
||||
|
||||
.seek-bar:hover {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.seek-bar::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,0.3);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.seek-bar:hover::-webkit-slider-thumb {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.seek-bar::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.controls-left,
|
||||
.controls-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ctrl-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.ctrl-btn:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 70px;
|
||||
height: 3px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transition: opacity 0.2s, width 0.2s;
|
||||
}
|
||||
|
||||
.volume-control:hover .volume-slider {
|
||||
opacity: 1;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-slider::-moz-range-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255,255,255,0.8);
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.speed-select {
|
||||
background: none;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.speed-select option {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== CHAT SIDEBAR ===== */
|
||||
.chat-area {
|
||||
width: 340px;
|
||||
min-width: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary);
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.chat-header h3 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.users-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--success);
|
||||
border-radius: 50%;
|
||||
animation: dotPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes dotPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.users-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.user-chip .user-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Chat Messages */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
.chat-welcome {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.chat-msg {
|
||||
padding: 6px 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
animation: msgIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes msgIn {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.chat-msg .msg-author {
|
||||
font-weight: 600;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.chat-msg .msg-text {
|
||||
color: var(--text-secondary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.chat-msg.system-msg {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.chat-msg .msg-time {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
/* Chat Input */
|
||||
.chat-input-area {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
#chat-input {
|
||||
flex: 1;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
|
||||
#chat-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.chat-send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-send-btn:hover {
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 0 12px var(--accent-glow);
|
||||
}
|
||||
|
||||
/* ===== Responsive ===== */
|
||||
@media (max-width: 800px) {
|
||||
.lobby-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lobby-or {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.lobby-or::before,
|
||||
.lobby-or::after {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.lobby-or span {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.room-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-area {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.video-area {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.file-badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user