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.
This commit is contained in:
Fedor Indutny 2021-03-22 11:51:53 -07:00 committed by GitHub
parent d6063d71e5
commit 9fa3359477
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 98 additions and 5 deletions

View file

@ -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 || [],

View file

@ -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;

View file

@ -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.

View file

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

View file

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

View file

@ -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'),

View file

@ -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'),