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>
71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useCallback } from 'react';
|
|
import type { Marker, CreateMarkerInput } from '@/types/marker';
|
|
|
|
export function useMarkers() {
|
|
const [markers, setMarkers] = useState<Marker[]>([]);
|
|
|
|
const addMarker = useCallback((input: CreateMarkerInput): Marker => {
|
|
const marker: Marker = {
|
|
...input,
|
|
id: `marker-${Date.now()}-${Math.random()}`,
|
|
};
|
|
setMarkers((prev) => [...prev, marker].sort((a, b) => a.time - b.time));
|
|
return marker;
|
|
}, []);
|
|
|
|
const updateMarker = useCallback((id: string, updates: Partial<Marker>) => {
|
|
setMarkers((prev) => {
|
|
const updated = prev.map((m) =>
|
|
m.id === id ? { ...m, ...updates } : m
|
|
);
|
|
// Re-sort if time changed
|
|
if ('time' in updates) {
|
|
return updated.sort((a, b) => a.time - b.time);
|
|
}
|
|
return updated;
|
|
});
|
|
}, []);
|
|
|
|
const removeMarker = useCallback((id: string) => {
|
|
setMarkers((prev) => prev.filter((m) => m.id !== id));
|
|
}, []);
|
|
|
|
const clearMarkers = useCallback(() => {
|
|
setMarkers([]);
|
|
}, []);
|
|
|
|
const getMarkerAt = useCallback((time: number, tolerance: number = 0.1): Marker | undefined => {
|
|
return markers.find((m) => {
|
|
if (m.type === 'point') {
|
|
return Math.abs(m.time - time) <= tolerance;
|
|
} else {
|
|
// For regions, check if time is within the region
|
|
return m.endTime !== undefined && time >= m.time && time <= m.endTime;
|
|
}
|
|
});
|
|
}, [markers]);
|
|
|
|
const getNextMarker = useCallback((time: number): Marker | undefined => {
|
|
return markers.find((m) => m.time > time);
|
|
}, [markers]);
|
|
|
|
const getPreviousMarker = useCallback((time: number): Marker | undefined => {
|
|
const previous = markers.filter((m) => m.time < time);
|
|
return previous[previous.length - 1];
|
|
}, [markers]);
|
|
|
|
return {
|
|
markers,
|
|
addMarker,
|
|
updateMarker,
|
|
removeMarker,
|
|
clearMarkers,
|
|
getMarkerAt,
|
|
getNextMarker,
|
|
getPreviousMarker,
|
|
setMarkers,
|
|
};
|
|
}
|