WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 32 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat(ui): wire screens to live API data; add thumbnail lazy-loading: visuals.jsx

Browse source
This commit is contained in:
Zac Gaetano 2026-05-22 10:04:23 -04:00
parent 7dda7cc89c
commit 3574ae8a43
1 changed files with 56 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
services/web-ui/public/visuals.jsx
View file

@ -1,32 +1,47 @@
// visuals.jsx - reusable visual elements: thumbnails, waveforms, sparklines, filmstrips // visuals.jsx - reusable visual elements
function AssetThumb({ asset, size = "md" }) { const _thumbCache = new Map();
const aspect = size === "tall" ? "9 / 16" : "16 / 9";
const seed = asset.seed || 1;
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 ( return (
<div className="asset-thumb audio" style={{ aspectRatio: aspect }}> <div className="asset-thumb audio" style={{ aspectRatio: aspect }}>
<Waveform seed={seed} /> <Waveform seed={asset.id ? asset.id.charCodeAt(0) % 60 : 1} />
<div className="thumb-overlay"> <div className="thumb-overlay"><Icon name="audio" size={20} style={{ opacity: 0.9 }} /></div>
<Icon name="audio" size={20} style={{ opacity: 0.9 }} />
</div>
</div> </div>
); );
} }
return ( return (
<div className="asset-thumb" style={{ background: "var(--bg-2)", aspectRatio: aspect }}> <div className="asset-thumb" style={{ background: 'var(--bg-2)', aspectRatio: aspect, overflow: 'hidden', position: 'relative' }}>
<FauxFrame seed={seed} /> {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> </div>
); );
} }
function FauxFrame({ seed }) { 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 bars = 60;
const pts = React.useMemo(() => { const pts = React.useMemo(() => {
return Array.from({ length: bars }).map((_, i) => { 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)); return Math.max(0.1, Math.min(1, 0.5 + n * 0.5));
}); });
}, [seed]); }, [seed]);
return ( 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) => ( {pts.map((p, i) => (
<rect key={i} x={i} y={10 - p * 9} width="0.6" height={p * 18} fill={color} rx="0.3" /> <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 ( return (
<div className="live-strip"> <div className="live-strip">
{Array.from({ length: count }).map((_, i) => ( {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"> <div className="live-strip-now"><span className="live-pulse" />NOW</div>
<span className="live-pulse" />
NOW
</div>
</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 max = Math.max(...data, 1);
const min = Math.min(...data, 0); const min = Math.min(...data, 0);
const range = max - min || 1; 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 pts = data.map((d, i) => {
const x = (i / (data.length - 1)) * w; const x = (i / (data.length - 1)) * w;
const y = height - ((d - min) / range) * height; const y = height - ((d - min) / range) * height;
return `${x},${y}`; return x + ',' + y;
}).join(" "); }).join(' ');
const area = `0,${height} ${pts} ${w},${height}`; const area = '0,' + height + ' ' + pts + ' ' + w + ',' + height;
return ( 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" />} {fill && <polygon points={area} fill={color} opacity="0.15" />}
<polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" /> <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" />
</svg> </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 }) { function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) {
const segs = 20; const segs = 20;
return ( return (
<div className={`audio-meter ${vertical ? "v" : "h"}`}> <div className={'audio-meter ' + (vertical ? 'v' : 'h')}>
{Array.from({ length: segs }).map((_, i) => { {Array.from({ length: segs }).map((_, i) => {
const v = i / segs; const v = i / segs;
const on = v < level; const on = v < level;
const color = v < 0.6 ? "var(--success)" : v < 0.85 ? "var(--warning)" : "var(--danger)"; 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 }} />; return <div key={i} className="audio-seg" style={{ background: on ? color : 'var(--bg-3)', opacity: on ? 1 : 0.4 }} />;
})} })}
</div> </div>
); );
@ -93,24 +104,23 @@ function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) {
function StatusDot({ status }) { function StatusDot({ status }) {
const map = { const map = {
online: { color: "var(--success)", pulse: false }, online: { color: 'var(--success)', pulse: false },
recording: { color: "var(--live)", pulse: true }, recording: { color: 'var(--live)', pulse: true },
armed: { color: "var(--accent)", pulse: false }, armed: { color: 'var(--accent)', pulse: false },
idle: { color: "var(--text-4)", pulse: false }, idle: { color: 'var(--text-4)', pulse: false },
error: { color: "var(--danger)", pulse: true }, error: { color: 'var(--danger)', pulse: true },
offline: { color: "var(--text-4)", pulse: false }, offline: { color: 'var(--text-4)', pulse: false },
processing: { color: "var(--warning)", pulse: true }, processing: { color: 'var(--warning)', pulse: true },
ready: { color: "var(--success)", pulse: false }, ready: { color: 'var(--success)', pulse: false },
live: { color: "var(--live)", pulse: true }, live: { color: 'var(--live)', pulse: true },
queued: { color: "var(--text-3)", pulse: false }, queued: { color: 'var(--text-3)', pulse: false },
running: { color: "var(--accent)", pulse: true }, running: { color: 'var(--accent)', pulse: true },
done: { color: "var(--success)", pulse: false }, done: { color: 'var(--success)', pulse: false },
failed: { color: "var(--danger)", pulse: false }, failed: { color: 'var(--danger)', pulse: false },
stopped: { color: 'var(--text-4)', pulse: false },
}; };
const s = map[status] || { color: "var(--text-3)" }; const s = map[status] || { color: 'var(--text-3)' };
return ( return <span className={'status-dot ' + (s.pulse ? 'pulse' : '')} style={{ background: s.color, boxShadow: '0 0 0 3px ' + s.color + '30' }} />;
<span className={`status-dot ${s.pulse ? "pulse" : ""}`} style={{ background: s.color, boxShadow: `0 0 0 3px ${s.color}30` }} />
);
} }
function Elapsed({ seconds, live = false }) { function Elapsed({ seconds, live = false }) {
@ -123,7 +133,7 @@ function Elapsed({ seconds, live = false }) {
const h = Math.floor(t / 3600); const h = Math.floor(t / 3600);
const m = Math.floor((t % 3600) / 60); const m = Math.floor((t % 3600) / 60);
const s = t % 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 }); Object.assign(window, { AssetThumb, FauxFrame, Waveform, LiveStrip, Sparkline, AudioMeter, StatusDot, Elapsed });