feat: add multi-user support for favorites management and room clock synchronization
- Implemented a new API endpoint for retrieving and managing user favorites in /api/users. - Added functionality for admins to edit the shared "main" user's favorites. - Created a one-shot DB smoke test script for verifying multi-user kiosk migrations. - Introduced a RoomClock class for synchronizing server time across clients using WebSocket.
This commit is contained in:
Marco Mooren
@@ -1,9 +1,10 @@
|
||||
async function http(method, path, body) {
|
||||
async function http(method, path, body, opts = {}) {
|
||||
const res = await fetch(path, {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
headers: body ? { 'Content-Type': 'application/json' } : {},
|
||||
body: body ? JSON.stringify(body) : undefined
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
signal: opts.signal
|
||||
});
|
||||
if (res.status === 204) return null;
|
||||
const ct = res.headers.get('content-type') || '';
|
||||
@@ -12,10 +13,16 @@ async function http(method, path, body) {
|
||||
return data;
|
||||
}
|
||||
|
||||
// Returns true for AbortError thrown by `fetch(... { signal })` so callers can
|
||||
// silently ignore cancelled requests instead of surfacing them as errors.
|
||||
export function isAbort(err) {
|
||||
return err && (err.name === 'AbortError' || err.code === 20);
|
||||
}
|
||||
|
||||
export const api = {
|
||||
get: (p) => http('GET', p),
|
||||
post: (p, b) => http('POST', p, b),
|
||||
put: (p, b) => http('PUT', p, b),
|
||||
patch: (p, b) => http('PATCH', p, b),
|
||||
del: (p) => http('DELETE', p)
|
||||
get: (p, opts) => http('GET', p, null, opts),
|
||||
post: (p, b, opts) => http('POST', p, b, opts),
|
||||
put: (p, b, opts) => http('PUT', p, b, opts),
|
||||
patch: (p, b, opts) => http('PATCH', p, b, opts),
|
||||
del: (p, opts) => http('DELETE', p, null, opts)
|
||||
};
|
||||
|
||||
146
web/shared/clock.js
Normal file
146
web/shared/clock.js
Normal file
@@ -0,0 +1,146 @@
|
||||
// NTP-lite room clock. Exchanges clock-ping/clock-pong pairs over the existing
|
||||
// WebSocket and keeps a server/local offset so all clients can agree on a
|
||||
// wall-clock for stream-sync purposes.
|
||||
//
|
||||
// Filter: drop samples whose RTT > 2× rolling median, then take the median
|
||||
// offset of the remainder. Lowest-RTT alone is too vulnerable to one lucky
|
||||
// packet that happens to skew the offset.
|
||||
//
|
||||
// Adaptive ping rate: 1 s while still converging (offsetStd > 5 ms or < 8
|
||||
// accepted samples), 5 s after stabilising. The original flat 15 s heartbeat
|
||||
// was too slow to recover from a WiFi RTT spike.
|
||||
//
|
||||
// Usage:
|
||||
// const clock = new RoomClock();
|
||||
// clock.attachWs(ws); // start handshake
|
||||
// clock.now(); // returns estimated server epoch ms
|
||||
// clock.onUpdate((info) => ...) // get notified when offset moves
|
||||
|
||||
const FAST_PING_MS = 1000;
|
||||
const SLOW_PING_MS = 5000;
|
||||
const STABLE_STD_MS = 5;
|
||||
const STABLE_MIN_SAMPLES = 8;
|
||||
const SAMPLE_WINDOW = 16;
|
||||
|
||||
function median(nums) {
|
||||
if (!nums.length) return 0;
|
||||
const s = nums.slice().sort((a, b) => a - b);
|
||||
const mid = s.length >> 1;
|
||||
return s.length % 2 ? s[mid] : (s[mid - 1] + s[mid]) / 2;
|
||||
}
|
||||
|
||||
export class RoomClock {
|
||||
constructor() {
|
||||
this.offset = 0; // ms to add to Date.now() to get server time
|
||||
this.rtt = Infinity; // RTT of the latest accepted sample (ms)
|
||||
this.offsetStd = Infinity; // std-dev (ms) of accepted offsets in window
|
||||
this.samples = []; // recent { offset, rtt } pairs
|
||||
this.synced = false;
|
||||
this._pending = new Map(); // t1 -> sent timestamp
|
||||
this._listeners = new Set();
|
||||
this._timeoutId = null;
|
||||
this._ws = null;
|
||||
}
|
||||
|
||||
attachWs(wsClient) {
|
||||
this._ws = wsClient;
|
||||
this.reset();
|
||||
// Burst of 5 pings ~150ms apart, then adaptive heartbeat.
|
||||
let n = 0;
|
||||
const burst = () => {
|
||||
if (n++ >= 5) {
|
||||
this._scheduleNext();
|
||||
return;
|
||||
}
|
||||
this._sendPing();
|
||||
setTimeout(burst, 150);
|
||||
};
|
||||
burst();
|
||||
}
|
||||
|
||||
detach() {
|
||||
if (this._timeoutId) clearTimeout(this._timeoutId);
|
||||
this._timeoutId = null;
|
||||
this._pending.clear();
|
||||
this._ws = null;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.samples = [];
|
||||
this.synced = false;
|
||||
this.offsetStd = Infinity;
|
||||
this._pending.clear();
|
||||
if (this._timeoutId) { clearTimeout(this._timeoutId); this._timeoutId = null; }
|
||||
}
|
||||
|
||||
/** Server epoch ms estimate. */
|
||||
now() { return Date.now() + this.offset; }
|
||||
|
||||
/** True once the clock has stabilised: enough samples and low jitter. */
|
||||
isStable() {
|
||||
return this.synced
|
||||
&& this.samples.length >= STABLE_MIN_SAMPLES
|
||||
&& this.offsetStd <= STABLE_STD_MS;
|
||||
}
|
||||
|
||||
onUpdate(fn) { this._listeners.add(fn); return () => this._listeners.delete(fn); }
|
||||
|
||||
/** Called by the WS dispatcher when a `clock-pong` arrives. */
|
||||
handlePong(msg) {
|
||||
const sent = this._pending.get(msg.t1);
|
||||
if (sent == null) return;
|
||||
this._pending.delete(msg.t1);
|
||||
const t4 = Date.now();
|
||||
const rtt = t4 - msg.t1;
|
||||
// Symmetric one-way latency assumption: server-clock at midpoint == t2,
|
||||
// local-clock at midpoint == (t1+t4)/2, so offset = t2 - (t1+t4)/2.
|
||||
const offset = msg.t2 - (msg.t1 + t4) / 2;
|
||||
this.samples.push({ offset, rtt });
|
||||
if (this.samples.length > SAMPLE_WINDOW) this.samples.shift();
|
||||
|
||||
// Drop samples whose RTT is > 2× rolling median RTT — those are
|
||||
// bufferbloat / WiFi-burst outliers and tend to carry a skewed offset.
|
||||
const rttMed = median(this.samples.map((s) => s.rtt));
|
||||
const cutoff = Math.max(rttMed * 2, rttMed + 10);
|
||||
const good = this.samples.filter((s) => s.rtt <= cutoff);
|
||||
const offsets = good.length ? good.map((s) => s.offset) : this.samples.map((s) => s.offset);
|
||||
const medOffset = median(offsets);
|
||||
// Std-dev of the accepted offsets — clock-quality metric.
|
||||
const mean = offsets.reduce((a, b) => a + b, 0) / offsets.length;
|
||||
const variance = offsets.reduce((a, b) => a + (b - mean) ** 2, 0) / offsets.length;
|
||||
this.offsetStd = Math.sqrt(variance);
|
||||
this.offset = medOffset;
|
||||
this.rtt = rtt;
|
||||
this.synced = true;
|
||||
for (const fn of this._listeners) {
|
||||
fn({
|
||||
offset: this.offset,
|
||||
rtt: this.rtt,
|
||||
offsetStd: this.offsetStd,
|
||||
samples: this.samples.length,
|
||||
accepted: good.length,
|
||||
stable: this.isStable()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_sendPing() {
|
||||
if (!this._ws) return;
|
||||
const t1 = Date.now();
|
||||
this._pending.set(t1, t1);
|
||||
// Drop very old pending entries to avoid leaking memory if pongs are lost.
|
||||
for (const k of this._pending.keys()) {
|
||||
if (t1 - k > 5000) this._pending.delete(k);
|
||||
}
|
||||
this._ws.send({ type: 'clock-ping', t1 });
|
||||
}
|
||||
|
||||
_scheduleNext() {
|
||||
if (this._timeoutId) clearTimeout(this._timeoutId);
|
||||
const delay = this.isStable() ? SLOW_PING_MS : FAST_PING_MS;
|
||||
this._timeoutId = setTimeout(() => {
|
||||
this._sendPing();
|
||||
this._scheduleNext();
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
356
web/shared/debug.js
Normal file
356
web/shared/debug.js
Normal file
@@ -0,0 +1,356 @@
|
||||
// Sync-status debug overlay.
|
||||
//
|
||||
// Gated by `?log=debug` in the URL. When active:
|
||||
// - Sets `localStorage.oradio.debugSync = '1'` so `logSync()` in
|
||||
// player.js starts emitting `[player:sync]` console traces.
|
||||
// - Persists the flag in localStorage so reloads keep debug on for the
|
||||
// session (clear it via `?log=off`).
|
||||
// - Mounts a fixed-position overlay at bottom-right showing clock, audio,
|
||||
// stream, and room state plus a tail of recent log lines.
|
||||
//
|
||||
// Skin is a few classes in web/style.css (.oradio-debug-*). No frameworks,
|
||||
// no external state — the pane reads live values from the player, clock,
|
||||
// and a tapped `console.log` each refresh.
|
||||
|
||||
const LS_KEY = 'oradio.log';
|
||||
const TAIL_SIZE = 20;
|
||||
const REFRESH_MS = 250;
|
||||
|
||||
// Injected once; each entry point (kiosk / master / admin) ships its own CSS
|
||||
// bundle so it's cleaner to carry the overlay's styling here than to fork it
|
||||
// into three stylesheets.
|
||||
const STYLE_TEXT = `
|
||||
.oradio-debug {
|
||||
position: fixed; bottom: 12px; right: 12px; z-index: 99999;
|
||||
width: 280px; max-height: 70vh; overflow: auto;
|
||||
background: rgba(12, 14, 20, 0.92); color: #e2e8f0;
|
||||
font: 11px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
||||
border: 1px solid #2a3240; border-radius: 6px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.oradio-debug-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 6px 10px; background: #1a2030;
|
||||
border-bottom: 1px solid #2a3240; border-radius: 6px 6px 0 0;
|
||||
}
|
||||
.oradio-debug-title {
|
||||
font-weight: 600; color: #93c5fd;
|
||||
text-transform: uppercase; letter-spacing: 0.04em;
|
||||
}
|
||||
.oradio-debug-collapse {
|
||||
background: transparent; color: #cbd5e1;
|
||||
border: 1px solid #334155; border-radius: 3px;
|
||||
width: 20px; height: 20px; line-height: 18px;
|
||||
cursor: pointer; font: inherit; padding: 0;
|
||||
}
|
||||
.oradio-debug-body { padding: 6px 10px 10px; }
|
||||
.oradio-debug-section { margin-top: 8px; }
|
||||
.oradio-debug-section:first-child { margin-top: 0; }
|
||||
.oradio-debug-section-h {
|
||||
color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;
|
||||
font-size: 10px; padding: 4px 0 3px;
|
||||
border-bottom: 1px solid #1f2937; margin-bottom: 4px;
|
||||
}
|
||||
.oradio-debug-grid {
|
||||
display: grid; grid-template-columns: 90px 1fr; gap: 1px 8px;
|
||||
}
|
||||
.oradio-debug-k { color: #94a3b8; }
|
||||
.oradio-debug-v {
|
||||
color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.oradio-debug-v[data-status="in-sync"] { color: #4ade80; }
|
||||
.oradio-debug-v[data-status="lagging"] { color: #fbbf24; }
|
||||
.oradio-debug-v[data-status="no-buffer"],
|
||||
.oradio-debug-v[data-status="no-anchor"] { color: #f87171; }
|
||||
.oradio-debug-v[data-status="measuring"] { color: #60a5fa; }
|
||||
.oradio-debug-tail {
|
||||
max-height: 160px; overflow: auto;
|
||||
background: #0c1018; border: 1px solid #1f2937;
|
||||
border-radius: 3px; padding: 4px;
|
||||
}
|
||||
.oradio-debug-tail-row {
|
||||
color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
font-size: 10px; padding: 1px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
let _styleInjected = false;
|
||||
function injectStyleOnce() {
|
||||
if (_styleInjected || typeof document === 'undefined') return;
|
||||
_styleInjected = true;
|
||||
const style = document.createElement('style');
|
||||
style.id = 'oradio-debug-style';
|
||||
style.textContent = STYLE_TEXT;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/** Returns true if the debug overlay should be active. */
|
||||
export function isDebugEnabled() {
|
||||
try {
|
||||
const sp = new URLSearchParams(location.search);
|
||||
const q = sp.get('log');
|
||||
if (q === 'debug') {
|
||||
localStorage.setItem(LS_KEY, 'debug');
|
||||
localStorage.setItem('oradio.debugSync', '1');
|
||||
return true;
|
||||
}
|
||||
if (q === 'off' || q === '0') {
|
||||
localStorage.removeItem(LS_KEY);
|
||||
localStorage.removeItem('oradio.debugSync');
|
||||
return false;
|
||||
}
|
||||
if (localStorage.getItem(LS_KEY) === 'debug') {
|
||||
// Keep logSync wired up across reloads too.
|
||||
localStorage.setItem('oradio.debugSync', '1');
|
||||
return true;
|
||||
}
|
||||
} catch { /* private mode, no-op */ }
|
||||
return false;
|
||||
}
|
||||
|
||||
let _tail = [];
|
||||
let _tailListeners = new Set();
|
||||
let _consoleHooked = false;
|
||||
|
||||
function pushTail(line) {
|
||||
_tail.push({ t: Date.now(), line });
|
||||
if (_tail.length > TAIL_SIZE) _tail.shift();
|
||||
for (const fn of _tailListeners) { try { fn(); } catch { /* ignore */ } }
|
||||
}
|
||||
|
||||
function hookConsole() {
|
||||
if (_consoleHooked || typeof console === 'undefined') return;
|
||||
_consoleHooked = true;
|
||||
const orig = console.log.bind(console);
|
||||
console.log = (...args) => {
|
||||
try {
|
||||
const first = args[0];
|
||||
if (typeof first === 'string'
|
||||
&& (first.startsWith('[player:sync]') || first.startsWith('[clock]') || first.startsWith('[ws]'))) {
|
||||
pushTail(args.map(formatArg).join(' '));
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
orig(...args);
|
||||
};
|
||||
}
|
||||
|
||||
function formatArg(a) {
|
||||
if (a == null) return String(a);
|
||||
if (typeof a === 'string') return a;
|
||||
if (typeof a === 'number') return Number.isInteger(a) ? String(a) : a.toFixed(3);
|
||||
try { return JSON.stringify(a); } catch { return String(a); }
|
||||
}
|
||||
|
||||
function fmtMs(v) {
|
||||
if (v == null || !Number.isFinite(v)) return '—';
|
||||
const abs = Math.abs(v);
|
||||
if (abs < 1) return v.toFixed(2) + 'ms';
|
||||
return Math.round(v) + 'ms';
|
||||
}
|
||||
function fmtSec(v) {
|
||||
if (v == null || !Number.isFinite(v)) return '—';
|
||||
return v.toFixed(3) + 's';
|
||||
}
|
||||
function fmtRate(v) {
|
||||
if (v == null || !Number.isFinite(v)) return '—';
|
||||
return v.toFixed(5) + '×';
|
||||
}
|
||||
function fmtTime(t) {
|
||||
if (!t) return '—';
|
||||
const d = new Date(t);
|
||||
const hh = String(d.getHours()).padStart(2, '0');
|
||||
const mm = String(d.getMinutes()).padStart(2, '0');
|
||||
const ss = String(d.getSeconds()).padStart(2, '0');
|
||||
return `${hh}:${mm}:${ss}`;
|
||||
}
|
||||
|
||||
function section(title) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'oradio-debug-section';
|
||||
const h = document.createElement('div');
|
||||
h.className = 'oradio-debug-section-h';
|
||||
h.textContent = title;
|
||||
wrap.appendChild(h);
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'oradio-debug-grid';
|
||||
wrap.appendChild(grid);
|
||||
return { wrap, grid };
|
||||
}
|
||||
function row(grid, label) {
|
||||
const k = document.createElement('div');
|
||||
k.className = 'oradio-debug-k';
|
||||
k.textContent = label;
|
||||
const v = document.createElement('div');
|
||||
v.className = 'oradio-debug-v';
|
||||
v.textContent = '—';
|
||||
grid.appendChild(k);
|
||||
grid.appendChild(v);
|
||||
return v;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mount the debug overlay. Safe to call without `player` (admin pages):
|
||||
* pass `null` for the player and the Audio/Stream sections collapse to "no
|
||||
* player on this page". Returns an `unmount()` function.
|
||||
*/
|
||||
export function mountDebugPane({ player, clock, ws, getWs, role }) {
|
||||
if (!isDebugEnabled() || typeof document === 'undefined') return () => { };
|
||||
hookConsole();
|
||||
injectStyleOnce();
|
||||
|
||||
const root = document.createElement('div');
|
||||
root.className = 'oradio-debug';
|
||||
root.setAttribute('role', 'complementary');
|
||||
root.setAttribute('aria-label', 'sync debug');
|
||||
|
||||
const head = document.createElement('div');
|
||||
head.className = 'oradio-debug-head';
|
||||
const title = document.createElement('span');
|
||||
title.className = 'oradio-debug-title';
|
||||
title.textContent = `sync · ${role || '?'}`;
|
||||
head.appendChild(title);
|
||||
const collapseBtn = document.createElement('button');
|
||||
collapseBtn.className = 'oradio-debug-collapse';
|
||||
collapseBtn.textContent = '–';
|
||||
collapseBtn.title = 'Collapse';
|
||||
head.appendChild(collapseBtn);
|
||||
root.appendChild(head);
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'oradio-debug-body';
|
||||
root.appendChild(body);
|
||||
|
||||
let collapsed = false;
|
||||
collapseBtn.addEventListener('click', () => {
|
||||
collapsed = !collapsed;
|
||||
body.style.display = collapsed ? 'none' : '';
|
||||
collapseBtn.textContent = collapsed ? '+' : '–';
|
||||
});
|
||||
|
||||
// ----- Clock -----
|
||||
const clk = section('Clock');
|
||||
const clk_offset = row(clk.grid, 'offset');
|
||||
const clk_rtt = row(clk.grid, 'rtt');
|
||||
const clk_std = row(clk.grid, 'std');
|
||||
const clk_samples = row(clk.grid, 'samples');
|
||||
const clk_stable = row(clk.grid, 'stable');
|
||||
body.appendChild(clk.wrap);
|
||||
|
||||
// ----- Audio -----
|
||||
const aud = section('Audio');
|
||||
const aud_status = row(aud.grid, 'status');
|
||||
const aud_source = row(aud.grid, 'anchor');
|
||||
const aud_drift = row(aud.grid, 'drift');
|
||||
const aud_rate = row(aud.grid, 'rate');
|
||||
const aud_ct = row(aud.grid, 'currentTime');
|
||||
const aud_delay = row(aud.grid, 'delay');
|
||||
const aud_buffer = row(aud.grid, 'bufferMs');
|
||||
const aud_paused = row(aud.grid, 'paused');
|
||||
body.appendChild(aud.wrap);
|
||||
|
||||
// ----- Stream -----
|
||||
const str = section('Stream');
|
||||
const str_kind = row(str.grid, 'kind');
|
||||
const str_station = row(str.grid, 'station');
|
||||
const str_pdt = row(str.grid, 'PDT');
|
||||
body.appendChild(str.wrap);
|
||||
|
||||
// ----- Room -----
|
||||
const rm = section('Room');
|
||||
const rm_role = row(rm.grid, 'role');
|
||||
const rm_ws = row(rm.grid, 'ws');
|
||||
const rm_started = row(rm.grid, 'started_at');
|
||||
const rm_master = row(rm.grid, 'last master-pos');
|
||||
body.appendChild(rm.wrap);
|
||||
rm_role.textContent = role || '—';
|
||||
|
||||
// ----- Tail -----
|
||||
const tail = document.createElement('div');
|
||||
tail.className = 'oradio-debug-section';
|
||||
const tailH = document.createElement('div');
|
||||
tailH.className = 'oradio-debug-section-h';
|
||||
tailH.textContent = 'Log';
|
||||
tail.appendChild(tailH);
|
||||
const tailList = document.createElement('div');
|
||||
tailList.className = 'oradio-debug-tail';
|
||||
tail.appendChild(tailList);
|
||||
body.appendChild(tail);
|
||||
|
||||
function renderTail() {
|
||||
tailList.textContent = '';
|
||||
for (const e of _tail.slice().reverse()) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'oradio-debug-tail-row';
|
||||
div.textContent = `${fmtTime(e.t)} ${e.line}`;
|
||||
tailList.appendChild(div);
|
||||
}
|
||||
}
|
||||
_tailListeners.add(renderTail);
|
||||
|
||||
function refresh() {
|
||||
// Clock
|
||||
if (clock) {
|
||||
clk_offset.textContent = fmtMs(clock.offset);
|
||||
clk_rtt.textContent = Number.isFinite(clock.rtt) ? fmtMs(clock.rtt) : '—';
|
||||
clk_std.textContent = Number.isFinite(clock.offsetStd) ? fmtMs(clock.offsetStd) : '—';
|
||||
clk_samples.textContent = String(clock.samples?.length ?? 0);
|
||||
clk_stable.textContent = clock.isStable?.() ? 'yes' : 'no';
|
||||
}
|
||||
// Audio
|
||||
if (player) {
|
||||
const s = player.sync;
|
||||
aud_status.textContent = s.status || '—';
|
||||
aud_status.dataset.status = s.status || '';
|
||||
aud_source.textContent = s.anchorSource || '—';
|
||||
aud_drift.textContent = fmtMs(s.driftMs);
|
||||
aud_rate.textContent = fmtRate(s.rate);
|
||||
aud_ct.textContent = fmtSec(player.audio?.currentTime);
|
||||
aud_delay.textContent = fmtSec(s.currentDelay);
|
||||
aud_buffer.textContent = fmtMs(s.bufferMs);
|
||||
aud_paused.textContent = player.audio?.paused ? 'yes' : 'no';
|
||||
const st = player.station;
|
||||
str_station.textContent = st ? `${st.id} ${st.name || ''}` : '—';
|
||||
str_kind.textContent = player.hls ? 'hls' : (st ? 'direct' : '—');
|
||||
str_pdt.textContent = s.pdtMs ? fmtTime(s.pdtMs) : '—';
|
||||
rm_started.textContent = s.startedAt ? fmtTime(s.startedAt) : '—';
|
||||
// masterAt is in server time. Age == server-now − masterAt.
|
||||
if (s.masterAt && clock) {
|
||||
const ageMs = (Date.now() + clock.offset) - s.masterAt;
|
||||
rm_master.textContent = ageMs >= 0
|
||||
? (ageMs < 1000 ? ageMs + 'ms ago' : (ageMs / 1000).toFixed(1) + 's ago')
|
||||
: '—';
|
||||
} else {
|
||||
rm_master.textContent = '—';
|
||||
}
|
||||
} else {
|
||||
aud_status.textContent = 'no-player';
|
||||
aud_source.textContent = '—';
|
||||
aud_drift.textContent = '—';
|
||||
aud_rate.textContent = '—';
|
||||
aud_ct.textContent = '—';
|
||||
aud_delay.textContent = '—';
|
||||
aud_buffer.textContent = '—';
|
||||
aud_paused.textContent = '—';
|
||||
str_kind.textContent = '—';
|
||||
str_station.textContent = '—';
|
||||
str_pdt.textContent = '—';
|
||||
rm_started.textContent = '—';
|
||||
rm_master.textContent = '—';
|
||||
}
|
||||
// WS — accept a static handle or a getter so re-openings stay visible.
|
||||
const wsNow = typeof getWs === 'function' ? getWs() : ws;
|
||||
const rs = wsNow?.readyState;
|
||||
rm_ws.textContent = rs === 1 ? 'open' : rs === 0 ? 'connecting' : rs === 2 ? 'closing' : rs === 3 ? 'closed' : '—';
|
||||
}
|
||||
|
||||
document.body.appendChild(root);
|
||||
refresh();
|
||||
renderTail();
|
||||
const refreshId = setInterval(refresh, REFRESH_MS);
|
||||
|
||||
return function unmount() {
|
||||
clearInterval(refreshId);
|
||||
_tailListeners.delete(renderTail);
|
||||
try { root.remove(); } catch { /* ignore */ }
|
||||
};
|
||||
}
|
||||
143
web/shared/playGate.js
Normal file
143
web/shared/playGate.js
Normal file
@@ -0,0 +1,143 @@
|
||||
// Click-to-start gate.
|
||||
//
|
||||
// Browsers reject `audio.play()` without a user gesture. After a hard reload
|
||||
// we want to resume playback automatically when possible and fall back to a
|
||||
// "tap to start" modal otherwise. Inside the Electron shell autoplay is
|
||||
// permitted, so a one-time "Don't show again" pref suppresses the modal.
|
||||
//
|
||||
// Usage:
|
||||
// const ok = await tryAutoplay(audioEl); // best-effort attempt
|
||||
// if (!ok) {
|
||||
// await showStartModal({ stationName, onStart, onCancel });
|
||||
// }
|
||||
|
||||
const DISMISSED_KEY = 'oradio.autoplayDismissed';
|
||||
|
||||
function isElectron() {
|
||||
try { return !!(typeof window !== 'undefined' && window.oradioNative?.isElectron); }
|
||||
catch { return false; }
|
||||
}
|
||||
|
||||
export function autoplayDismissed() {
|
||||
// Only honour the dismissal in Electron — plain browsers can't bypass
|
||||
// their autoplay policy regardless of any flag we set.
|
||||
if (!isElectron()) return false;
|
||||
try { return localStorage.getItem(DISMISSED_KEY) === '1'; }
|
||||
catch { return false; }
|
||||
}
|
||||
|
||||
/** Try to start an <audio> element. Resolves true on success, false on rejection. */
|
||||
export async function tryAutoplay(audio) {
|
||||
if (!audio) return false;
|
||||
try {
|
||||
const p = audio.play();
|
||||
if (p && typeof p.then === 'function') await p;
|
||||
return !audio.paused;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
let _open = null;
|
||||
|
||||
/**
|
||||
* Show a blocking modal that captures a user gesture. Resolves when the user
|
||||
* taps Start (which fulfils browser autoplay rules for the subsequent
|
||||
* `audio.play()` the caller will perform). Rejects on Cancel.
|
||||
*
|
||||
* Returns a Promise. While the modal is open subsequent calls return the
|
||||
* same promise (idempotent).
|
||||
*/
|
||||
export function showStartModal({ stationName = 'Radio', subtitle = '', onStart, onCancel } = {}) {
|
||||
if (_open) return _open.promise;
|
||||
|
||||
let resolve, reject;
|
||||
const promise = new Promise((res, rej) => { resolve = res; reject = rej; });
|
||||
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'play-gate-backdrop';
|
||||
backdrop.setAttribute('role', 'dialog');
|
||||
backdrop.setAttribute('aria-modal', 'true');
|
||||
backdrop.setAttribute('aria-label', 'Tap to start audio');
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'play-gate-card';
|
||||
|
||||
const h = document.createElement('h2');
|
||||
h.className = 'play-gate-title';
|
||||
h.textContent = 'Tap to start audio';
|
||||
card.appendChild(h);
|
||||
|
||||
const name = document.createElement('div');
|
||||
name.className = 'play-gate-station';
|
||||
name.textContent = stationName;
|
||||
card.appendChild(name);
|
||||
|
||||
if (subtitle) {
|
||||
const sub = document.createElement('div');
|
||||
sub.className = 'play-gate-sub';
|
||||
sub.textContent = subtitle;
|
||||
card.appendChild(sub);
|
||||
}
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.className = 'play-gate-row';
|
||||
const startBtn = document.createElement('button');
|
||||
startBtn.className = 'play-gate-start';
|
||||
startBtn.textContent = '▶ Start';
|
||||
const cancelBtn = document.createElement('button');
|
||||
cancelBtn.className = 'play-gate-cancel';
|
||||
cancelBtn.textContent = 'Cancel';
|
||||
row.appendChild(startBtn);
|
||||
row.appendChild(cancelBtn);
|
||||
card.appendChild(row);
|
||||
|
||||
let dismissCheckbox = null;
|
||||
if (isElectron()) {
|
||||
const lbl = document.createElement('label');
|
||||
lbl.className = 'play-gate-dismiss';
|
||||
dismissCheckbox = document.createElement('input');
|
||||
dismissCheckbox.type = 'checkbox';
|
||||
dismissCheckbox.id = 'play-gate-dismiss-cb';
|
||||
lbl.appendChild(dismissCheckbox);
|
||||
const txt = document.createElement('span');
|
||||
txt.textContent = " Don't show again on this device";
|
||||
lbl.appendChild(txt);
|
||||
card.appendChild(lbl);
|
||||
}
|
||||
|
||||
backdrop.appendChild(card);
|
||||
document.body.appendChild(backdrop);
|
||||
queueMicrotask(() => startBtn.focus());
|
||||
|
||||
function close() {
|
||||
if (_open?.backdrop?.parentNode) _open.backdrop.parentNode.removeChild(_open.backdrop);
|
||||
_open = null;
|
||||
}
|
||||
|
||||
function persistDismissal() {
|
||||
if (dismissCheckbox && dismissCheckbox.checked) {
|
||||
try { localStorage.setItem(DISMISSED_KEY, '1'); } catch { /* ignore */ }
|
||||
}
|
||||
}
|
||||
|
||||
startBtn.addEventListener('click', () => {
|
||||
persistDismissal();
|
||||
close();
|
||||
try { onStart && onStart(); } catch { /* ignore */ }
|
||||
resolve();
|
||||
});
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
close();
|
||||
try { onCancel && onCancel(); } catch { /* ignore */ }
|
||||
reject(new Error('autoplay-cancelled'));
|
||||
});
|
||||
backdrop.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') cancelBtn.click();
|
||||
});
|
||||
|
||||
_open = { backdrop, promise };
|
||||
return promise;
|
||||
}
|
||||
|
||||
export function isStartModalOpen() { return !!_open; }
|
||||
Reference in New Issue
Block a user