317 lines
12 KiB
JavaScript
317 lines
12 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>
|
|
);
|
|
}
|
|
|
|
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 />}
|
|
<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') {
|
|
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>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
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 });
|
|
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' }}
|
|
/>
|
|
<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>;
|
|
}
|
|
|
|
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);
|
|
|
|
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 });
|