add video shape

2025-12-28 12:16:35 +03:30
parent 5db596dd2f
commit a010059ef1
3 changed files with 285 additions and 78 deletions
@@ -1,37 +1,89 @@
+import { type FC, useCallback, useMemo } from "react";
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
-import Input from "@/components/Input";
+import { CloseCircle } from "iconsax-react";
+import { useDropzone } from "react-dropzone";
+import VideoUploadZone from "@/components/VideoUploadZone";
+
+const VideoInput: FC = () => {
+    const { objects, addObject, setSelectedObjectId, setTool, deleteObject } = useEditorStore();
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        acceptedFiles.forEach((file) => {
+            const videoUrl = URL.createObjectURL(file);
+            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");
+        });
+    }, [addObject, setSelectedObjectId, setTool]);
+
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop,
+        accept: {
+            'video/*': ['.mp4', '.webm', '.ogg', '.mov', '.avi']
+        },
+        multiple: true
+    });
+
+    const videoObjects = useMemo(() => {
+        return objects.filter((obj) => obj.type === "video");
+    }, [objects]);
+
+    const handleDeleteVideo = (videoId: string) => {
+        const videoObject = videoObjects.find((v) => v.id === videoId);
+        if (videoObject?.videoUrl) {
+            URL.revokeObjectURL(videoObject.videoUrl);
+        }
+        deleteObject(videoId);
+    };

-const VideoInput = () => {
    return (
        <div className="space-y-4">
-            <div>
-                <Input
-                    label="آدرس ویدیو"
-                    placeholder="https://example.com/video.mp4"
-                    onEnter={() => {
-                        const input = document.querySelector('input[placeholder="https://example.com/video.mp4"]') as HTMLInputElement;
-                        if (input?.value) {
-                            const newVideo = {
-                                id: `video-${Date.now()}`,
-                                type: "video" as ToolType,
-                                x: 100,
-                                y: 100,
-                                width: 400,
-                                height: 300,
-                                videoUrl: input.value,
-                            };
-                            const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
-                            addObject(newVideo);
-                            setSelectedObjectId(newVideo.id);
-                            setTool("select");
-                            input.value = "";
-                        }
-                    }}
-                />
-            </div>
-            <div className="text-sm text-gray-600">
-                <p>آدرس ویدیو را وارد کنید</p>
-            </div>
+            <div className="text-base font-bold">ویدیو</div>
+
+            <VideoUploadZone
+                getRootProps={getRootProps}
+                getInputProps={getInputProps}
+            />
+
+            {videoObjects.length > 0 && (
+                <div className="space-y-2">
+                    <div className="text-xs font-bold">ویدیو های آپلود شده</div>
+                    <div className="flex flex-col gap-2">
+                        {videoObjects.map((videoObject) => (
+                            <div
+                                key={videoObject.id}
+                                className=" relative"
+                            >
+                                <video
+                                    src={videoObject.videoUrl}
+                                    className="w-full rounded-lg"
+                                    muted
+                                />
+                                <button
+                                    onClick={() => handleDeleteVideo(videoObject.id)}
+                                    className="absolute -right-1 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center hover:bg-gray-100 transition-colors"
+                                >
+                                    <CloseCircle size={16} color="red" />
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
        </div>
    );
 };