video-off shows avatar, show 'You' in GC, allow self-removal

- When camera is turned off during video call, local video shows
avatar overlay; signal sent to remote peer who also shows avatar
overlay instead of frozen/black frame
- Group settings shows '(You)' next to your own name
- 'Remove' button on others, 'Leave' button on yourself
- Leaving the group navigates back to empty state
- Added video_toggle WebSocket message (backend handler + dispatch)

src/main.py

@@ -65,6 +65,8 @@ async def websocket_endpoint(websocket: WebSocket, token: str, db: Session = Dep
                 await manager.handle_ice_candidate(msg, user)
             elif msg_type == "call_end":
                 await manager.handle_call_end(msg, user)
+            elif msg_type == "video_toggle":
+                await manager.handle_video_toggle(msg, user)
 
     except WebSocketDisconnect:
         manager.disconnect(user.id)

src/static/app.js

@@ -353,6 +353,8 @@ async function handleWsMessage(evt) {
     handleIceCandidate(msg);
   } else if (msg.type === "call_end") {
     handleCallEnd(msg);
+  } else if (msg.type === "video_toggle") {
+    handleVideoToggle(msg);
   }
 }
 
@@ -650,11 +652,25 @@ function cleanupCall() {
   const rv = document.getElementById("remote-video");
   if (lv) lv.srcObject = null;
   if (rv) rv.srcObject = null;
+  document.getElementById("local-video-avatar").classList.add("hidden");
+  document.getElementById("remote-video-avatar").classList.add("hidden");
 }
 
 function setupCallMedia() {
   const lv = document.getElementById("local-video");
   if (lv) lv.srcObject = localStream;
+  // Init local avatar
+  const localInner = document.getElementById("local-video-avatar-inner");
+  if (localInner && callTarget) {
+    localInner.textContent = callTarget.display_name[0].toUpperCase();
+    localInner.style.background = callTarget.avatar_color || "#6366f1";
+  }
+  // Init remote avatar
+  const remoteInner = document.getElementById("remote-video-avatar-inner");
+  if (remoteInner && callTarget) {
+    remoteInner.textContent = callTarget.display_name[0].toUpperCase();
+    remoteInner.style.background = callTarget.avatar_color || "#6366f1";
+  }
   const videoContent = document.getElementById("call-video-content");
   const audioContent = document.getElementById("call-audio-content");
   const videoBtn = document.getElementById("call-video-btn");
@@ -689,11 +705,32 @@ function toggleVideo() {
     const t = localStream.getVideoTracks()[0];
     if (t) {
       t.enabled = !t.enabled;
-      document.getElementById("call-video-btn").textContent = t.enabled ? "📹 Video" : "🚫 Video Off";
+      const isOn = t.enabled;
+      document.getElementById("call-video-btn").textContent = isOn ? "📹 Video" : "🚫 Video Off";
+      const overlay = document.getElementById("local-video-avatar");
+      if (overlay) {
+        overlay.classList.toggle("hidden", isOn);
+      }
+      if (ws && ws.readyState === WebSocket.OPEN && callTarget) {
+        ws.send(JSON.stringify({ type: "video_toggle", target_id: callTarget.id, enabled: isOn }));
+      }
     }
   }
 }
 
+function handleVideoToggle(msg) {
+  const overlay = document.getElementById("remote-video-avatar");
+  const inner = document.getElementById("remote-video-avatar-inner");
+  if (!overlay || !inner) return;
+  if (msg.enabled) {
+    overlay.classList.add("hidden");
+  } else {
+    inner.textContent = (msg.display_name || "?")[0].toUpperCase();
+    inner.style.background = msg.avatar_color || "#6366f1";
+    overlay.classList.remove("hidden");
+  }
+}
+
 async function loadChats() {
   [conversations, groups] = await Promise.all([
     apiFetch("/chat/conversations"),
@@ -1111,16 +1148,17 @@ async function showGroupSettings() {
   currentGroupData = full;
   document.getElementById("gs-name").textContent = full.name;
 
-  document.getElementById("gs-members").innerHTML = full.members.map(m => `
-    <div class="flex items-center gap-3 px-2 py-2 rounded-lg">
+  document.getElementById("gs-members").innerHTML = full.members.map(m => {
+    const isMe = m.user.id === me.id;
+    return `<div class="flex items-center gap-3 px-2 py-2 rounded-lg">
       <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold" style="background:${m.user.avatar_color}">${m.user.display_name[0].toUpperCase()}</div>
       <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium">${escHtml(m.user.display_name)}</p>
+        <p class="text-sm font-medium">${escHtml(m.user.display_name)}${isMe ? ' <span class="text-xs text-gray-500">(You)</span>' : ''}</p>
         <p class="text-xs text-gray-500">@${m.user.username}</p>
       </div>
-      ${m.user.id !== me.id ? `<button onclick="removeFromGroup(${m.user.id})" class="text-red-400 hover:text-red-300 text-xs ml-2">Remove</button>` : ""}
-    </div>
-  `).join("");
+      <button onclick="removeFromGroup(${m.user.id})" class="text-red-400 hover:text-red-300 text-xs ml-2">${isMe ? 'Leave' : 'Remove'}</button>
+    </div>`;
+  }).join("");
 
   document.getElementById("gs-add-section").style.display = "block";
   document.getElementById("gs-search-input").value = "";
@@ -1149,7 +1187,18 @@ async function addToGroup(userId) {
 
 async function removeFromGroup(userId) {
   await apiFetch(`/chat/groups/${currentGroupData.id}/members/${userId}`, token, "DELETE");
-  await showGroupSettings();
+  if (userId === me.id) {
+    closeModal("modal-group-settings");
+    currentChat = null;
+    currentGroupData = null;
+    document.getElementById("chat-window").classList.add("hidden");
+    document.getElementById("chat-window").classList.remove("flex");
+    document.getElementById("empty-state").classList.remove("hidden");
+    document.getElementById("call-btn").classList.add("hidden");
+    await loadChats();
+  } else {
+    await showGroupSettings();
+  }
 }
 
 // ── Modals ───────────────────────────────────────────��────────────────────────

src/static/index.html

@@ -355,9 +355,17 @@
   </div>
   <!-- Video content (1-to-1) -->
   <div id="call-video-content" class="hidden flex-1 relative flex items-center justify-center p-4">
-    <video id="remote-video" autoplay playsinline class="max-w-full max-h-full rounded-2xl object-contain bg-black/40"></video>
+    <div class="relative max-w-full max-h-full">
+      <video id="remote-video" autoplay playsinline class="max-w-full max-h-full rounded-2xl object-contain bg-black/40" style="max-height:70vh"></video>
+      <div id="remote-video-avatar" class="hidden absolute inset-0 flex items-center justify-center bg-black/60 rounded-2xl">
+        <div id="remote-video-avatar-inner" class="w-24 h-24 rounded-full flex items-center justify-center text-white text-4xl font-semibold"></div>
+      </div>
+    </div>
     <div class="absolute top-6 right-6 w-48 h-36 rounded-xl overflow-hidden shadow-2xl border-2 border-white/20">
       <video id="local-video" autoplay playsinline muted class="w-full h-full object-cover"></video>
+      <div id="local-video-avatar" class="hidden absolute inset-0 flex items-center justify-center bg-black/70">
+        <div id="local-video-avatar-inner" class="w-12 h-12 rounded-full flex items-center justify-center text-white text-xl font-semibold"></div>
+      </div>
     </div>
   </div>
   <!-- Audio content -->

src/ws_manager.py

@@ -178,6 +178,16 @@ class ConnectionManager:
             "from": sender.id
         })
 
+    async def handle_video_toggle(self, msg: dict, sender: User):
+        target_id = msg.get("target_id")
+        await self.send_to(target_id, {
+            "type": "video_toggle",
+            "from": sender.id,
+            "enabled": msg.get("enabled", True),
+            "display_name": sender.display_name,
+            "avatar_color": sender.avatar_color
+        })
+
     async def handle_read(self, msg: dict, sender: User, db: Session):
         conversation_id = msg.get("conversation_id")
         if conversation_id: