75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { useLiveStreamStore } from "../../../features/liveStream/model/liveStream.store";
|
|
import { WsStatusBadge } from "../../../features/liveStream/ui/WsStatusBadge";
|
|
import { AudioMeter } from "./AudioMeter";
|
|
import { FrequencyHistoryChart } from "./FrequencyHistoryChart";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../../shared/ui/card";
|
|
import { freqToNote } from "../../../entities/audioSample/lib/note";
|
|
import { formatTimeHHMMSS, isStale } from "../../../shared/lib/time";
|
|
|
|
export function AudioLiveWidget() {
|
|
const status = useLiveStreamStore((s) => s.status);
|
|
const latest = useLiveStreamStore((s) => s.latest);
|
|
const history60s = useLiveStreamStore((s) => s.history60s);
|
|
const peakHoldDb3s = useLiveStreamStore((s) => s.peakHoldDb3s);
|
|
const lastMessageAt = useLiveStreamStore((s) => s.lastMessageAt);
|
|
|
|
const stale = isStale(lastMessageAt, 1500);
|
|
|
|
const note = latest ? freqToNote(latest.freq_hz) : "--";
|
|
|
|
return (
|
|
<div className="grid gap-4 lg:grid-cols-3">
|
|
<div className="lg:col-span-1">
|
|
<AudioMeter
|
|
rmsDb={latest?.rms_db ?? null}
|
|
peakHoldDb3s={peakHoldDb3s}
|
|
/>
|
|
</div>
|
|
|
|
<div className="lg:col-span-2 grid gap-4">
|
|
<Card>
|
|
<CardHeader className="pb-2 flex flex-row items-center justify-between gap-3">
|
|
<CardTitle className="text-base">Live status</CardTitle>
|
|
<WsStatusBadge status={status} />
|
|
</CardHeader>
|
|
<CardContent className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">Last update</div>
|
|
<div className="text-lg font-medium tabular-nums">
|
|
{lastMessageAt ? formatTimeHHMMSS(lastMessageAt) : "—"}
|
|
<span
|
|
className={`ml-2 text-xs ${stale ? "text-rose-600" : "text-emerald-600"}`}
|
|
>
|
|
{stale ? "stale" : "ok"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">Frequency</div>
|
|
<div className="text-lg font-medium tabular-nums">
|
|
{latest ? `${latest.freq_hz.toFixed(0)} Hz` : "—"}{" "}
|
|
<span className="text-muted-foreground">({note})</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-sm text-muted-foreground">RMS</div>
|
|
<div className="text-lg font-medium tabular-nums">
|
|
{latest ? `${latest.rms_db.toFixed(1)} dB` : "—"}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<FrequencyHistoryChart history={history60s} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|