Sebastian Krüger
3c950eeba7
Added core multi-track support with track management and controls: **Track Types & Utilities:** - Track interface with audio buffer, controls (volume/pan/solo/mute) - Track utility functions for creation, mixing, and gain calculation - Track color system with 9 preset colors - Configurable track heights (60-300px) **Components:** - TrackHeader: Collapsible track controls with inline name editing - Solo/Mute buttons with visual feedback - Volume slider (0-100%) and Pan control (L-C-R) - Track color indicator and remove button - Track: Waveform display component with canvas rendering - Click-to-seek on waveform - Playhead visualization - Support for collapsed state - TrackList: Container managing multiple tracks - Scrollable track list with custom scrollbar - Add track button - Empty state UI **State Management:** - useMultiTrack hook with localStorage persistence - Add/remove/update/reorder track operations - Track buffer management Features implemented: - ✅ Track creation and removal - ✅ Track naming (editable) - ✅ Track colors - ✅ Solo/Mute per track - ✅ Volume fader per track (0-100%) - ✅ Pan control per track (L-C-R) - ✅ Track collapse/expand - ✅ Track height configuration - ✅ Waveform visualization per track - ✅ Multi-track audio mixing utilities Next: Integrate into AudioEditor and implement multi-track playback 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Plus } from 'lucide-react';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Track } from './Track';
|
|
import type { Track as TrackType } from '@/types/track';
|
|
|
|
export interface TrackListProps {
|
|
tracks: TrackType[];
|
|
zoom: number;
|
|
currentTime: number;
|
|
duration: number;
|
|
onAddTrack: () => void;
|
|
onRemoveTrack: (trackId: string) => void;
|
|
onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
|
|
onSeek?: (time: number) => void;
|
|
}
|
|
|
|
export function TrackList({
|
|
tracks,
|
|
zoom,
|
|
currentTime,
|
|
duration,
|
|
onAddTrack,
|
|
onRemoveTrack,
|
|
onUpdateTrack,
|
|
onSeek,
|
|
}: TrackListProps) {
|
|
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>
|
|
<Button onClick={onAddTrack} variant="secondary">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Track
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{/* Track List */}
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
|
{tracks.map((track) => (
|
|
<Track
|
|
key={track.id}
|
|
track={track}
|
|
zoom={zoom}
|
|
currentTime={currentTime}
|
|
duration={duration}
|
|
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 })
|
|
}
|
|
onSeek={onSeek}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add Track Button */}
|
|
<div className="p-2 border-t border-border bg-card">
|
|
<Button onClick={onAddTrack} variant="outline" size="sm" className="w-full">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Track
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|