audio name

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"

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 || ""}