Sebastian Krüger
ecf7f060ec
Track height & spacing improvements: - Increased DEFAULT_TRACK_HEIGHT from 180px to 240px for vertical controls - Increased MIN_TRACK_HEIGHT from 60px to 120px - Increased MAX_TRACK_HEIGHT from 300px to 400px - Added COLLAPSED_TRACK_HEIGHT constant (48px) - Reduced control panel gap from 8px to 6px for tighter spacing - Added min-h-0 and overflow-hidden to prevent flex overflow - Optimized fader container with max-h-[140px] constraint Clip-style waveform visualization (Ableton-like): - Wrapped waveform canvas in visible "clip" container - Added border, rounded corners, and shadow for clip identity - Added 16px clip header bar showing track name - Implemented hover state for better interactivity - Added gradient background from-foreground/5 to-transparent Track height resize functionality: - Added draggable bottom-edge resize handle - Implemented cursor-ns-resize with hover feedback - Constrain resizing to MIN/MAX height range - Real-time height updates with smooth visual feedback - Active state highlighting during resize Effects section visual integration: - Changed from solid background to gradient (from-muted/80 to-muted/60) - Reduced device rack height from 192px to 176px for better proportion - Improved visual hierarchy and connection to track row Flexible VerticalFader component: - Changed from fixed h-32 (128px) to flex-1 layout - Added min-h-[80px] and max-h-[140px] constraints - Allows parent container to control actual height - Maintains readability and proportions at all sizes CSS enhancements (globals.css): - Added .track-clip-container utility class - Added .track-clip-header utility class - Theme-aware clip styling for light/dark modes - OKLCH color space for consistent appearance Visual results: - Professional DAW appearance matching Ableton Live - Clear clip/region boundaries for audio editing - Better proportions for vertical controls (240px tracks) - Resizable track heights (120-400px range) - Improved visual hierarchy and organization Files modified: - types/track.ts (height constants) - components/tracks/Track.tsx (layout + clip styling + resize) - components/ui/VerticalFader.tsx (flexible height) - app/globals.css (clip styling) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
/**
|
|
* Multi-track types and interfaces
|
|
*/
|
|
|
|
import type { EffectChain } from '@/lib/audio/effects/chain';
|
|
import type { Selection } from './selection';
|
|
import type { AutomationLane } from './automation';
|
|
|
|
export interface Track {
|
|
id: string;
|
|
name: string;
|
|
color: string;
|
|
height: number;
|
|
audioBuffer: AudioBuffer | null;
|
|
|
|
// Track controls
|
|
volume: number; // 0-1
|
|
pan: number; // -1 (left) to 1 (right)
|
|
mute: boolean;
|
|
solo: boolean;
|
|
recordEnabled: boolean;
|
|
|
|
// Effects
|
|
effectChain: EffectChain;
|
|
|
|
// Automation
|
|
automation: {
|
|
lanes: AutomationLane[];
|
|
showAutomation: boolean; // Master show/hide toggle
|
|
};
|
|
|
|
// UI state
|
|
collapsed: boolean;
|
|
selected: boolean;
|
|
|
|
// Selection (for editing operations)
|
|
selection: Selection | null;
|
|
}
|
|
|
|
export interface TrackState {
|
|
tracks: Track[];
|
|
selectedTrackId: string | null;
|
|
soloedTracks: Set<string>;
|
|
}
|
|
|
|
export type TrackColor =
|
|
| 'red'
|
|
| 'orange'
|
|
| 'yellow'
|
|
| 'green'
|
|
| 'blue'
|
|
| 'indigo'
|
|
| 'purple'
|
|
| 'pink'
|
|
| 'gray';
|
|
|
|
export const TRACK_COLORS: Record<TrackColor, string> = {
|
|
red: 'rgb(239, 68, 68)',
|
|
orange: 'rgb(249, 115, 22)',
|
|
yellow: 'rgb(234, 179, 8)',
|
|
green: 'rgb(34, 197, 94)',
|
|
blue: 'rgb(59, 130, 246)',
|
|
indigo: 'rgb(99, 102, 241)',
|
|
purple: 'rgb(168, 85, 247)',
|
|
pink: 'rgb(236, 72, 153)',
|
|
gray: 'rgb(156, 163, 175)',
|
|
};
|
|
|
|
export const DEFAULT_TRACK_HEIGHT = 240; // Increased from 180 to accommodate vertical controls
|
|
export const MIN_TRACK_HEIGHT = 120; // Increased from 60 for vertical fader/knob layout
|
|
export const MAX_TRACK_HEIGHT = 400; // Increased from 300 for better waveform viewing
|
|
export const COLLAPSED_TRACK_HEIGHT = 48; // Extracted constant for collapsed state
|