Files
guestlink/web/static/host.js
T
namandClaude Opus 5.5 de7ed62d96 Jitter buffer v2, per-minute rx logging, websocket keepalive
The cohost sounded jittery on the 2026-11-03 show. v1 skipped ahead on an
underrun and kept playing from an empty buffer, so after the first hiccup
every later wobble was another glitch. It also never corrected a slow guest
clock: ~12 glitches/min in simulation at 30 ppm slow.

- Underrun: hold the sequence position and refill to a larger target
- Drift correction both ways (drop/insert a frame in quiet moments),
  quiet judged relative to the guest's own noise floor
- 80 ms start, 300 ms max, relaxes after 2 calm minutes
- Log 'rx 1m:' stats, the selected route, and call totals
- Ping the guest websocket every 25 s (the proxy closed it every 90 s)
- Simulation kept in test/jb_sim_test.go.txt

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-04 11:21:50 -06:00

69 lines
3.5 KiB
JavaScript

'use strict';
const log = $('#log');
let ws = null, lastGuestOnline = null;
function send(o){ if (ws && ws.readyState === 1) ws.send(JSON.stringify(o)); }
function connect(){
ws = new WebSocket(wsURL('/ws'));
ws.onopen = () => { $('#conn').textContent = 'server connected'; $('#conn').className = 'pill ok'; };
ws.onclose = () => { $('#conn').textContent = 'server offline - retrying'; $('#conn').className = 'pill bad'; setTimeout(connect, 2000); };
ws.onmessage = ev => {
const m = JSON.parse(ev.data);
if (m.t === 'history') { log.textContent = ''; m.history.forEach(x => renderMsg(log, x, 'host')); }
else if (m.t === 'chat') { renderMsg(log, m.msg, 'host'); if (m.msg.who === 'guest' && document.hidden) flashTitle(); }
else if (m.t === 'state') render(m);
};
}
let flashT = null;
function flashTitle(){ // visual only - the host page must never make sound on the rig
if (flashT) return; const base = document.title; let on = false;
flashT = setInterval(() => { document.title = (on = !on) ? '💬 Guest message' : base; }, 1000);
const stop = () => { clearInterval(flashT); flashT = null; document.title = base; document.removeEventListener('visibilitychange', stop); };
document.addEventListener('visibilitychange', stop);
}
function fmtDur(s){ const m = Math.floor(s/60); return m + ':' + String(s%60).padStart(2,'0'); }
function render(s){
$('#link').value = s.link || '';
$('#copy').disabled = $('#revoke').disabled = !s.link;
const name = s.guestName || 'Guest (anonymous)';
const c = s.call;
let line = s.guestOnline ? name + ' - page open' : 'No guest connected';
if (c && c.pc === 'connected') line = name + ' - LIVE ' + fmtDur(c.secs);
else if (c) line = name + ' - audio ' + c.pc;
$('#guest').textContent = line;
$('#callinfo').textContent = c ? ('route: ' + (c.route || '…') + (c.sending ? '' : ' · send stopped') + (c.playing ? '' : ' · playout stopped')) : '';
if (c) {
$('#dIn').textContent = Math.max(-60, setMeter($('#mIn'), c.inPeak)).toFixed(0) + ' dB';
$('#dOut').textContent = Math.max(-60, setMeter($('#mOut'), c.outPeak)).toFixed(0) + ' dB';
const j = c.jb;
$('#jb').textContent = j ? `buffer ${j.depthMs}/${j.targetMs} ms · lost ${j.lost} (fec ${j.fec}) · concealed ${j.plc} · late ${j.late} · drift-drops ${j.dropped} · inserted ${j.inserted} · underruns ${j.underruns}` : '';
} else {
setMeter($('#mIn'), 0); setMeter($('#mOut'), 0); $('#dIn').textContent = $('#dOut').textContent = ''; $('#jb').textContent = '';
}
$('#endcall').disabled = !c; $('#kick').disabled = !s.guestOnline && !c;
}
// Two-click confirm for destructive buttons (no browser dialogs).
function confirmBtn(btn, action){
const label = btn.textContent; let armed = null;
btn.onclick = () => {
if (armed) { clearTimeout(armed); armed = null; btn.textContent = label; action(); return; }
btn.textContent = 'Click again to confirm'; armed = setTimeout(() => { armed = null; btn.textContent = label; }, 3000);
};
}
confirmBtn($('#newlink'), () => send({t:'newlink'}));
confirmBtn($('#revoke'), () => send({t:'revoke'}));
confirmBtn($('#kick'), () => send({t:'kick'}));
confirmBtn($('#endcall'), () => send({t:'endcall'}));
confirmBtn($('#clear'), () => send({t:'clearchat'}));
$('#copy').onclick = async () => {
const el = $('#link'); el.select();
try { await navigator.clipboard.writeText(el.value); } catch(e) { document.execCommand('copy'); }
$('#copy').textContent = 'Copied'; setTimeout(() => $('#copy').textContent = 'Copy', 1500);
};
chatForm($('#chatform'), $('#msg'), t => send({t:'chat', text:t}));
connect();