Files
audio-ui/types/track.ts
Sebastian Krüger 5d9e02fe95 feat: streamline track and master controls layout consistency
- Streamlined track controls and master controls to same width (240px)
- Fixed track controls container to use full width of parent column
- Matched TrackControls card structure with MasterControls (gap-3, no w-full/h-full)
- Updated outer container padding from p-2 to p-4 with gap-4
- Adjusted track controls wrapper to center content instead of stretching
- Added max-width constraint to PlaybackControls to prevent width changes
- Centered transport control buttons in footer

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 16:32:49 +01:00

77 lines
2.0 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
selectedParameterId?: string; // Currently selected parameter to display
};
// UI state
collapsed: boolean;
selected: boolean;
showEffects: boolean; // Show/hide per-track effects panel
effectsExpanded?: boolean; // Whether effects bar is expanded (when showEffects is true)
automationExpanded?: boolean; // Whether automation bar is expanded (shows full controls)
// 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 = 400; // Knob + fader with labels + R/S/M/A/E buttons
export const MIN_TRACK_HEIGHT = 400; // Minimum to fit knob + fader with labels + all buttons
export const MAX_TRACK_HEIGHT = 500; // Increased for better waveform viewing
export const COLLAPSED_TRACK_HEIGHT = 48; // Extracted constant for collapsed state