diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx index 391d2c865..2721d726b 100644 --- a/app/soapbox/components/status-media.tsx +++ b/app/soapbox/components/status-media.tsx @@ -21,7 +21,7 @@ interface IStatusMedia { /** Whether or not the media is concealed behind a NSFW banner. */ showMedia?: boolean, /** Callback when visibility is toggled (eg clicked through NSFW). */ - onToggleVisibility: () => void, + onToggleVisibility?: () => void, } /** Render media attachments for a status. */ @@ -30,7 +30,7 @@ const StatusMedia: React.FC = ({ muted = false, onClick, showMedia = true, - onToggleVisibility, + onToggleVisibility = () => {}, }) => { const dispatch = useAppDispatch(); const [mediaWrapperWidth, setMediaWrapperWidth] = useState(undefined); diff --git a/app/soapbox/features/status/components/quoted_status.tsx b/app/soapbox/features/status/components/quoted_status.tsx index a7008cfb1..a9f08685d 100644 --- a/app/soapbox/features/status/components/quoted_status.tsx +++ b/app/soapbox/features/status/components/quoted_status.tsx @@ -6,6 +6,7 @@ import { defineMessages, injectIntl, FormattedMessage, IntlShape, FormattedList import { withRouter } from 'react-router-dom'; import AttachmentThumbs from 'soapbox/components/attachment-thumbs'; +import StatusMedia from 'soapbox/components/status-media'; import { Stack, Text } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account_container'; @@ -50,6 +51,25 @@ class QuotedStatus extends ImmutablePureComponent { } } + renderMedia = () => { + const { status } = this.props; + if (!status) return null; + const { size } = status.media_attachments; + + if (size > 1) { + return ( + + ); + } + + return ( + + ); + } + renderReplyMentions = () => { const { status } = this.props; @@ -147,12 +167,7 @@ class QuotedStatus extends ImmutablePureComponent { dangerouslySetInnerHTML={{ __html: status.contentHtml }} /> - {status.media_attachments.size > 0 && ( - - )} + {this.renderMedia()} );