feat: implement medium effort features - markers, web workers, and bezier automation
Implemented three major medium effort features to enhance the audio editor: **1. Region Markers System** - Add marker type definitions supporting point markers and regions - Create useMarkers hook for marker state management - Build MarkerTimeline component for visual marker display - Create MarkerDialog component for adding/editing markers - Add keyboard shortcuts: M (add marker), Shift+M (next), Shift+Ctrl+M (previous) - Support marker navigation, editing, and deletion **2. Web Worker for Computations** - Create audio worker for offloading heavy computations - Implement worker functions: generatePeaks, generateMinMaxPeaks, normalizePeaks, analyzeAudio, findPeak - Build useAudioWorker hook for easy worker integration - Integrate worker into Waveform component with peak caching - Significantly improve UI responsiveness during waveform generation **3. Bezier Curve Automation** - Enhance interpolateAutomationValue to support Bezier curves - Implement cubic Bezier interpolation with control handles - Add createSmoothHandles for auto-smooth curve generation - Add generateBezierCurvePoints for smooth curve rendering - Support bezier alongside existing linear and step curves All features are type-safe and integrate seamlessly with the existing codebase. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
188
components/markers/MarkerDialog.tsx
Normal file
188
components/markers/MarkerDialog.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import type { Marker, MarkerType } from '@/types/marker';
|
||||
|
||||
export interface MarkerDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (marker: Partial<Marker>) => void;
|
||||
marker?: Marker; // If editing existing marker
|
||||
defaultTime?: number; // Default time for new markers
|
||||
defaultType?: MarkerType;
|
||||
}
|
||||
|
||||
const MARKER_COLORS = [
|
||||
'#ef4444', // red
|
||||
'#f97316', // orange
|
||||
'#eab308', // yellow
|
||||
'#22c55e', // green
|
||||
'#3b82f6', // blue
|
||||
'#a855f7', // purple
|
||||
'#ec4899', // pink
|
||||
];
|
||||
|
||||
export function MarkerDialog({
|
||||
open,
|
||||
onClose,
|
||||
onSave,
|
||||
marker,
|
||||
defaultTime = 0,
|
||||
defaultType = 'point',
|
||||
}: MarkerDialogProps) {
|
||||
const [name, setName] = React.useState(marker?.name || '');
|
||||
const [type, setType] = React.useState<MarkerType>(marker?.type || defaultType);
|
||||
const [time, setTime] = React.useState(marker?.time || defaultTime);
|
||||
const [endTime, setEndTime] = React.useState(marker?.endTime || defaultTime + 1);
|
||||
const [color, setColor] = React.useState(marker?.color || MARKER_COLORS[0]);
|
||||
const [description, setDescription] = React.useState(marker?.description || '');
|
||||
|
||||
// Reset form when marker changes or dialog opens
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
setName(marker?.name || '');
|
||||
setType(marker?.type || defaultType);
|
||||
setTime(marker?.time || defaultTime);
|
||||
setEndTime(marker?.endTime || defaultTime + 1);
|
||||
setColor(marker?.color || MARKER_COLORS[0]);
|
||||
setDescription(marker?.description || '');
|
||||
}
|
||||
}, [open, marker, defaultTime, defaultType]);
|
||||
|
||||
const handleSave = () => {
|
||||
const markerData: Partial<Marker> = {
|
||||
...(marker?.id && { id: marker.id }),
|
||||
name: name || 'Untitled Marker',
|
||||
type,
|
||||
time,
|
||||
...(type === 'region' && { endTime }),
|
||||
color,
|
||||
description,
|
||||
};
|
||||
onSave(markerData);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={marker ? 'Edit Marker' : 'Add Marker'}
|
||||
description={marker ? 'Edit marker properties' : 'Add a new marker or region to the timeline'}
|
||||
size="md"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave}>{marker ? 'Save' : 'Add'}</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Name */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium text-foreground">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Marker name"
|
||||
className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="type" className="text-sm font-medium text-foreground">
|
||||
Type
|
||||
</label>
|
||||
<select
|
||||
id="type"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value as MarkerType)}
|
||||
className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
|
||||
>
|
||||
<option value="point">Point Marker</option>
|
||||
<option value="region">Region</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Time */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="time" className="text-sm font-medium text-foreground">
|
||||
{type === 'region' ? 'Start Time' : 'Time'} (seconds)
|
||||
</label>
|
||||
<input
|
||||
id="time"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
value={time}
|
||||
onChange={(e) => setTime(parseFloat(e.target.value))}
|
||||
className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* End Time (for regions) */}
|
||||
{type === 'region' && (
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="endTime" className="text-sm font-medium text-foreground">
|
||||
End Time (seconds)
|
||||
</label>
|
||||
<input
|
||||
id="endTime"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min={time}
|
||||
value={endTime}
|
||||
onChange={(e) => setEndTime(parseFloat(e.target.value))}
|
||||
className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Color */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
Color
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{MARKER_COLORS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
className="w-8 h-8 rounded border-2 transition-all hover:scale-110"
|
||||
style={{
|
||||
backgroundColor: c,
|
||||
borderColor: color === c ? 'white' : 'transparent',
|
||||
}}
|
||||
onClick={() => setColor(c)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="description" className="text-sm font-medium text-foreground">
|
||||
Description (optional)
|
||||
</label>
|
||||
<input
|
||||
id="description"
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Optional description"
|
||||
className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
216
components/markers/MarkerTimeline.tsx
Normal file
216
components/markers/MarkerTimeline.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import type { Marker } from '@/types/marker';
|
||||
import { Flag, Edit2, Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
export interface MarkerTimelineProps {
|
||||
markers: Marker[];
|
||||
duration: number;
|
||||
currentTime: number;
|
||||
onMarkerClick?: (marker: Marker) => void;
|
||||
onMarkerEdit?: (marker: Marker) => void;
|
||||
onMarkerDelete?: (markerId: string) => void;
|
||||
onSeek?: (time: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function MarkerTimeline({
|
||||
markers,
|
||||
duration,
|
||||
currentTime,
|
||||
onMarkerClick,
|
||||
onMarkerEdit,
|
||||
onMarkerDelete,
|
||||
onSeek,
|
||||
className,
|
||||
}: MarkerTimelineProps) {
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
const [hoveredMarkerId, setHoveredMarkerId] = React.useState<string | null>(null);
|
||||
|
||||
const timeToX = React.useCallback(
|
||||
(time: number): number => {
|
||||
if (!containerRef.current) return 0;
|
||||
const width = containerRef.current.clientWidth;
|
||||
return (time / duration) * width;
|
||||
},
|
||||
[duration]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cn(
|
||||
'relative w-full h-8 bg-muted/30 border-b border-border',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* Markers */}
|
||||
{markers.map((marker) => {
|
||||
const x = timeToX(marker.time);
|
||||
const isHovered = hoveredMarkerId === marker.id;
|
||||
|
||||
if (marker.type === 'point') {
|
||||
return (
|
||||
<div
|
||||
key={marker.id}
|
||||
className="absolute top-0 bottom-0 group cursor-pointer"
|
||||
style={{ left: `${x}px` }}
|
||||
onMouseEnter={() => setHoveredMarkerId(marker.id)}
|
||||
onMouseLeave={() => setHoveredMarkerId(null)}
|
||||
onClick={() => {
|
||||
onMarkerClick?.(marker);
|
||||
onSeek?.(marker.time);
|
||||
}}
|
||||
>
|
||||
{/* Marker line */}
|
||||
<div
|
||||
className={cn(
|
||||
'absolute top-0 bottom-0 w-0.5 transition-colors',
|
||||
isHovered ? 'bg-primary' : 'bg-primary/60'
|
||||
)}
|
||||
style={{ backgroundColor: marker.color }}
|
||||
/>
|
||||
|
||||
{/* Marker flag */}
|
||||
<Flag
|
||||
className={cn(
|
||||
'absolute top-0.5 -left-2 h-4 w-4 transition-colors',
|
||||
isHovered ? 'text-primary' : 'text-primary/60'
|
||||
)}
|
||||
style={{ color: marker.color }}
|
||||
/>
|
||||
|
||||
{/* Hover tooltip with actions */}
|
||||
{isHovered && (
|
||||
<div className="absolute top-full left-0 mt-1 z-10 bg-popover border border-border rounded shadow-lg p-2 min-w-[200px]">
|
||||
<div className="text-xs font-medium mb-1">{marker.name}</div>
|
||||
{marker.description && (
|
||||
<div className="text-xs text-muted-foreground mb-2">{marker.description}</div>
|
||||
)}
|
||||
<div className="flex gap-1">
|
||||
{onMarkerEdit && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMarkerEdit(marker);
|
||||
}}
|
||||
title="Edit marker"
|
||||
className="h-6 w-6"
|
||||
>
|
||||
<Edit2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
{onMarkerDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMarkerDelete(marker.id);
|
||||
}}
|
||||
title="Delete marker"
|
||||
className="h-6 w-6 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// Region marker
|
||||
const endX = timeToX(marker.endTime || marker.time);
|
||||
const width = endX - x;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={marker.id}
|
||||
className="absolute top-0 bottom-0 group cursor-pointer"
|
||||
style={{ left: `${x}px`, width: `${width}px` }}
|
||||
onMouseEnter={() => setHoveredMarkerId(marker.id)}
|
||||
onMouseLeave={() => setHoveredMarkerId(null)}
|
||||
onClick={() => {
|
||||
onMarkerClick?.(marker);
|
||||
onSeek?.(marker.time);
|
||||
}}
|
||||
>
|
||||
{/* Region background */}
|
||||
<div
|
||||
className={cn(
|
||||
'absolute inset-0 transition-opacity',
|
||||
isHovered ? 'opacity-30' : 'opacity-20'
|
||||
)}
|
||||
style={{ backgroundColor: marker.color || 'var(--color-primary)' }}
|
||||
/>
|
||||
|
||||
{/* Region borders */}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 left-0 w-0.5"
|
||||
style={{ backgroundColor: marker.color || 'var(--color-primary)' }}
|
||||
/>
|
||||
<div
|
||||
className="absolute top-0 bottom-0 right-0 w-0.5"
|
||||
style={{ backgroundColor: marker.color || 'var(--color-primary)' }}
|
||||
/>
|
||||
|
||||
{/* Region label */}
|
||||
<div
|
||||
className="absolute top-0.5 left-1 text-[10px] font-medium truncate pr-1"
|
||||
style={{ color: marker.color || 'var(--color-primary)', maxWidth: `${width - 8}px` }}
|
||||
>
|
||||
{marker.name}
|
||||
</div>
|
||||
|
||||
{/* Hover tooltip with actions */}
|
||||
{isHovered && (
|
||||
<div className="absolute top-full left-0 mt-1 z-10 bg-popover border border-border rounded shadow-lg p-2 min-w-[200px]">
|
||||
<div className="text-xs font-medium mb-1">{marker.name}</div>
|
||||
{marker.description && (
|
||||
<div className="text-xs text-muted-foreground mb-2">{marker.description}</div>
|
||||
)}
|
||||
<div className="flex gap-1">
|
||||
{onMarkerEdit && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMarkerEdit(marker);
|
||||
}}
|
||||
title="Edit marker"
|
||||
className="h-6 w-6"
|
||||
>
|
||||
<Edit2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
{onMarkerDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMarkerDelete(marker.id);
|
||||
}}
|
||||
title="Delete marker"
|
||||
className="h-6 w-6 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user