>,
+ source_user_id: Uuid,
+ event: ServerEvent,
+) {
+ for (peer_id, connections) in room {
+ if *peer_id == source_user_id {
+ continue;
+ }
+ for peer in connections.values() {
+ let _ = peer.tx.send(event.clone());
+ }
+ }
+}
+
+fn is_voice_state_change_empty(change: &VoiceStateChange) -> bool {
+ change.joined.is_none()
+ && change.left_user_id.is_none()
+ && change.video_changed.is_none()
+ && change.screen_changed.is_none()
+ && change.speaking_changed.is_none()
+ && change.mute_changed.is_none()
+}
+
+#[cfg(test)]
+mod tests {
+ use super::{VoiceHub, aggregate_participant};
+ use std::collections::HashMap;
+ use tokio::sync::mpsc;
+ use uuid::Uuid;
+
+ #[tokio::test]
+ async fn multiple_connections_keep_voice_participant_until_last_leave() {
+ let hub = VoiceHub::default();
+ let room_id = Uuid::new_v4();
+ let user_id = Uuid::new_v4();
+ let first_connection = Uuid::new_v4();
+ let second_connection = Uuid::new_v4();
+ let (tx1, _rx1) = mpsc::unbounded_channel();
+ let (tx2, _rx2) = mpsc::unbounded_channel();
+
+ let (_peers, first_join) = hub
+ .join(room_id, user_id, first_connection, "User".to_string(), tx1)
+ .await;
+ let (_peers, second_join) = hub
+ .join(room_id, user_id, second_connection, "User".to_string(), tx2)
+ .await;
+ let first_leave = hub.leave(room_id, user_id, first_connection).await;
+ let second_leave = hub.leave(room_id, user_id, second_connection).await;
+
+ assert!(first_join.joined.is_some());
+ assert!(second_join.joined.is_none());
+ assert!(first_leave.left_user_id.is_none());
+ assert_eq!(second_leave.left_user_id, Some(user_id));
+ }
+
+ #[tokio::test]
+ async fn voice_mute_state_only_flips_when_all_connections_are_muted() {
+ let hub = VoiceHub::default();
+ let room_id = Uuid::new_v4();
+ let user_id = Uuid::new_v4();
+ let first_connection = Uuid::new_v4();
+ let second_connection = Uuid::new_v4();
+ let (tx1, _rx1) = mpsc::unbounded_channel();
+ let (tx2, _rx2) = mpsc::unbounded_channel();
+
+ let _ = hub
+ .join(room_id, user_id, first_connection, "User".to_string(), tx1)
+ .await;
+ let _ = hub
+ .join(room_id, user_id, second_connection, "User".to_string(), tx2)
+ .await;
+
+ let first_mute = hub
+ .set_mute_status(room_id, user_id, first_connection, true)
+ .await;
+ let second_mute = hub
+ .set_mute_status(room_id, user_id, second_connection, true)
+ .await;
+ let unmute = hub
+ .set_mute_status(room_id, user_id, first_connection, false)
+ .await;
+
+ assert!(first_mute.mute_changed.is_none());
+ assert_eq!(second_mute.mute_changed, Some((user_id, true)));
+ assert_eq!(unmute.mute_changed, Some((user_id, false)));
+ }
+
+ #[test]
+ fn aggregate_participant_combines_connection_state() {
+ let user_id = Uuid::new_v4();
+ let first_connection = Uuid::new_v4();
+ let second_connection = Uuid::new_v4();
+ let mut connections = HashMap::new();
+ let (tx1, _rx1) = mpsc::unbounded_channel();
+ let (tx2, _rx2) = mpsc::unbounded_channel();
+
+ connections.insert(
+ first_connection,
+ super::ClientHandle {
+ display_name: "User".to_string(),
+ is_sharing_video: true,
+ is_sharing_screen: false,
+ is_speaking: false,
+ is_muted: true,
+ tx: tx1,
+ },
+ );
+ connections.insert(
+ second_connection,
+ super::ClientHandle {
+ display_name: "User".to_string(),
+ is_sharing_video: false,
+ is_sharing_screen: true,
+ is_speaking: true,
+ is_muted: false,
+ tx: tx2,
+ },
+ );
+
+ let participant = aggregate_participant(Some(&connections), user_id).unwrap();
+ assert!(participant.is_sharing_video);
+ assert!(participant.is_sharing_screen);
+ assert!(participant.is_speaking);
+ assert!(!participant.is_muted);
+ }
}
diff --git a/static/app.js b/static/app.js
index fca5265..2794dc8 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,1083 +1 @@
-const state = {
- me: null,
- guilds: [],
- channels: [],
- dmConversations: [],
- members: [],
- voicePresence: new Map(),
- selectedGuildId: null,
- selectedTextChannelId: null,
- selectedDmUserId: null,
- selectedDmDisplayName: null,
- selectedVoiceChannelId: null,
- voice: {
- ws: null,
- joinedChannelId: null,
- localStream: null,
- rawStream: null,
- videoStream: null,
- audioContext: null,
- peerConnections: new Map(),
- muted: false,
- sharingVideo: false,
- iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
- },
- voicePresencePollId: null,
- chatWs: null,
- lastMessageId: null,
- onlineUsers: new Set(),
-};
-
-const el = {
- authScreen: document.getElementById("auth-screen"),
- loginBtn: document.getElementById("login-btn"),
- main: document.getElementById("main"),
- status: document.getElementById("status"),
-
- // Guilds
- guildList: document.getElementById("guild-list"),
- addGuildBtn: document.getElementById("add-guild-btn"),
- guildTitle: document.getElementById("guild-title"),
- createInviteBtn: document.getElementById("create-invite-btn"),
-
- // Channels
- channelList: document.getElementById("channel-list"),
- voiceChannelList: document.getElementById("voice-channel-list"),
- addTextBtn: document.getElementById("add-text-btn"),
- addVoiceBtn: document.getElementById("add-voice-btn"),
- dmList: document.getElementById("dm-list"),
- channelTitle: document.getElementById("channel-title"),
-
- // Messages
- messageList: document.getElementById("message-list"),
- messageForm: document.getElementById("message-form"),
- messageBody: document.getElementById("message-body"),
-
- // User Panel
- userName: document.getElementById("user-name"),
- userAvatar: document.getElementById("user-avatar"),
- logoutBtn: document.getElementById("logout-btn"),
-
- // Voice Connection
- voiceConnection: document.getElementById("voice-connection"),
- vcChannelName: document.getElementById("vc-channel-name"),
- voiceVideoBtn: document.getElementById("voice-video-btn"),
- voiceMuteBtn: document.getElementById("voice-mute-btn"),
- voiceLeaveBtn: document.getElementById("voice-leave-btn"),
- videoGrid: document.getElementById("video-grid"),
-
- // Members
- memberList: document.getElementById("member-list"),
-
- // Modals
- modalContainer: document.getElementById("modal-container"),
- guildForm: document.getElementById("guild-form"),
- guildName: document.getElementById("guild-name"),
- modalCancel: document.getElementById("modal-cancel"),
-
- channelModal: document.getElementById("channel-modal"),
- channelForm: document.getElementById("channel-form"),
- channelName: document.getElementById("channel-name"),
- channelModalCancel: document.getElementById("channel-modal-cancel"),
-
- // Mobile
- mobileMenuBtn: document.getElementById("mobile-menu-btn"),
- mobileMembersBtn: document.getElementById("mobile-members-btn"),
- overlay: document.getElementById("overlay"),
- utilitySidebar: document.getElementById("utility-sidebar"),
-};
-
-// --- API Helpers ---
-
-async function api(path, options = {}) {
- const res = await fetch(path, {
- ...options,
- headers: {
- "content-type": "application/json",
- ...(options.headers || {}),
- },
- credentials: "same-origin",
- });
-
- if (!res.ok) {
- let detail = "request failed";
- try {
- const body = await res.json();
- detail = body.error || detail;
- } catch { }
- throw new Error(`${res.status}: ${detail}`);
- }
-
- if (res.status === 204) return null;
- return res.json();
-}
-
-// --- Utils ---
-
-function shortName(name) {
- if (!name || typeof name !== 'string') return "?";
- const trimmed = name.trim();
- if (!trimmed) return "?";
- const words = trimmed.split(/\s+/).filter(w => w.length > 0).slice(0, 2);
- if (words.length === 0) return "?";
- if (words.length === 1) return words[0].substring(0, 2).toUpperCase();
- return words.map((w) => w[0]?.toUpperCase() || "").join("");
-}
-
-function escapeHtml(s) {
- if (s === null || s === undefined) return "";
- return String(s)
- .replaceAll("&", "&")
- .replaceAll("<", "<")
- .replaceAll(">", ">")
- .replaceAll('"', """)
- .replaceAll("'", "'");
-}
-
-function formatDate(isoString) {
- const d = new Date(isoString);
- const now = new Date();
- const isToday = d.toDateString() === now.toDateString();
-
- if (isToday) {
- return `Today at ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
- }
- return d.toLocaleDateString();
-}
-
-let audioCtx = null;
-
-// Global interaction listener to unlock AudioContext (autoplay policy)
-window.addEventListener('click', () => {
- if (audioCtx && audioCtx.state === 'suspended') {
- audioCtx.resume();
- }
-}, { once: true });
-
-function playSound(type) {
- try {
- if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
- if (audioCtx.state === 'suspended') audioCtx.resume();
-
- const sounds = {
- message: { freq: 880, type: 'sine', duration: 0.1, volume: 0.1 },
- dm: { freq: [660, 880], type: 'sine', duration: 0.15, volume: 0.1 },
- join: { freq: [440, 880], type: 'sine', duration: 0.2, volume: 0.1 },
- leave: { freq: [880, 440], type: 'sine', duration: 0.2, volume: 0.1 },
- 'peer-join': { freq: [660, 990], type: 'sine', duration: 0.15, volume: 0.05 },
- 'peer-leave': { freq: [990, 660], type: 'sine', duration: 0.15, volume: 0.05 },
- };
-
- const s = sounds[type];
- if (!s) return;
-
- const osc = audioCtx.createOscillator();
- const gain = audioCtx.createGain();
-
- osc.type = s.type;
- if (Array.isArray(s.freq)) {
- osc.frequency.setValueAtTime(s.freq[0], audioCtx.currentTime);
- osc.frequency.exponentialRampToValueAtTime(s.freq[1], audioCtx.currentTime + s.duration);
- } else {
- osc.frequency.setValueAtTime(s.freq, audioCtx.currentTime);
- }
-
- gain.gain.setValueAtTime(s.volume, audioCtx.currentTime);
- gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + s.duration);
-
- osc.connect(gain);
- gain.connect(audioCtx.destination);
-
- osc.start();
- osc.stop(audioCtx.currentTime + s.duration);
- } catch (err) {
- console.warn("playSound failed", err);
- }
-}
-const LAST_GUILD_STORAGE_KEY = "chattz:lastGuildId";
-
-// --- Renderers ---
-
-function renderGuilds() {
- el.guildList.innerHTML = "";
-
- for (const guild of state.guilds) {
- const btn = document.createElement("button");
- btn.className = `guild-pill ${state.selectedGuildId === guild.id ? "active" : ""}`;
- btn.title = guild.name;
- btn.textContent = shortName(guild.name);
- btn.onclick = async () => {
- state.selectedGuildId = guild.id;
- state.selectedTextChannelId = null;
- state.selectedVoiceChannelId = null;
- state.selectedDmUserId = null;
- state.selectedDmDisplayName = null;
- localStorage.setItem(LAST_GUILD_STORAGE_KEY, guild.id);
- renderGuilds();
- renderDMs();
- await loadChannels();
- await loadGuildMembers();
- await refreshVoicePresence();
- startVoicePresencePolling();
- renderMessages([]);
- updateHeaderLabels();
- };
- el.guildList.appendChild(btn);
- }
-}
-
-function renderChannels() {
- el.channelList.innerHTML = "";
- el.voiceChannelList.innerHTML = "";
-
- for (const channel of state.channels) {
- const row = document.createElement("button");
- row.className = `channel-row ${(channel.kind === 'text' && state.selectedTextChannelId === channel.id) ||
- (channel.kind === 'voice' && state.selectedVoiceChannelId === channel.id) ? "active" : ""
- }`;
-
- const iconName = channel.kind === 'text' ? 'hash' : 'volume-2';
- row.innerHTML = ` ${escapeHtml(channel.name)}`;
-
- row.onclick = async () => {
- if (channel.kind === 'text') {
- state.selectedDmUserId = null;
- state.selectedDmDisplayName = null;
- state.selectedTextChannelId = channel.id;
- renderChannels();
- renderDMs();
- updateHeaderLabels();
- const messages = await api(`/channels/${channel.id}/messages?limit=100`);
- renderMessages(messages);
- } else {
- state.selectedDmUserId = null;
- state.selectedDmDisplayName = null;
- state.selectedVoiceChannelId = channel.id;
- renderChannels();
- renderDMs();
- joinVoice();
- }
- if (window.innerWidth <= 768) closeMobileMenus();
- };
-
- if (channel.kind === 'text') {
- el.channelList.appendChild(row);
- } else {
- el.voiceChannelList.appendChild(row);
-
- const participants = state.voicePresence.get(channel.id) || [];
- if (participants.length > 0) {
- const pList = document.createElement("div");
- pList.className = "voice-row-members channel-list";
- pList.style.paddingLeft = "24px";
- for (const p of participants) {
- const pRow = document.createElement("div");
- pRow.className = "channel-row";
- pRow.style.padding = "2px 8px";
- pRow.innerHTML = `${shortName(p.display_name)}
${escapeHtml(p.display_name)}`;
- pList.appendChild(pRow);
- }
- el.voiceChannelList.appendChild(pList);
- }
- }
- }
- lucide.createIcons();
-}
-
-function renderDMs() {
- el.dmList.innerHTML = "";
- for (const dm of state.dmConversations) {
- const isOnline = state.onlineUsers.has(dm.user_id);
- const row = document.createElement("button");
- row.className = `channel-row ${state.selectedDmUserId === dm.user_id ? "active" : ""}`;
- row.innerHTML = `
-
- ${escapeHtml(dm.display_name)}
- `;
- row.onclick = async () => {
- state.selectedDmUserId = dm.user_id;
- state.selectedDmDisplayName = dm.display_name;
- state.selectedTextChannelId = null;
- state.selectedVoiceChannelId = null;
- renderChannels();
- renderDMs();
- updateHeaderLabels();
- const messages = await api(`/dms/${dm.user_id}/messages?limit=100`);
- renderMessages(messages);
- };
- el.dmList.appendChild(row);
- }
-
- lucide.createIcons();
-}
-
-function renderMessages(messages) {
- el.messageList.innerHTML = "";
- let lastAuthorId = null;
- let lastTime = null;
-
- for (const m of messages.slice().reverse()) {
- const row = document.createElement("div");
- const mDate = new Date(m.created_at);
- const isGrouped = lastAuthorId === m.author_user_id &&
- lastTime && (mDate - lastTime < 300000); // 5 minutes
-
- row.className = `msg ${isGrouped ? "msg-grouped" : ""}`;
-
- const displayName = m.author_display_name || "Unknown User";
-
- if (isGrouped) {
- row.innerHTML = ``;
- } else {
- row.innerHTML = `
- ${shortName(displayName)}
-
-
-
${escapeHtml(m.body)}
-
- ${shortName(m.display_name)}
-
-
${escapeHtml(m.display_name)}
- `;
- row.style.cursor = "pointer";
- row.onclick = async () => {
- if (state.me && m.id === state.me.id) return;
- state.selectedDmUserId = m.id;
- state.selectedDmDisplayName = m.display_name;
- state.selectedTextChannelId = null;
- state.selectedVoiceChannelId = null;
- renderChannels();
- renderDMs();
- updateHeaderLabels();
- const messages = await api(`/dms/${m.id}/messages?limit=100`);
- renderMessages(messages);
- };
- el.memberList.appendChild(row);
- }
-}
-
-function updateHeaderLabels() {
- const guild = state.guilds.find((g) => g.id === state.selectedGuildId);
- el.guildTitle.textContent = guild ? guild.name : "No server selected";
-
- if (state.selectedDmUserId) {
- const dmFromConversations = state.dmConversations.find((u) => u.user_id === state.selectedDmUserId);
- const dmFromMembers = state.members.find((m) => m.id === state.selectedDmUserId);
- const displayName = dmFromConversations?.display_name || dmFromMembers?.display_name || state.selectedDmDisplayName;
- const dmName = displayName ? `@${displayName}` : "Direct Message";
- el.channelTitle.textContent = dmName;
- el.messageBody.placeholder = displayName
- ? `Message @${displayName}`
- : "Message";
- return;
- }
-
- const channel = state.channels.find((c) => c.id === state.selectedTextChannelId);
- el.channelTitle.textContent = channel ? channel.name : "Select a channel";
- el.messageBody.placeholder = channel ? `Message #${channel.name}` : "Select a channel";
-}
-
-async function createInviteLink() {
- if (!state.selectedGuildId) {
- alert("Select a server first.");
- return;
- }
- try {
- const invite = await api(`/guilds/${state.selectedGuildId}/invites`, {
- method: "POST",
- body: JSON.stringify({ max_uses: 50, expires_in_hours: 24 }),
- });
- const link = `${location.origin}/?invite=${encodeURIComponent(invite.code)}`;
- try {
- await navigator.clipboard.writeText(link);
- alert(`Invite link copied:\n${link}`);
- } catch {
- prompt("Copy invite link:", link);
- }
- } catch (err) {
- alert(err.message);
- }
-}
-
-// --- Logic ---
-
-async function loadGuilds() {
- state.guilds = await api("/guilds");
- renderGuilds();
-}
-
-async function loadDMConversations() {
- state.dmConversations = await api("/dms");
- renderDMs();
-}
-
-async function loadGuildMembers() {
- if (!state.selectedGuildId) {
- state.members = [];
- renderMembers();
- return;
- }
- state.members = await api(`/guilds/${state.selectedGuildId}/members`);
- renderMembers();
-}
-
-async function loadChannels() {
- if (!state.selectedGuildId) {
- state.channels = [];
- renderChannels();
- return;
- }
-
- state.channels = await api(`/guilds/${state.selectedGuildId}/channels`);
- renderChannels();
-}
-
-async function refreshVoicePresence() {
- if (!state.selectedGuildId) {
- state.voicePresence.clear();
- renderChannels();
- return;
- }
-
- try {
- const res = await api(`/guilds/${state.selectedGuildId}/voice-presence`);
- state.voicePresence.clear();
- for (const entry of res.channels || []) {
- state.voicePresence.set(entry.channel_id, entry.participants || []);
- }
- renderChannels();
- } catch (err) {
- console.warn("voice presence failed", err);
- }
-}
-
-function startVoicePresencePolling() {
- if (state.voicePresencePollId) clearInterval(state.voicePresencePollId);
- state.voicePresencePollId = setInterval(() => {
- refreshVoicePresence().catch(() => { });
- }, 3000);
-}
-
-function initChatWs() {
- if (state.chatWs) state.chatWs.close();
- const protocol = location.protocol === "https:" ? "wss:" : "ws:";
- const wsUrl = `${protocol}//${location.host}/ws`;
- const ws = new WebSocket(wsUrl);
- state.chatWs = ws;
-
- ws.onmessage = (event) => {
- const msg = JSON.parse(event.data);
- const authorId = msg.message?.author_user_id;
- const isFromMe = authorId && state.me && authorId === state.me.id;
-
- if (msg.type === "message_created") {
- if (!isFromMe) playSound('message');
- if (state.selectedTextChannelId === msg.channel_id) {
- api(`/channels/${state.selectedTextChannelId}/messages?limit=100`).then(renderMessages);
- }
- } else if (msg.type === "dm_created") {
- if (!isFromMe) playSound('dm');
- if (state.selectedDmUserId === msg.other_user_id) {
- api(`/dms/${state.selectedDmUserId}/messages?limit=100`).then(renderMessages);
- playSound('dm');
- loadDMConversations().then(renderDMs);
- } else {
- loadDMConversations().then(renderDMs);
- }
- } else if (msg.type === "user_presence") {
- if (msg.online) {
- state.onlineUsers.add(msg.user_id);
- } else {
- state.onlineUsers.delete(msg.user_id);
- }
- renderMembers();
- renderDMs();
- }
- };
-
- ws.onclose = () => {
- console.log("Chat WS closed, reconnecting...");
- setTimeout(initChatWs, 3000);
- };
-}
-
-// --- Voice ---
-
-function getVoiceWsUrl(channelId) {
- const proto = location.protocol === "https:" ? "wss" : "ws";
- return `${proto}://${location.host}/channels/${channelId}/voice/ws`;
-}
-
-function shouldInitiateOffer(peerId) {
- if (!state.me || !state.me.id) return false;
- return state.me.id > peerId;
-}
-
-function stopAndClearAudioPipeline() {
- if (state.voice.localStream) {
- for (const track of state.voice.localStream.getTracks()) track.stop();
- }
- if (state.voice.rawStream && state.voice.rawStream !== state.voice.localStream) {
- for (const track of state.voice.rawStream.getTracks()) track.stop();
- }
- if (state.voice.audioContext) {
- state.voice.audioContext.close().catch(() => { });
- }
- state.voice.localStream = null;
- state.voice.rawStream = null;
- state.voice.audioContext = null;
-}
-
-function stopAndClearVideoPipeline() {
- if (state.voice.videoStream) {
- for (const track of state.voice.videoStream.getTracks()) track.stop();
- }
- state.voice.videoStream = null;
- state.voice.sharingVideo = false;
- document.getElementById(`video-${state.me.id}`)?.parentElement?.remove();
- updateVideoGridVisibility();
-}
-
-function updateVideoGridVisibility() {
- const hasVideos = el.videoGrid.children.length > 0;
- if (hasVideos) {
- el.videoGrid.classList.remove("hidden");
- } else {
- el.videoGrid.classList.add("hidden");
- }
-}
-
-function renderVideo(peerId, displayName, stream) {
- let videoEl = document.getElementById(`video-${peerId}`);
- if (!videoEl) {
- const container = document.createElement("div");
- container.className = "video-item";
- container.innerHTML = `
-
- ${escapeHtml(displayName)}
- `;
- el.videoGrid.appendChild(container);
- videoEl = container.querySelector("video");
- }
- videoEl.srcObject = stream;
- updateVideoGridVisibility();
-}
-
-async function buildAudioPipeline(rawStream) {
- const audioContext = new AudioContext();
- const source = audioContext.createMediaStreamSource(rawStream);
- const destination = audioContext.createMediaStreamDestination();
- state.voice.audioContext = audioContext;
-
- let head = source;
-
- head.connect(destination);
-
- return destination.stream;
-}
-
-async function createLocalVoiceStream() {
- const constraints = {
- audio: {
- channelCount: 1,
- sampleRate: 48000,
- echoCancellation: true,
- noiseSuppression: true,
- autoGainControl: false,
- },
- video: false,
- };
- const rawStream = await navigator.mediaDevices.getUserMedia(constraints);
- const localStream = await buildAudioPipeline(rawStream);
- state.voice.rawStream = rawStream;
- state.voice.localStream = localStream;
- if (state.voice.muted) {
- state.voice.localStream.getAudioTracks().forEach((t) => {
- t.enabled = false;
- });
- }
-}
-
-function ensurePeerConnection(peerId) {
- if (state.voice.peerConnections.has(peerId)) {
- return state.voice.peerConnections.get(peerId);
- }
-
- const pc = new RTCPeerConnection({ iceServers: state.voice.iceServers });
-
- if (state.voice.localStream) {
- for (const track of state.voice.localStream.getTracks()) {
- pc.addTrack(track, state.voice.localStream);
- }
- }
-
- if (state.voice.videoStream) {
- for (const track of state.voice.videoStream.getTracks()) {
- pc.addTrack(track, state.voice.videoStream);
- }
- }
-
- pc.onicecandidate = (event) => {
- if (!event.candidate || !state.voice.ws) return;
- state.voice.ws.send(JSON.stringify({
- type: "signal",
- to_user_id: peerId,
- kind: "ice",
- data: event.candidate,
- }));
- };
-
- pc.ontrack = (event) => {
- if (event.track.kind === "audio") {
- let audio = document.getElementById(`audio-${peerId}`);
- if (!audio) {
- audio = document.createElement("audio");
- audio.id = `audio-${peerId}`;
- audio.autoplay = true;
- audio.playsInline = true;
- document.body.appendChild(audio);
- }
- audio.srcObject = event.streams[0];
- } else if (event.track.kind === "video") {
- const peer = state.members.find(m => m.id === peerId) || { display_name: "Unknown" };
- renderVideo(peerId, peer.display_name, event.streams[0]);
- }
- };
-
- pc.onnegotiationneeded = async () => {
- try {
- if (shouldInitiateOffer(peerId)) {
- await sendOffer(peerId);
- }
- } catch (err) {
- console.error("negotiation failed", err);
- }
- };
-
- state.voice.peerConnections.set(peerId, pc);
- return pc;
-}
-
-async function sendOffer(peerId) {
- const pc = ensurePeerConnection(peerId);
- const offer = await pc.createOffer();
- await pc.setLocalDescription(offer);
- state.voice.ws.send(JSON.stringify({
- type: "signal",
- to_user_id: peerId,
- kind: "offer",
- data: offer,
- }));
-}
-
-async function handleSignal(fromPeerId, kind, data) {
- const pc = ensurePeerConnection(fromPeerId);
-
- if (kind === "offer") {
- await pc.setRemoteDescription(new RTCSessionDescription(data));
- const answer = await pc.createAnswer();
- await pc.setLocalDescription(answer);
- state.voice.ws.send(JSON.stringify({
- type: "signal",
- to_user_id: fromPeerId,
- kind: "answer",
- data: answer,
- }));
- } else if (kind === "answer") {
- await pc.setRemoteDescription(new RTCSessionDescription(data));
- } else if (kind === "ice") {
- try {
- await pc.addIceCandidate(data ? new RTCIceCandidate(data) : null);
- } catch (err) {
- console.warn("failed to add ice candidate", err);
- }
- }
-}
-
-async function joinVoice() {
- if (!state.selectedVoiceChannelId) return;
- if (state.voice.joinedChannelId === state.selectedVoiceChannelId) return;
-
- await leaveVoice();
-
- try {
- await createLocalVoiceStream();
- } catch (err) {
- console.error("microphone denied", err);
- return;
- }
-
- const ws = new WebSocket(getVoiceWsUrl(state.selectedVoiceChannelId));
- state.voice.ws = ws;
- state.voice.joinedChannelId = state.selectedVoiceChannelId;
-
- ws.onopen = () => {
- const channel = state.channels.find(c => c.id === state.selectedVoiceChannelId);
- el.vcChannelName.textContent = channel ? channel.name : "Voice";
- el.voiceConnection.classList.remove("hidden");
- playSound('join');
- refreshVoicePresence().catch(() => { });
- };
-
- ws.onmessage = async (event) => {
- const msg = JSON.parse(event.data);
- if (msg.type === "peers") {
- for (const peer of msg.peers) {
- if (shouldInitiateOffer(peer.user_id)) await sendOffer(peer.user_id);
- }
- } else if (msg.type === "peer_joined") {
- playSound('peer-join');
- if (shouldInitiateOffer(msg.user_id)) await sendOffer(msg.user_id);
- } else if (msg.type === "peer_left") {
- playSound('peer-leave');
- const pc = state.voice.peerConnections.get(msg.user_id);
- if (pc) {
- pc.close();
- state.voice.peerConnections.delete(msg.user_id);
- }
- document.getElementById(`audio-${msg.user_id}`)?.remove();
- } else if (msg.type === "signal") {
- await handleSignal(msg.from_user_id, msg.kind, msg.data);
- } else if (msg.type === "video_status_changed") {
- if (!msg.is_sharing_video) {
- document.getElementById(`video-${msg.user_id}`)?.parentElement?.remove();
- updateVideoGridVisibility();
- }
- }
- refreshVoicePresence().catch(() => { });
- };
-
- ws.onclose = () => {
- el.voiceConnection.classList.add("hidden");
- for (const pc of state.voice.peerConnections.values()) pc.close();
- state.voice.peerConnections.clear();
- stopAndClearAudioPipeline();
- state.voice.joinedChannelId = null;
- state.voice.ws = null;
- playSound('leave');
- refreshVoicePresence().catch(() => { });
- };
-}
-
-async function leaveVoice() {
- if (state.voice.ws) state.voice.ws.close();
-}
-
-function toggleMute() {
- if (!state.voice.localStream) return;
- state.voice.muted = !state.voice.muted;
- state.voice.localStream.getAudioTracks().forEach((t) => {
- t.enabled = !state.voice.muted;
- });
- el.voiceMuteBtn.innerHTML = state.voice.muted ? '' : '';
- el.voiceMuteBtn.style.color = state.voice.muted ? 'var(--danger)' : 'var(--text-muted)';
- lucide.createIcons();
-}
-
-async function toggleVideo() {
- if (state.voice.sharingVideo) {
- stopAndClearVideoPipeline();
- if (state.voice.ws) {
- state.voice.ws.send(JSON.stringify({ type: "set_video_status", is_sharing_video: false }));
- }
- for (const pc of state.voice.peerConnections.values()) {
- const senders = pc.getSenders();
- const videoSender = senders.find(s => s.track && s.track.kind === "video");
- if (videoSender) pc.removeTrack(videoSender);
- }
- } else {
- try {
- const stream = await navigator.mediaDevices.getUserMedia({ video: true });
- state.voice.videoStream = stream;
- state.voice.sharingVideo = true;
- renderVideo(state.me.id, state.me.display_name, stream);
-
- if (state.voice.ws) {
- state.voice.ws.send(JSON.stringify({ type: "set_video_status", is_sharing_video: true }));
- }
-
- for (const pc of state.voice.peerConnections.values()) {
- for (const track of stream.getTracks()) {
- pc.addTrack(track, stream);
- }
- }
- } catch (err) {
- console.error("camera denied", err);
- alert("Could not access camera.");
- return;
- }
- }
-
- el.voiceVideoBtn.innerHTML = state.voice.sharingVideo ? '' : '';
- el.voiceVideoBtn.style.color = state.voice.sharingVideo ? 'var(--green)' : 'var(--text-muted)';
- lucide.createIcons();
-}
-
-// --- Mobile Logic ---
-
-function toggleMobileMenu() {
- const isOpen = el.main.classList.contains("menu-open");
- if (isOpen) {
- el.main.classList.remove("menu-open");
- el.overlay.classList.add("hidden");
- } else {
- el.main.classList.add("menu-open");
- el.utilitySidebar.classList.remove("active"); // close members if open
- el.overlay.classList.remove("hidden");
- }
-}
-
-function toggleMobileMembers() {
- const isOpen = el.utilitySidebar.classList.contains("active");
- if (isOpen) {
- el.utilitySidebar.classList.remove("active");
- el.overlay.classList.add("hidden");
- } else {
- el.utilitySidebar.classList.add("active");
- el.main.classList.remove("menu-open"); // close menu if open
- el.overlay.classList.remove("hidden");
- }
-}
-
-function closeMobileMenus() {
- el.main.classList.remove("menu-open");
- el.utilitySidebar.classList.remove("active");
- el.overlay.classList.add("hidden");
-}
-
-// --- Initialization ---
-
-async function init() {
- lucide.createIcons();
-
- el.loginBtn.onclick = () => { location.href = "/auth/login"; };
-
- el.logoutBtn.onclick = async () => {
- await leaveVoice();
- await api("/auth/logout", { method: "POST" });
- location.reload();
- };
-
- el.addGuildBtn.onclick = () => { el.modalContainer.classList.remove("hidden"); };
- el.createInviteBtn.onclick = createInviteLink;
- el.modalCancel.onclick = () => { el.modalContainer.classList.add("hidden"); };
-
- el.addTextBtn.onclick = () => {
- if (!state.selectedGuildId) {
- alert("Create or select a server first.");
- return;
- }
- document.querySelector('input[name="channel-kind"][value="text"]').checked = true;
- el.channelModal.classList.remove("hidden");
- };
- el.addVoiceBtn.onclick = () => {
- if (!state.selectedGuildId) {
- alert("Create or select a server first.");
- return;
- }
- document.querySelector('input[name="channel-kind"][value="voice"]').checked = true;
- el.channelModal.classList.remove("hidden");
- };
- el.channelModalCancel.onclick = () => { el.channelModal.classList.add("hidden"); };
-
- // Mobile Listeners
- if (el.mobileMenuBtn) el.mobileMenuBtn.onclick = toggleMobileMenu;
- if (el.mobileMembersBtn) el.mobileMembersBtn.onclick = toggleMobileMembers;
- if (el.overlay) el.overlay.onclick = closeMobileMenus;
-
- el.guildForm.onsubmit = async (e) => {
- e.preventDefault();
- try {
- const guild = await api("/guilds", {
- method: "POST",
- body: JSON.stringify({ name: el.guildName.value }),
- });
- el.guildName.value = "";
- el.modalContainer.classList.add("hidden");
- state.guilds.push(guild);
- state.selectedGuildId = guild.id;
- state.selectedTextChannelId = null;
- state.selectedVoiceChannelId = null;
- state.selectedDmUserId = null;
- state.selectedDmDisplayName = null;
- localStorage.setItem(LAST_GUILD_STORAGE_KEY, guild.id);
- renderGuilds();
- await loadChannels();
- await loadGuildMembers();
- await refreshVoicePresence();
- renderMessages([]);
- updateHeaderLabels();
- } catch (err) { alert(err.message); }
- };
-
- el.channelForm.onsubmit = async (e) => {
- e.preventDefault();
- if (!state.selectedGuildId) {
- alert("Select a server first.");
- return;
- }
- const kindInput = document.querySelector('input[name="channel-kind"]:checked');
- const kind = kindInput ? kindInput.value : "text";
- const channelName = el.channelName.value.trim();
- if (!channelName) {
- alert("Channel name is required.");
- return;
- }
- try {
- const created = await api("/channels", {
- method: "POST",
- body: JSON.stringify({
- guild_id: state.selectedGuildId,
- name: channelName,
- kind: kind,
- }),
- });
- el.channelName.value = "";
- el.channelModal.classList.add("hidden");
- await loadChannels();
- if (created.kind === "text") {
- state.selectedTextChannelId = created.id;
- state.selectedVoiceChannelId = null;
- state.selectedDmUserId = null;
- state.selectedDmDisplayName = null;
- renderChannels();
- renderDMs();
- updateHeaderLabels();
- const messages = await api(`/channels/${created.id}/messages?limit=100`);
- renderMessages(messages);
- } else {
- state.selectedVoiceChannelId = created.id;
- state.selectedTextChannelId = null;
- state.selectedDmUserId = null;
- state.selectedDmDisplayName = null;
- renderChannels();
- renderDMs();
- updateHeaderLabels();
- }
- } catch (err) { alert(err.message); }
- };
-
- el.messageForm.onsubmit = async (e) => {
- e.preventDefault();
- const body = el.messageBody.value.trim();
- if (!body) return;
-
- try {
- if (state.selectedTextChannelId) {
- await api(`/channels/${state.selectedTextChannelId}/messages`, {
- method: "POST",
- body: JSON.stringify({ body }),
- });
- } else if (state.selectedDmUserId) {
- await api(`/dms/${state.selectedDmUserId}/messages`, {
- method: "POST",
- body: JSON.stringify({ body }),
- });
- } else {
- return;
- }
- el.messageBody.value = "";
- const messages = state.selectedTextChannelId
- ? await api(`/channels/${state.selectedTextChannelId}/messages?limit=100`)
- : await api(`/dms/${state.selectedDmUserId}/messages?limit=100`);
- renderMessages(messages);
- await loadDMConversations();
- renderDMs();
- } catch (err) { alert(err.message); }
- };
-
- el.voiceVideoBtn.onclick = toggleVideo;
- el.voiceMuteBtn.onclick = toggleMute;
- el.voiceLeaveBtn.onclick = leaveVoice;
-
- try {
- state.me = await api("/me");
- if (state.me && state.me.display_name) {
- el.userName.textContent = state.me.display_name;
- el.userAvatar.textContent = shortName(state.me.display_name);
- }
- el.authScreen.classList.add("hidden");
- el.main.classList.remove("hidden");
-
- const params = new URLSearchParams(location.search);
- const inviteCode = params.get("invite");
- if (inviteCode) {
- try {
- const joinedGuild = await api(`/invites/${encodeURIComponent(inviteCode)}/join`, {
- method: "POST",
- });
- localStorage.setItem(LAST_GUILD_STORAGE_KEY, joinedGuild.id);
- } catch (err) {
- alert(`Failed to join invite: ${err.message}`);
- } finally {
- params.delete("invite");
- const nextQuery = params.toString();
- const nextUrl = `${location.pathname}${nextQuery ? `?${nextQuery}` : ""}`;
- history.replaceState(null, "", nextUrl);
- }
- }
-
- await loadGuilds();
- await loadDMConversations();
-
- try {
- const online = await api("/presence");
- state.onlineUsers = new Set(online);
- } catch (err) { console.warn("presence sync failed", err); }
-
- if (state.guilds.length > 0) {
- const lastGuildId = localStorage.getItem(LAST_GUILD_STORAGE_KEY);
- const guild = state.guilds.find((g) => g.id === lastGuildId) || state.guilds[0];
- state.selectedGuildId = guild.id;
- localStorage.setItem(LAST_GUILD_STORAGE_KEY, guild.id);
- renderGuilds();
- await loadChannels();
- await loadGuildMembers();
- await refreshVoicePresence();
- updateHeaderLabels();
- } else {
- state.members = [];
- renderMembers();
- updateHeaderLabels();
- }
-
- initChatWs();
- startVoicePresencePolling();
- lucide.createIcons();
- } catch (err) {
- console.error("init failed", err);
- el.authScreen.classList.remove("hidden");
- el.main.classList.add("hidden");
- }
-}
-
-init();
+import "./shared/app-core.js";
diff --git a/static/index.html b/static/index.html
index c539130..550c656 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,3 +1,4 @@
+
@@ -7,7 +8,7 @@
Chattz
-
+
@@ -17,6 +18,11 @@
Chattz
Sign in to open your servers.
+
@@ -37,6 +43,7 @@