diff --git a/ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx b/ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx index 87aebdf38..cae16fe56 100644 --- a/ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx +++ b/ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx @@ -64,7 +64,7 @@ type QuoteIconProps = { icon: QuoteIconTypes; }; -const QuoteIcon = (props: QuoteIconProps) => { +export const QuoteIcon = (props: QuoteIconProps) => { const { icon } = props; const iconProps = icons[icon]; @@ -104,30 +104,29 @@ export const QuoteIconContainer = ( } const objectUrl = getObjectUrl(thumbnail); - - if (GoogleChrome.isVideoTypeSupported(contentType)) { - return objectUrl && !imageBroken ? ( - - ) : ( - - ); - } - - if (GoogleChrome.isImageTypeSupported(contentType)) { - return objectUrl && !imageBroken ? ( - - ) : ( - - ); + if (objectUrl) { + if (GoogleChrome.isVideoTypeSupported(contentType)) { + return ( + + ); + } + + if (GoogleChrome.isImageTypeSupported(contentType)) { + return ( + + ); + } } if (MIME.isAudio(contentType)) { diff --git a/ts/components/conversation/message/message-content/quote/QuoteImage.tsx b/ts/components/conversation/message/message-content/quote/QuoteImage.tsx index fd0d476f2..3e33c56be 100644 --- a/ts/components/conversation/message/message-content/quote/QuoteImage.tsx +++ b/ts/components/conversation/message/message-content/quote/QuoteImage.tsx @@ -3,6 +3,8 @@ import { useDisableDrag } from '../../../../../hooks/useDisableDrag'; import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch'; import styled from 'styled-components'; import { icons } from '../../../../icon'; +import { isEmpty } from 'lodash'; +import { QuoteIcon } from './QuoteIconContainer'; const StyledQuoteImage = styled.div` flex: initial; @@ -56,18 +58,20 @@ const StyledPlayButton = styled.div` `; export const QuoteImage = (props: { - handleImageErrorBound: () => void; url: string; contentType: string; showPlayButton?: boolean; + imageBroken: boolean; + handleImageErrorBound: () => void; }) => { - const { url, showPlayButton, contentType, handleImageErrorBound } = props; + const { url, contentType, showPlayButton, imageBroken, handleImageErrorBound } = props; + const disableDrag = useDisableDrag(); const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType, false); const srcData = !loading ? urlToLoad : ''; - return ( + return !isEmpty(srcData) && !imageBroken ? ( )} + ) : ( + ); }; diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index 6f4a3b005..e8083836e 100644 --- a/ts/state/ducks/conversations.ts +++ b/ts/state/ducks/conversations.ts @@ -404,7 +404,7 @@ async function getMessages({ } } - window.log.debug(`WIP: duck quoteProps`, quotesProps); + // window.log.debug(`WIP: duck quoteProps`, quotesProps); return { messagesProps, quotesProps }; }