Mark attachment as corrupted if audio load failed

Sending corrupted audio should not leave user with non-functional
UI. Mark attachment as corrupted and show generic attachment UI for it
instead.

ts/components/conversation/Message.stories.tsx

@@ -111,6 +111,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   isTapToViewError: overrideProps.isTapToViewError,
   isTapToViewExpired: overrideProps.isTapToViewExpired,
   kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
+  markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
   openConversation: action('openConversation'),
   openLink: action('openLink'),
   previews: overrideProps.previews || [],

ts/components/conversation/Message.tsx

@@ -90,6 +90,7 @@ export type AudioAttachmentProps = {
   withContentBelow: boolean;
 
   kickOffAttachmentDownload(): void;
+  onCorrupted(): void;
 };
 
 export type PropsData = {
@@ -185,6 +186,10 @@ export type PropsActions = {
     attachment: AttachmentType;
     messageId: string;
   }) => void;
+  markAttachmentAsCorrupted: (options: {
+    attachment: AttachmentType;
+    messageId: string;
+  }) => void;
   showVisualAttachment: (options: {
     attachment: AttachmentType;
     messageId: string;
@@ -686,6 +691,7 @@ export class Message extends React.PureComponent<Props, State> {
       i18n,
       id,
       kickOffAttachmentDownload,
+      markAttachmentAsCorrupted,
       quote,
       showVisualAttachment,
       isSticker,
@@ -773,6 +779,12 @@ export class Message extends React.PureComponent<Props, State> {
             messageId: id,
           });
         },
+        onCorrupted() {
+          markAttachmentAsCorrupted({
+            attachment: firstAttachment,
+            messageId: id,
+          });
+        },
       });
     }
     const { pending, fileName, fileSize, contentType } = firstAttachment;

ts/components/conversation/MessageAudio.tsx

@@ -25,6 +25,7 @@ export type Props = {
 
   buttonRef: React.RefObject<HTMLButtonElement>;
   kickOffAttachmentDownload(): void;
+  onCorrupted(): void;
 
   activeAudioID: string | undefined;
   setActiveAudioID: (id: string | undefined) => void;
@@ -208,6 +209,7 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
 
     buttonRef,
     kickOffAttachmentDownload,
+    onCorrupted,
 
     audio,
     audioContext,
@@ -275,14 +277,27 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
         setPeaks(newPeaks);
         setDuration(Math.max(newDuration, 1e-23));
       } catch (err) {
-        window.log.error('MessageAudio: loadAudio error', err);
+        window.log.error(
+          'MessageAudio: loadAudio error, marking as corrupted',
+          err
+        );
+
+        onCorrupted();
       }
     })();
 
     return () => {
       canceled = true;
     };
-  }, [attachment, audioContext, setDuration, setPeaks, state, waveformCache]);
+  }, [
+    attachment,
+    audioContext,
+    setDuration,
+    setPeaks,
+    onCorrupted,
+    state,
+    waveformCache,
+  ]);
 
   // This effect attaches/detaches event listeners to the global <audio/>
   // instance that we reuse from the GlobalAudioContext.

ts/components/conversation/MessageDetail.stories.tsx

@@ -36,6 +36,7 @@ const defaultMessage: MessageProps = {
   isBlocked: false,
   isMessageRequestAccepted: true,
   kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
+  markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
   openConversation: () => null,
   openLink: () => null,
   previews: [],

ts/components/conversation/Quote.stories.tsx

@@ -39,6 +39,7 @@ const defaultMessageProps: MessagesProps = {
   isBlocked: false,
   isMessageRequestAccepted: true,
   kickOffAttachmentDownload: () => null,
+  markAttachmentAsCorrupted: () => null,
   openConversation: () => null,
   openLink: () => null,
   previews: [],

ts/components/conversation/Timeline.stories.tsx

@@ -235,6 +235,7 @@ const actions = () => ({
   showContactDetail: action('showContactDetail'),
   showContactModal: action('showContactModal'),
   kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
+  markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
   showVisualAttachment: action('showVisualAttachment'),
   downloadAttachment: action('downloadAttachment'),
   displayTapToViewMessage: action('displayTapToViewMessage'),

ts/components/conversation/TimelineItem.stories.tsx

@@ -47,6 +47,7 @@ const getDefaultProps = () => ({
   deleteMessage: action('deleteMessage'),
   deleteMessageForEveryone: action('deleteMessageForEveryone'),
   kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
+  markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
   showMessageDetail: action('showMessageDetail'),
   openConversation: action('openConversation'),
   showContactDetail: action('showContactDetail'),