VoiceMessages: fix crash when uploading invalid audio files

src/plugins/voiceMessages/index.tsx

@@ -21,6 +21,7 @@ import "./styles.css";
 import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { Microphone } from "@components/Icons";
 import { Link } from "@components/Link";
+import { Paragraph } from "@components/Paragraph";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
@@ -144,7 +145,7 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
             URL.revokeObjectURL(blobUrl);
     }, [blobUrl]);
 
-    const [meta] = useAwaiter(async () => {
+    const [meta, metaError] = useAwaiter(async () => {
         if (!blob) return EMPTY_META;
 
         const audioContext = new AudioContext();
@@ -214,11 +215,15 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
                 </div>
 
                 <Forms.FormTitle>Preview</Forms.FormTitle>
-                <VoicePreview
-                    src={blobUrl}
-                    waveform={meta.waveform}
-                    recording={isRecording}
-                />
+                {metaError
+                    ? <Paragraph className={cl("error")}>Failed to parse selected audio file: {metaError.message}</Paragraph>
+                    : (
+                        <VoicePreview
+                            src={blobUrl}
+                            waveform={meta.waveform}
+                            recording={isRecording}
+                        />
+                    )}
 
                 {isUnsupportedFormat && (
                     <Card className={`vc-warning-card ${Margins.top16}`}>
@@ -236,7 +241,7 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
                 <Button
                     disabled={!blob}
                     onClick={() => {
-                        sendAudio(blob!, meta);
+                        sendAudio(blob!, meta ?? EMPTY_META);
                         modalProps.onClose();
                         showToast("Now sending voice message... Please be patient", Toasts.Type.MESSAGE);
                     }}

src/plugins/voiceMessages/styles.css

@@ -48,3 +48,7 @@
     flex: 1;
     text-align: center;
 }
+
+.vc-vmsg-error {
+    color: var(--text-danger);
+}