draggables, ipc stuff

2026-02-11 19:42:52 -05:00
parent 0346efd504
commit 5516ce9212
17 changed files with 380 additions and 377 deletions
--- a/electron-ui/src/renderer/components/ClipList.tsx
+++ b/electron-ui/src/renderer/components/ClipList.tsx
@ -0,0 +1,147 @@
+import { use, useEffect, useState } from 'react';
+import AudioTrimmer from './AudioTrimer';
+import { ClipMetadata, PlaybackType } from '../../ipc/audio/types';
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+
+export interface ClipListProps {
+  collection: string;
+}
+
+const testData: ClipMetadata[] = [
+  {
+    name: 'test 1',
+    filePath:
+      'C:\\Users\\mickl\\Music\\clips\\original\\audio_capture_20250118_000351.wav',
+    volume: 1,
+    startTime: undefined,
+    endTime: undefined,
+    playbackType: PlaybackType.PlayStop,
+  },
+  {
+    name: 'test 2',
+    filePath:
+      'C:\\Users\\mickl\\Music\\clips\\original\\audio_capture_20250105_131700.wav',
+    volume: 1,
+    startTime: undefined,
+    endTime: undefined,
+    playbackType: PlaybackType.PlayStop,
+  },
+  {
+    name: 'test 3',
+    filePath:
+      'C:\\Users\\mickl\\Music\\clips\\original\\audio_capture_20250117_194006.wav',
+    volume: 1,
+    startTime: undefined,
+    endTime: undefined,
+    playbackType: PlaybackType.PlayStop,
+  },
+];
+
+function SortableTrimmer({ trimmer, id }) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    marginBottom: '1rem',
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      {/* Only this div is draggable */}
+      <div
+        {...attributes}
+        {...listeners}
+        style={{
+          cursor: 'grab',
+          padding: '4px',
+          background: '#6e44ba',
+          color: 'white',
+          borderRadius: '4px',
+          marginBottom: '8px',
+          width: 'fit-content',
+        }}
+      >
+        Drag
+      </div>
+      {/* Wavesurfer and rest of AudioTrimmer are NOT draggable */}
+      <AudioTrimmer metadata={trimmer} />
+    </div>
+  );
+}
+
+export default function ClipList({ collection }: ClipListProps) {
+  const [metadata, setMetadata] = useState<ClipMetadata[]>(testData);
+  useEffect(() => {
+    setMetadata(testData);
+  }, [collection]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+  );
+
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (active.id !== over?.id) {
+      const oldIndex = metadata.findIndex(
+        (item) => item.filePath === active.id,
+      );
+      const newIndex = metadata.findIndex((item) => item.filePath === over.id);
+      const newMetadata = arrayMove(metadata, oldIndex, newIndex);
+      console.log('New order:', newMetadata);
+      setMetadata(newMetadata);
+    }
+  }
+
+  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.filePath)}
+          strategy={verticalListSortingStrategy}
+        >
+          {metadata.map((trimmer) => (
+            <AudioTrimmer key={trimmer.filePath} metadata={trimmer} />
+          ))}
+        </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>
+  );
+}