140 lines
4.2 KiB
TypeScript
140 lines
4.2 KiB
TypeScript
import {
|
|
DndContext,
|
|
closestCenter,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
} from '@dnd-kit/core';
|
|
import {
|
|
arrayMove,
|
|
SortableContext,
|
|
verticalListSortingStrategy,
|
|
} from '@dnd-kit/sortable';
|
|
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
|
|
import AudioTrimmer from './AudioTrimer';
|
|
import { ClipMetadata } from '../../redux/types';
|
|
import { useAppDispatch, useAppSelector } from '../hooks';
|
|
|
|
export interface ClipListProps {
|
|
collection: string;
|
|
}
|
|
|
|
export default function ClipList({ collection }: ClipListProps) {
|
|
const metadata = useAppSelector(
|
|
(state) => state.collections[collection] || [],
|
|
);
|
|
const dispatch = useAppDispatch();
|
|
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
|
);
|
|
|
|
async function handleDragEnd(event) {
|
|
const { active, over } = event;
|
|
if (active.id !== over?.id) {
|
|
const oldIndex = metadata.findIndex(
|
|
(item) => item.filename === active.id,
|
|
);
|
|
const newIndex = metadata.findIndex((item) => item.filename === over.id);
|
|
const newMetadata = arrayMove(metadata, oldIndex, newIndex);
|
|
console.log('New order:', newMetadata);
|
|
dispatch({
|
|
type: 'metadata/setCollections',
|
|
payload: { collection, newMetadata },
|
|
});
|
|
try {
|
|
const response = await fetch(
|
|
'http://localhost:5010/meta/collection/clips/reorder',
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: collection,
|
|
clips: newMetadata,
|
|
}),
|
|
},
|
|
);
|
|
const data = await response.json();
|
|
console.log('handle reorder return:', data.collections);
|
|
dispatch({ type: 'metadata/setAllData', payload: data });
|
|
} catch (error) {
|
|
console.error('Error saving new clip order:', error);
|
|
}
|
|
// setMetadata(newMetadata);
|
|
}
|
|
}
|
|
|
|
async function handleClipSave(meta: ClipMetadata) {
|
|
try {
|
|
dispatch({
|
|
type: 'metadata/editClip',
|
|
payload: { collection, clip: meta },
|
|
});
|
|
const response = await fetch(
|
|
'http://localhost:5010/meta/collection/clips/edit',
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: collection,
|
|
clip: meta,
|
|
}),
|
|
},
|
|
);
|
|
const data = await response.json();
|
|
// console.log('handle clip save return:', data.collections);
|
|
dispatch({
|
|
type: 'metadata/editClip',
|
|
payload: { collection, clip: meta },
|
|
});
|
|
} catch (error) {
|
|
console.error('Error saving clip metadata:', error);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col justify-center bg-midnight text-offwhite">
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={handleDragEnd}
|
|
modifiers={[restrictToVerticalAxis]}
|
|
>
|
|
<SortableContext
|
|
items={metadata.map((item) => item.filename)}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
{metadata.map((trimmer) => (
|
|
<AudioTrimmer
|
|
key={trimmer.filename}
|
|
filename={trimmer.filename}
|
|
onSave={handleClipSave}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
</div>
|
|
// <div className="min-h-screen flex flex-col justify-center bg-midnight text-offwhite">
|
|
// <AudioTrimmer
|
|
// title="audio_capture_20251206_123108.wav"
|
|
// filePath="C:\\Users\\mickl\\Music\\clips\\original\\audio_capture_20250118_000351.wav"
|
|
// // section="Section 1"
|
|
// />
|
|
// <AudioTrimmer
|
|
// title="audio_capture_20251206_123108.wav"
|
|
// filePath="C:\\Users\\mickl\\Music\\clips\\original\\audio_capture_20250118_000351.wav"
|
|
// // section="Section 1"
|
|
// />
|
|
// <AudioTrimmer
|
|
// title="audio_capture_20251206_123108.wav"
|
|
// filePath="C:\\Users\\mickl\\Music\\clips\\original\\audio_capture_20250118_000351.wav"
|
|
// // section="Section 1"
|
|
// />
|
|
// </div>
|
|
);
|
|
}
|