feat: implement per-track and master effect chains (Option 3)
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>
This commit is contained in:
@@ -28,16 +28,23 @@ export interface SidePanelProps {
|
||||
onRemoveTrack: (trackId: string) => void;
|
||||
onClearTracks: () => void;
|
||||
|
||||
// Effect chain
|
||||
effectChain: EffectChain;
|
||||
effectPresets: EffectPreset[];
|
||||
onToggleEffect: (effectId: string) => void;
|
||||
onRemoveEffect: (effectId: string) => void;
|
||||
onReorderEffects: (fromIndex: number, toIndex: number) => void;
|
||||
onSavePreset: (preset: EffectPreset) => void;
|
||||
onLoadPreset: (preset: EffectPreset) => void;
|
||||
onDeletePreset: (presetId: string) => void;
|
||||
onClearChain: () => void;
|
||||
// Track effect chain (for selected track)
|
||||
trackEffectChain: EffectChain | null;
|
||||
onToggleTrackEffect: (effectId: string) => void;
|
||||
onRemoveTrackEffect: (effectId: string) => void;
|
||||
onReorderTrackEffects: (fromIndex: number, toIndex: number) => void;
|
||||
onClearTrackChain: () => void;
|
||||
|
||||
// Master effect chain
|
||||
masterEffectChain: EffectChain;
|
||||
masterEffectPresets: EffectPreset[];
|
||||
onToggleMasterEffect: (effectId: string) => void;
|
||||
onRemoveMasterEffect: (effectId: string) => void;
|
||||
onReorderMasterEffects: (fromIndex: number, toIndex: number) => void;
|
||||
onSaveMasterPreset: (preset: EffectPreset) => void;
|
||||
onLoadMasterPreset: (preset: EffectPreset) => void;
|
||||
onDeleteMasterPreset: (presetId: string) => void;
|
||||
onClearMasterChain: () => void;
|
||||
|
||||
className?: string;
|
||||
}
|
||||
@@ -51,19 +58,24 @@ export function SidePanel({
|
||||
onUpdateTrack,
|
||||
onRemoveTrack,
|
||||
onClearTracks,
|
||||
effectChain,
|
||||
effectPresets,
|
||||
onToggleEffect,
|
||||
onRemoveEffect,
|
||||
onReorderEffects,
|
||||
onSavePreset,
|
||||
onLoadPreset,
|
||||
onDeletePreset,
|
||||
onClearChain,
|
||||
trackEffectChain,
|
||||
onToggleTrackEffect,
|
||||
onRemoveTrackEffect,
|
||||
onReorderTrackEffects,
|
||||
onClearTrackChain,
|
||||
masterEffectChain,
|
||||
masterEffectPresets,
|
||||
onToggleMasterEffect,
|
||||
onRemoveMasterEffect,
|
||||
onReorderMasterEffects,
|
||||
onSaveMasterPreset,
|
||||
onLoadMasterPreset,
|
||||
onDeleteMasterPreset,
|
||||
onClearMasterChain,
|
||||
className,
|
||||
}: SidePanelProps) {
|
||||
const [isCollapsed, setIsCollapsed] = React.useState(false);
|
||||
const [activeTab, setActiveTab] = React.useState<'tracks' | 'chain'>('tracks');
|
||||
const [activeTab, setActiveTab] = React.useState<'tracks' | 'trackFx' | 'masterFx'>('tracks');
|
||||
const [presetDialogOpen, setPresetDialogOpen] = React.useState(false);
|
||||
|
||||
const selectedTrack = tracks.find((t) => t.id === selectedTrackId);
|
||||
@@ -102,13 +114,21 @@ export function SidePanel({
|
||||
<Music2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'chain' ? 'secondary' : 'ghost'}
|
||||
variant={activeTab === 'trackFx' ? 'secondary' : 'ghost'}
|
||||
size="icon-sm"
|
||||
onClick={() => setActiveTab('chain')}
|
||||
title="Effect Chain"
|
||||
onClick={() => setActiveTab('trackFx')}
|
||||
title="Track Effects"
|
||||
>
|
||||
<Link2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'masterFx' ? 'secondary' : 'ghost'}
|
||||
size="icon-sm"
|
||||
onClick={() => setActiveTab('masterFx')}
|
||||
title="Master Effects"
|
||||
>
|
||||
<Link2 className="h-4 w-4 text-primary" />
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -186,29 +206,21 @@ export function SidePanel({
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === 'chain' && (
|
||||
{activeTab === 'trackFx' && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground uppercase">
|
||||
Effect Chain
|
||||
Track Effects
|
||||
{selectedTrack && (
|
||||
<span className="text-primary ml-2">({String(selectedTrack.name || 'Untitled Track')})</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setPresetDialogOpen(true)}
|
||||
title="Manage presets"
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
{effectChain.effects.length > 0 && (
|
||||
{trackEffectChain && trackEffectChain.effects.length > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={onClearChain}
|
||||
onClick={onClearTrackChain}
|
||||
title="Clear all effects"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
@@ -225,28 +237,63 @@ export function SidePanel({
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<EffectRack
|
||||
chain={effectChain}
|
||||
onToggleEffect={onToggleEffect}
|
||||
onRemoveEffect={onRemoveEffect}
|
||||
onReorderEffects={onReorderEffects}
|
||||
/>
|
||||
<PresetManager
|
||||
open={presetDialogOpen}
|
||||
onClose={() => setPresetDialogOpen(false)}
|
||||
currentChain={effectChain}
|
||||
presets={effectPresets}
|
||||
onSavePreset={onSavePreset}
|
||||
onLoadPreset={onLoadPreset}
|
||||
onDeletePreset={onDeletePreset}
|
||||
onExportPreset={() => {}}
|
||||
onImportPreset={(preset) => onSavePreset(preset)}
|
||||
/>
|
||||
</>
|
||||
<EffectRack
|
||||
chain={trackEffectChain!}
|
||||
onToggleEffect={onToggleTrackEffect}
|
||||
onRemoveEffect={onRemoveTrackEffect}
|
||||
onReorderEffects={onReorderTrackEffects}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'masterFx' && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground uppercase">
|
||||
Master Effects
|
||||
</h3>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setPresetDialogOpen(true)}
|
||||
title="Manage presets"
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
{masterEffectChain.effects.length > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={onClearMasterChain}
|
||||
title="Clear all effects"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EffectRack
|
||||
chain={masterEffectChain}
|
||||
onToggleEffect={onToggleMasterEffect}
|
||||
onRemoveEffect={onRemoveMasterEffect}
|
||||
onReorderEffects={onReorderMasterEffects}
|
||||
/>
|
||||
<PresetManager
|
||||
open={presetDialogOpen}
|
||||
onClose={() => setPresetDialogOpen(false)}
|
||||
currentChain={masterEffectChain}
|
||||
presets={masterEffectPresets}
|
||||
onSavePreset={onSaveMasterPreset}
|
||||
onLoadPreset={onLoadMasterPreset}
|
||||
onDeletePreset={onDeleteMasterPreset}
|
||||
onExportPreset={() => {}}
|
||||
onImportPreset={(preset) => onSaveMasterPreset(preset)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user