feat: enhance mobile responsiveness with collapsible controls and automation/effects bars
Added comprehensive mobile support for Phase 15 (Polish & Optimization): **Mobile Layout Enhancements:** - Track controls now collapsible on mobile with two states: - Collapsed: minimal controls with expand chevron, R/M/S buttons, horizontal level meter - Expanded: full height fader, pan control, all buttons - Track collapse buttons added to mobile view (left chevron for track collapse, right chevron for control collapse) - Master controls collapse button hidden on desktop (lg:hidden) - Automation and effects bars now available on mobile layout - Both bars collapsible with eye/eye-off icons, horizontally scrollable when zoomed - Mobile vertical stacking: controls → waveform → automation → effects per track **Bug Fixes:** - Fixed track controls and waveform container height matching on desktop - Fixed Modal component prop: isOpen → open in all dialog components - Fixed TypeScript null check for audioBuffer.duration - Fixed keyboard shortcut category: 'help' → 'view' **Technical Improvements:** - Consistent height calculation using trackHeight variable - Proper responsive breakpoints with Tailwind (sm:640px, lg:1024px) - Progressive disclosure pattern for mobile controls 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -21,6 +21,7 @@ import {
|
||||
COLLAPSED_TRACK_HEIGHT,
|
||||
MIN_TRACK_HEIGHT,
|
||||
MAX_TRACK_HEIGHT,
|
||||
DEFAULT_TRACK_HEIGHT,
|
||||
} from "@/types/track";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Slider } from "@/components/ui/Slider";
|
||||
@@ -606,7 +607,9 @@ export function Track({
|
||||
}
|
||||
};
|
||||
|
||||
const trackHeight = track.collapsed ? COLLAPSED_TRACK_HEIGHT : Math.max(track.height || MIN_TRACK_HEIGHT, MIN_TRACK_HEIGHT);
|
||||
const trackHeight = track.collapsed
|
||||
? COLLAPSED_TRACK_HEIGHT
|
||||
: Math.max(track.height || DEFAULT_TRACK_HEIGHT, MIN_TRACK_HEIGHT);
|
||||
|
||||
// Track height resize handlers
|
||||
const handleResizeStart = React.useCallback(
|
||||
@@ -656,7 +659,9 @@ export function Track({
|
||||
? "bg-primary/10 border-r-primary"
|
||||
: "bg-card border-r-transparent hover:bg-accent/30",
|
||||
)}
|
||||
style={{ height: trackHeight }}
|
||||
style={{
|
||||
height: `${trackHeight}px`,
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (onSelect) onSelect();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Circle, Headphones, MoreHorizontal, ChevronRight, ChevronDown } from 'lucide-react';
|
||||
import { Circle, Headphones, MoreHorizontal, ChevronRight, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { CircularKnob } from '@/components/ui/CircularKnob';
|
||||
import { TrackFader } from './TrackFader';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
@@ -20,6 +20,7 @@ export interface TrackControlsProps {
|
||||
showAutomation?: boolean;
|
||||
showEffects?: boolean;
|
||||
isRecording?: boolean;
|
||||
mobileCollapsed?: boolean; // For mobile view collapsible controls
|
||||
onNameChange: (name: string) => void;
|
||||
onToggleCollapse: () => void;
|
||||
onVolumeChange: (volume: number) => void;
|
||||
@@ -33,6 +34,7 @@ export interface TrackControlsProps {
|
||||
onVolumeTouchEnd?: () => void;
|
||||
onPanTouchStart?: () => void;
|
||||
onPanTouchEnd?: () => void;
|
||||
onToggleMobileCollapse?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
@@ -50,6 +52,7 @@ export function TrackControls({
|
||||
showAutomation = false,
|
||||
showEffects = false,
|
||||
isRecording = false,
|
||||
mobileCollapsed = false,
|
||||
onNameChange,
|
||||
onToggleCollapse,
|
||||
onVolumeChange,
|
||||
@@ -63,6 +66,7 @@ export function TrackControls({
|
||||
onVolumeTouchEnd,
|
||||
onPanTouchStart,
|
||||
onPanTouchEnd,
|
||||
onToggleMobileCollapse,
|
||||
className,
|
||||
}: TrackControlsProps) {
|
||||
const [isEditingName, setIsEditingName] = React.useState(false);
|
||||
@@ -91,11 +95,238 @@ export function TrackControls({
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
// Mobile collapsed view - minimal controls (like master controls)
|
||||
if (mobileCollapsed) {
|
||||
return (
|
||||
<div className={cn(
|
||||
'flex flex-col items-center gap-2 px-3 py-2 bg-card/50 border border-accent/50 rounded-lg w-full sm:hidden',
|
||||
className
|
||||
)}>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-1 flex-1">
|
||||
<button
|
||||
onClick={onToggleCollapse}
|
||||
className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0"
|
||||
title={collapsed ? 'Expand track' : 'Collapse track'}
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-3 w-3 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
<div
|
||||
className="text-xs font-bold uppercase tracking-wider"
|
||||
style={{ color: trackColor }}
|
||||
>
|
||||
{trackName}
|
||||
</div>
|
||||
</div>
|
||||
{onToggleMobileCollapse && (
|
||||
<button
|
||||
onClick={onToggleMobileCollapse}
|
||||
className="p-1 hover:bg-accent/20 rounded transition-colors"
|
||||
title="Expand track controls"
|
||||
>
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 w-full justify-center">
|
||||
{onRecordToggle && (
|
||||
<button
|
||||
onClick={onRecordToggle}
|
||||
className={cn(
|
||||
'h-7 w-7 rounded-full flex items-center justify-center transition-all',
|
||||
isRecordEnabled
|
||||
? isRecording
|
||||
? 'bg-red-500 shadow-lg shadow-red-500/50 animate-pulse'
|
||||
: 'bg-red-500 shadow-md shadow-red-500/30'
|
||||
: 'bg-card hover:bg-accent border border-border/50'
|
||||
)}
|
||||
title={isRecordEnabled ? 'Record Armed' : 'Arm for Recording'}
|
||||
>
|
||||
<Circle className={cn('h-3.5 w-3.5', isRecordEnabled ? 'fill-white text-white' : 'text-muted-foreground')} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onMuteToggle}
|
||||
className={cn(
|
||||
'h-7 w-7 rounded-md flex items-center justify-center transition-all text-xs font-bold',
|
||||
isMuted
|
||||
? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
|
||||
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
|
||||
)}
|
||||
title={isMuted ? 'Unmute' : 'Mute'}
|
||||
>
|
||||
M
|
||||
</button>
|
||||
{onSoloToggle && (
|
||||
<button
|
||||
onClick={onSoloToggle}
|
||||
className={cn(
|
||||
'h-7 w-7 rounded-md flex items-center justify-center transition-all text-xs font-bold',
|
||||
isSolo
|
||||
? 'bg-yellow-500 text-white shadow-md shadow-yellow-500/30'
|
||||
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
|
||||
)}
|
||||
title={isSolo ? 'Unsolo' : 'Solo'}
|
||||
>
|
||||
S
|
||||
</button>
|
||||
)}
|
||||
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className={cn(
|
||||
'h-full transition-all',
|
||||
peakLevel > 0.95 ? 'bg-red-500' : peakLevel > 0.8 ? 'bg-yellow-500' : 'bg-green-500'
|
||||
)}
|
||||
style={{ width: `${peakLevel * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Mobile expanded view - full controls (like master controls)
|
||||
const mobileExpandedView = (
|
||||
<div className={cn(
|
||||
'flex flex-col items-center gap-3 px-4 py-3 bg-card/50 border-2 border-accent/50 rounded-lg',
|
||||
'flex flex-col items-center gap-3 px-3 py-3 bg-card/50 border border-accent/50 rounded-lg w-full sm:hidden',
|
||||
className
|
||||
)}>
|
||||
{/* Header with collapse button */}
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<button
|
||||
onClick={onToggleCollapse}
|
||||
className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0"
|
||||
title={collapsed ? 'Expand track' : 'Collapse track'}
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-3 w-3 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
<div
|
||||
className="text-xs font-bold uppercase tracking-wider flex-1 text-center"
|
||||
style={{ color: trackColor }}
|
||||
>
|
||||
{trackName}
|
||||
</div>
|
||||
{onToggleMobileCollapse && (
|
||||
<button
|
||||
onClick={onToggleMobileCollapse}
|
||||
className="p-0.5 hover:bg-accent/20 rounded transition-colors flex-shrink-0"
|
||||
title="Collapse track controls"
|
||||
>
|
||||
<ChevronUp className="h-3 w-3 text-muted-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pan Control */}
|
||||
<CircularKnob
|
||||
value={pan}
|
||||
onChange={onPanChange}
|
||||
onTouchStart={onPanTouchStart}
|
||||
onTouchEnd={onPanTouchEnd}
|
||||
min={-1}
|
||||
max={1}
|
||||
step={0.01}
|
||||
label="PAN"
|
||||
size={48}
|
||||
formatValue={(value: number) => {
|
||||
if (Math.abs(value) < 0.01) return 'C';
|
||||
if (value < 0) return `${Math.abs(value * 100).toFixed(0)}L`;
|
||||
return `${(value * 100).toFixed(0)}R`;
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Volume Fader - Full height, not compressed */}
|
||||
<div className="flex-1 flex justify-center items-center w-full min-h-[160px]">
|
||||
<TrackFader
|
||||
value={volume}
|
||||
peakLevel={peakLevel}
|
||||
rmsLevel={rmsLevel}
|
||||
onChange={onVolumeChange}
|
||||
onTouchStart={onVolumeTouchStart}
|
||||
onTouchEnd={onVolumeTouchEnd}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Control buttons */}
|
||||
<div className="flex items-center gap-1 w-full justify-center">
|
||||
{onRecordToggle && (
|
||||
<button
|
||||
onClick={onRecordToggle}
|
||||
className={cn(
|
||||
'h-8 w-8 rounded-full flex items-center justify-center transition-all',
|
||||
isRecordEnabled
|
||||
? isRecording
|
||||
? 'bg-red-500 shadow-lg shadow-red-500/50 animate-pulse'
|
||||
: 'bg-red-500 shadow-md shadow-red-500/30'
|
||||
: 'bg-card hover:bg-accent border border-border/50'
|
||||
)}
|
||||
title={isRecordEnabled ? 'Record Armed' : 'Arm for Recording'}
|
||||
>
|
||||
<Circle className={cn('h-3.5 w-3.5', isRecordEnabled ? 'fill-white text-white' : 'text-muted-foreground')} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onMuteToggle}
|
||||
className={cn(
|
||||
'h-8 w-8 rounded-md flex items-center justify-center transition-all text-xs font-bold',
|
||||
isMuted
|
||||
? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
|
||||
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
|
||||
)}
|
||||
title={isMuted ? 'Unmute' : 'Mute'}
|
||||
>
|
||||
M
|
||||
</button>
|
||||
{onSoloToggle && (
|
||||
<button
|
||||
onClick={onSoloToggle}
|
||||
className={cn(
|
||||
'h-8 w-8 rounded-md flex items-center justify-center transition-all text-xs font-bold',
|
||||
isSolo
|
||||
? 'bg-yellow-500 text-white shadow-md shadow-yellow-500/30'
|
||||
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
|
||||
)}
|
||||
title={isSolo ? 'Unsolo' : 'Solo'}
|
||||
>
|
||||
S
|
||||
</button>
|
||||
)}
|
||||
{onEffectsClick && (
|
||||
<button
|
||||
onClick={onEffectsClick}
|
||||
className={cn(
|
||||
'h-8 w-8 rounded-md flex items-center justify-center transition-all text-xs font-bold',
|
||||
showEffects
|
||||
? 'bg-purple-500 text-white shadow-md shadow-purple-500/30'
|
||||
: 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
|
||||
)}
|
||||
title="Effects"
|
||||
>
|
||||
FX
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile view - Show expanded or collapsed */}
|
||||
{!mobileCollapsed && mobileExpandedView}
|
||||
|
||||
{/* Desktop/tablet view - hidden on mobile */}
|
||||
<div className={cn(
|
||||
'flex flex-col items-center gap-3 px-4 py-3 bg-card/50 border border-accent/50 rounded-lg hidden sm:flex',
|
||||
className
|
||||
)}>
|
||||
{/* Track Name Header with Collapse Chevron */}
|
||||
<div className="flex items-center gap-1 w-full">
|
||||
<button
|
||||
@@ -220,6 +451,7 @@ export function TrackControls({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -167,8 +167,509 @@ export function TrackList({
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Track List - Two Column Layout */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Mobile Layout - Single Column (Stacked: Controls → Waveform per track) */}
|
||||
<div className="flex-1 flex flex-col overflow-y-auto overflow-x-hidden custom-scrollbar lg:hidden">
|
||||
{tracks.map((track) => (
|
||||
<div key={track.id} className="flex flex-col border-b border-border">
|
||||
{/* Track Controls - Top */}
|
||||
<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}
|
||||
/>
|
||||
|
||||
{/* Track Waveform with Automation and Effects - Bottom */}
|
||||
{!track.collapsed && (
|
||||
<div className="flex flex-col">
|
||||
{/* Waveform */}
|
||||
<div className="min-h-[200px] overflow-x-auto custom-scrollbar">
|
||||
<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 */}
|
||||
{(() => {
|
||||
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 });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Get parameters that have automation lanes with points
|
||||
const automatedParams = track.automation.lanes
|
||||
.filter(lane => lane.points.length > 0)
|
||||
.map(lane => {
|
||||
const param = availableParameters.find(p => p.id === lane.parameterId);
|
||||
return param ? param.name : lane.parameterName;
|
||||
});
|
||||
|
||||
const modes = ['read', 'write', 'touch', 'latch'] as const;
|
||||
const MODE_LABELS = { read: 'R', write: 'W', touch: 'T', latch: 'L' };
|
||||
const MODE_COLORS = {
|
||||
read: 'text-muted-foreground',
|
||||
write: 'text-red-500',
|
||||
touch: 'text-yellow-500',
|
||||
latch: 'text-orange-500',
|
||||
};
|
||||
const currentModeIndex = modes.indexOf(currentLane?.mode || 'read');
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0 bg-card/90 backdrop-blur-sm">
|
||||
{/* Automation Header */}
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted border-t border-b border-border/30">
|
||||
<span className="text-xs font-medium flex-shrink-0">Automation</span>
|
||||
|
||||
{/* Color indicator */}
|
||||
{currentLane?.color && (
|
||||
<div
|
||||
className="w-1 h-4 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: currentLane.color }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Parameter labels - always visible */}
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
|
||||
{automatedParams.map((paramName, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap flex-shrink-0 bg-primary/10 text-primary border border-primary/20"
|
||||
>
|
||||
{paramName}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Controls - only visible when expanded */}
|
||||
{track.automationExpanded && (
|
||||
<>
|
||||
{/* Parameter selector */}
|
||||
{availableParameters && availableParameters.length > 1 && (
|
||||
<select
|
||||
value={selectedParam}
|
||||
onChange={(e) => onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, selectedParameterId: e.target.value },
|
||||
})}
|
||||
className="text-xs font-medium text-foreground w-auto min-w-[120px] max-w-[200px] bg-background/50 border border-border/30 rounded px-1.5 py-0.5 hover:bg-background/80 focus:outline-none focus:ring-1 focus:ring-primary flex-shrink-0"
|
||||
>
|
||||
{availableParameters.map((param) => (
|
||||
<option key={param.id} value={param.id}>
|
||||
{param.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
|
||||
{/* Automation mode button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => {
|
||||
if (currentLane) {
|
||||
const nextIndex = (currentModeIndex + 1) % modes.length;
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === currentLane.id ? { ...l, mode: modes[nextIndex] } : l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}
|
||||
}}
|
||||
title={`Automation mode: ${currentLane?.mode || 'read'} (click to cycle)`}
|
||||
className={cn('h-5 w-5 text-[10px] font-bold flex-shrink-0', MODE_COLORS[currentLane?.mode || 'read'])}
|
||||
>
|
||||
{MODE_LABELS[currentLane?.mode || 'read']}
|
||||
</Button>
|
||||
|
||||
{/* Height controls */}
|
||||
<div className="flex flex-col gap-0 flex-shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => {
|
||||
if (currentLane) {
|
||||
const newHeight = Math.max(60, Math.min(200, currentLane.height + 20));
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === currentLane.id ? { ...l, height: newHeight } : l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}
|
||||
}}
|
||||
title="Increase lane height"
|
||||
className="h-3 w-4 p-0"
|
||||
>
|
||||
<ChevronUp className="h-2.5 w-2.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => {
|
||||
if (currentLane) {
|
||||
const newHeight = Math.max(60, Math.min(200, currentLane.height - 20));
|
||||
const updatedLanes = track.automation.lanes.map((l) =>
|
||||
l.id === currentLane.id ? { ...l, height: newHeight } : l
|
||||
);
|
||||
onUpdateTrack(track.id, {
|
||||
automation: { ...track.automation, lanes: updatedLanes },
|
||||
});
|
||||
}
|
||||
}}
|
||||
title="Decrease lane height"
|
||||
className="h-3 w-4 p-0"
|
||||
>
|
||||
<ChevronDown className="h-2.5 w-2.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Show/hide toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => {
|
||||
onUpdateTrack(track.id, { automationExpanded: !track.automationExpanded });
|
||||
}}
|
||||
title={track.automationExpanded ? 'Hide automation controls' : 'Show automation controls'}
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
>
|
||||
{track.automationExpanded ? (
|
||||
<Eye className="h-3 w-3" />
|
||||
) : (
|
||||
<EyeOff className="h-3 w-3 text-muted-foreground" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Automation Lane Content - Shown when expanded */}
|
||||
{track.automationExpanded && (
|
||||
<div className="overflow-x-auto custom-scrollbar">
|
||||
<div
|
||||
style={{
|
||||
minWidth: duration && zoom > 1 ? `${duration * zoom * 100}px` : '100%',
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Effects Bar */}
|
||||
<div className="flex-shrink-0 bg-card/90 backdrop-blur-sm border-b border-border">
|
||||
{/* Effects Header */}
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-muted/50 border-t border-b border-border/30">
|
||||
<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 overflow-x-auto">
|
||||
{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>
|
||||
|
||||
{/* Add effect button - only visible when expanded */}
|
||||
{track.effectsExpanded && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setEffectBrowserTrackId(track.id)}
|
||||
title="Add effect"
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Show/hide toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => {
|
||||
onUpdateTrack(track.id, { effectsExpanded: !track.effectsExpanded });
|
||||
}}
|
||||
title={track.effectsExpanded ? 'Hide effects' : 'Show effects'}
|
||||
className="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, horizontally scrollable */}
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout - Two Column Layout */}
|
||||
<div className="flex-1 flex overflow-hidden hidden lg:flex">
|
||||
{/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
|
||||
<div ref={controlsScrollRef} className="w-60 flex-shrink-0 overflow-hidden pb-3 border-r border-border">
|
||||
{tracks.map((track) => (
|
||||
@@ -271,14 +772,14 @@ export function TrackList({
|
||||
<div className="flex flex-col">
|
||||
{tracks.map((track) => (
|
||||
<React.Fragment key={track.id}>
|
||||
{/* Track Waveform Row with bars stacked below - Fixed height container */}
|
||||
{/* Track Waveform Row with bars stacked below - Total height matches track controls */}
|
||||
<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, horizontally scrollable */}
|
||||
{/* Waveform - Takes remaining space after bars */}
|
||||
<div className="flex-1 min-h-0 relative">
|
||||
{/* Upload hint for empty tracks - stays fixed as overlay */}
|
||||
{!track.audioBuffer && !track.collapsed && (
|
||||
|
||||
Reference in New Issue
Block a user