feat(ui): wire screens to live API data; add thumbnail lazy-loading: visuals.jsx
This commit is contained in:
parent
7dda7cc89c
commit
3574ae8a43
1 changed files with 56 additions and 46 deletions
|
|
@ -1,32 +1,47 @@
|
|||
// visuals.jsx - reusable visual elements: thumbnails, waveforms, sparklines, filmstrips
|
||||
// visuals.jsx - reusable visual elements
|
||||
|
||||
function AssetThumb({ asset, size = "md" }) {
|
||||
const aspect = size === "tall" ? "9 / 16" : "16 / 9";
|
||||
const seed = asset.seed || 1;
|
||||
const _thumbCache = new Map();
|
||||
|
||||
if (asset.type === "audio") {
|
||||
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('/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={seed} />
|
||||
<div className="thumb-overlay">
|
||||
<Icon name="audio" size={20} style={{ opacity: 0.9 }} />
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="asset-thumb" style={{ background: "var(--bg-2)", aspectRatio: aspect }}>
|
||||
<FauxFrame seed={seed} />
|
||||
<div className="asset-thumb" style={{ background: 'var(--bg-2)', aspectRatio: aspect, overflow: 'hidden', position: 'relative' }}>
|
||||
{thumbUrl
|
||||
? <img src={thumbUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||||
: <FauxFrame />}
|
||||
{asset.status === 'live' && (
|
||||
<div style={{ position: 'absolute', inset: 0, border: '2px solid var(--live)', pointerEvents: 'none' }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FauxFrame({ seed }) {
|
||||
return <div className="thumb-svg" style={{ background: "var(--bg-1)" }} />;
|
||||
return <div className="thumb-svg" style={{ background: 'var(--bg-1)' }} />;
|
||||
}
|
||||
|
||||
function Waveform({ seed = 1, color = "var(--accent)", className = "" }) {
|
||||
function Waveform({ seed = 1, color = 'var(--accent)', className = '' }) {
|
||||
const bars = 60;
|
||||
const pts = React.useMemo(() => {
|
||||
return Array.from({ length: bars }).map((_, i) => {
|
||||
|
|
@ -34,9 +49,8 @@ function Waveform({ seed = 1, color = "var(--accent)", className = "" }) {
|
|||
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}`}>
|
||||
<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" />
|
||||
))}
|
||||
|
|
@ -48,17 +62,14 @@ 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 key={i} className="live-strip-cell" style={{ background: 'var(--bg-1)' }} />
|
||||
))}
|
||||
<div className="live-strip-now">
|
||||
<span className="live-pulse" />
|
||||
NOW
|
||||
</div>
|
||||
<div className="live-strip-now"><span className="live-pulse" />NOW</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Sparkline({ data, color = "var(--accent)", height = 28, fill = true }) {
|
||||
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;
|
||||
|
|
@ -66,11 +77,11 @@ function Sparkline({ data, color = "var(--accent)", height = 28, fill = true })
|
|||
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 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" }}>
|
||||
<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>
|
||||
|
|
@ -80,12 +91,12 @@ function Sparkline({ data, color = "var(--accent)", height = 28, fill = true })
|
|||
function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) {
|
||||
const segs = 20;
|
||||
return (
|
||||
<div className={`audio-meter ${vertical ? "v" : "h"}`}>
|
||||
<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 }} />;
|
||||
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>
|
||||
);
|
||||
|
|
@ -93,24 +104,23 @@ function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) {
|
|||
|
||||
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 },
|
||||
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 },
|
||||
};
|
||||
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` }} />
|
||||
);
|
||||
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 }) {
|
||||
|
|
@ -123,7 +133,7 @@ function Elapsed({ seconds, live = false }) {
|
|||
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>;
|
||||
return <span className="mono">{String(h).padStart(2,'0')}:{String(m).padStart(2,'0')}:{String(s).padStart(2,'0')}</span>;
|
||||
}
|
||||
|
||||
Object.assign(window, { AssetThumb, FauxFrame, Waveform, LiveStrip, Sparkline, AudioMeter, StatusDot, Elapsed });
|
||||
|
|
|
|||
Loading…
Reference in a new issue