edit voice messages

src/widgets/action-editor/ui/ActionEditor.tsx

@@ -11,7 +11,8 @@ import CircularProgress from "@mui/material/CircularProgress";
 
 import TextFieldsIcon from "@mui/icons-material/TextFields";
 import ImageIcon from "@mui/icons-material/Image";
-// import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import MicNoneIcon from "@mui/icons-material/MicNone";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -59,6 +60,8 @@ export default function ActionEditor({
   canExit = false,
 }: ActionEditorProps) {
   const imageRef = useRef<HTMLInputElement>(null);
+  const voiceRef = useRef<HTMLInputElement>(null);
+
   const attachmentType = initialAction
     ? getActionAttachmentType(initialAction)
     : "empty";
@@ -75,6 +78,12 @@ export default function ActionEditor({
       : null,
   );
 
+  const [voiceUrl, setVoiceUrl] = useState<string | null>(
+    initialAction && attachmentType === "voice"
+      ? initialAction.fileUrls[0]!
+      : null,
+  );
+
   const [action, setAction] = useState<CommentAction>(
     initialAction ?? {
       actionType: "comment",
@@ -106,6 +115,8 @@ export default function ActionEditor({
 
     if (origin === "image") {
       setImageUrl(fileUrl);
+    } else if (origin === "voice") {
+      setVoiceUrl(fileUrl);
     }
 
     setLoading(false);
@@ -137,9 +148,17 @@ export default function ActionEditor({
         fileUrls: [imageUrl],
       });
     } else if (value === 2) {
-      alert("Unsupported");
+      if (!voiceUrl) {
+        alert("Загрузите голосовое :3");
         return;
       }
+
+      onSave(actionIndex, {
+        actionType: action.actionType,
+        text: null,
+        fileUrls: [voiceUrl],
+      });
+    }
   }
 
   return (
@@ -154,11 +173,11 @@ export default function ActionEditor({
             >
               <Tab label="Текст" icon={<TextFieldsIcon />} {...a11yProps(0)} />
               <Tab label="Изображение" icon={<ImageIcon />} {...a11yProps(1)} />
-              {/* <Tab
+              <Tab
                 label="Голосовое"
                 icon={<RecordVoiceOverIcon />}
                 {...a11yProps(2)}
-              /> */}
+              />
             </Tabs>
           </Box>
 
@@ -212,6 +231,7 @@ export default function ActionEditor({
 
               <input
                 ref={imageRef}
+                accept="image/*"
                 type="file"
                 className="mb-4 hidden select-none"
                 onChange={async (e) => await handleFileChange(e, "image")}
@@ -233,9 +253,37 @@ export default function ActionEditor({
             />
           </TabPanel>
 
-          {/* <TabPanel value={value} index={2}>
+          <TabPanel value={value} index={2}>
-            In progress
+            <div className="mt-5 text-center">
-          </TabPanel> */}
+              <input
+                ref={voiceRef}
+                type="file"
+                accept=".mp3"
+                className="mb-4 hidden select-none"
+                onChange={async (e) => await handleFileChange(e, "voice")}
+              />
+              <Button
+                startIcon={<MicNoneIcon />}
+                variant="contained"
+                color="info"
+                disabled={loading}
+                onClick={() => {
+                  if (!voiceRef.current) return;
+                  voiceRef.current.click();
+                }}
+              >
+                {voiceUrl ? "Изменить голосовое" : "Загрузить голосовое"}
+              </Button>
+
+              {voiceUrl && (
+                <div className="mt-10 flex justify-center">
+                  <audio controls>
+                    <source src={voiceUrl} type="audio/mp3" />
+                  </audio>
+                </div>
+              )}
+            </div>
+          </TabPanel>
         </Box>
       </div>