From 5ecf415f64a785f10bf0d91b5bb09fd652d9f630 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mats=20T=C3=B6rnberg?= <mats.tornberg@gmail.com>
Date: Tue, 22 Sep 2026 11:07:34 +0200
Subject: [PATCH] Clarify mic mute state, center spatial map on you, show
 talking/muted on shares

- Mic button now swaps glyph (mic vs muted) and syncs immediately on
  join/leave/load instead of relying on a subtle CSS underline.
- Spatial minimap camera now follows the local user, matching how the
  audio panning is already centered on them, instead of plotting
  absolute room coordinates stretched across whatever width the
  screen happens to be.
- Screen-share tiles now show a speaking glow and muted badge, kept in
  sync on the existing audio-meter tick without tearing down <video>
  elements.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/app.js    | 73 +++++++++++++++++++++++++++++++++++++-----------
 public/style.css |  4 +++
 2 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/public/app.js b/public/app.js
index b8533ac..e336670 100644
--- a/public/app.js
+++ b/public/app.js
@@ -96,6 +96,7 @@ async function joinVoice(room) {
   }
   els.mic.disabled = !S.micStream;
   S.muted = false;
+  updateMicButton();
   $('#btn-share').disabled = false;
 
   try {
@@ -640,6 +641,7 @@ setInterval(() => {
     if (speaking !== peer.speaking) { peer.speaking = speaking; changed = true; }
   }
   if (changed) renderTiles();
+  updateScreenTileIndicators();
 }, 150);
 
 // ---------------------------------------------------------------------------
@@ -825,6 +827,7 @@ function renderScreens() {
     }
     const card = document.createElement('div');
     card.className = 'screen-card';
+    card.dataset.shareKey = share.key;
     const video = document.createElement('video');
     video.autoplay = true;
     video.playsInline = true;
@@ -835,6 +838,9 @@ function renderScreens() {
     label.className = 'label';
     label.innerHTML = '<span class="live">&#9679;</span>';
     label.appendChild(document.createTextNode(share.name));
+    const micBadge = document.createElement('span');
+    micBadge.className = 'tile-mic-badge';
+    label.appendChild(micBadge);
     const pop = document.createElement('button');
     pop.className = 'pop-btn';
     pop.title = 'Pop out in new window';
@@ -843,6 +849,26 @@ function renderScreens() {
     card.append(video, label, pop);
     els.screens.appendChild(card);
   }
+  updateScreenTileIndicators();
+}
+
+// Cheap per-tick refresh of speaking/muted state on screen-share tiles —
+// avoids renderScreens()'s full teardown, which would restart <video> playback.
+function updateScreenTileIndicators() {
+  for (const card of els.screens.querySelectorAll('.screen-card[data-share-key]')) {
+    const key = card.dataset.shareKey;
+    let speaking = false, muted = false;
+    if (key === 'me') {
+      speaking = els.meAvatar.classList.contains('speaking');
+      muted = S.muted;
+    } else {
+      const peer = S.peers.get(key);
+      if (peer) { speaking = peer.speaking; muted = peer.state.muted; }
+    }
+    card.classList.toggle('speaking', speaking);
+    const badge = card.querySelector('.tile-mic-badge');
+    if (badge) badge.classList.toggle('muted', muted);
+  }
 }
 
 function popOutShare(share) {
@@ -883,7 +909,11 @@ function closePopout(key) {
 const ctx2d = els.spatial.getContext('2d');
 let dragging = null;
 
-function spatialMetrics() {
+// Camera is always centered on the listener (me), matching how the audio
+// panning already works (peer positions are relative to S.me). While
+// dragging, the camera freezes at its pre-drag position so the world
+// doesn't slide under the pointer as S.me moves.
+function spatialMetrics(camX = S.me.x, camY = S.me.y) {
   const r = els.spatial.getBoundingClientRect();
   const dpr = window.devicePixelRatio || 1;
   if (els.spatial.width !== r.width * dpr) {
@@ -892,37 +922,41 @@ function spatialMetrics() {
   }
   ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
   const pad = 30;
-  return { w: r.width, h: r.height, pad,
-    toPx: (x, y) => [pad + (x / ROOM_UNITS) * (r.width - 2 * pad),
-                     pad + (y / ROOM_UNITS) * (r.height - 2 * pad)],
-    fromPx: (px, py) => [((px - pad) / (r.width - 2 * pad)) * ROOM_UNITS,
-                         ((py - pad) / (r.height - 2 * pad)) * ROOM_UNITS] };
+  const sx = (r.width - 2 * pad) / ROOM_UNITS;
+  const sy = (r.height - 2 * pad) / ROOM_UNITS;
+  const cx = r.width / 2, cy = r.height / 2;
+  return { w: r.width, h: r.height, pad, sx, sy,
+    toPx: (x, y) => [cx + (x - camX) * sx, cy + (y - camY) * sy],
+    fromPx: (px, py) => [camX + (px - cx) / sx, camY + (py - cy) / sy] };
 }
 
 function drawSpatial() {
-  const m = spatialMetrics();
+  const camX = dragging ? dragging.camX : S.me.x;
+  const camY = dragging ? dragging.camY : S.me.y;
+  const m = spatialMetrics(camX, camY);
   ctx2d.clearRect(0, 0, m.w, m.h);
 
-  // grid
+  // grid (world bounds only — clamped so it doesn't imply an infinite plane)
   ctx2d.strokeStyle = 'rgba(255,255,255,.05)';
   ctx2d.lineWidth = 1;
   for (let i = 0; i <= ROOM_UNITS; i += 10) {
-    const [gx, gy] = m.toPx(i, i);
-    ctx2d.beginPath(); ctx2d.moveTo(gx, m.toPx(0, 0)[1]); ctx2d.lineTo(gx, m.toPx(0, 100)[1]); ctx2d.stroke();
-    ctx2d.beginPath(); ctx2d.moveTo(m.toPx(0, 0)[0], gy); ctx2d.lineTo(m.toPx(100, 0)[0], gy); ctx2d.stroke();
+    const [gx] = m.toPx(i, 0);
+    const [, gy] = m.toPx(0, i);
+    ctx2d.beginPath(); ctx2d.moveTo(gx, m.toPx(0, 0)[1]); ctx2d.lineTo(gx, m.toPx(0, ROOM_UNITS)[1]); ctx2d.stroke();
+    ctx2d.beginPath(); ctx2d.moveTo(m.toPx(0, 0)[0], gy); ctx2d.lineTo(m.toPx(ROOM_UNITS, 0)[0], gy); ctx2d.stroke();
   }
 
   // audible range around me (~gain 0.05 at 56 units with ref=4, rolloff=1.4)
   const [mx, my] = m.toPx(S.me.x, S.me.y);
-  const rangeR = (56 / ROOM_UNITS) * (m.w - 2 * m.pad);
+  const rangeR = 56 * m.sx;
   ctx2d.strokeStyle = 'rgba(88,101,242,.35)';
   ctx2d.setLineDash([5, 5]);
-  ctx2d.beginPath(); ctx2d.arc(mx, my, Math.max(0, Math.min(rangeR, m.h - 2 * m.pad)), 0, Math.PI * 2); ctx2d.stroke();
+  ctx2d.beginPath(); ctx2d.arc(mx, my, Math.max(0, Math.min(rangeR, m.h / 2 - m.pad)), 0, Math.PI * 2); ctx2d.stroke();
   ctx2d.setLineDash([]);
 
   // peers
   for (const peer of S.peers.values()) drawAvatarDot(peer.name, peer.id, peer.x, peer.y, peer.speaking, peer.state.muted, false, m);
-  // me (draggable listener)
+  // me (draggable listener, always drawn at the camera's center)
   drawAvatarDot(S.name || 'me', S.myId || 'me', S.me.x, S.me.y, els.meAvatar.classList.contains('speaking'), S.muted, true, m);
 
   if (!dragging) requestAnimationFrame(drawSpatial);
@@ -966,18 +1000,19 @@ els.spatial.addEventListener('pointerdown', (ev) => {
   const [ux, uy] = m.fromPx(px, py);
   const d = Math.hypot(ux - S.me.x, uy - S.me.y);
   if (d < 10) {
-    dragging = { dx: S.me.x - ux, dy: S.me.y - uy };
+    dragging = { dx: S.me.x - ux, dy: S.me.y - uy, camX: S.me.x, camY: S.me.y };
     els.spatial.classList.add('dragging');
     els.spatial.setPointerCapture(ev.pointerId);
   }
 });
 els.spatial.addEventListener('pointermove', (ev) => {
   if (!dragging) return;
-  const m = spatialMetrics();
+  const m = spatialMetrics(dragging.camX, dragging.camY);
   const rect = els.spatial.getBoundingClientRect();
   const [ux, uy] = m.fromPx(ev.clientX - rect.left, ev.clientY - rect.top);
   S.me.x = Math.min(ROOM_UNITS, Math.max(0, ux + dragging.dx));
   S.me.y = Math.min(ROOM_UNITS, Math.max(0, uy + dragging.dy));
+  drawSpatial();
   sendMyPos();
 });
 els.spatial.addEventListener('pointerup', () => {
@@ -1198,7 +1233,9 @@ els.mxInput?.addEventListener('keydown', (ev) => {
 // controls & wiring
 // ---------------------------------------------------------------------------
 function updateMicButton() {
-  els.mic.classList.toggle('off', S.muted || !S.micStream);
+  const off = S.muted || !S.micStream;
+  els.mic.classList.toggle('off', off);
+  els.mic.textContent = off ? '\u{1F507}' : '\u{1F3A4}'; // 🔇 muted/no-mic vs 🎤 live
 }
 function updateDeafenButton() {
   els.deafen.classList.toggle('off', S.deafened);
@@ -1261,6 +1298,8 @@ document.querySelectorAll('.channel.voice').forEach((el) => {
 });
 
 // Initial roster fetch and lightweight periodic sync (especially for unjoined clients)
+updateMicButton();
+updateDeafenButton();
 fetchRooms();
 setInterval(() => {
   // If not connected to websocket, poll for changes across rooms
diff --git a/public/style.css b/public/style.css
index 1712d85..f16c339 100644
--- a/public/style.css
+++ b/public/style.css
@@ -144,6 +144,10 @@ body {
   padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600;
 }
 .screen-card .label .live { color: var(--red); font-weight: 800; margin-right: 5px; }
+.screen-card.speaking { box-shadow: 0 0 0 3px var(--green), 0 8px 24px rgba(0,0,0,.4); }
+.tile-mic-badge { margin-left: 6px; }
+.tile-mic-badge.muted::before { content: "\1F507"; } /* 🔇 */
+.tile-mic-badge:not(.muted)::before { content: ""; }
 
 /* channel user lines */
 .channel-users {