Merge pull request #8 from DivyanshuChipa/modernize-web-client-14722832941266930639

Modernize Web Client: Sidebar, Mobile, and Calling

Author: DivyanshuChipa

backend/chat.py

@@ -16,7 +16,7 @@
 
 # ✅ List of messages that should NOT be saved to DB
 SIGNAL_TYPES = {
-    "call_request", "call_accept", "call_reject", "call_end", "call_rejected",
+    "call_request", "call_accept", "call_reject", "call_end", "call_rejected", "call_ended",
     "webrtc_offer", "webrtc_answer", "ice_candidate"
 }
 

backend/static/app.js

@@ -77,6 +77,7 @@ const handleAuth = login;
 const myUsername = localStorage.getItem("username");
 let ws = null;
 let currentReceiver = "Family Group";
+let userAvatars = {}; // username -> avatarUrl
 
 // Auto-redirect logic
 if (window.location.pathname === "/" || window.location.pathname.includes("index.html")) {
@@ -90,8 +91,9 @@ if (window.location.pathname.includes("chat.html")) {
     window.location.href = "/index.html";
   } else {
     const profileEl = document.getElementById("profile-name");
-    if (profileEl) profileEl.innerText = "👤 " + myUsername;
+    if (profileEl) profileEl.innerText = myUsername;
     initTheme();
+    initSidebar();
     loadUsers();
     connectWS();
   }
@@ -109,6 +111,23 @@ function toggleTheme() {
   localStorage.setItem("theme", next);
 }
 
+function initSidebar() {
+  const state = localStorage.getItem("sidebarMinimized");
+  if (state === "true") {
+    document.getElementById("sidebar").classList.add("minimized");
+  }
+}
+
+function toggleSidebar() {
+  const sidebar = document.getElementById("sidebar");
+  sidebar.classList.toggle("minimized");
+  localStorage.setItem("sidebarMinimized", sidebar.classList.contains("minimized"));
+}
+
+function showSidebar() {
+  document.body.classList.remove("chat-open");
+}
+
 function toggleSettings() {
   const panel = document.getElementById("settings-panel");
   panel.style.display = panel.style.display === "flex" ? "none" : "flex";
@@ -207,6 +226,7 @@ async function loadUsers() {
         // Current user
         if (user.profile_photo) {
           document.getElementById("my-avatar").src = user.profile_photo;
+          userAvatars[myUsername] = user.profile_photo;
         }
       }
     });
@@ -221,10 +241,8 @@ function addUserToList(user) {
   div.className = "user-item";
   div.onclick = () => selectUser(user.username);
 
-  let imgUrl = "https://via.placeholder.com/40";
-  if (user.profile_photo) {
-    imgUrl = user.profile_photo;
-  }
+  let imgUrl = user.profile_photo || "https://via.placeholder.com/40";
+  userAvatars[user.username] = imgUrl;
 
   div.innerHTML = `
     <img src="${imgUrl}" class="avatar">
@@ -239,9 +257,21 @@ function addUserToList(user) {
  ***********************/
 async function selectUser(name) {
   currentReceiver = name;
-  document.getElementById("chat-header").innerText = name;
+  document.getElementById("chat-title").innerText = name;
   document.getElementById("messages").innerHTML = "";
 
+  // Mobile navigation
+  document.body.classList.add("chat-open");
+  document.getElementById("back-btn").style.display = window.innerWidth <= 768 ? "block" : "none";
+
+  // Show call button for private chats
+  const chatActions = document.getElementById("chat-actions");
+  if (name !== "Family Group") {
+    chatActions.style.display = "block";
+  } else {
+    chatActions.style.display = "none";
+  }
+
   // Highlight active user
   const userItems = document.querySelectorAll(".user-item");
   userItems.forEach(item => {
@@ -339,6 +369,46 @@ function connectWS() {
         }
         break;
 
+      case "call_request":
+        handleCallRequest(msg);
+        break;
+
+      case "call_accept":
+        document.getElementById("call-status").innerText = "Connecting...";
+        setupWebRTC();
+        break;
+
+      case "call_reject":
+      case "call_rejected":
+        alert(msg.sender + " rejected the call");
+        stopWebRTC();
+        hideCallOverlay();
+        break;
+
+      case "call_end":
+      case "call_ended":
+        stopWebRTC();
+        hideCallOverlay();
+        break;
+
+      case "webrtc_offer":
+        if (document.getElementById("call-overlay").style.display === "flex" &&
+            document.getElementById("accept-call").style.display === "block") {
+          // If we are showing the incoming call screen, wait for user to accept
+          pendingOffer = msg;
+        } else {
+          handleOffer(msg);
+        }
+        break;
+
+      case "webrtc_answer":
+        handleAnswer(msg);
+        break;
+
+      case "ice_candidate":
+        handleIceCandidate(msg);
+        break;
+
       case "status":
         // online / offline
         break;
@@ -456,13 +526,18 @@ function isImage(url) {
 
 let typingTimeout;
 function showTypingIndicator(sender) {
-  const header = document.getElementById("chat-header");
-  const originalText = sender;
-  header.innerText = sender + " is typing...";
+  if (sender !== currentReceiver) return;
+  const title = document.getElementById("chat-title");
+  if (!title) return;
+
+  const originalText = currentReceiver;
+  title.innerText = sender + " is typing...";
 
   clearTimeout(typingTimeout);
   typingTimeout = setTimeout(() => {
-    header.innerText = originalText;
+    if (currentReceiver === originalText) {
+      title.innerText = originalText;
+    }
   }, 3000);
 }
 
@@ -489,3 +564,220 @@ function handleEnter(e) {
     sendMsg();
   }
 }
+
+window.addEventListener('resize', () => {
+  if (window.innerWidth > 768) {
+    document.body.classList.remove("chat-open");
+    document.getElementById("back-btn").style.display = "none";
+  } else if (currentReceiver && document.body.classList.contains("chat-open")) {
+    document.getElementById("back-btn").style.display = "block";
+  }
+});
+
+/***********************
+ * WEBRTC CALLING
+ ***********************/
+let peerConnection = null;
+let localStream = null;
+let callReceiver = null;
+let isCaller = false;
+let pendingOffer = null;
+
+const rtcConfig = {
+  iceServers: [
+    { urls: 'stun:stun.l.google.com:19302' },
+    { urls: 'stun:stun1.l.google.com:19302' }
+  ]
+};
+
+async function startCall() {
+  if (!currentReceiver || currentReceiver === "Family Group") return;
+
+  callReceiver = currentReceiver;
+  isCaller = true;
+
+  showCallOverlay(callReceiver, "Calling...");
+  document.getElementById("accept-call").style.display = "none";
+  document.getElementById("reject-call").style.display = "none";
+  document.getElementById("end-call").style.display = "block";
+
+  const myPhoto = userAvatars[myUsername];
+
+  const payload = {
+    type: "call_request",
+    receiver: callReceiver,
+    sender: myUsername,
+    profile_photo: myPhoto || null
+  };
+  ws.send(JSON.stringify(payload));
+
+  // Android expects offer immediately
+  setupWebRTC();
+}
+
+function showCallOverlay(username, status) {
+  document.getElementById("call-username").innerText = username;
+  document.getElementById("call-status").innerText = status;
+  document.getElementById("call-overlay").style.display = "flex";
+
+  if (userAvatars[username]) {
+    document.getElementById("call-avatar").src = userAvatars[username];
+  } else {
+    document.getElementById("call-avatar").src = "https://via.placeholder.com/100";
+  }
+}
+
+function hideCallOverlay() {
+  document.getElementById("call-overlay").style.display = "none";
+  document.getElementById("ringtone").pause();
+  document.getElementById("ringtone").currentTime = 0;
+  pendingOffer = null;
+}
+
+async function handleCallRequest(msg) {
+  callReceiver = msg.sender;
+  if (msg.profile_photo) {
+    userAvatars[msg.sender] = msg.profile_photo;
+  }
+  isCaller = false;
+
+  showCallOverlay(callReceiver, "Incoming Call...");
+  document.getElementById("accept-call").style.display = "block";
+  document.getElementById("reject-call").style.display = "block";
+  document.getElementById("end-call").style.display = "none";
+
+  document.getElementById("ringtone").play().catch(e => console.log("Audio play failed:", e));
+}
+
+async function acceptCall() {
+  document.getElementById("ringtone").pause();
+  document.getElementById("call-status").innerText = "Connecting...";
+  document.getElementById("accept-call").style.display = "none";
+  document.getElementById("reject-call").style.display = "none";
+  document.getElementById("end-call").style.display = "block";
+
+  const payload = {
+    type: "call_accept",
+    receiver: callReceiver
+  };
+  ws.send(JSON.stringify(payload));
+
+  if (pendingOffer) {
+    await handleOffer(pendingOffer);
+    pendingOffer = null;
+  } else {
+    await setupWebRTC();
+  }
+}
+
+function rejectCall() {
+  const payload = {
+    type: "call_rejected",
+    receiver: callReceiver
+  };
+  ws.send(JSON.stringify(payload));
+  hideCallOverlay();
+}
+
+function endCall() {
+  const payload = {
+    type: "call_ended",
+    receiver: callReceiver
+  };
+  ws.send(JSON.stringify(payload));
+  stopWebRTC();
+  hideCallOverlay();
+}
+
+async function setupWebRTC() {
+  if (peerConnection) return;
+  try {
+    localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+
+    peerConnection = new RTCPeerConnection(rtcConfig);
+
+    localStream.getTracks().forEach(track => {
+      peerConnection.addTrack(track, localStream);
+    });
+
+    peerConnection.ontrack = (event) => {
+      const remoteAudio = document.getElementById("remote-audio") || document.createElement("audio");
+      remoteAudio.id = "remote-audio";
+      remoteAudio.autoplay = true;
+      remoteAudio.srcObject = event.streams[0];
+      if (!remoteAudio.parentElement) document.body.appendChild(remoteAudio);
+    };
+
+    peerConnection.onicecandidate = (event) => {
+      if (event.candidate) {
+        ws.send(JSON.stringify({
+          type: "ice_candidate",
+          receiver: callReceiver,
+          candidate: event.candidate
+        }));
+      }
+    };
+
+    if (isCaller) {
+      const offer = await peerConnection.createOffer();
+      await peerConnection.setLocalDescription(offer);
+      ws.send(JSON.stringify({
+        type: "webrtc_offer",
+        receiver: callReceiver,
+        sdp: offer.sdp
+      }));
+    }
+  } catch (e) {
+    console.error("WebRTC Setup Error:", e);
+    if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
+      alert("Microphone access failed. Web calls require HTTPS to work on LAN.");
+    } else {
+      alert("Could not access microphone. Please check permissions.");
+    }
+    endCall();
+  }
+}
+
+async function handleOffer(msg) {
+  if (!peerConnection) await setupWebRTC();
+  await peerConnection.setRemoteDescription(new RTCSessionDescription({ type: 'offer', sdp: msg.sdp }));
+  const answer = await peerConnection.createAnswer();
+  await peerConnection.setLocalDescription(answer);
+  ws.send(JSON.stringify({
+    type: "webrtc_answer",
+    receiver: callReceiver,
+    sdp: answer.sdp
+  }));
+}
+
+async function handleAnswer(msg) {
+  if (!peerConnection) return;
+  try {
+    await peerConnection.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: msg.sdp }));
+    document.getElementById("call-status").innerText = "Connected";
+  } catch (e) {
+    console.error("Handle Answer Error:", e);
+  }
+}
+
+async function handleIceCandidate(msg) {
+  if (peerConnection) {
+    await peerConnection.addIceCandidate(new RTCIceCandidate(msg.candidate));
+  }
+}
+
+function stopWebRTC() {
+  if (localStream) {
+    localStream.getTracks().forEach(track => track.stop());
+    localStream = null;
+  }
+  if (peerConnection) {
+    peerConnection.close();
+    peerConnection = null;
+  }
+  const remoteAudio = document.getElementById("remote-audio");
+  if (remoteAudio) remoteAudio.remove();
+
+  isCaller = false;
+  pendingOffer = null;
+}