aiden/video-shader-toys
1
0
Fork 1
Code Issues Pull Requests Actions Releases 5 Wiki Activity

UI updates and preroll buffer to 8 frames
Some checks failed
CI / Native Windows Build And Tests (push) Has been cancelled
Details
CI / React UI Build (push) Has been cancelled
Details
CI / Windows Release Package (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Aiden
2026-05-05 20:56:53 +10:00
parent 44316b29c2
commit be315111ea
9 changed files with 763 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
ui/src/components/StatusPanels.jsx
View File

@@ -5,40 +5,66 @@ function formatNumber(value, digits = 3) {
}
export function StatusPanels({ app, performance, runtime, video }) {
const budgetUsedPercent = Math.max(0, Math.min(100, Number(performance.budgetUsedPercent) || 0));
return (
<>
<div className="panel panel--runtime">
<h2>Runtime</h2>
<KvList
values={[
["Layer Count", `${runtime.layerCount || 0}`],
["Auto Reload", app.autoReload ? "On" : "Off"],
["Temporal Cap", `${app.maxTemporalHistoryFrames ?? 0}`],
["Control URL", `http://127.0.0.1:${app.serverPort}`],
["Compile Status", runtime.compileSucceeded ? "Ready" : "Error"],
["Render Time", `${formatNumber(performance.renderMs, 2)} ms`],
["Smoothed Time", `${formatNumber(performance.smoothedRenderMs, 2)} ms`],
["Frame Budget", `${formatNumber(performance.frameBudgetMs, 2)} ms`],
["Budget Used", `${formatNumber(performance.budgetUsedPercent, 1)}%`],
]}
/>
</div>
<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="panel panel--video">
<h2>Video</h2>
<KvList
values={[
["Signal", video.hasSignal ? "Present" : "Missing"],
["Input Mode", video.modeName || "Unknown"],
["Input Resolution", `${video.width || 0} x ${video.height || 0}`],
["Output Mode", `${app.outputVideoFormat || "Unknown"}${app.outputFrameRate ? ` ${app.outputFrameRate}` : ""}`],
]}
/>
<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">
<h2>Compiler</h2>
<pre>{runtime.compileMessage || "No compiler output."}</pre>
<h3>Compiler</h3>
<pre className="log-panel" aria-live="polite">
{runtime.compileMessage || "No compiler output."}
</pre>
</div>
</>
);