// visuals.jsx - reusable visual elements
const _thumbCache = new Map();
function AssetThumb({ asset, size = 'md' }) {
const aspect = size === 'tall' ? '9 / 16' : '16 / 9';
const [thumbUrl, setThumbUrl] = React.useState(_thumbCache.get(asset.id) || null);
React.useEffect(() => {
if (!asset.id || thumbUrl || !asset.thumbnail_s3_key) return;
let cancelled = false;
fetch((window.ZAMPP_API_PREFIX || '/api/v1') + '/assets/' + asset.id + '/thumbnail', { credentials: 'include' })
.then(r => r.ok ? r.json() : null)
.then(d => { if (!cancelled && d && d.url) { _thumbCache.set(asset.id, d.url); setThumbUrl(d.url); } })
.catch(() => {});
return () => { cancelled = true; };
}, [asset.id, asset.thumbnail_s3_key]);
if (asset.type === 'audio' || asset.media_type === 'audio') {
return (
);
}
// Live/recording assets: once the capture sidecar has published a poster
// thumbnail (first frame of the recording), show that static frame instead
// of the HLS "connecting…" player. Until the poster exists (the brief window
// before the first segment is grabbed), fall back to the live HLS preview.
if (asset.status === 'live' && asset.id) {
if (asset.thumbnail_s3_key || thumbUrl) {
const altText = asset.name ? `Thumbnail for ${asset.name}` : 'Live recording thumbnail';
return (
{thumbUrl
?
:
}
{/* Keep the pulsing LIVE border so it still reads as recording */}
{thumbUrl
?
:
}
{/* Pulsing red border while connecting or playing, matches LIVE badge colour */}
{!ready && !failed && (
Connecting…
)}
{failed && (
Recording…
)}
);
}
function FauxFrame({ seed }) {
return
;
}
function Waveform({ seed = 1, color = 'var(--accent)', className = '' }) {
const bars = 60;
const pts = React.useMemo(() => {
return Array.from({ length: bars }).map((_, i) => {
const n = Math.sin(i * 0.7 + seed) * 0.5 + Math.sin(i * 2.1 + seed * 1.3) * 0.3 + Math.sin(i * 4.3 + seed * 0.7) * 0.2;
return Math.max(0.1, Math.min(1, 0.5 + n * 0.5));
});
}, [seed]);
return (
{pts.map((p, i) => (
);
}
function LiveStrip({ seed = 1, count = 8 }) {
return (
{Array.from({ length: count }).map((_, i) => (
))}
{fill &&
);
}
function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) {
const segs = 20;
return (
{Array.from({ length: segs }).map((_, i) => {
const v = i / segs;
const on = v < level;
const color = v < 0.6 ? 'var(--success)' : v < 0.85 ? 'var(--warning)' : 'var(--danger)';
return
;
})}
{String(h).padStart(2,'0')}:{String(m).padStart(2,'0')}:{String(s).padStart(2,'0')} ;
}
// ─────────────────────────────────────────────────────────────────────────
// ConfirmModal + useConfirm — in-page replacement for window.confirm().
//
// Usage in a component:
// const [confirm, confirmModal] = useConfirm();
// ...
// if (!(await confirm({ title: 'Delete user?', message: '…' }))) return;
// ...
// return (<>{confirmModal} ...rest of UI... );
//
// confirm(opts) returns a Promise. Options:
// title, message, confirmLabel (default 'Delete'), cancelLabel ('Cancel'),
// danger (default true → red confirm button).
function ConfirmModal({ title, message, confirmLabel = 'Delete', cancelLabel = 'Cancel', danger = true, onConfirm, onCancel }) {
React.useEffect(() => {
const onKey = (e) => {
if (e.key === 'Escape') onCancel();
else if (e.key === 'Enter') onConfirm();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onConfirm, onCancel]);
return (
e.stopPropagation()} style={{ maxWidth: 440 }}>
{typeof message === 'string'
? message.split('\n').map((line, i) => (
{line || ' '}
))
:
{message}
}
{cancelLabel}
{confirmLabel}
);
}
function useConfirm() {
const [state, setState] = React.useState(null); // { opts, resolve } | null
const confirm = React.useCallback((opts) => {
return new Promise((resolve) => {
setState({ opts: opts || {}, resolve });
});
}, []);
const close = React.useCallback((result) => {
setState((s) => {
if (s) s.resolve(result);
return null;
});
}, []);
const modal = state
? close(true)}
onCancel={() => close(false)}
/>
: null;
return [confirm, modal];
}
Object.assign(window, { AssetThumb, FauxFrame, Waveform, LiveStrip, Sparkline, AudioMeter, StatusDot, Elapsed, ConfirmModal, useConfirm });