72 lines
2.8 KiB
JavaScript
72 lines
2.8 KiB
JavaScript
import { KvList } from "./KvList";
|
|
|
|
function formatNumber(value, digits = 3) {
|
|
return Number(value ?? 0).toFixed(digits);
|
|
}
|
|
|
|
export function StatusPanels({ app, performance, runtime, video }) {
|
|
const budgetUsedPercent = Math.max(0, Math.min(100, Number(performance.budgetUsedPercent) || 0));
|
|
|
|
return (
|
|
<>
|
|
<div className="panel panel--telemetry">
|
|
<div className="telemetry-header">
|
|
<h3>Status</h3>
|
|
<div className="status-badges" aria-label="Current status">
|
|
<span className={`mini-status${runtime.compileSucceeded ? " mini-status--ready" : " mini-status--error"}`}>
|
|
{runtime.compileSucceeded ? "Ready" : "Error"}
|
|
</span>
|
|
<span className={`mini-status${video.hasSignal ? " mini-status--ready" : " mini-status--error"}`}>
|
|
{video.hasSignal ? "Signal" : "No signal"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="telemetry-sections">
|
|
<section className="telemetry-section" aria-labelledby="runtime-status-heading">
|
|
<h4 id="runtime-status-heading">Runtime</h4>
|
|
<KvList
|
|
variant="rows"
|
|
values={[
|
|
["Layers", `${runtime.layerCount || 0}`],
|
|
["Auto reload", app.autoReload ? "On" : "Off"],
|
|
["Temporal cap", `${app.maxTemporalHistoryFrames ?? 0}`],
|
|
["Control URL", `127.0.0.1:${app.serverPort}`],
|
|
["Render", `${formatNumber(performance.renderMs, 2)} ms`],
|
|
["Smoothed", `${formatNumber(performance.smoothedRenderMs, 2)} ms`],
|
|
["Frame budget", `${formatNumber(performance.frameBudgetMs, 2)} ms`],
|
|
]}
|
|
/>
|
|
<div className="meter-row">
|
|
<span>Budget used</span>
|
|
<div className="progress-track" aria-hidden="true">
|
|
<div className="progress-bar" style={{ width: `${budgetUsedPercent}%` }} />
|
|
</div>
|
|
<strong>{formatNumber(performance.budgetUsedPercent, 1)}%</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="telemetry-section" aria-labelledby="video-status-heading">
|
|
<h4 id="video-status-heading">Video</h4>
|
|
<KvList
|
|
variant="rows"
|
|
values={[
|
|
["Input mode", video.modeName || "Unknown"],
|
|
["Input size", `${video.width || 0} x ${video.height || 0}`],
|
|
["Output", `${app.outputVideoFormat || "Unknown"}${app.outputFrameRate ? ` ${app.outputFrameRate}` : ""}`],
|
|
]}
|
|
/>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="panel panel--compiler">
|
|
<h3>Compiler</h3>
|
|
<pre className="log-panel" aria-live="polite">
|
|
{runtime.compileMessage || "No compiler output."}
|
|
</pre>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|