diff --git a/static/js/12-calls.js b/static/js/12-calls.js index d77a451..957de68 100644 --- a/static/js/12-calls.js +++ b/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; - Glow.state.calls.drag.x = rect.left; - Glow.state.calls.drag.y = rect.top; - Glow.state.calls.drag.offsetX = event.clientX - rect.left; - Glow.state.calls.drag.offsetY = event.clientY - rect.top; + drag.active = true; + drag.x = rect.left; + drag.y = rect.top; + drag.offsetX = event.clientX - rect.left; + 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?.();