Sebastian Krüger
441920ee70
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>
93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Volume2, VolumeX } from 'lucide-react';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { CircularKnob } from '@/components/ui/CircularKnob';
|
|
import { MasterFader } from './MasterFader';
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
export interface MasterControlsProps {
|
|
volume: number;
|
|
pan: number;
|
|
peakLevel: number;
|
|
rmsLevel: number;
|
|
isClipping: boolean;
|
|
isMuted?: boolean;
|
|
onVolumeChange: (volume: number) => void;
|
|
onPanChange: (pan: number) => void;
|
|
onMuteToggle: () => void;
|
|
onResetClip?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function MasterControls({
|
|
volume,
|
|
pan,
|
|
peakLevel,
|
|
rmsLevel,
|
|
isClipping,
|
|
isMuted = false,
|
|
onVolumeChange,
|
|
onPanChange,
|
|
onMuteToggle,
|
|
onResetClip,
|
|
className,
|
|
}: MasterControlsProps) {
|
|
return (
|
|
<div className={cn(
|
|
'flex flex-col items-center gap-3 px-4 py-3 bg-muted/10 border-2 border-accent/30 rounded-lg',
|
|
className
|
|
)}>
|
|
{/* Master Label */}
|
|
<div className="text-[10px] font-bold text-accent uppercase tracking-wider">
|
|
Master
|
|
</div>
|
|
|
|
{/* Pan Control */}
|
|
<CircularKnob
|
|
value={pan}
|
|
onChange={onPanChange}
|
|
min={-1}
|
|
max={1}
|
|
step={0.01}
|
|
label="PAN"
|
|
size={48}
|
|
formatter={(value) => {
|
|
if (Math.abs(value) < 0.01) return 'C';
|
|
if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
|
|
return `${(value * 100).toFixed(0)}R`;
|
|
}}
|
|
/>
|
|
|
|
{/* Master Fader with Integrated Meters */}
|
|
<MasterFader
|
|
value={volume}
|
|
peakLevel={peakLevel}
|
|
rmsLevel={rmsLevel}
|
|
isClipping={isClipping}
|
|
onChange={onVolumeChange}
|
|
onResetClip={onResetClip}
|
|
/>
|
|
|
|
{/* Mute Button */}
|
|
<Button
|
|
variant={isMuted ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={onMuteToggle}
|
|
title={isMuted ? 'Unmute' : 'Mute'}
|
|
className={cn(
|
|
'w-full h-8',
|
|
isMuted && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50'
|
|
)}
|
|
>
|
|
{isMuted ? (
|
|
<VolumeX className="h-4 w-4" />
|
|
) : (
|
|
<Volume2 className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|