xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance media processing with progress tracking

Browse Source
This commit is contained in:
DevloperAmanSingh
2025-06-25 21:41:10 +05:30
parent 76c3293ac4
commit a511c57729
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/src/components/editor/media-panel.tsx
View File

@ -17,27 +17,28 @@ export function MediaPanel() {
const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore(); const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [isProcessing, setIsProcessing] = useState(false); const [isProcessing, setIsProcessing] = useState(false);
const [progress, setProgress] = useState(0);
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
const [mediaFilter, setMediaFilter] = useState("all"); const [mediaFilter, setMediaFilter] = useState("all");
const processFiles = async (files: FileList | File[]) => { const processFiles = async (files: FileList | File[]) => {
// If no files, do nothing if (!files || files.length === 0) return;
if (!files?.length) return;
setIsProcessing(true); setIsProcessing(true);
setProgress(0);
try { try {
// Process files (extract metadata, generate thumbnails, etc.) // Process files (extract metadata, generate thumbnails, etc.)
const items = await processMediaFiles(files); const processedItems = await processMediaFiles(files, (p) =>
setProgress(p)
);
// Add each processed media item to the store // Add each processed media item to the store
items.forEach((item) => { processedItems.forEach((item) => addMediaItem(item));
addMediaItem(item);
});
} catch (error) { } catch (error) {
// Show error if processing fails // Show error toast if processing fails
console.error("File processing failed:", error); console.error("Error processing files:", error);
toast.error("Failed to process files"); toast.error("Failed to process files");
} finally { } finally {
setIsProcessing(false); setIsProcessing(false);
setProgress(0);
} }
}; };
@ -241,15 +242,12 @@ export function MediaPanel() {
{isProcessing ? ( {isProcessing ? (
<> <>
<Upload className="h-4 w-4 animate-spin" /> <Upload className="h-4 w-4 animate-spin" />
<span className="hidden md:inline ml-2">Processing...</span> <span className="hidden md:inline ml-2">{progress}%</span>
</> </>
) : ( ) : (
<> <>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
<span <span className="hidden sm:inline ml-2" aria-label="Add file">
className="hidden sm:inline ml-2"
aria-label="Add file"
>
Add Add
</span> </span>
</> </>