129 lines
4.5 KiB
JavaScript
129 lines
4.5 KiB
JavaScript
// visuals.jsx - reusable visual elements: thumbnails, waveforms, sparklines, filmstrips
|
|
|
|
function AssetThumb({ asset, size = "md" }) {
|
|
const aspect = size === "tall" ? "9 / 16" : "16 / 9";
|
|
const seed = asset.seed || 1;
|
|
|
|
if (asset.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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="asset-thumb" style={{ background: "var(--bg-2)", aspectRatio: aspect }}>
|
|
<FauxFrame seed={seed} />
|
|
</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 },
|
|
};
|
|
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>;
|
|
}
|
|
|
|
Object.assign(window, { AssetThumb, FauxFrame, Waveform, LiveStrip, Sparkline, AudioMeter, StatusDot, Elapsed });
|