Audio
diff --git a/web/host.html b/web/host.html index dbd3498..9ebe3cc 100644 --- a/web/host.html +++ b/web/host.html @@ -13,6 +13,9 @@A new link ends the current session and clears chat. Old links stop working.
Guest
+
+ Guest's tally light - sign only, no audio change
+
No guest connected
Guest → show
diff --git a/web/static/guest.js b/web/static/guest.js
index d334fff..80c0ccb 100644
--- a/web/static/guest.js
+++ b/web/static/guest.js
@@ -53,7 +53,9 @@ function connect(){
const m = JSON.parse(ev.data);
switch (m.t) {
case 'welcome': case 'history':
- log.textContent = ''; (m.history || []).forEach(x => renderMsg(log, x, 'guest')); break;
+ log.textContent = ''; (m.history || []).forEach(x => renderMsg(log, x, 'guest'));
+ if (m.t === 'welcome') setTally(!!m.onAir, false); break;
+ case 'onair': setTally(!!m.on, true); break;
case 'chat': renderMsg(log, m.msg, 'guest'); if (document.hidden && m.msg.who === 'host') flashTitle(); break;
case 'notice': renderMsg(log, {who:'system', text:m.text, ts:Date.now()}, 'guest'); break;
case 'answer': if (pc) await pc.setRemoteDescription({type:'answer', sdp:m.sdp}); break;
@@ -64,6 +66,16 @@ function connect(){
};
}
+// ---- tally: a sign set by the host. It does not change any audio.
+let tallyOn = null;
+function setTally(on, announce){
+ if (on === tallyOn) return; tallyOn = on;
+ const el = $('#tally');
+ el.textContent = on ? '● ON AIR' : 'Off air';
+ el.className = 'tallybar ' + (on ? 'on' : 'off');
+ if (announce) note('host set the tally: ' + (on ? 'ON AIR' : 'off air'));
+}
+
let flashT = null;
function flashTitle(){
if (flashT) return; const base = document.title; let on = false;
diff --git a/web/static/host.js b/web/static/host.js
index d160b68..ee8b7e6 100644
--- a/web/static/host.js
+++ b/web/static/host.js
@@ -16,17 +16,47 @@ function connect(){
}
let flashT = null;
-function flashTitle(){ // visual only - the host page must never make sound on the rig
+function flashTitle(text){ // 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);
+ flashT = setInterval(() => { document.title = (on = !on) ? (text || '💬 Guest message') : base; }, 1000);
const stop = () => { clearInterval(flashT); flashT = null; document.title = base; document.removeEventListener('visibilitychange', stop); };
document.addEventListener('visibilitychange', stop);
}
+// ---- tally (sign on the guest's page only)
+let onAir = false;
+$('#tally').onclick = () => send({t:'onair', on: !onAir});
+
+// ---- connection warning: audible trouble on the guest -> show path over the last 10 s.
+// Concealed frames (PLC) and underruns are what listeners hear; FEC recoveries are not.
+let hist = [], warnLevel = 0;
+function checkTrouble(c){
+ const box = $('#warn');
+ if (!c) { hist = []; box.className = 'warnbox hidden'; warnLevel = 0; return; }
+ const now = Date.now(), j = c.jb;
+ if (j) hist.push({t: now, plc: j.plc, ur: j.underruns});
+ while (hist.length && now - hist[0].t > 10000) hist.shift();
+ let plc = 0, ur = 0;
+ if (hist.length > 1) { const a = hist[0], b = hist[hist.length-1]; plc = b.plc - a.plc; ur = b.ur - a.ur; }
+ const n = (k, w) => k + ' ' + w + (k === 1 ? '' : 's');
+ let level = 0, msg = '';
+ if (c.pc === 'disconnected' || c.pc === 'failed') { level = 2; msg = 'Guest audio ' + c.pc + ' - their network dropped out.'; }
+ else if (c.pc === 'connected' && (plc >= 25 || ur >= 3)) { level = 2; msg = 'Guest connection is bad: ' + n(plc, 'patched gap') + ', ' + n(ur, 'dropout') + ' in the last 10 s.'; }
+ else if (c.pc === 'connected' && (plc >= 3 || ur >= 1)) { level = 1; msg = 'Guest connection wobbling: ' + n(plc, 'patched gap') + ', ' + n(ur, 'dropout') + ' in the last 10 s.'; }
+ box.textContent = msg; box.className = 'warnbox' + (level === 2 ? ' bad' : '') + (level ? '' : ' hidden');
+ if (level === 2 && warnLevel < 2 && document.hidden) flashTitle('⚠ Guest connection');
+ warnLevel = level;
+}
+
function fmtDur(s){ const m = Math.floor(s/60); return m + ':' + String(s%60).padStart(2,'0'); }
function render(s){
$('#link').value = s.link || '';
+ onAir = !!s.onAir;
+ $('#tally').textContent = onAir ? '● ON AIR' : 'Off air';
+ $('#tally').classList.toggle('on', onAir);
+ $('#tally').disabled = !s.link;
+ checkTrouble(s.call);
$('#copy').disabled = $('#revoke').disabled = !s.link;
const name = s.guestName || 'Guest (anonymous)';
const c = s.call;
diff --git a/web/static/style.css b/web/static/style.css
index 008c1be..f4f156d 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -38,3 +38,9 @@ button.small{padding:3px 10px;font-size:13px}
.diag{margin-top:14px;font-size:14px}.diag summary{cursor:pointer}
.diaglog{max-height:240px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:8px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
button.on{border-color:var(--ok);color:var(--ok)}
+.tallybar{margin:16px 16px 0;padding:10px 16px;border-radius:8px;text-align:center;font-weight:700;letter-spacing:.06em;border:1px solid var(--line);color:var(--muted);background:var(--card)}
+.tallybar.on,button.tally.on{background:#d11a1a;border-color:#d11a1a;color:#fff}
+.tallybar.on{font-size:20px;letter-spacing:.12em}
+button.tally{font-weight:700;min-width:120px}
+.warnbox{margin:8px 0;padding:8px 12px;border-radius:7px;border:1px solid var(--warn);background:var(--sys);font-size:14px}
+.warnbox.bad{border-color:var(--danger);color:var(--danger);font-weight:600}