feat: display dB values and use gauge icon for level meters
Changed level meter display to show professional dB values instead of percentages, and replaced volume icon with gauge icon. Display Changes: - Show dB values (-60 to 0) instead of percentage (0-100%) - Use monospace font for consistent digit alignment - Show "-∞" for silence (level = 0) instead of "-60" - Rounded to nearest integer dB (no decimals for cleaner display) Icon Updates: - Replaced Volume2 icon with Gauge icon for playback levels - Kept Mic icon for recording input levels - Gauge better represents metering/measurement vs audio control dB Conversion: - Formula: dB = (normalized * 60) - 60 - Reverse of: normalized = (dB + 60) / 60 - Range: -60dB (silence) to 0dB (full scale) Display Examples: 0.00 (0%) = -∞ (silence) 0.17 (17%) = -50dB (very quiet) 0.50 (50%) = -30dB (moderate) 0.83 (83%) = -10dB (loud) 1.00 (100%) = 0dB (full scale) Benefits: ✅ Professional dB notation matching industry standards ✅ Clearer for audio engineers and musicians ✅ Easier to identify levels relative to 0dBFS ✅ Gauge icon better conveys "measurement" ✅ Monospace font prevents number jumping Now meters show "-18" instead of "70%" making it immediately clear where you are in the dynamic range. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, CircleArrowOutUpRight, Upload, Plus, Mic } from 'lucide-react';
|
||||
import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, CircleArrowOutUpRight, Upload, Plus, Mic, Gauge } from 'lucide-react';
|
||||
import type { Track as TrackType } from '@/types/track';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Slider } from '@/components/ui/Slider';
|
||||
@@ -559,7 +559,7 @@ export function Track({
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Volume2 className="h-3 w-3" />
|
||||
<Gauge className="h-3 w-3" />
|
||||
Level
|
||||
</>
|
||||
)}
|
||||
@@ -570,8 +570,14 @@ export function Track({
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
|
||||
{Math.round((track.recordEnabled || isRecording ? recordingLevel : playbackLevel) * 100)}%
|
||||
<span className="text-xs text-muted-foreground w-12 text-right flex-shrink-0 font-mono">
|
||||
{(() => {
|
||||
const level = track.recordEnabled || isRecording ? recordingLevel : playbackLevel;
|
||||
// Convert normalized (0-1) back to dB
|
||||
// normalized = (dB - (-60)) / 60, so dB = (normalized * 60) - 60
|
||||
const db = (level * 60) - 60;
|
||||
return level === 0 ? '-∞' : `${db.toFixed(0)}`;
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user