Sebastian Krüger
f640f2f9d4
Architecture: - Each track now has its own effect chain stored in track.effectChain - Separate master effect chain for the final mix output - SidePanel has 3 tabs: Tracks, Track FX, Master FX Changes: - types/track.ts: Add effectChain field to Track interface - lib/audio/track-utils.ts: Initialize effect chain when creating tracks - lib/hooks/useMultiTrack.ts: Exclude effectChain from localStorage, recreate on load - components/editor/AudioEditor.tsx: - Add master effect chain state using useEffectChain hook - Add handlers for per-track effect chain manipulation - Pass both track and master effect chains to SidePanel - components/layout/SidePanel.tsx: - Update to 3-tab interface (Tracks | Track FX | Master FX) - Track FX tab shows effects for currently selected track - Master FX tab shows master bus effects with preset management - Different icons for track vs master effects tabs Note: Effect processing in Web Audio API not yet implemented. This commit sets up the data structures and UI. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
61 lines
1.1 KiB
TypeScript
61 lines
1.1 KiB
TypeScript
/**
|
|
* Multi-track types and interfaces
|
|
*/
|
|
|
|
import type { EffectChain } from '@/lib/audio/effects/chain';
|
|
|
|
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;
|
|
|
|
// UI state
|
|
collapsed: boolean;
|
|
selected: boolean;
|
|
}
|
|
|
|
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 = 120;
|
|
export const MIN_TRACK_HEIGHT = 60;
|
|
export const MAX_TRACK_HEIGHT = 300;
|