Update static/js/12-calls.js

static/js/12-calls.js

@@ -39,18 +39,12 @@ Glow.calls.ensureState = () => {
   };
   state.backendParticipants ||= [];
   state.scope ||= null;
-  state.statusText ||= "Idle";
+  state.statusText ||= "idle";
   state.makingOffer ||= new Map();
   state.ignoreOffer ||= new Map();
   state.isSettingRemoteAnswerPending ||= new Map();
   state.panelOpen ??= false;
-  state.metrics ||= {
+
-    packetLoss: null,
-    uptime: null,
-    latency: null,
-    elapsedSeconds: 0,
-    userCount: 0
-  };
   state.drag ||= {
     active: false,
     x: null,
@@ -1200,8 +1194,11 @@ Glow.renderCallUi = () => {
 };
 
 Glow.calls.applyPanelPosition = () => {
+  Glow.calls.ensureState();
+
   const overlay = Glow.els.callOverlay;
   const drag = Glow.state.calls?.drag;
+
   if (!overlay || !drag) return;
   if (!Number.isFinite(drag.x) || !Number.isFinite(drag.y)) return;
 
@@ -1214,33 +1211,46 @@ Glow.calls.applyPanelPosition = () => {
 };
 
 Glow.calls.loadPanelPosition = () => {
+  Glow.calls.ensureState();
+
+  const drag = Glow.state.calls?.drag;
+  if (!drag) return;
+
   const x = Number(localStorage.getItem("glow_call_panel_x"));
   const y = Number(localStorage.getItem("glow_call_panel_y"));
+
   if (!Number.isFinite(x) || !Number.isFinite(y)) return;
-  Glow.state.calls.drag.x = x;
+
-  Glow.state.calls.drag.y = y;
+  drag.x = x;
+  drag.y = y;
+
   Glow.calls.applyPanelPosition();
 };
 
 Glow.calls.savePanelPosition = () => {
+  Glow.calls.ensureState();
+
   const drag = Glow.state.calls?.drag;
   if (!drag) return;
   if (!Number.isFinite(drag.x) || !Number.isFinite(drag.y)) return;
+
   localStorage.setItem("glow_call_panel_x", String(drag.x));
   localStorage.setItem("glow_call_panel_y", String(drag.y));
 };
 
 Glow.calls.beginDrag = event => {
   Glow.calls.ensureState();
+
   const overlay = Glow.els.callOverlay;
-  if (!overlay) return;
+  const drag = Glow.state.calls?.drag;
+  if (!overlay || !drag) return;
 
   const rect = overlay.getBoundingClientRect();
-  Glow.state.calls.drag.active = true;
+  drag.active = true;
-  Glow.state.calls.drag.x = rect.left;
+  drag.x = rect.left;
-  Glow.state.calls.drag.y = rect.top;
+  drag.y = rect.top;
-  Glow.state.calls.drag.offsetX = event.clientX - rect.left;
+  drag.offsetX = event.clientX - rect.left;
-  Glow.state.calls.drag.offsetY = event.clientY - rect.top;
+  drag.offsetY = event.clientY - rect.top;
 };
 
 Glow.calls.onDrag = event => {
@@ -1260,6 +1270,8 @@ Glow.calls.onDrag = event => {
 Glow.calls.endDrag = () => {
   const drag = Glow.state.calls?.drag;
   if (!drag) return;
+  if (!drag.active) return;
+
   drag.active = false;
   Glow.calls.savePanelPosition();
 };
@@ -1609,6 +1621,7 @@ Glow.els.addToCallButton?.addEventListener("click", () => {
 });
 
 Glow.els.callDragHandle?.addEventListener("mousedown", event => {
+  if (event.button !== 0) return;
   event.preventDefault();
   Glow.calls.beginDrag(event);
 });
@@ -1621,13 +1634,33 @@ document.addEventListener("mouseup", () => {
   Glow.calls.endDrag?.();
 });
 
+window.addEventListener("resize", () => {
+  const drag = Glow.state.calls?.drag;
+  const overlay = Glow.els.callOverlay;
+  if (!overlay || !drag) return;
+  if (!Number.isFinite(drag.x) || !Number.isFinite(drag.y)) return;
+
+  const maxX = Math.max(0, window.innerWidth - overlay.offsetWidth);
+  const maxY = Math.max(0, window.innerHeight - overlay.offsetHeight);
+
+  drag.x = Math.min(maxX, Math.max(0, drag.x));
+  drag.y = Math.min(maxY, Math.max(0, drag.y));
+
+  Glow.calls.applyPanelPosition();
+  Glow.calls.savePanelPosition();
+});
+
 window.addEventListener("resize", () => {
   if (Glow.state.calls?.panelOpen) {
     Glow.calls.applyPanelPosition?.();
   }
 });
 
-Glow.calls.loadPanelPosition?.();
+// Glow.calls.loadPanelPosition?.();
+
+Glow.calls.ensureState();
+Glow.calls.loadPanelPosition();
+
 setInterval(() => {
   if (Glow.state.calls?.activeCall) {
     Glow.calls.updateSummaryMetrics?.();