metadata fixes, redux start. Lifecycle fixes for regions, etc
This commit is contained in:
michalcourson
@ -1,12 +1,5 @@
|
||||
const AudioChannels = {
|
||||
LOAD_AUDIO_BUFFER: 'audio:loadAudioBuffer',
|
||||
TRIM_FILE: 'audio:trimFile',
|
||||
DELETE_FILE: 'audio:deleteFile',
|
||||
GET_COLLECTION_METADATA: 'audio:getCollectionMetadata',
|
||||
SET_COLLECTION_METADATA: 'audio:setCollectionMetadata',
|
||||
ADD_COLLECTION: 'audio:addCollection',
|
||||
REMOVE_COLLECTION: 'audio:removeCollection',
|
||||
GET_COLLECTIONS: 'audio:getCollections',
|
||||
} as const;
|
||||
|
||||
export default AudioChannels;
|
||||
|
||||
@ -6,27 +6,3 @@ export interface LoadAudioBufferResult {
|
||||
buffer?: Buffer;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export enum PlaybackType {
|
||||
PlayStop = 'playStop',
|
||||
PlayOverlap = 'playOverlap',
|
||||
}
|
||||
|
||||
export interface ClipMetadata {
|
||||
name: string;
|
||||
filePath: string;
|
||||
volume: number;
|
||||
startTime: number | undefined;
|
||||
endTime: number | undefined;
|
||||
playbackType: PlaybackType;
|
||||
}
|
||||
|
||||
export interface CollectionMetadata {
|
||||
name: string;
|
||||
clips: ClipMetadata[];
|
||||
}
|
||||
|
||||
export interface MetadataFile {
|
||||
uncategorizedClips: ClipMetadata[];
|
||||
collections: CollectionMetadata[];
|
||||
}
|
||||
|
||||
62
electron-ui/src/redux/main.ts
Normal file
62
electron-ui/src/redux/main.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import { createSlice, configureStore } from '@reduxjs/toolkit';
|
||||
import { ClipMetadata, MetadataState } from './types';
|
||||
|
||||
const initialState: MetadataState = {
|
||||
collections: {},
|
||||
};
|
||||
const metadataSlice = createSlice({
|
||||
name: 'metadata',
|
||||
initialState,
|
||||
reducers: {
|
||||
setAllData(state, action) {
|
||||
state.collections = action.payload.collections;
|
||||
},
|
||||
setCollections(state, action) {
|
||||
const { collection, newMetadata } = action.payload;
|
||||
state.collections[collection] = newMetadata;
|
||||
},
|
||||
editClip(state, action) {
|
||||
const { collection, clip } = action.payload;
|
||||
const clips = state.collections[collection];
|
||||
// console.log('Editing clip in collection:', collection, clip);
|
||||
if (clips) {
|
||||
const index = clips.findIndex((c) => c.filename === clip.filename);
|
||||
if (index !== -1) {
|
||||
clips[index] = clip;
|
||||
}
|
||||
}
|
||||
},
|
||||
addNewClips(state, action) {
|
||||
const { collections } = action.payload;
|
||||
Object.keys(collections).forEach((collection) => {
|
||||
if (!state.collections[collection]) {
|
||||
state.collections[collection] = [];
|
||||
}
|
||||
const existingFilenames = new Set(
|
||||
state.collections[collection].map((clip) => clip.filename),
|
||||
);
|
||||
const newClips = collections[collection].filter(
|
||||
(clip: ClipMetadata) => !existingFilenames.has(clip.filename),
|
||||
);
|
||||
state.collections[collection].push(...newClips);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: metadataSlice.reducer,
|
||||
});
|
||||
|
||||
// Can still subscribe to the store
|
||||
// store.subscribe(() => console.log(store.getState()));
|
||||
|
||||
// Get the type of our store variable
|
||||
export type AppStore = typeof store;
|
||||
// Infer the `RootState` and `AppDispatch` types from the store itself
|
||||
export type RootState = ReturnType<AppStore['getState']>;
|
||||
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
|
||||
export type AppDispatch = AppStore['dispatch'];
|
||||
|
||||
export const { setCollections, addNewClips } = metadataSlice.actions;
|
||||
export default metadataSlice.reducer;
|
||||
17
electron-ui/src/redux/types.ts
Normal file
17
electron-ui/src/redux/types.ts
Normal file
@ -0,0 +1,17 @@
|
||||
export enum PlaybackType {
|
||||
PlayStop = 'playStop',
|
||||
PlayOverlap = 'playOverlap',
|
||||
}
|
||||
|
||||
export interface ClipMetadata {
|
||||
name: string;
|
||||
filename: string;
|
||||
volume: number;
|
||||
startTime: number | undefined;
|
||||
endTime: number | undefined;
|
||||
playbackType: PlaybackType;
|
||||
}
|
||||
|
||||
export interface MetadataState {
|
||||
collections: Record<string, ClipMetadata[]>;
|
||||
}
|
||||
@ -1,19 +1,52 @@
|
||||
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
// import 'tailwindcss/tailwind.css';
|
||||
import icon from '../../assets/icon.svg';
|
||||
import './App.css';
|
||||
import ClipList from './components/ClipList';
|
||||
import { useAppDispatch } from './hooks';
|
||||
import { store } from '../redux/main';
|
||||
|
||||
function MainPage() {
|
||||
return <ClipList />;
|
||||
const [collection, setCollection] = useState<string | null>('Uncategorized');
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
useEffect(() => {
|
||||
const fetchMetadata = async () => {
|
||||
try {
|
||||
const response = await fetch('http://localhost:5010/meta');
|
||||
const data = await response.json();
|
||||
// console.log('Fetched collections:', data.collections);
|
||||
dispatch({ type: 'metadata/addNewClips', payload: data });
|
||||
} catch (error) {
|
||||
console.error('Error fetching metadata:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchMetadata();
|
||||
|
||||
// 1. Set up the interval
|
||||
const intervalId = setInterval(async () => {
|
||||
fetchMetadata();
|
||||
}, 5000); // 1000 milliseconds delay
|
||||
|
||||
// 2. Return a cleanup function to clear the interval when the component unmounts
|
||||
return () => {
|
||||
clearInterval(intervalId);
|
||||
};
|
||||
}, [dispatch]); //
|
||||
return <ClipList collection={collection} />;
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<MainPage />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
<Provider store={store}>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<MainPage />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,6 +5,10 @@ import React, {
|
||||
useCallback,
|
||||
useRef,
|
||||
} from 'react';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import { useWavesurfer } from '@wavesurfer/react';
|
||||
import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js';
|
||||
import ZoomPlugin from 'wavesurfer.js/dist/plugins/zoom.esm.js';
|
||||
@ -14,26 +18,53 @@ 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';
|
||||
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js';
|
||||
import { ClipMetadata } from '../../redux/types';
|
||||
import { useAppSelector } from '../hooks';
|
||||
|
||||
export interface AudioTrimmerProps {
|
||||
metadata: ClipMetadata;
|
||||
onSave?: (trimStart: number, trimEnd: number, title?: string) => void;
|
||||
filename: string;
|
||||
onSave?: (metadata: ClipMetadata) => void;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
export default function AudioTrimmer({
|
||||
metadata,
|
||||
filename,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: AudioTrimmerProps) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition } =
|
||||
useSortable({ id: metadata.filePath });
|
||||
useSortable({ id: filename });
|
||||
|
||||
const metadata = useAppSelector((state) => {
|
||||
const clip = Object.values(state.collections)
|
||||
.flat()
|
||||
.find((c) => c.filename === filename);
|
||||
return clip ?? ({ filename, name: 'Unknown Clip' } as ClipMetadata);
|
||||
});
|
||||
// Dialog state for editing name
|
||||
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
||||
const [nameInput, setNameInput] = useState<string>(metadata.name);
|
||||
|
||||
useEffect(() => {
|
||||
setNameInput(metadata.name);
|
||||
}, [metadata.name]);
|
||||
|
||||
const openEditDialog = () => setEditDialogOpen(true);
|
||||
const closeEditDialog = () => setEditDialogOpen(false);
|
||||
|
||||
const handleDialogSave = () => {
|
||||
if (nameInput.trim() && nameInput !== metadata.name) {
|
||||
const updated = { ...metadata, name: nameInput.trim() };
|
||||
if (onSave) onSave(updated);
|
||||
}
|
||||
closeEditDialog();
|
||||
};
|
||||
|
||||
const [blobUrl, setBlobUrl] = useState<string | undefined>(undefined);
|
||||
const containerRef = useRef(null);
|
||||
const [clipStart, setClipStart] = useState<number>(0);
|
||||
const [clipEnd, setClipEnd] = useState<number>(0);
|
||||
// const [clipStart, setClipStart] = useState<number | undefined>(undefined);
|
||||
// const [clipEnd, setClipEnd] = useState<number | undefined>(undefined);
|
||||
|
||||
const plugins = useMemo(
|
||||
() => [
|
||||
@ -46,7 +77,7 @@ export default function AudioTrimmer({
|
||||
);
|
||||
|
||||
const fileBaseName =
|
||||
metadata.filePath.split('\\').pop()?.split('/').pop() || 'Unknown';
|
||||
metadata.filename.split('\\').pop()?.split('/').pop() || 'Unknown';
|
||||
|
||||
const { wavesurfer, isReady, isPlaying } = useWavesurfer({
|
||||
container: containerRef,
|
||||
@ -58,56 +89,123 @@ export default function AudioTrimmer({
|
||||
plugins,
|
||||
});
|
||||
|
||||
// Add this ref to always have the latest metadata
|
||||
const metadataRef = useRef(metadata);
|
||||
useEffect(() => {
|
||||
metadataRef.current = metadata;
|
||||
}, [metadata]);
|
||||
|
||||
const onRegionCreated = useCallback(
|
||||
(newRegion: any) => {
|
||||
if (wavesurfer === null) return;
|
||||
const allRegions = plugins[0].getRegions();
|
||||
|
||||
const allRegions = (plugins[0] as RegionsPlugin).getRegions();
|
||||
let isNew = metadataRef.current.startTime === undefined;
|
||||
|
||||
allRegions.forEach((region) => {
|
||||
if (region.id !== newRegion.id) {
|
||||
if (
|
||||
region.start === newRegion.start &&
|
||||
region.end === newRegion.end
|
||||
) {
|
||||
newRegion.remove();
|
||||
return;
|
||||
}
|
||||
region.remove();
|
||||
isNew = !(region.start === 0 && region.end === 0);
|
||||
// console.log('Region replace:', newRegion, region);
|
||||
}
|
||||
});
|
||||
setClipStart(newRegion.start);
|
||||
setClipEnd(newRegion.end);
|
||||
|
||||
if (isNew) {
|
||||
console.log('Region created:', metadataRef.current);
|
||||
const updated = {
|
||||
...metadataRef.current,
|
||||
startTime: newRegion.start,
|
||||
endTime: newRegion.end,
|
||||
};
|
||||
if (onSave) {
|
||||
onSave(updated);
|
||||
}
|
||||
}
|
||||
},
|
||||
[plugins, wavesurfer],
|
||||
[plugins, wavesurfer, onSave],
|
||||
);
|
||||
|
||||
const onRegionUpdated = useCallback(
|
||||
(newRegion: any) => {
|
||||
if (wavesurfer === null) return;
|
||||
|
||||
const updated = {
|
||||
...metadataRef.current,
|
||||
startTime: newRegion.start,
|
||||
endTime: newRegion.end,
|
||||
};
|
||||
if (onSave) {
|
||||
onSave(updated);
|
||||
}
|
||||
},
|
||||
[onSave, wavesurfer],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('ready, setting up regions plugin', wavesurfer);
|
||||
if (metadata.startTime !== undefined && metadata.endTime !== undefined) {
|
||||
setClipStart(metadata.startTime);
|
||||
setClipEnd(metadata.endTime);
|
||||
plugins[0].addRegion({
|
||||
start: metadata.startTime,
|
||||
end: metadata.endTime,
|
||||
color: 'rgba(132, 81, 224, 0.3)',
|
||||
drag: false,
|
||||
resize: true,
|
||||
});
|
||||
} else {
|
||||
setClipStart(0);
|
||||
setClipEnd(wavesurfer ? wavesurfer.getDuration() : 0);
|
||||
}
|
||||
const plugin = plugins[0] as RegionsPlugin;
|
||||
|
||||
plugins[0].enableDragSelection({
|
||||
if (!isReady) return;
|
||||
// console.log('ready, setting up regions plugin', plugin, isReady);
|
||||
if (
|
||||
metadataRef.current.startTime !== undefined &&
|
||||
metadataRef.current.endTime !== undefined
|
||||
) {
|
||||
// setClipStart(metadata.startTime);
|
||||
// setClipEnd(metadata.endTime);
|
||||
// console.log('Adding region from metadata:', metadata);=
|
||||
|
||||
const allRegions = plugin.getRegions();
|
||||
// console.log('Existing regions:', allRegions);
|
||||
if (
|
||||
allRegions.length === 0 ||
|
||||
(allRegions.length === 1 &&
|
||||
allRegions[0].start === 0 &&
|
||||
allRegions[0].end === 0)
|
||||
) {
|
||||
// console.log('adding region from metadata:', metadataRef.current);
|
||||
plugin.addRegion({
|
||||
start: metadataRef.current.startTime,
|
||||
end: metadataRef.current.endTime,
|
||||
color: 'rgba(132, 81, 224, 0.3)',
|
||||
drag: false,
|
||||
resize: true,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// setClipStart(0);
|
||||
// setClipEnd(wavesurfer ? wavesurfer.getDuration() : 0);
|
||||
}
|
||||
}, [isReady, plugins]);
|
||||
|
||||
useEffect(() => {
|
||||
const plugin = plugins[0] as RegionsPlugin;
|
||||
plugin.unAll();
|
||||
plugin.on('region-created', onRegionCreated);
|
||||
plugin.on('region-updated', onRegionUpdated);
|
||||
plugin.enableDragSelection({
|
||||
color: 'rgba(132, 81, 224, 0.3)',
|
||||
});
|
||||
plugins[0].on('region-created', onRegionCreated);
|
||||
}, [isReady, plugins, wavesurfer, onRegionCreated, metadata]);
|
||||
}, [onRegionCreated, onRegionUpdated, plugins]);
|
||||
|
||||
useEffect(() => {
|
||||
let url: string | null = null;
|
||||
async function fetchAudio() {
|
||||
// console.log('Loading audio buffer for file:', filePath);
|
||||
const buffer = await window.audio.loadAudioBuffer(metadata.filePath);
|
||||
console.log('Received buffer:', buffer.buffer);
|
||||
// console.log('Loading audio buffer for file:', filename);
|
||||
const buffer = await window.audio.loadAudioBuffer(metadata.filename);
|
||||
// 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);
|
||||
// console.log('Created blob URL:', url);
|
||||
setBlobUrl(url);
|
||||
}
|
||||
}
|
||||
@ -115,14 +213,14 @@ export default function AudioTrimmer({
|
||||
return () => {
|
||||
if (url) URL.revokeObjectURL(url);
|
||||
};
|
||||
}, [metadata.filePath]);
|
||||
}, [metadata.filename]);
|
||||
|
||||
const onPlayPause = () => {
|
||||
if (wavesurfer === null) return;
|
||||
if (isPlaying) {
|
||||
wavesurfer.pause();
|
||||
} else {
|
||||
const allRegions = plugins[0].getRegions();
|
||||
const allRegions = (plugins[0] as RegionsPlugin).getRegions();
|
||||
if (allRegions.length > 0) {
|
||||
wavesurfer.play(allRegions[0].start, allRegions[0].end);
|
||||
} else {
|
||||
@ -149,7 +247,9 @@ export default function AudioTrimmer({
|
||||
className="shadow-[0_2px_8px_rgba(0,0,0,0.5)] m-2 rounded-lg bg-darkDrop"
|
||||
>
|
||||
<div
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...attributes}
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...listeners}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@ -166,9 +266,63 @@ export default function AudioTrimmer({
|
||||
<div className="ml-4 mr-2 p-2">
|
||||
<div className="grid justify-items-stretch grid-cols-2">
|
||||
<div className="mb-5px flex flex-col">
|
||||
<text className="font-bold text-lg">{metadata.name}</text>
|
||||
<span
|
||||
className="font-bold text-lg text-white mb-1 cursor-pointer"
|
||||
onClick={openEditDialog}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
openEditDialog();
|
||||
}
|
||||
}}
|
||||
title="Click to edit name"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
style={{ outline: 'none' }}
|
||||
>
|
||||
{metadata.name}
|
||||
</span>
|
||||
<text className="text-sm text-neutral-500">{fileBaseName}</text>
|
||||
</div>
|
||||
<Dialog
|
||||
open={editDialogOpen}
|
||||
onClose={closeEditDialog}
|
||||
slotProps={{
|
||||
paper: { sx: { backgroundColor: '#1a1a1a', color: 'white' } },
|
||||
}}
|
||||
>
|
||||
<DialogTitle>Edit Clip Name</DialogTitle>
|
||||
<DialogContent>
|
||||
<input
|
||||
autoFocus
|
||||
className="font-bold text-lg bg-transparent outline-none border-b border-plum focus:border-plumDark text-white mb-1 w-full text-center"
|
||||
type="text"
|
||||
value={nameInput}
|
||||
onChange={(e) => setNameInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleDialogSave();
|
||||
}}
|
||||
aria-label="Edit clip name"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeEditDialog}
|
||||
className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDialogSave}
|
||||
className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
@ -198,7 +352,8 @@ export default function AudioTrimmer({
|
||||
<div className="grid justify-items-stretch grid-cols-2 text-neutral-500">
|
||||
<div className="m-1 flex justify-start">
|
||||
<text className="text-sm ">
|
||||
Clip: {formatTime(clipStart)} - {formatTime(clipEnd)}
|
||||
Clip: {formatTime(metadata.startTime ?? 0)} -{' '}
|
||||
{formatTime(metadata.endTime ?? 0)}
|
||||
</text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import { use, useEffect, useState } from 'react';
|
||||
import AudioTrimmer from './AudioTrimer';
|
||||
import { ClipMetadata, PlaybackType } from '../../ipc/audio/types';
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
@ -12,99 +9,90 @@ import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
verticalListSortingStrategy,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
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;
|
||||
}
|
||||
|
||||
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 metadata = useAppSelector(
|
||||
(state) => state.collections[collection] || [],
|
||||
);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
);
|
||||
|
||||
function handleDragEnd(event) {
|
||||
async function handleDragEnd(event) {
|
||||
const { active, over } = event;
|
||||
if (active.id !== over?.id) {
|
||||
const oldIndex = metadata.findIndex(
|
||||
(item) => item.filePath === active.id,
|
||||
(item) => item.filename === active.id,
|
||||
);
|
||||
const newIndex = metadata.findIndex((item) => item.filePath === over.id);
|
||||
const newIndex = metadata.findIndex((item) => item.filename === over.id);
|
||||
const newMetadata = arrayMove(metadata, oldIndex, newIndex);
|
||||
console.log('New order:', newMetadata);
|
||||
setMetadata(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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,11 +105,15 @@ export default function ClipList({ collection }: ClipListProps) {
|
||||
modifiers={[restrictToVerticalAxis]}
|
||||
>
|
||||
<SortableContext
|
||||
items={metadata.map((item) => item.filePath)}
|
||||
items={metadata.map((item) => item.filename)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
{metadata.map((trimmer) => (
|
||||
<AudioTrimmer key={trimmer.filePath} metadata={trimmer} />
|
||||
<AudioTrimmer
|
||||
key={trimmer.filename}
|
||||
filename={trimmer.filename}
|
||||
onSave={handleClipSave}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
|
||||
6
electron-ui/src/renderer/hooks.ts
Normal file
6
electron-ui/src/renderer/hooks.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { useDispatch, useSelector, useStore } from 'react-redux';
|
||||
import type { AppDispatch, RootState } from '../redux/main';
|
||||
|
||||
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
|
||||
export const useAppSelector = useSelector.withTypes<RootState>();
|
||||
export const useAppStore = useStore.withTypes<RootState>();
|
||||
Reference in New Issue
Block a user