pages video fix

src/components/VideoUploadZone.tsx

@@ -1,18 +1,38 @@
 import { type FC } from "react";
 import { DocumentUpload, VideoSquare } from "iconsax-react";
+import { clx } from "@/helpers/utils";
 
 type VideoUploadZoneProps = {
     getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
     getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+    isLoading?: boolean;
+    loadingLabel?: string;
 };
 
-const VideoUploadZone: FC<VideoUploadZoneProps> = ({ getRootProps, getInputProps }) => {
+const VideoUploadZone: FC<VideoUploadZoneProps> = ({
+    getRootProps,
+    getInputProps,
+    isLoading = false,
+    loadingLabel = "در حال آپلود...",
+}) => {
     return (
         <div
             {...getRootProps()}
-            className="w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl cursor-pointer hover:bg-gray-50 transition-colors"
+            className={clx(
+                "w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl transition-colors",
+                isLoading
+                    ? "pointer-events-none opacity-80"
+                    : "cursor-pointer hover:bg-gray-50"
+            )}
         >
             <input {...getInputProps()} />
+            {isLoading ? (
+                <>
+                    <span className="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
+                    <div className="text-description text-xs">{loadingLabel}</div>
+                </>
+            ) : (
+                <>
                     <VideoSquare
                         size={32}
                         color="#8C90A3"
@@ -28,6 +48,8 @@ const VideoUploadZone: FC<VideoUploadZoneProps> = ({ getRootProps, getInputProps
                         />
                         <div className="text-xs">آپلود</div>
                     </div>
+                </>
+            )}
         </div>
     );
 };

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,9 +9,14 @@ 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[]) => {
+            if (acceptedFiles.length === 0) return;
+
+            setIsUploading(true);
+            try {
                 for (const file of acceptedFiles) {
                     try {
                         const result = await uploadFile(file);
@@ -34,6 +39,9 @@ const VideoInput: FC = () => {
                         // 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 && (