diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx index 07ee2e577..1ad2be0db 100644 --- a/ts/components/conversation/Image.tsx +++ b/ts/components/conversation/Image.tsx @@ -62,25 +62,28 @@ export const Image = (props: Props) => { width: _width, } = props; - const onErrorUrlFilterering = useCallback(() => { - if (url && onError) { - onError(); - } - }, [url, onError]); const disableDrag = useDisableDrag(); const { caption } = attachment || { caption: null }; let { pending } = attachment || { pending: true }; + if (!url) { // force pending to true if the url is undefined, so we show a loader while decrypting the attachemtn pending = true; } + const canClick = onClick && !pending; const role = canClick ? 'button' : undefined; const { loading, urlToLoad } = useEncryptedFileFetch(url || '', attachment.contentType, false); // data will be url if loading is finished and '' if not const srcData = !loading ? urlToLoad : ''; + const onErrorUrlFilterering = useCallback(() => { + if (!loading && !pending && !url && onError) { + onError(); + } + }, [loading, pending, url, onError]); + const width = isNumber(_width) ? `${_width}px` : _width; const height = isNumber(_height) ? `${_height}px` : _height; diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx index 6534faed2..a151da754 100644 --- a/ts/components/conversation/message/message-content/MessageAttachment.tsx +++ b/ts/components/conversation/message/message-content/MessageAttachment.tsx @@ -31,6 +31,7 @@ import { AudioPlayerWithEncryptedFile } from '../../H5AudioPlayer'; import { ImageGrid } from '../../ImageGrid'; import { ClickToTrustSender } from './ClickToTrustSender'; import { MessageHighlighter } from './MessageHighlighter'; +import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext'; export type MessageAttachmentSelectorProps = Pick< MessageRenderingProps, @@ -67,6 +68,7 @@ const StyledGenericAttachmentContainer = styled(MessageHighlighter)<{ selected: export const MessageAttachment = (props: Props) => { const { messageId, imageBroken, handleImageError, highlight = false } = props; + const isDetailView = useIsDetailMessageView(); const dispatch = useDispatch(); const attachmentProps = useSelector((state: StateType) => @@ -140,6 +142,10 @@ export const MessageAttachment = (props: Props) => { ((isImage(attachments) && hasImage(attachments)) || (isVideo(attachments) && hasVideoScreenshot(attachments))) ) { + // we use the carousel in the detail view + if (isDetailView) { + return null; + } return ( diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 1f0c87219..9f04ee5de 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/ts/components/conversation/message/message-content/MessageContent.tsx @@ -154,8 +154,9 @@ export const MessageContent = (props: Props) => { const toolTipTitle = moment(serverTimestamp || timestamp).format('llll'); - const isDetailViewAndSupportsAttachmentCarousel = - isDetailView && canDisplayImagePreview(attachments); + window.log.debug( + `WIP: [MessageAttachment] ${props.messageId} timestamp ${timestamp} imageBroken ${imageBroken} display ${canDisplayImagePreview(attachments)} attachments.contentType ${attachments?.[0].contentType || 'none'}` + ); return ( { )} - {!isDeleted && isDetailViewAndSupportsAttachmentCarousel && !imageBroken ? null : ( + {!isDeleted ? ( - )} + ) : null}