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:
92
components/controls/MasterControls.tsx
Normal file
92
components/controls/MasterControls.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
217
components/controls/MasterFader.tsx
Normal file
217
components/controls/MasterFader.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
|
||||
export interface MasterFaderProps {
|
||||
value: number;
|
||||
peakLevel: number;
|
||||
rmsLevel: number;
|
||||
isClipping: boolean;
|
||||
onChange: (value: number) => void;
|
||||
onResetClip?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function MasterFader({
|
||||
value,
|
||||
peakLevel,
|
||||
rmsLevel,
|
||||
isClipping,
|
||||
onChange,
|
||||
onResetClip,
|
||||
className,
|
||||
}: MasterFaderProps) {
|
||||
const [isDragging, setIsDragging] = React.useState(false);
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
// Convert linear 0-1 to dB scale for display
|
||||
const linearToDb = (linear: number): number => {
|
||||
if (linear === 0) return -60;
|
||||
const db = 20 * Math.log10(linear);
|
||||
return Math.max(-60, Math.min(0, db));
|
||||
};
|
||||
|
||||
const valueDb = linearToDb(value);
|
||||
const peakDb = linearToDb(peakLevel);
|
||||
const rmsDb = linearToDb(rmsLevel);
|
||||
|
||||
// Calculate bar widths (0-100%)
|
||||
const peakWidth = ((peakDb + 60) / 60) * 100;
|
||||
const rmsWidth = ((rmsDb + 60) / 60) * 100;
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
updateValue(e.clientY);
|
||||
};
|
||||
|
||||
const handleMouseMove = React.useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (!isDragging) return;
|
||||
updateValue(e.clientY);
|
||||
},
|
||||
[isDragging]
|
||||
);
|
||||
|
||||
const handleMouseUp = React.useCallback(() => {
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const updateValue = (clientY: number) => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const y = clientY - rect.top;
|
||||
// Inverted: top = max (1), bottom = min (0)
|
||||
const percentage = Math.max(0, Math.min(1, 1 - (y / rect.height)));
|
||||
onChange(percentage);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isDragging) {
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}
|
||||
}, [isDragging, handleMouseMove, handleMouseUp]);
|
||||
|
||||
return (
|
||||
<div className={cn('flex gap-3', className)}>
|
||||
{/* dB Labels (Left) */}
|
||||
<div className="flex flex-col justify-between text-[10px] font-mono text-muted-foreground py-1">
|
||||
<span>0</span>
|
||||
<span>-12</span>
|
||||
<span>-24</span>
|
||||
<span>-60</span>
|
||||
</div>
|
||||
|
||||
{/* Fader Container */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative w-12 h-40 bg-background/50 rounded-md border border-border/50 cursor-pointer"
|
||||
onMouseDown={handleMouseDown}
|
||||
>
|
||||
{/* Peak Meter (Horizontal Bar - Top) */}
|
||||
<div className="absolute inset-x-2 top-2 h-3 bg-background/80 rounded-sm overflow-hidden border border-border/30">
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 transition-all duration-75 ease-out"
|
||||
style={{ width: `${Math.max(0, Math.min(100, peakWidth))}%` }}
|
||||
>
|
||||
<div className={cn(
|
||||
'w-full h-full',
|
||||
peakDb > -3 ? 'bg-red-500' :
|
||||
peakDb > -6 ? 'bg-yellow-500' :
|
||||
'bg-green-500'
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RMS Meter (Horizontal Bar - Bottom) */}
|
||||
<div className="absolute inset-x-2 bottom-2 h-3 bg-background/80 rounded-sm overflow-hidden border border-border/30">
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 transition-all duration-150 ease-out"
|
||||
style={{ width: `${Math.max(0, Math.min(100, rmsWidth))}%` }}
|
||||
>
|
||||
<div className={cn(
|
||||
'w-full h-full',
|
||||
rmsDb > -3 ? 'bg-red-400' :
|
||||
rmsDb > -6 ? 'bg-yellow-400' :
|
||||
'bg-green-400'
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fader Track */}
|
||||
<div className="absolute top-8 bottom-8 left-1/2 -translate-x-1/2 w-1.5 bg-muted/50 rounded-full" />
|
||||
|
||||
{/* Fader Handle */}
|
||||
<div
|
||||
className="absolute left-1/2 -translate-x-1/2 w-10 h-4 bg-primary/80 border-2 border-primary rounded-md shadow-lg cursor-grab active:cursor-grabbing pointer-events-none transition-all"
|
||||
style={{
|
||||
// Inverted: value 1 = top, value 0 = bottom
|
||||
top: `calc(${(1 - value) * 100}% - 0.5rem)`,
|
||||
}}
|
||||
>
|
||||
{/* Handle grip lines */}
|
||||
<div className="absolute inset-0 flex items-center justify-center gap-0.5">
|
||||
<div className="h-2 w-px bg-primary-foreground/30" />
|
||||
<div className="h-2 w-px bg-primary-foreground/30" />
|
||||
<div className="h-2 w-px bg-primary-foreground/30" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Clip Indicator */}
|
||||
{isClipping && (
|
||||
<button
|
||||
onClick={onResetClip}
|
||||
className="absolute top-0 left-0 right-0 px-1 py-0.5 text-[9px] font-bold text-white bg-red-500 border-b border-red-600 rounded-t-md shadow-lg shadow-red-500/50 animate-pulse"
|
||||
title="Click to reset clip indicator"
|
||||
>
|
||||
CLIP
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* dB Scale Markers */}
|
||||
<div className="absolute inset-0 px-2 py-8 pointer-events-none">
|
||||
<div className="relative h-full">
|
||||
{/* -12 dB */}
|
||||
<div className="absolute left-0 right-0 h-px bg-border/20" style={{ top: '50%' }} />
|
||||
{/* -6 dB */}
|
||||
<div className="absolute left-0 right-0 h-px bg-yellow-500/20" style={{ top: '20%' }} />
|
||||
{/* -3 dB */}
|
||||
<div className="absolute left-0 right-0 h-px bg-red-500/30" style={{ top: '10%' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Value and Level Display (Right) */}
|
||||
<div className="flex flex-col justify-between items-start text-[9px] font-mono py-1">
|
||||
{/* Current dB Value */}
|
||||
<div className={cn(
|
||||
'font-bold text-[11px]',
|
||||
valueDb > -3 ? 'text-red-500' :
|
||||
valueDb > -6 ? 'text-yellow-500' :
|
||||
'text-green-500'
|
||||
)}>
|
||||
{valueDb > -60 ? `${valueDb.toFixed(1)}` : '-∞'}
|
||||
</div>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Peak Level */}
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-muted-foreground/60">PK</span>
|
||||
<span className={cn(
|
||||
'font-mono text-[10px]',
|
||||
peakDb > -3 ? 'text-red-500' :
|
||||
peakDb > -6 ? 'text-yellow-500' :
|
||||
'text-green-500'
|
||||
)}>
|
||||
{peakDb > -60 ? `${peakDb.toFixed(1)}` : '-∞'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* RMS Level */}
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-muted-foreground/60">RM</span>
|
||||
<span className={cn(
|
||||
'font-mono text-[10px]',
|
||||
rmsDb > -3 ? 'text-red-400' :
|
||||
rmsDb > -6 ? 'text-yellow-400' :
|
||||
'text-green-400'
|
||||
)}>
|
||||
{rmsDb > -60 ? `${rmsDb.toFixed(1)}` : '-∞'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* dB Label */}
|
||||
<span className="text-muted-foreground/60 text-[8px]">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user