348 lines
14 KiB
JavaScript
348 lines
14 KiB
JavaScript
// 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 (
|
||
<div className="asset-thumb audio" style={{ aspectRatio: aspect }}>
|
||
<Waveform seed={asset.id ? asset.id.charCodeAt(0) % 60 : 1} />
|
||
<div className="thumb-overlay"><Icon name="audio" size={20} style={{ opacity: 0.9 }} /></div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 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 (
|
||
<div className="asset-thumb" style={{ aspectRatio: aspect, position: 'relative', background: '#000', overflow: 'hidden' }}>
|
||
{thumbUrl
|
||
? <img src={thumbUrl} alt={altText} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||
: <FauxFrame />}
|
||
{/* Keep the pulsing LIVE border so it still reads as recording */}
|
||
<div style={{ position: 'absolute', inset: 0, border: '2px solid var(--live)', pointerEvents: 'none', borderRadius: 'inherit' }} />
|
||
</div>
|
||
);
|
||
}
|
||
return <LiveThumb assetId={asset.id} aspect={aspect} />;
|
||
}
|
||
|
||
if (asset.status === 'pending_migration' && !asset.thumbnail_s3_key && !thumbUrl) {
|
||
return (
|
||
<div className="asset-thumb" style={{ aspectRatio: aspect, position: 'relative', background: 'var(--bg-2)', overflow: 'hidden' }}>
|
||
<div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
|
||
alignItems: 'center', justifyContent: 'center', gap: 6,
|
||
color: 'var(--text-3)', fontSize: 11 }}>
|
||
<Icon name="upload" size={20} style={{ opacity: 0.5 }} />
|
||
<span>Awaiting migration</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// VOD HLS assets: if we have an HLS rendition, we could potentially show a
|
||
// muted hover-preview here too. For now, just static thumb.
|
||
|
||
const altText = asset.name ? `Thumbnail for ${asset.name}` : 'Asset thumbnail';
|
||
return (
|
||
<div className="asset-thumb" style={{ background: 'var(--bg-2)', aspectRatio: aspect, overflow: 'hidden', position: 'relative' }}>
|
||
{thumbUrl
|
||
? <img src={thumbUrl} alt={altText} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||
: <FauxFrame />}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Muted inline HLS preview for a live/recording asset tile. Attaches hls.js
|
||
// (or native HLS on Safari) to show the live feed inside the library card.
|
||
// Shows a "connecting…" spinner while the manifest loads, falls back to a
|
||
// placeholder with a record icon if hls.js is unavailable or playback fails.
|
||
function LiveThumb({ assetId, aspect }) {
|
||
const videoRef = React.useRef(null);
|
||
const [ready, setReady] = React.useState(false);
|
||
const [failed, setFailed] = React.useState(false);
|
||
|
||
React.useEffect(() => {
|
||
const v = videoRef.current;
|
||
if (!v || !assetId) return;
|
||
const url = '/live/' + assetId + '/index.m3u8';
|
||
let destroyed = false;
|
||
let hls = null;
|
||
let retryTimer = 0;
|
||
let retryCount = 0;
|
||
const MAX_RETRIES = 6;
|
||
|
||
const clearRetry = () => { if (retryTimer) { clearTimeout(retryTimer); retryTimer = 0; } };
|
||
|
||
if (v.canPlayType('application/vnd.apple.mpegurl')) {
|
||
const tryLoad = () => {
|
||
if (destroyed) return;
|
||
v.removeAttribute('src');
|
||
v.load();
|
||
v.src = url;
|
||
v.play().catch(() => {});
|
||
};
|
||
v.addEventListener('playing', () => { if (!destroyed) { retryCount = 0; setReady(true); } });
|
||
v.addEventListener('error', () => {
|
||
if (destroyed || retryCount >= MAX_RETRIES) { setFailed(true); return; }
|
||
retryCount++;
|
||
clearRetry();
|
||
retryTimer = setTimeout(tryLoad, Math.min(1000 * retryCount, 8000));
|
||
});
|
||
tryLoad();
|
||
return () => { destroyed = true; clearRetry(); };
|
||
}
|
||
|
||
if (!window.Hls) { setFailed(true); return; }
|
||
|
||
const startHls = () => {
|
||
if (destroyed) return;
|
||
hls = new window.Hls({
|
||
liveSyncDurationCount: 2,
|
||
lowLatencyMode: true,
|
||
maxBufferLength: 10,
|
||
xhrSetup: (xhr) => { xhr.withCredentials = true; }
|
||
});
|
||
hls.loadSource(url);
|
||
hls.attachMedia(v);
|
||
hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
|
||
if (!destroyed) { retryCount = 0; setReady(true); v.play().catch(() => {}); }
|
||
});
|
||
hls.on(window.Hls.Events.ERROR, (_e, data) => {
|
||
if (!data.fatal) return;
|
||
try { hls.destroy(); } catch (_) {}
|
||
hls = null;
|
||
if (destroyed || retryCount >= MAX_RETRIES) { setFailed(true); return; }
|
||
retryCount++;
|
||
clearRetry();
|
||
retryTimer = setTimeout(startHls, Math.min(1000 * retryCount, 8000));
|
||
});
|
||
};
|
||
|
||
startHls();
|
||
return () => { destroyed = true; clearRetry(); if (hls) { try { hls.destroy(); } catch (_) {} } };
|
||
}, [assetId]);
|
||
|
||
return (
|
||
<div className="asset-thumb" style={{ aspectRatio: aspect, position: 'relative', background: '#000', overflow: 'hidden' }}>
|
||
<video
|
||
ref={videoRef}
|
||
muted
|
||
playsInline
|
||
autoPlay
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||
/>
|
||
{/* Pulsing red border while connecting or playing, matches LIVE badge colour */}
|
||
<div style={{ position: 'absolute', inset: 0, border: '2px solid var(--live)', pointerEvents: 'none', borderRadius: 'inherit' }} />
|
||
{!ready && !failed && (
|
||
<div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
|
||
alignItems: 'center', justifyContent: 'center', gap: 6,
|
||
background: 'rgba(0,0,0,0.55)', color: 'var(--text-3)', fontSize: 11 }}>
|
||
<Icon name="record" size={18} style={{ color: 'var(--live)', opacity: 0.9 }} />
|
||
<span>Connecting…</span>
|
||
</div>
|
||
)}
|
||
{failed && (
|
||
<div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
|
||
alignItems: 'center', justifyContent: 'center', gap: 6,
|
||
background: 'rgba(0,0,0,0.55)', color: 'var(--text-3)', fontSize: 11 }}>
|
||
<Icon name="record" size={18} style={{ color: 'var(--live)', opacity: 0.7 }} />
|
||
<span>Recording…</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FauxFrame({ seed }) {
|
||
return <div className="thumb-svg" style={{ background: 'var(--bg-1)' }} />;
|
||
}
|
||
|
||
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 (
|
||
<svg viewBox="0 0 60 20" preserveAspectRatio="none" className={'waveform ' + className}>
|
||
{pts.map((p, i) => (
|
||
<rect key={i} x={i} y={10 - p * 9} width="0.6" height={p * 18} fill={color} rx="0.3" />
|
||
))}
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function LiveStrip({ seed = 1, count = 8 }) {
|
||
return (
|
||
<div className="live-strip">
|
||
{Array.from({ length: count }).map((_, i) => (
|
||
<div key={i} className="live-strip-cell" style={{ background: 'var(--bg-1)' }} />
|
||
))}
|
||
<div className="live-strip-now"><span className="live-pulse" />NOW</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Sparkline({ data, color = 'var(--accent)', height = 28, fill = true }) {
|
||
const max = Math.max(...data, 1);
|
||
const min = Math.min(...data, 0);
|
||
const range = max - min || 1;
|
||
const w = 100;
|
||
const pts = data.map((d, i) => {
|
||
const x = (i / (data.length - 1)) * w;
|
||
const y = height - ((d - min) / range) * height;
|
||
return x + ',' + y;
|
||
}).join(' ');
|
||
const area = '0,' + height + ' ' + pts + ' ' + w + ',' + height;
|
||
return (
|
||
<svg viewBox={'0 0 ' + w + ' ' + height} preserveAspectRatio="none" style={{ width: '100%', height, display: 'block' }}>
|
||
{fill && <polygon points={area} fill={color} opacity="0.15" />}
|
||
<polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) {
|
||
const segs = 20;
|
||
return (
|
||
<div className={'audio-meter ' + (vertical ? 'v' : 'h')}>
|
||
{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 <div key={i} className="audio-seg" style={{ background: on ? color : 'var(--bg-3)', opacity: on ? 1 : 0.4 }} />;
|
||
})}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StatusDot({ status }) {
|
||
const map = {
|
||
online: { color: 'var(--success)', pulse: false },
|
||
recording: { color: 'var(--live)', pulse: true },
|
||
armed: { color: 'var(--accent)', pulse: false },
|
||
idle: { color: 'var(--text-4)', pulse: false },
|
||
error: { color: 'var(--danger)', pulse: true },
|
||
offline: { color: 'var(--text-4)', pulse: false },
|
||
processing: { color: 'var(--warning)', pulse: true },
|
||
ready: { color: 'var(--success)', pulse: false },
|
||
live: { color: 'var(--live)', pulse: true },
|
||
queued: { color: 'var(--text-3)', pulse: false },
|
||
running: { color: 'var(--accent)', pulse: true },
|
||
done: { color: 'var(--success)', pulse: false },
|
||
failed: { color: 'var(--danger)', pulse: false },
|
||
stopped: { color: 'var(--text-4)', pulse: false },
|
||
pending_migration: { color: 'var(--warning)', pulse: false },
|
||
};
|
||
const s = map[status] || { color: 'var(--text-3)' };
|
||
return <span className={'status-dot ' + (s.pulse ? 'pulse' : '')} style={{ background: s.color, boxShadow: '0 0 0 3px ' + s.color + '30' }} />;
|
||
}
|
||
|
||
function Elapsed({ seconds, live = false }) {
|
||
const [t, setT] = React.useState(seconds);
|
||
React.useEffect(() => {
|
||
if (!live) return;
|
||
const i = setInterval(() => setT(x => x + 1), 1000);
|
||
return () => clearInterval(i);
|
||
}, [live]);
|
||
const h = Math.floor(t / 3600);
|
||
const m = Math.floor((t % 3600) / 60);
|
||
const s = t % 60;
|
||
return <span className="mono">{String(h).padStart(2,'0')}:{String(m).padStart(2,'0')}:{String(s).padStart(2,'0')}</span>;
|
||
}
|
||
|
||
// ─────────────────────────────────────────────────────────────────────────
|
||
// 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<boolean>. 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 (
|
||
<div className="modal-backdrop" onClick={onCancel}>
|
||
<div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 440 }}>
|
||
<div className="modal-head">
|
||
<div style={{ fontSize: 15, fontWeight: 600 }}>{title}</div>
|
||
<button className="icon-btn" aria-label="Close" onClick={onCancel}><Icon name="x" /></button>
|
||
</div>
|
||
<div className="modal-body">
|
||
{typeof message === 'string'
|
||
? message.split('\n').map((line, i) => (
|
||
<div key={i} style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 }}>{line || ' '}</div>
|
||
))
|
||
: <div style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 }}>{message}</div>}
|
||
</div>
|
||
<div className="modal-foot">
|
||
<button className="btn ghost" onClick={onCancel}>{cancelLabel}</button>
|
||
<button className={danger ? 'btn danger' : 'btn primary'} onClick={onConfirm} autoFocus>{confirmLabel}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
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
|
||
? <ConfirmModal
|
||
{...state.opts}
|
||
onConfirm={() => close(true)}
|
||
onCancel={() => close(false)}
|
||
/>
|
||
: null;
|
||
|
||
return [confirm, modal];
|
||
}
|
||
|
||
Object.assign(window, { AssetThumb, FauxFrame, Waveform, LiveStrip, Sparkline, AudioMeter, StatusDot, Elapsed, ConfirmModal, useConfirm });
|