draggables, ipc stuff

electron-ui/src/renderer/components/AudioTrimer.tsx

@@ -10,28 +10,26 @@ import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js';
 import ZoomPlugin from 'wavesurfer.js/dist/plugins/zoom.esm.js';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PauseIcon from '@mui/icons-material/Pause';
-import SaveIcon from '@mui/icons-material/Save';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ClipMetadata } from '../../ipc/audio/types';
 
 export interface AudioTrimmerProps {
-  filePath: string;
-  section: string;
-  title?: string;
-  trimStart?: number;
-  trimEnd?: number;
+  metadata: ClipMetadata;
   onSave?: (trimStart: number, trimEnd: number, title?: string) => void;
   onDelete?: () => void;
 }
 
 export default function AudioTrimmer({
-  filePath,
-  section,
-  title,
-  trimStart,
-  trimEnd,
+  metadata,
   onSave,
   onDelete,
 }: AudioTrimmerProps) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: metadata.filePath });
+
   const [blobUrl, setBlobUrl] = useState<string | undefined>(undefined);
   const containerRef = useRef(null);
   const [clipStart, setClipStart] = useState<number>(0);
@@ -47,6 +45,9 @@ export default function AudioTrimmer({
     [],
   );
 
+  const fileBaseName =
+    metadata.filePath.split('\\').pop()?.split('/').pop() || 'Unknown';
+
   const { wavesurfer, isReady, isPlaying } = useWavesurfer({
     container: containerRef,
     height: 100,
@@ -74,12 +75,12 @@ export default function AudioTrimmer({
 
   useEffect(() => {
     console.log('ready, setting up regions plugin', wavesurfer);
-    if (trimStart !== undefined && trimEnd !== undefined) {
-      setClipStart(trimStart);
-      setClipEnd(trimEnd);
+    if (metadata.startTime !== undefined && metadata.endTime !== undefined) {
+      setClipStart(metadata.startTime);
+      setClipEnd(metadata.endTime);
       plugins[0].addRegion({
-        start: trimStart,
-        end: trimEnd,
+        start: metadata.startTime,
+        end: metadata.endTime,
         color: 'rgba(132, 81, 224, 0.3)',
         drag: false,
         resize: true,
@@ -93,17 +94,20 @@ export default function AudioTrimmer({
       color: 'rgba(132, 81, 224, 0.3)',
     });
     plugins[0].on('region-created', onRegionCreated);
-  }, [isReady, plugins, wavesurfer, onRegionCreated, trimStart, trimEnd]);
+  }, [isReady, plugins, wavesurfer, onRegionCreated, metadata]);
 
   useEffect(() => {
     let url: string | null = null;
     async function fetchAudio() {
       //   console.log('Loading audio buffer for file:', filePath);
-      const buffer =
-        await window.electron.ipcRenderer.loadAudioBuffer(filePath);
-      if (buffer && !buffer.error) {
-        const audioData = buffer.data ? new Uint8Array(buffer.data) : buffer;
+      const buffer = await window.audio.loadAudioBuffer(metadata.filePath);
+      console.log('Received buffer:', buffer.buffer);
+      if (buffer.buffer && !buffer.error) {
+        const audioData = buffer.buffer
+          ? new Uint8Array(buffer.buffer)
+          : buffer;
         url = URL.createObjectURL(new Blob([audioData]));
+        console.log('Created blob URL:', url);
         setBlobUrl(url);
       }
     }
@@ -111,7 +115,7 @@ export default function AudioTrimmer({
     return () => {
       if (url) URL.revokeObjectURL(url);
     };
-  }, [filePath]);
+  }, [metadata.filePath]);
 
   const onPlayPause = () => {
     if (wavesurfer === null) return;
@@ -134,13 +138,36 @@ export default function AudioTrimmer({
   };
 
   return (
-    <div className="shadow-[0_4px_6px_rgba(0,0,0,0.5)] m-2 p-4 rounded-lg bg-darkDrop">
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        position: 'relative',
+        alignItems: 'stretch',
+      }}
+      className="shadow-[0_2px_8px_rgba(0,0,0,0.5)] m-2 rounded-lg bg-darkDrop"
+    >
+      <div
+        {...attributes}
+        {...listeners}
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '10px',
+          borderRadius: '5px 0 0 5px',
+          cursor: 'grab',
+        }}
+        className="bg-neutral-800"
+      />
       {/* <div className="flex flex-col"> */}
-      <div className="">
+      <div className="ml-4 mr-2 p-2">
         <div className="grid justify-items-stretch grid-cols-2">
-          <div className="m-1 mb-5px flex flex-col">
-            <text className="font-bold text-lg">{title}</text>
-            <text className="text-sm text-neutral-500">{filePath}</text>
+          <div className="mb-5px flex flex-col">
+            <text className="font-bold text-lg">{metadata.name}</text>
+            <text className="text-sm text-neutral-500">{fileBaseName}</text>
           </div>
           <div className="flex justify-end">
             <button
@@ -153,9 +180,8 @@ export default function AudioTrimmer({
             <button
               type="button"
               className="bg-plum hover:bg-plumDark text-white font-bold h-11 w-11 rounded-md ml-1"
-              onClick={onSave}
             >
-              <SaveIcon />
+              <ArrowForwardIcon />
             </button>
             <button
               type="button"
@@ -170,11 +196,10 @@ export default function AudioTrimmer({
           <div ref={containerRef} className="wavesurfer-inner" />
         </div>
         <div className="grid justify-items-stretch grid-cols-2 text-neutral-500">
-          <div className="m-1">
-            <text className="text-sm ">Start: {formatTime(clipStart)}</text>
-          </div>
-          <div className="mx-1 flex justify-end">
-            <text className="text-sm">End: {formatTime(clipEnd)}</text>
+          <div className="m-1 flex justify-start">
+            <text className="text-sm ">
+              Clip: {formatTime(clipStart)} - {formatTime(clipEnd)}
+            </text>
           </div>
         </div>
       </div>