Update static/js/12-calls.js

static/js/12-calls.js

@@ -583,9 +583,22 @@ Glow.calls.renderParticipants = () => {
 
 Glow.calls.renderHeaderCallChip = () => {
   if (!Glow.els.callStatusChip) return;
-  const active = Boolean(Glow.state.calls.activeCall);
+
-  Glow.els.callStatusChip.classList.toggle("hidden", !active);
+  Glow.calls.ensureState();
-  Glow.els.callStatusChip.textContent = active ? "Call active" : "Call";
+  const state = Glow.calls.state();
+  const visible = Boolean(state.activeCall || state.joining || state.reconnecting);
+
+  Glow.els.callStatusChip.classList.toggle("hidden", !visible);
+
+  if (state.reconnecting) {
+    Glow.els.callStatusChip.textContent = "Call reconnecting";
+  } else if (state.joining) {
+    Glow.els.callStatusChip.textContent = "Call joining";
+  } else if (state.activeCall) {
+    Glow.els.callStatusChip.textContent = "Call active";
+  } else {
+    Glow.els.callStatusChip.textContent = "Call";
+  }
 };
 
 Glow.calls.connectWebSocket = async () => {
@@ -906,15 +919,20 @@ Glow.endLocalCallUi = async () => {
 
   if (Glow.els.callParticipants) {
     Glow.els.callParticipants.replaceChildren();
+    Glow.els.callParticipants.classList.add("hidden");
   }
+
   if (Glow.els.callPendingInvites) {
     Glow.els.callPendingInvites.replaceChildren();
     Glow.els.callPendingInvites.classList.add("hidden");
   }
+
   if (Glow.els.remoteAudioContainer) {
     Glow.els.remoteAudioContainer.replaceChildren();
   }
 
+  Glow.els.callOverlay?.classList.add("hidden");
+
   Glow.renderCallUi();
   Glow.calls.renderHeaderCallChip();
 };
@@ -1014,12 +1032,16 @@ Glow.calls.startHeartbeat = () => {
 Glow.renderCallUi = () => {
   Glow.calls.ensureState();
   const state = Glow.calls.state();
+
   const active = Boolean(state.activeCall);
+  const busy = Boolean(state.activeCall || state.joining || state.reconnecting);
   const scope = state.activeCall?.scope || state.scope || Glow.calls.getCurrentScope();
   const peerCount = Glow.calls.listOtherPeers().length;
 
   if (!Glow.els.callStatus) return;
 
+  Glow.els.callOverlay?.classList.toggle("hidden", !busy);
+
   Glow.els.callPeerLabel.textContent =
     scope?.label ||
     state.scope?.scope_label ||
@@ -1029,7 +1051,7 @@ Glow.renderCallUi = () => {
 
   let statusText = state.statusText || "Idle";
 
-  if (!active) {
+  if (!busy) {
     statusText = "Idle";
   } else if (state.joining) {
     statusText = "Joining call…";
@@ -1047,25 +1069,34 @@ Glow.renderCallUi = () => {
 
   Glow.els.startCallButton?.classList.toggle(
     "hidden",
-    !Glow.calls.isGroupCallContext() || active
+    !Glow.calls.isGroupCallContext() || active || state.joining
   );
+
   Glow.els.retryCallButton?.classList.toggle(
     "hidden",
-    !active || !state.reconnecting
+    !busy || !state.reconnecting
   );
+
   Glow.els.muteCallButton?.classList.toggle("hidden", !active);
   Glow.els.hangupCallButton?.classList.toggle("hidden", !active);
+
   Glow.els.addToCallButton?.classList.toggle(
     "hidden",
     !active || !state.permissions?.can_invite
   );
+
   Glow.els.endCallButton?.classList.toggle(
     "hidden",
     !active || !state.permissions?.can_end
   );
 
-  Glow.els.muteCallButton.textContent =
+  if (Glow.els.muteCallButton) {
-    state.muted ? "Unmute" : "Mute";
+    Glow.els.muteCallButton.textContent = state.muted ? "Unmute" : "Mute";
+  }
+
+  if (Glow.els.callParticipants) {
+    Glow.els.callParticipants.classList.toggle("hidden", !busy);
+  }
 
   Glow.calls.renderParticipants();
   Glow.calls.renderPendingInvites();
@@ -1073,10 +1104,14 @@ Glow.renderCallUi = () => {
 };
 
 Glow.openCallPanel = async () => {
+  Glow.calls.ensureState();
   Glow.els.callOverlay?.classList.remove("hidden");
+  Glow.els.callParticipants?.classList.remove("hidden");
+
   if (Glow.state.calls.activeCall?.groupSession?.id) {
     await Glow.calls.refreshBackendParticipants();
   }
+
   Glow.renderCallUi();
 };
 
@@ -1419,3 +1454,11 @@ Glow.els.endCallButton?.addEventListener("click", () => {
 Glow.els.addToCallButton?.addEventListener("click", () => {
   Glow.openAddToCallDialog?.();
 });
+
+Glow.els.closeCallPanelButton?.addEventListener("click", () => {
+  Glow.els.callOverlay?.classList.add("hidden");
+});
+
+Glow.els.callStatusChip?.addEventListener("click", async () => {
+  await Glow.openCallPanel?.();
+});