feat(frontend): добавлены виджеты Текущая частота и Форма волны

This commit is contained in:
2025-12-29 00:46:36 +03:00
parent f8edaa0aaf
commit 799a11b86d
8 changed files with 367 additions and 20 deletions

View File

@@ -45,7 +45,7 @@ export function AudioMeter({ rmsDb, peakHoldDb3s }: Props) {
return (
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-base">Audio meter</CardTitle>
<CardTitle className="text-base">Аудио измеритель</CardTitle>
</CardHeader>
<CardContent className="flex items-center gap-4">
@@ -53,7 +53,7 @@ export function AudioMeter({ rmsDb, peakHoldDb3s }: Props) {
<div className="flex items-stretch gap-3">
{/* ticks */}
<div className="flex flex-col justify-between text-xs text-muted-foreground h-56 select-none">
<div>0 dB</div>
<div>0 дБ</div>
<div>-10</div>
<div>-20</div>
<div>-30</div>
@@ -78,13 +78,13 @@ export function AudioMeter({ rmsDb, peakHoldDb3s }: Props) {
{/* Values */}
<div className="min-w-40">
<div className="text-sm text-muted-foreground">Current</div>
<div className="text-sm text-muted-foreground">Сейчас</div>
<div className="text-2xl font-semibold tabular-nums">
{rmsDb === null ? "—" : `${rmsDb.toFixed(1)} dB`}
</div>
<div className="mt-3 text-sm text-muted-foreground">
Peak hold (3s)
Пик (3с)
</div>
<div className="text-lg font-medium tabular-nums">
{peakHoldDb3s === null ? "—" : `${peakHoldDb3s.toFixed(1)} dB`}