base admin

2026-06-03 12:24:32 +03:30
parent 76f3e1bf6e
commit 3bfd5fd1eb
16 changed files with 374 additions and 3 deletions
@@ -0,0 +1,96 @@
+import { type FC, useCallback, useMemo } from "react";
+import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
+import { CloseCircle, Music } from "iconsax-react";
+import { useDropzone } from "react-dropzone";
+import AudioUploadZone from "@/components/AudioUploadZone";
+
+export const AUDIO_ACCEPT = {
+    "audio/*": [".mp3", ".wav", ".ogg", ".m4a", ".aac", ".flac", ".webm"],
+} as const;
+
+const AudioInput: FC = () => {
+    const { objects, addObject, setSelectedObjectId, setTool, deleteObject } =
+        useEditorStore();
+    const { mutateAsync: uploadFile } = useSingleUpload();
+
+    const onDrop = useCallback(
+        async (acceptedFiles: File[]) => {
+            for (const file of acceptedFiles) {
+                try {
+                    const result = await uploadFile(file);
+                    const audioUrl = result?.data?.url;
+                    if (!audioUrl) continue;
+                    const audioId = `audio-${Date.now()}-${Math.random()}`;
+                    const newAudio = {
+                        id: audioId,
+                        type: "audio" as ToolType,
+                        x: 100,
+                        y: 100,
+                        width: 320,
+                        height: 56,
+                        audioUrl,
+                    };
+                    addObject(newAudio);
+                    setSelectedObjectId(newAudio.id);
+                    setTool("select");
+                } catch {
+                    // TODO: show error toast
+                }
+            }
+        },
+        [addObject, setSelectedObjectId, setTool, uploadFile]
+    );
+
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop,
+        accept: AUDIO_ACCEPT,
+        multiple: true,
+    });
+
+    const audioObjects = useMemo(() => {
+        return objects.filter((obj) => obj.type === "audio");
+    }, [objects]);
+
+    const handleDeleteAudio = (audioId: string) => {
+        deleteObject(audioId);
+    };
+
+    return (
+        <div className="space-y-4">
+            <div className="text-base font-bold">صدا</div>
+
+            <AudioUploadZone
+                getRootProps={getRootProps}
+                getInputProps={getInputProps}
+            />
+
+            {audioObjects.length > 0 && (
+                <div className="space-y-2">
+                    <div className="text-xs font-bold">فایل‌های صوتی آپلود شده</div>
+                    <div className="flex flex-col gap-2">
+                        {audioObjects.map((audioObject) => (
+                            <div
+                                key={audioObject.id}
+                                className="relative flex items-center gap-2 rounded-lg border border-border bg-gray-50 px-3 py-2"
+                            >
+                                <Music size={20} color="#8C90A3" variant="Bold" />
+                                <span className="flex-1 truncate text-xs text-description">
+                                    فایل صوتی
+                                </span>
+                                <button
+                                    onClick={() => handleDeleteAudio(audioObject.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>
+    );
+};
+
+export default AudioInput;