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

feat: enhance track controls and improve master fader layout

Browse Source 
- Integrated all R/S/A/E buttons into TrackControls component
- Removed duplicate button sections from Track component
- Updated CircularKnob pan visualization to show no arc at center position
- Arc now extends from center to value for directional indication
- Moved MasterControls to dedicated right sidebar
- Removed master controls from PlaybackControls footer
- Optimized TrackControls spacing (gap-1.5, smaller buttons)
- Cleaner separation between transport and master control sections

🤖 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-19 00:22:52 +01:00
parent 441920ee70
commit 8ec3505581
5 changed files with 178 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
components/tracks/Track.tsx
View File

@@ -646,97 +646,40 @@ export function Track({
{/* Track Controls - Only show when not collapsed */}
{!track.collapsed && (
<div className="flex-1 flex flex-col items-center justify-between min-h-0 overflow-hidden">
{/* Integrated Track Controls (Pan + Fader + Mute) */}
{/* Integrated Track Controls (Pan + Fader + Buttons) */}
<TrackControls
volume={track.volume}
pan={track.pan}
peakLevel={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
rmsLevel={track.recordEnabled || isRecording ? recordingLevel * 0.7 : playbackLevel * 0.7}
isMuted={track.mute}
isSolo={track.solo}
isRecordEnabled={track.recordEnabled}
showAutomation={track.automation?.showAutomation}
isRecording={isRecording}
onVolumeChange={onVolumeChange}
onPanChange={onPanChange}
onMuteToggle={onToggleMute}
onSoloToggle={onToggleSolo}
onRecordToggle={onToggleRecordEnable}
onAutomationToggle={() => {
onUpdateTrack(track.id, {
automation: {
...track.automation,
showAutomation: !track.automation?.showAutomation,
},
});
}}
onEffectsClick={() => {
onUpdateTrack(track.id, {
showEffects: !track.showEffects,
});
}}
onVolumeTouchStart={handleVolumeTouchStart}
onVolumeTouchEnd={handleVolumeTouchEnd}
onPanTouchStart={handlePanTouchStart}
onPanTouchEnd={handlePanTouchEnd}
/>
{/* Inline Button Row - Below controls */}
<div className="flex-shrink-0 w-full">
{/* R/S/A inline row with icons */}
<div className="flex items-center gap-1 justify-center">
{/* Record Arm */}
{onToggleRecordEnable && (
<button
onClick={onToggleRecordEnable}
className={cn(
'h-6 w-6 rounded flex items-center justify-center transition-all',
track.recordEnabled
? 'bg-red-500 text-white shadow-md shadow-red-500/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
isRecording && 'animate-pulse'
)}
title="Arm track for recording"
>
<Circle className="h-3 w-3 fill-current" />
</button>
)}
{/* Solo Button */}
<button
onClick={onToggleSolo}
className={cn(
'h-6 w-6 rounded flex items-center justify-center transition-all',
track.solo
? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
)}
title="Solo track"
>
<Headphones className="h-3 w-3" />
</button>
{/* Automation Toggle */}
<button
onClick={() => {
onUpdateTrack(track.id, {
automation: {
...track.automation,
showAutomation: !track.automation?.showAutomation,
},
});
}}
className={cn(
'h-6 w-6 rounded flex items-center justify-center transition-all text-[10px] font-bold',
track.automation?.showAutomation
? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
)}
title={track.automation?.showAutomation ? 'Hide automation' : 'Show automation'}
>
A
</button>
{/* Effects Toggle */}
<button
onClick={() => {
onUpdateTrack(track.id, {
showEffects: !track.showEffects,
});
}}
className={cn(
'h-6 w-6 rounded flex items-center justify-center transition-all',
track.showEffects
? 'bg-primary text-primary-foreground shadow-md shadow-primary/30'
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
)}
title={track.showEffects ? 'Hide effects' : 'Show effects'}
>
<Sparkles className="h-3 w-3" />
</button>
</div>
</div>
</div>
)}
</div>