From e6fc300fbaa545ec8b1744c124ed830b1d3076c4 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 13 Jun 2026 15:43:30 +0330
Subject: [PATCH] audio name

---
 src/pages/editor/components/LayersList.tsx    |  2 +-
 .../components/canvas/ObjectRenderer.tsx      |  7 ++++-
 .../sidebar/instructions/AudioInput.tsx       | 31 ++++++++++++++++---
 .../sidebar/settings/AudioSettings.tsx        |  6 ++++
 .../editor/components/tools/AudioShape.tsx    | 21 +++++++++++--
 src/pages/editor/store/editorStore.types.ts   |  2 ++
 6 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/src/pages/editor/components/LayersList.tsx b/src/pages/editor/components/LayersList.tsx
index 7bd349b..330a23c 100644
--- a/src/pages/editor/components/LayersList.tsx
+++ b/src/pages/editor/components/LayersList.tsx
@@ -97,7 +97,7 @@ const LayersList = () => {
       case 'video':
         return 'ویدیو'
       case 'audio':
-        return 'صدا'
+        return obj.audioName || 'صدا'
       case 'document':
         return 'سند'
       case 'arrow':
diff --git a/src/pages/editor/components/canvas/ObjectRenderer.tsx b/src/pages/editor/components/canvas/ObjectRenderer.tsx
index e27e94b..d144c57 100644
--- a/src/pages/editor/components/canvas/ObjectRenderer.tsx
+++ b/src/pages/editor/components/canvas/ObjectRenderer.tsx
@@ -224,7 +224,12 @@ const ObjectRenderer = ({
             break;
 
         case "audio":
-            shapeElement = <AudioShape key={obj.id} {...commonProps} />;
+            shapeElement = (
+                <AudioShape
+                    key={`${obj.id}-${obj.audioName ?? ""}`}
+                    {...commonProps}
+                />
+            );
             break;
         case "document":
             shapeElement = <ImageObject key={obj.id} {...commonProps} />;
diff --git a/src/pages/editor/components/sidebar/instructions/AudioInput.tsx b/src/pages/editor/components/sidebar/instructions/AudioInput.tsx
index bc69a4a..aff8954 100644
--- a/src/pages/editor/components/sidebar/instructions/AudioInput.tsx
+++ b/src/pages/editor/components/sidebar/instructions/AudioInput.tsx
@@ -4,16 +4,21 @@ import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
 import { CloseCircle, Music } from "iconsax-react";
 import { useDropzone } from "react-dropzone";
 import AudioUploadZone from "@/components/AudioUploadZone";
+import Input from "@/components/Input";
+
+const getAudioNameFromFile = (file: File) =>
+    file.name.replace(/\.[^/.]+$/, "");
 
 export const AUDIO_ACCEPT = {
     "audio/*": [".mp3", ".wav", ".ogg", ".m4a", ".aac", ".flac", ".webm"],
 } as const;
 
 const AudioInput: FC = () => {
-    const { objects, addObject, setSelectedObjectId, setTool, deleteObject } =
+    const { objects, addObject, setSelectedObjectId, setTool, deleteObject, updateObject } =
         useEditorStore();
     const { mutateAsync: uploadFile } = useSingleUpload();
     const [isUploading, setIsUploading] = useState(false);
+    const [audioName, setAudioName] = useState("");
 
     const onDrop = useCallback(
         async (acceptedFiles: File[]) => {
@@ -35,6 +40,7 @@ const AudioInput: FC = () => {
                             width: 320,
                             height: 56,
                             audioUrl,
+                            audioName: audioName.trim() || getAudioNameFromFile(file),
                         };
                         addObject(newAudio);
                         setSelectedObjectId(newAudio.id);
@@ -43,11 +49,12 @@ const AudioInput: FC = () => {
                         // TODO: show error toast
                     }
                 }
+                setAudioName("");
             } finally {
                 setIsUploading(false);
             }
         },
-        [addObject, setSelectedObjectId, setTool, uploadFile]
+        [addObject, audioName, setSelectedObjectId, setTool, uploadFile]
     );
 
     const { getRootProps, getInputProps } = useDropzone({
@@ -69,6 +76,13 @@ const AudioInput: FC = () => {
         <div className="space-y-4">
             <div className="text-base font-bold">صدا</div>
 
+            <Input
+                label="نام فایل صوتی"
+                value={audioName}
+                onChange={(e) => setAudioName(e.target.value)}
+                placeholder="مثلاً موسیقی پس‌زمینه"
+            />
+
             <AudioUploadZone
                 getRootProps={getRootProps}
                 getInputProps={getInputProps}
@@ -85,9 +99,16 @@ const AudioInput: FC = () => {
                                 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>
+                                <input
+                                    className="flex-1 h-7 rounded-lg border border-border bg-white px-2 text-xs text-black outline-none"
+                                    value={audioObject.audioName || ""}
+                                    onChange={(e) =>
+                                        updateObject(audioObject.id, {
+                                            audioName: e.target.value,
+                                        })
+                                    }
+                                    placeholder="نام فایل صوتی"
+                                />
                                 <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"
diff --git a/src/pages/editor/components/sidebar/settings/AudioSettings.tsx b/src/pages/editor/components/sidebar/settings/AudioSettings.tsx
index 85dd8d4..e41a00c 100644
--- a/src/pages/editor/components/sidebar/settings/AudioSettings.tsx
+++ b/src/pages/editor/components/sidebar/settings/AudioSettings.tsx
@@ -10,6 +10,12 @@ type AudioSettingsProps = {
 const AudioSettings = ({ selectedObject, onUpdate }: AudioSettingsProps) => {
     return (
         <>
+            <Input
+                label="نام فایل صوتی"
+                value={selectedObject.audioName || ""}
+                onChange={(e) => onUpdate(selectedObject.id, { audioName: e.target.value })}
+                placeholder="مثلاً موسیقی پس‌زمینه"
+            />
             <Input
                 label="آدرس فایل صوتی"
                 value={selectedObject.audioUrl || ""}
diff --git a/src/pages/editor/components/tools/AudioShape.tsx b/src/pages/editor/components/tools/AudioShape.tsx
index 22bdcfd..0d3bba5 100644
--- a/src/pages/editor/components/tools/AudioShape.tsx
+++ b/src/pages/editor/components/tools/AudioShape.tsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { Rect, Group, Circle, Text as KonvaText } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
@@ -11,12 +11,25 @@ const AudioShape = ({
     draggable,
 }: ShapeProps) => {
     const groupRef = useRef<Konva.Group>(null);
+    const labelRef = useRef<Konva.Text>(null);
 
     const containerWidth = obj.width || 320;
     const containerHeight = obj.height || 56;
     const barY = containerHeight * 0.55;
     const barHeight = Math.max(4, containerHeight * 0.12);
     const playRadius = Math.min(18, containerHeight * 0.35);
+    const labelWidth = Math.max(0, containerWidth - playRadius * 2 - 44);
+    const displayName = useMemo(
+        () => obj.audioName?.trim() || "فایل صوتی",
+        [obj.audioName],
+    );
+
+    useEffect(() => {
+        const labelNode = labelRef.current;
+        if (!labelNode) return;
+        labelNode.text(displayName);
+        labelNode.getLayer()?.batchDraw();
+    }, [displayName]);
 
     const handleGroupClick = (e?: Konva.KonvaEventObject<MouseEvent>) => {
         if (e) {
@@ -103,13 +116,17 @@ const AudioShape = ({
                 listening={false}
             />
             <KonvaText
+                ref={labelRef}
+                key={displayName}
                 x={playRadius * 2 + 28}
                 y={containerHeight * 0.18}
-                text="فایل صوتی (پیش‌نمایش)"
+                text={displayName}
                 fontSize={11}
                 fill="#6b7280"
                 fontFamily="Arial"
                 listening={false}
+                width={labelWidth}
+                ellipsis={true}
             />
         </Group>
     );
diff --git a/src/pages/editor/store/editorStore.types.ts b/src/pages/editor/store/editorStore.types.ts
index 886f930..38ed03b 100644
--- a/src/pages/editor/store/editorStore.types.ts
+++ b/src/pages/editor/store/editorStore.types.ts
@@ -70,6 +70,8 @@ export type EditorObject = {
   imageUrl?: string;
   videoUrl?: string;
   audioUrl?: string;
+  /** نام نمایشی فایل صوتی؛ فقط در ادیتور استفاده می‌شود */
+  audioName?: string;
   linkUrl?: string;
   rotation?: number;
   scaleX?: number;