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 = ;
+ shapeElement = (
+
+ );
break;
case "document":
shapeElement = ;
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 = () => {
صدا
+
setAudioName(e.target.value)}
+ placeholder="مثلاً موسیقی پسزمینه"
+ />
+
{
className="relative flex items-center gap-2 rounded-lg border border-border bg-gray-50 px-3 py-2"
>
-
- فایل صوتی
-
+
+ updateObject(audioObject.id, {
+ audioName: e.target.value,
+ })
+ }
+ placeholder="نام فایل صوتی"
+ />