Sebastian Krüger
e7bd262e6f
- Effect labels show in primary color when enabled - Effect labels show in gray when bypassed/disabled - Added opacity reduction (60%) for bypassed effects - Visual feedback matches effect state at a glance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
551 lines
25 KiB
TypeScript
551 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Plus, Upload, ChevronDown, ChevronRight, X, Eye, EyeOff } from 'lucide-react';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Track } from './Track';
|
|
import { TrackExtensions } from './TrackExtensions';
|
|
import { ImportTrackDialog } from './ImportTrackDialog';
|
|
import type { Track as TrackType } from '@/types/track';
|
|
import { DEFAULT_TRACK_HEIGHT, COLLAPSED_TRACK_HEIGHT, MIN_TRACK_HEIGHT } from '@/types/track';
|
|
import { createEffect, type EffectType, EFFECT_NAMES } from '@/lib/audio/effects/chain';
|
|
import { AutomationLane } from '@/components/automation/AutomationLane';
|
|
import { AutomationHeader } from '@/components/automation/AutomationHeader';
|
|
import type { AutomationPoint as AutomationPointType } from '@/types/automation';
|
|
import { createAutomationPoint } from '@/lib/audio/automation/utils';
|
|
import { EffectDevice } from '@/components/effects/EffectDevice';
|
|
|
|
export interface TrackListProps {
|
|
tracks: TrackType[];
|
|
zoom: number;
|
|
currentTime: number;
|
|
duration: number;
|
|
selectedTrackId?: string | null;
|
|
onSelectTrack?: (trackId: string | null) => void;
|
|
onAddTrack: () => void;
|
|
onImportTrack?: (buffer: AudioBuffer, name: string) => void;
|
|
onRemoveTrack: (trackId: string) => void;
|
|
onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
|
|
onSeek?: (time: number) => void;
|
|
onSelectionChange?: (trackId: string, selection: { start: number; end: number } | null) => void;
|
|
onToggleRecordEnable?: (trackId: string) => void;
|
|
recordingTrackId?: string | null;
|
|
recordingLevel?: number;
|
|
trackLevels?: Record<string, number>;
|
|
onParameterTouched?: (trackId: string, laneId: string, touched: boolean) => void;
|
|
isPlaying?: boolean;
|
|
}
|
|
|
|
export function TrackList({
|
|
tracks,
|
|
zoom,
|
|
currentTime,
|
|
duration,
|
|
selectedTrackId,
|
|
onSelectTrack,
|
|
onAddTrack,
|
|
onImportTrack,
|
|
onRemoveTrack,
|
|
onUpdateTrack,
|
|
onSeek,
|
|
onSelectionChange,
|
|
onToggleRecordEnable,
|
|
recordingTrackId,
|
|
recordingLevel = 0,
|
|
trackLevels = {},
|
|
onParameterTouched,
|
|
isPlaying = false,
|
|
}: TrackListProps) {
|
|
const [importDialogOpen, setImportDialogOpen] = React.useState(false);
|
|
const waveformScrollRef = React.useRef<HTMLDivElement>(null);
|
|
const controlsScrollRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
// Synchronize vertical scroll between controls and waveforms
|
|
const handleWaveformScroll = React.useCallback(() => {
|
|
if (waveformScrollRef.current && controlsScrollRef.current) {
|
|
controlsScrollRef.current.scrollTop = waveformScrollRef.current.scrollTop;
|
|
}
|
|
}, []);
|
|
|
|
const handleImportTrack = (buffer: AudioBuffer, name: string) => {
|
|
if (onImportTrack) {
|
|
onImportTrack(buffer, name);
|
|
}
|
|
};
|
|
|
|
if (tracks.length === 0) {
|
|
return (
|
|
<>
|
|
<div className="flex-1 flex flex-col items-center justify-center gap-4 text-muted-foreground">
|
|
<p className="text-sm">No tracks yet. Add a track to get started.</p>
|
|
<div className="flex gap-2">
|
|
<Button onClick={onAddTrack} variant="secondary">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Empty Track
|
|
</Button>
|
|
{onImportTrack && (
|
|
<Button onClick={() => setImportDialogOpen(true)} variant="secondary">
|
|
<Upload className="h-4 w-4 mr-2" />
|
|
Import Audio Files
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{onImportTrack && (
|
|
<ImportTrackDialog
|
|
open={importDialogOpen}
|
|
onClose={() => setImportDialogOpen(false)}
|
|
onImportTrack={handleImportTrack}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{/* Track List - Two Column Layout */}
|
|
<div className="flex-1 flex overflow-hidden">
|
|
{/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
|
|
<div ref={controlsScrollRef} className="w-48 flex-shrink-0 overflow-hidden pb-3 border-r border-border">
|
|
{tracks.map((track) => (
|
|
<React.Fragment key={track.id}>
|
|
{/* Track Controls */}
|
|
<Track
|
|
track={track}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
isSelected={selectedTrackId === track.id}
|
|
onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
|
|
onToggleMute={() =>
|
|
onUpdateTrack(track.id, { mute: !track.mute })
|
|
}
|
|
onToggleSolo={() =>
|
|
onUpdateTrack(track.id, { solo: !track.solo })
|
|
}
|
|
onToggleCollapse={() =>
|
|
onUpdateTrack(track.id, { collapsed: !track.collapsed })
|
|
}
|
|
onVolumeChange={(volume) =>
|
|
onUpdateTrack(track.id, { volume })
|
|
}
|
|
onPanChange={(pan) =>
|
|
onUpdateTrack(track.id, { pan })
|
|
}
|
|
onRemove={() => onRemoveTrack(track.id)}
|
|
onNameChange={(name) =>
|
|
onUpdateTrack(track.id, { name })
|
|
}
|
|
onUpdateTrack={onUpdateTrack}
|
|
onSeek={onSeek}
|
|
onLoadAudio={(buffer) =>
|
|
onUpdateTrack(track.id, { audioBuffer: buffer })
|
|
}
|
|
onToggleEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemoveEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateEffect={(effectId, parameters) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, parameters } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onAddEffect={(effectType) => {
|
|
const newEffect = createEffect(
|
|
effectType,
|
|
EFFECT_NAMES[effectType]
|
|
);
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: [...track.effectChain.effects, newEffect],
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onSelectionChange={
|
|
onSelectionChange
|
|
? (selection) => onSelectionChange(track.id, selection)
|
|
: undefined
|
|
}
|
|
onToggleRecordEnable={
|
|
onToggleRecordEnable
|
|
? () => onToggleRecordEnable(track.id)
|
|
: undefined
|
|
}
|
|
isRecording={recordingTrackId === track.id}
|
|
recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
|
|
playbackLevel={trackLevels[track.id] || 0}
|
|
onParameterTouched={onParameterTouched}
|
|
isPlaying={isPlaying}
|
|
renderControlsOnly={true}
|
|
/>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Column: Waveforms (Flexible Width, Shared Horizontal & Vertical Scroll) */}
|
|
<div
|
|
ref={waveformScrollRef}
|
|
onScroll={handleWaveformScroll}
|
|
className="flex-1 overflow-auto custom-scrollbar"
|
|
>
|
|
<div className="flex flex-col">
|
|
{tracks.map((track) => (
|
|
<React.Fragment key={track.id}>
|
|
{/* Track Waveform Row with bars stacked below - Fixed height container */}
|
|
<div
|
|
className="flex flex-col"
|
|
style={{
|
|
height: track.collapsed ? `${COLLAPSED_TRACK_HEIGHT}px` : `${Math.max(track.height || DEFAULT_TRACK_HEIGHT, MIN_TRACK_HEIGHT)}px`
|
|
}}
|
|
>
|
|
{/* Waveform - Takes remaining space */}
|
|
<div className="flex-1 min-h-0 relative">
|
|
<Track
|
|
track={track}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
isSelected={selectedTrackId === track.id}
|
|
onSelect={onSelectTrack ? () => onSelectTrack(track.id) : undefined}
|
|
onToggleMute={() =>
|
|
onUpdateTrack(track.id, { mute: !track.mute })
|
|
}
|
|
onToggleSolo={() =>
|
|
onUpdateTrack(track.id, { solo: !track.solo })
|
|
}
|
|
onToggleCollapse={() =>
|
|
onUpdateTrack(track.id, { collapsed: !track.collapsed })
|
|
}
|
|
onVolumeChange={(volume) =>
|
|
onUpdateTrack(track.id, { volume })
|
|
}
|
|
onPanChange={(pan) =>
|
|
onUpdateTrack(track.id, { pan })
|
|
}
|
|
onRemove={() => onRemoveTrack(track.id)}
|
|
onNameChange={(name) =>
|
|
onUpdateTrack(track.id, { name })
|
|
}
|
|
onUpdateTrack={onUpdateTrack}
|
|
onSeek={onSeek}
|
|
onLoadAudio={(buffer) =>
|
|
onUpdateTrack(track.id, { audioBuffer: buffer })
|
|
}
|
|
onToggleEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemoveEffect={(effectId) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effectId),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateEffect={(effectId, parameters) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effectId ? { ...e, parameters } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onAddEffect={(effectType) => {
|
|
const newEffect = createEffect(
|
|
effectType,
|
|
EFFECT_NAMES[effectType]
|
|
);
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: [...track.effectChain.effects, newEffect],
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onSelectionChange={
|
|
onSelectionChange
|
|
? (selection) => onSelectionChange(track.id, selection)
|
|
: undefined
|
|
}
|
|
onToggleRecordEnable={
|
|
onToggleRecordEnable
|
|
? () => onToggleRecordEnable(track.id)
|
|
: undefined
|
|
}
|
|
isRecording={recordingTrackId === track.id}
|
|
recordingLevel={recordingTrackId === track.id ? recordingLevel : 0}
|
|
playbackLevel={trackLevels[track.id] || 0}
|
|
onParameterTouched={onParameterTouched}
|
|
isPlaying={isPlaying}
|
|
renderWaveformOnly={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Automation Bar - Collapsible - Fixed height when expanded */}
|
|
{!track.collapsed && (() => {
|
|
const selectedParam = track.automation.selectedParameterId || 'volume';
|
|
const currentLane = track.automation.lanes.find(
|
|
l => l.parameterId === selectedParam
|
|
);
|
|
|
|
// Build available parameters list
|
|
const availableParameters: Array<{ id: string; name: string }> = [
|
|
{ id: 'volume', name: 'Volume' },
|
|
{ id: 'pan', name: 'Pan' },
|
|
];
|
|
|
|
// Add effect parameters
|
|
track.effectChain.effects.forEach((effect) => {
|
|
if (effect.parameters) {
|
|
Object.keys(effect.parameters).forEach((paramKey) => {
|
|
const parameterId = `effect.${effect.id}.${paramKey}`;
|
|
const paramName = `${effect.name} - ${paramKey.charAt(0).toUpperCase() + paramKey.slice(1)}`;
|
|
availableParameters.push({ id: parameterId, name: paramName });
|
|
});
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="flex-shrink-0 bg-card/90 backdrop-blur-sm">
|
|
<AutomationHeader
|
|
parameterName={currentLane?.parameterName || 'Volume'}
|
|
visible={currentLane?.visible ?? true}
|
|
mode={currentLane?.mode || 'read'}
|
|
color={currentLane?.color}
|
|
availableParameters={availableParameters}
|
|
selectedParameterId={selectedParam}
|
|
onParameterChange={(parameterId) => {
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, selectedParameterId: parameterId },
|
|
});
|
|
}}
|
|
onToggleVisible={() => {
|
|
if (currentLane) {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, visible: !l.visible } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
onModeChange={(mode) => {
|
|
if (currentLane) {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, mode } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
onHeightChange={(delta) => {
|
|
if (currentLane) {
|
|
const newHeight = Math.max(60, Math.min(200, currentLane.height + delta));
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === currentLane.id ? { ...l, height: newHeight } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* Automation Lane Content - Collapsible */}
|
|
{track.automation.lanes
|
|
.filter((lane) => lane.parameterId === (track.automation.selectedParameterId || 'volume') && lane.visible)
|
|
.map((lane) => (
|
|
<AutomationLane
|
|
key={lane.id}
|
|
lane={lane}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
onAddPoint={(time, value) => {
|
|
const newPoint = createAutomationPoint({ time, value, curve: 'linear' });
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onUpdatePoint={(pointId, updates) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? {
|
|
...l,
|
|
points: l.points.map((p) =>
|
|
p.id === pointId ? { ...p, ...updates } : p
|
|
),
|
|
}
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onRemovePoint={(pointId) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id
|
|
? { ...l, points: l.points.filter((p) => p.id !== pointId) }
|
|
: l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
onUpdateLane={(updates) => {
|
|
const updatedLanes = track.automation.lanes.map((l) =>
|
|
l.id === lane.id ? { ...l, ...updates } : l
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
automation: { ...track.automation, lanes: updatedLanes },
|
|
});
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/* Effects Bar - Collapsible - Fixed height when expanded */}
|
|
{!track.collapsed && (
|
|
<div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
|
|
{/* Effects Header - Collapsible */}
|
|
<div className="relative flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-b border-border/30 overflow-x-auto">
|
|
<span className="text-xs font-medium flex-shrink-0">Effects</span>
|
|
|
|
{/* Effect name labels */}
|
|
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
|
{track.effectChain.effects.map((effect) => (
|
|
<span
|
|
key={effect.id}
|
|
className={cn(
|
|
"text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0",
|
|
effect.enabled
|
|
? "bg-primary/10 text-primary border border-primary/20"
|
|
: "bg-muted/30 text-muted-foreground border border-border/30 opacity-60"
|
|
)}
|
|
>
|
|
{effect.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* Show/hide toggle - Positioned absolutely on the right */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
|
|
}}
|
|
title={track.effectsExpanded ? 'Hide effects' : 'Show effects'}
|
|
className="absolute right-2 h-5 w-5 flex-shrink-0"
|
|
>
|
|
{track.effectsExpanded ? (
|
|
<Eye className="h-3 w-3" />
|
|
) : (
|
|
<EyeOff className="h-3 w-3 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Effects Content - Collapsible, no inner container */}
|
|
{track.effectsExpanded && (
|
|
<div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70 border-t border-border">
|
|
<div className="flex h-full gap-3 p-3">
|
|
{track.effectChain.effects.length === 0 ? (
|
|
<div className="text-xs text-muted-foreground text-center py-8 w-full">
|
|
No effects. Click + to add an effect.
|
|
</div>
|
|
) : (
|
|
track.effectChain.effects.map((effect) => (
|
|
<EffectDevice
|
|
key={effect.id}
|
|
effect={effect}
|
|
onToggleEnabled={() => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, enabled: !e.enabled } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onRemove={() => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.filter((e) => e.id !== effect.id),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onUpdateParameters={(params) => {
|
|
const updatedChain = {
|
|
...track.effectChain,
|
|
effects: track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, parameters: params } : e
|
|
),
|
|
};
|
|
onUpdateTrack(track.id, { effectChain: updatedChain });
|
|
}}
|
|
onToggleExpanded={() => {
|
|
const updatedEffects = track.effectChain.effects.map((e) =>
|
|
e.id === effect.id ? { ...e, expanded: !e.expanded } : e
|
|
);
|
|
onUpdateTrack(track.id, {
|
|
effectChain: { ...track.effectChain, effects: updatedEffects },
|
|
});
|
|
}}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Import Dialog */}
|
|
{onImportTrack && (
|
|
<ImportTrackDialog
|
|
open={importDialogOpen}
|
|
onClose={() => setImportDialogOpen(false)}
|
|
onImportTrack={handleImportTrack}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|