pages video fix

src/pages/editor/components/sidebar/instructions/VideoInput.tsx

@@ -1,4 +1,4 @@
-import { type FC, useCallback, useMemo } from "react";
+import { type FC, useCallback, useMemo, useState } from "react";
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
 import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
 import { CloseCircle } from "iconsax-react";
@@ -9,30 +9,38 @@ const VideoInput: FC = () => {
     const { objects, addObject, setSelectedObjectId, setTool, deleteObject } =
         useEditorStore();
     const { mutateAsync: uploadFile } = useSingleUpload();
+    const [isUploading, setIsUploading] = useState(false);
 
     const onDrop = useCallback(
         async (acceptedFiles: File[]) => {
-            for (const file of acceptedFiles) {
-                try {
-                    const result = await uploadFile(file);
-                    const videoUrl = result?.data?.url;
-                    if (!videoUrl) continue;
-                    const videoId = `video-${Date.now()}-${Math.random()}`;
-                    const newVideo = {
-                        id: videoId,
-                        type: "video" as ToolType,
-                        x: 100,
-                        y: 100,
-                        width: 400,
-                        height: 300,
-                        videoUrl,
-                    };
-                    addObject(newVideo);
-                    setSelectedObjectId(newVideo.id);
-                    setTool("select");
-                } catch {
-                    // TODO: show error toast
+            if (acceptedFiles.length === 0) return;
+
+            setIsUploading(true);
+            try {
+                for (const file of acceptedFiles) {
+                    try {
+                        const result = await uploadFile(file);
+                        const videoUrl = result?.data?.url;
+                        if (!videoUrl) continue;
+                        const videoId = `video-${Date.now()}-${Math.random()}`;
+                        const newVideo = {
+                            id: videoId,
+                            type: "video" as ToolType,
+                            x: 100,
+                            y: 100,
+                            width: 400,
+                            height: 300,
+                            videoUrl,
+                        };
+                        addObject(newVideo);
+                        setSelectedObjectId(newVideo.id);
+                        setTool("select");
+                    } catch {
+                        // TODO: show error toast
+                    }
                 }
+            } finally {
+                setIsUploading(false);
             }
         },
         [addObject, setSelectedObjectId, setTool, uploadFile]
@@ -43,7 +51,8 @@ const VideoInput: FC = () => {
         accept: {
             'video/*': ['.mp4', '.webm', '.ogg', '.mov', '.avi']
         },
-        multiple: true
+        multiple: true,
+        disabled: isUploading,
     });
 
     const videoObjects = useMemo(() => {
@@ -61,6 +70,7 @@ const VideoInput: FC = () => {
             <VideoUploadZone
                 getRootProps={getRootProps}
                 getInputProps={getInputProps}
+                isLoading={isUploading}
             />
 
             {videoObjects.length > 0 && (