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:
parent
d6063d71e5
commit
9fa3359477
12 changed files with 98 additions and 5 deletions
|
@ -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 || [],
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -36,6 +36,7 @@ const defaultMessage: MessageProps = {
|
|||
isBlocked: false,
|
||||
isMessageRequestAccepted: true,
|
||||
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
|
||||
markAttachmentAsCorrupted: action('markAttachmentAsCorrupted'),
|
||||
openConversation: () => null,
|
||||
openLink: () => null,
|
||||
previews: [],
|
||||
|
|
|
@ -39,6 +39,7 @@ const defaultMessageProps: MessagesProps = {
|
|||
isBlocked: false,
|
||||
isMessageRequestAccepted: true,
|
||||
kickOffAttachmentDownload: () => null,
|
||||
markAttachmentAsCorrupted: () => null,
|
||||
openConversation: () => null,
|
||||
openLink: () => null,
|
||||
previews: [],
|
||||
|
|
|
@ -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'),
|
||||
|
|
|
@ -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'),
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue