Merge remote-tracking branch 'upstream/dev' into dev

src/plugins/voiceMessages/index.tsx

@@ -147,7 +147,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();
@@ -217,11 +217,15 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) {
                 </div>
 
                 <Heading>Preview</Heading>
-                <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}`}>
@@ -239,7 +243,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

@@ -47,4 +47,8 @@
     font-weight: 600;
     flex: 1;
     text-align: center;
-}
+}
+
+.vc-vmsg-error {
+    color: var(--text-danger);
+}