valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: always show level meter and increase track height to 180px

Browse Source 
Fixed layout issues with the level meter:

Track Height:
- Increased DEFAULT_TRACK_HEIGHT from 150px to 180px
- Ensures enough vertical space for all controls without clipping

Level Meter Display:
- Now always visible (not conditional on recording state)
- Shows "Input" with mic icon when track is armed or recording
- Shows "Level" with volume icon when not recording
- Displays appropriate level based on state

This prevents the meter from being cut off and provides consistent
visual feedback for all tracks. Future enhancement: show actual
playback output levels when not recording.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-18 14:51:26 +01:00
parent 2775fdb517
commit fa397a1dfe
2 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/tracks/Track.tsx
View File

@@ -547,21 +547,31 @@ export function Track({
</span> </span>
</div> </div>
{/* Input Level Meter (shown when recording or record-enabled) */} {/* Level Meter (shows input when recording, output level otherwise) */}
{(track.recordEnabled || isRecording) && ( <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0">
<label className="text-xs text-muted-foreground flex items-center gap-1 w-16 flex-shrink-0"> {track.recordEnabled || isRecording ? (
<Mic className="h-3 w-3" /> <>
Input <Mic className="h-3 w-3" />
</label> Input
<div className="flex-1"> </>
<InputLevelMeter level={recordingLevel} orientation="horizontal" /> ) : (
</div> <>
<span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0"> <Volume2 className="h-3 w-3" />
{Math.round(recordingLevel * 100)}% Level
</span> </>
)}
</label>
<div className="flex-1">
<InputLevelMeter
level={track.recordEnabled || isRecording ? recordingLevel : 0}
orientation="horizontal"
/>
</div> </div>
)} <span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
{Math.round((track.recordEnabled || isRecording ? recordingLevel : 0) * 100)}%
</span>
</div>
</> </>
)} )}
</div> </div>

2
types/track.ts
View File

@@ -59,6 +59,6 @@ export const TRACK_COLORS: Record<TrackColor, string> = {
gray: 'rgb(156, 163, 175)', gray: 'rgb(156, 163, 175)',
}; };
export const DEFAULT_TRACK_HEIGHT = 150; export const DEFAULT_TRACK_HEIGHT = 180;
export const MIN_TRACK_HEIGHT = 60; export const MIN_TRACK_HEIGHT = 60;
export const MAX_TRACK_HEIGHT = 300; export const MAX_TRACK_HEIGHT = 300;