feat: redesign track and master controls with integrated fader+meters+pan
Unified design language across all tracks and master section: - Created TrackFader component: vertical fader with horizontal meter bars - Created TrackControls: integrated pan + fader + mute in compact layout - Created MasterFader: similar design but larger for master output - Created MasterControls: master version with pan + fader + mute - Updated Track component to use new TrackControls - Updated PlaybackControls to use new MasterControls - Removed old VerticalFader and separate meter components New features: - Horizontal peak/RMS meter bars behind fader (top=peak, bottom=RMS) - Color-coded meters (green/yellow/red based on dB levels) - dB scale labels and numeric readouts - Integrated mute button in controls - Consistent circular pan knobs - Professional DAW-style channel strip appearance - Master section includes clip indicator Visual improvements: - Unified design across all tracks and master - Compact vertical layout saves space - Real-time level monitoring integrated with volume control - Smooth animations and transitions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -35,6 +35,8 @@ export function AudioEditor() {
|
||||
const [selectedTrackId, setSelectedTrackId] = React.useState<string | null>(null);
|
||||
const [zoom, setZoom] = React.useState(1);
|
||||
const [masterVolume, setMasterVolume] = React.useState(0.8);
|
||||
const [masterPan, setMasterPan] = React.useState(0);
|
||||
const [isMasterMuted, setIsMasterMuted] = React.useState(false);
|
||||
const [clipboard, setClipboard] = React.useState<AudioBuffer | null>(null);
|
||||
const [recordingTrackId, setRecordingTrackId] = React.useState<string | null>(null);
|
||||
const [punchInEnabled, setPunchInEnabled] = React.useState(false);
|
||||
@@ -1042,11 +1044,22 @@ export function AudioEditor() {
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
volume={masterVolume}
|
||||
pan={masterPan}
|
||||
onPlay={play}
|
||||
onPause={pause}
|
||||
onStop={stop}
|
||||
onSeek={seek}
|
||||
onVolumeChange={setMasterVolume}
|
||||
onPanChange={setMasterPan}
|
||||
onMuteToggle={() => {
|
||||
if (isMasterMuted) {
|
||||
setMasterVolume(0.8);
|
||||
setIsMasterMuted(false);
|
||||
} else {
|
||||
setMasterVolume(0);
|
||||
setIsMasterMuted(true);
|
||||
}
|
||||
}}
|
||||
currentTimeFormatted={formatDuration(currentTime)}
|
||||
durationFormatted={formatDuration(duration)}
|
||||
isRecording={recordingState.isRecording}
|
||||
|
||||
Reference in New Issue
Block a user