add video shape

2025-12-28 12:16:35 +03:30
parent 5db596dd2f
commit a010059ef1
3 changed files with 285 additions and 78 deletions
@@ -0,0 +1,36 @@
+import { type FC } from "react";
+import { DocumentUpload, VideoSquare } from "iconsax-react";
+
+type VideoUploadZoneProps = {
+    getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
+    getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+};
+
+const VideoUploadZone: FC<VideoUploadZoneProps> = ({ getRootProps, getInputProps }) => {
+    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"
+        >
+            <input {...getInputProps()} />
+            <VideoSquare
+                size={32}
+                color="#8C90A3"
+                variant="Outline"
+            />
+            <div className="text-description text-xs">
+                ویدیو مورد نظر را آپلود کنید
+            </div>
+            <div className="flex items-center gap-2">
+                <DocumentUpload
+                    size={16}
+                    color="black"
+                />
+                <div className="text-xs">آپلود</div>
+            </div>
+        </div>
+    );
+};
+
+export default VideoUploadZone;
+
@@ -1,38 +1,90 @@
+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 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()}`,
+                id: videoId,
                type: "video" as ToolType,
                x: 100,
                y: 100,
                width: 400,
                height: 300,
-                                videoUrl: input.value,
+                videoUrl,
            };
-                            const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
+
            addObject(newVideo);
            setSelectedObjectId(newVideo.id);
            setTool("select");
-                            input.value = "";
+        });
+    }, [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);
+    };
+
+    return (
+        <div className="space-y-4">
+            <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 className="text-sm text-gray-600">
-                <p>آدرس ویدیو را وارد کنید</p>
+                        ))}
                    </div>
                </div>
+            )}
+        </div>
    );
 };

@@ -1,7 +1,9 @@
-import { useEffect, useRef } from "react";
-import { Rect, Text } from "react-konva";
+import { useEffect, useRef, useState } from "react";
+import { Image as KonvaImage, Rect, Group, Circle, Text as KonvaText } from "react-konva";
 import Konva from "konva";
+import useImage from "use-image";
 import type { ShapeProps } from "./types";
+import { createPortal } from "react-dom";

 const VideoShape = ({
    obj,
@@ -11,33 +13,112 @@ const VideoShape = ({
    onUpdate,
    draggable,
 }: ShapeProps) => {
-    const shapeRef = useRef<Konva.Rect>(null);
+    const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
+    const [showVideoModal, setShowVideoModal] = useState(false);
+    const groupRef = useRef<Konva.Group>(null);
+    const [image] = useImage(thumbnailUrl || "");

    useEffect(() => {
-        if (isSelected && shapeRef.current && transformerRef.current) {
-            transformerRef.current.nodes([shapeRef.current]);
+        if (!obj.videoUrl) return;
+
+        const video = document.createElement("video");
+        video.src = obj.videoUrl;
+        video.crossOrigin = "anonymous";
+        video.muted = true;
+
+        const handleLoadedMetadata = () => {
+            video.currentTime = 0.1;
+        };
+
+        const handleSeeked = () => {
+            const canvas = document.createElement("canvas");
+            canvas.width = video.videoWidth || 400;
+            canvas.height = video.videoHeight || 300;
+            const ctx = canvas.getContext("2d");
+            if (ctx) {
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                const thumbnail = canvas.toDataURL("image/png");
+                setThumbnailUrl(thumbnail);
+            }
+            video.removeEventListener("seeked", handleSeeked);
+            video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        };
+
+        video.addEventListener("loadedmetadata", handleLoadedMetadata);
+        video.addEventListener("seeked", handleSeeked);
+        video.load();
+
+        return () => {
+            video.removeEventListener("seeked", handleSeeked);
+            video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        };
+    }, [obj.videoUrl]);
+
+    useEffect(() => {
+        if (isSelected && groupRef.current && transformerRef.current && image) {
+            transformerRef.current.nodes([groupRef.current]);
            transformerRef.current.getLayer()?.batchDraw();
        }
-    }, [isSelected, transformerRef]);
+    }, [isSelected, transformerRef, image]);
+
+    useEffect(() => {
+        if (!showVideoModal) return;
+
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                setShowVideoModal(false);
+            }
+        };
+
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [showVideoModal]);
+
+    const containerWidth = obj.width || 400;
+    const containerHeight = obj.height || 300;
+
+    const handlePlayClick = (e: Konva.KonvaEventObject<MouseEvent>) => {
+        e.cancelBubble = true;
+        const evt = e.evt;
+        if (evt) {
+            evt.stopPropagation();
+            evt.stopImmediatePropagation();
+            evt.preventDefault();
+            evt.cancelBubble = true;
+        }
+        requestAnimationFrame(() => {
+            setShowVideoModal(true);
+        });
+    };
+
+    const handleGroupClick = (e?: Konva.KonvaEventObject<MouseEvent>) => {
+        if (e) {
+            const target = e.target;
+            if (target.hasName("playButton") || target.getParent()?.hasName("playButton")) {
+                return;
+            }
+        }
+        if (groupRef.current) {
+            onSelect(obj.id, groupRef.current);
+        }
+    };
+
+    if (!image) {
+        return null;
+    }

    return (
        <>
-            <Rect
-                ref={shapeRef}
+            <Group
+                ref={groupRef}
+                id={obj.id}
                x={obj.x}
                y={obj.y}
-                width={obj.width || 400}
-                height={obj.height || 300}
-                fill="#000000"
-                stroke={isSelected ? "#3b82f6" : "#666666"}
-                strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 0)}
                rotation={obj.rotation || 0}
                draggable={draggable}
-                onClick={() => {
-                    if (shapeRef.current) {
-                        onSelect(obj.id, shapeRef.current);
-                    }
-                }}
+                onClick={handleGroupClick}
                onDragEnd={(e) => {
                    const node = e.target;
                    onUpdate(obj.id, {
@@ -45,38 +126,76 @@ const VideoShape = ({
                        y: node.y(),
                    });
                }}
-                onTransformEnd={() => {
-                    const node = shapeRef.current;
-                    if (!node) return;

-                    const scaleX = node.scaleX();
-                    const scaleY = node.scaleY();
-
-                    node.scaleX(1);
-                    node.scaleY(1);
-
-                    onUpdate(obj.id, {
-                        x: node.x(),
-                        y: node.y(),
-                        rotation: node.rotation(),
-                        width: Math.max(5, (obj.width || 400) * scaleX),
-                        height: Math.max(5, (obj.height || 300) * scaleY),
-                    });
-                }}
+            >
+                <Rect
+                    width={containerWidth}
+                    height={containerHeight}
+                    fill="#000000"
+                    stroke={isSelected ? "#3b82f6" : "#666666"}
+                    strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 0)}
+                    onClick={handleGroupClick}
                />
-            {obj.videoUrl && (
-                <Text
-                    x={obj.x + (obj.width || 400) / 2}
-                    y={obj.y + (obj.height || 300) / 2}
-                    text="▶ ویدیو"
-                    fontSize={16}
+                <KonvaImage
+                    x={0}
+                    y={0}
+                    width={containerWidth}
+                    height={containerHeight}
+                    image={image}
+                    onClick={handleGroupClick}
+                />
+                <Group
+                    name="playButton"
+                    onClick={handlePlayClick}
+                    onTap={handlePlayClick}
+                    listening={true}
+                >
+                    <Circle
+                        x={containerWidth / 2}
+                        y={containerHeight / 2}
+                        radius={30}
+                        fill="rgba(0, 0, 0, 0.6)"
+                        listening={false}
+                    />
+                    <KonvaText
+                        x={containerWidth / 2}
+                        y={containerHeight / 2}
+                        text="▶"
+                        fontSize={24}
                        fill="#ffffff"
-                    fontFamily="irancell"
+                        fontFamily="Arial"
                        align="center"
                        verticalAlign="middle"
-                    offsetX={40}
-                    offsetY={8}
+                        offsetX={12}
+                        offsetY={12}
+                        listening={false}
                    />
+                </Group>
+            </Group>
+            {showVideoModal && createPortal(
+                <div
+                    className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
+                    onClick={() => setShowVideoModal(false)}
+                >
+                    <div
+                        className="relative max-w-4xl w-full mx-4"
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <button
+                            onClick={() => setShowVideoModal(false)}
+                            className="absolute -top-10 right-0 text-white text-2xl hover:text-gray-300"
+                        >
+                            ✕
+                        </button>
+                        <video
+                            src={obj.videoUrl}
+                            controls
+                            autoPlay
+                            className="w-full h-auto"
+                        />
+                    </div>
+                </div>,
+                document.body
            )}
        </>
    );