|
|
|
@ -1,15 +1,18 @@
|
|
|
|
|
import classNames from 'clsx';
|
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
|
|
|
|
|
import React, { MouseEventHandler, useState } from 'react';
|
|
|
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
|
|
|
|
|
|
import StatusMedia from 'soapbox/components/status-media';
|
|
|
|
|
import { Stack, Text } from 'soapbox/components/ui';
|
|
|
|
|
import { Stack } from 'soapbox/components/ui';
|
|
|
|
|
import AccountContainer from 'soapbox/containers/account_container';
|
|
|
|
|
import { useSettings } from 'soapbox/hooks';
|
|
|
|
|
import { defaultMediaVisibility } from 'soapbox/utils/status';
|
|
|
|
|
|
|
|
|
|
import OutlineBox from './outline-box';
|
|
|
|
|
import StatusReplyMentions from './status-reply-mentions';
|
|
|
|
|
import StatusContent from './status_content';
|
|
|
|
|
import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
|
|
|
|
|
|
|
|
|
|
import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
|
|
|
|
|
|
|
|
|
@ -36,7 +39,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|
|
|
|
|
|
|
|
|
const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
|
|
|
|
|
|
|
|
|
|
const handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
|
|
|
const handleExpandClick: MouseEventHandler<HTMLDivElement> = (e) => {
|
|
|
|
|
if (!status) return;
|
|
|
|
|
const account = status.account as AccountEntity;
|
|
|
|
|
|
|
|
|
@ -57,57 +60,6 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|
|
|
|
setShowMedia(!showMedia);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const renderReplyMentions = () => {
|
|
|
|
|
if (!status?.in_reply_to_id) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const account = status.account as AccountEntity;
|
|
|
|
|
const to = status.mentions || [];
|
|
|
|
|
|
|
|
|
|
if (to.size === 0) {
|
|
|
|
|
if (status.in_reply_to_account_id === account.id) {
|
|
|
|
|
return (
|
|
|
|
|
<div className='reply-mentions'>
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id='reply_mentions.reply'
|
|
|
|
|
defaultMessage='Replying to {accounts}'
|
|
|
|
|
values={{
|
|
|
|
|
accounts: `@${account.username}`,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
|
|
|
|
<div className='reply-mentions'>
|
|
|
|
|
<FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const accounts = to.slice(0, 2).map(account => <>@{account.username}</>).toArray();
|
|
|
|
|
|
|
|
|
|
if (to.size > 2) {
|
|
|
|
|
accounts.push(
|
|
|
|
|
<FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='reply-mentions'>
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id='reply_mentions.reply'
|
|
|
|
|
defaultMessage='Replying to {accounts}'
|
|
|
|
|
values={{
|
|
|
|
|
accounts: <FormattedList type='conjunction' value={accounts} />,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (!status) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
@ -127,7 +79,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|
|
|
|
return (
|
|
|
|
|
<OutlineBox
|
|
|
|
|
data-testid='quoted-status'
|
|
|
|
|
className={classNames('mt-3 cursor-pointer', {
|
|
|
|
|
className={classNames('cursor-pointer', {
|
|
|
|
|
'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
|
|
|
|
|
})}
|
|
|
|
|
>
|
|
|
|
@ -144,20 +96,36 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|
|
|
|
withLinkToProfile={!compose}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{renderReplyMentions()}
|
|
|
|
|
<StatusReplyMentions status={status} hoverable={false} />
|
|
|
|
|
|
|
|
|
|
<Stack className={classNames('relative', {
|
|
|
|
|
'min-h-[220px]': status.hidden,
|
|
|
|
|
})}
|
|
|
|
|
>
|
|
|
|
|
{(status.hidden) && (
|
|
|
|
|
<SensitiveContentOverlay
|
|
|
|
|
status={status}
|
|
|
|
|
visible={showMedia}
|
|
|
|
|
onToggleVisibility={handleToggleMediaVisibility}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
<Text
|
|
|
|
|
className='break-words status__content status__content--quote'
|
|
|
|
|
size='sm'
|
|
|
|
|
dangerouslySetInnerHTML={{ __html: status.contentHtml }}
|
|
|
|
|
/>
|
|
|
|
|
<Stack space={4}>
|
|
|
|
|
<StatusContent
|
|
|
|
|
status={status}
|
|
|
|
|
collapsable
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<StatusMedia
|
|
|
|
|
status={status}
|
|
|
|
|
muted={compose}
|
|
|
|
|
showMedia={showMedia}
|
|
|
|
|
onToggleVisibility={handleToggleMediaVisibility}
|
|
|
|
|
/>
|
|
|
|
|
{(status.media_attachments.size > 0) && (
|
|
|
|
|
<StatusMedia
|
|
|
|
|
status={status}
|
|
|
|
|
muted={compose}
|
|
|
|
|
showMedia={showMedia}
|
|
|
|
|
onToggleVisibility={handleToggleMediaVisibility}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</Stack>
|
|
|
|
|
</Stack>
|
|
|
|
|
</Stack>
|
|
|
|
|
</OutlineBox>
|
|
|
|
|
);
|
|
|
|
|