diff --git a/src/components/pure-status.tsx b/src/components/pure-status.tsx index 68e000795..9cd85ce71 100644 --- a/src/components/pure-status.tsx +++ b/src/components/pure-status.tsx @@ -9,6 +9,7 @@ import { Link, useHistory } from 'react-router-dom'; import { openModal } from 'soapbox/actions/modals.ts'; import { unfilterStatus } from 'soapbox/actions/statuses.ts'; import PureStatusReplyMentions from 'soapbox/components/pure-status-reply-mentions.tsx'; +import PureSensitiveContentOverlay from 'soapbox/components/statuses/pure-sensitive-content-overlay.tsx'; import TranslateButton from 'soapbox/components/translate-button.tsx'; import { Card } from 'soapbox/components/ui/card.tsx'; import Icon from 'soapbox/components/ui/icon.tsx'; @@ -34,7 +35,6 @@ import EventPreview from './event-preview.tsx'; import StatusActionBar from './status-action-bar.tsx'; import StatusContent from './status-content.tsx'; import StatusMedia from './status-media.tsx'; -import SensitiveContentOverlay from './statuses/sensitive-content-overlay.tsx'; import StatusInfo from './statuses/status-info.tsx'; import Tombstone from './tombstone.tsx'; @@ -458,8 +458,8 @@ const PureStatus: React.FC = (props) => { style={{ minHeight: isUnderReview || isSensitive ? Math.max(minHeight, 208) + 12 : undefined }} > {(isUnderReview || isSensitive) && ( - ((props, ref) => { + const { onToggleVisibility, status } = props; + + const { account } = useOwnAccount(); + const dispatch = useAppDispatch(); + const intl = useIntl(); + const { displayMedia, deleteModal } = useSettings(); + const { links } = useSoapboxConfig(); + + const isUnderReview = status.visibility === 'self'; + const isOwnStatus = status.account.id === account?.id; + + const [visible, setVisible] = useState(defaultMediaVisibility(status, displayMedia)); + + const toggleVisibility = (event: React.MouseEvent) => { + event.stopPropagation(); + + if (onToggleVisibility) { + onToggleVisibility(); + } else { + setVisible((prevValue) => !prevValue); + } + }; + + const handleDeleteStatus = () => { + if (!deleteModal) { + dispatch(deleteStatus(status.id, false)); + } else { + dispatch(openModal('CONFIRM', { + icon: trashIcon, + heading: intl.formatMessage(messages.deleteHeading), + message: intl.formatMessage(messages.deleteMessage), + confirm: intl.formatMessage(messages.deleteConfirm), + onConfirm: () => dispatch(deleteStatus(status.id, false)), + })); + } + }; + + const menu = useMemo(() => { + return [ + { + text: intl.formatMessage(messages.delete), + action: handleDeleteStatus, + icon: trashIcon, + destructive: true, + }, + ]; + }, []); + + useEffect(() => { + if (typeof props.visible !== 'undefined') { + setVisible(!!props.visible); + } + }, [props.visible]); + + return ( +
+ {visible ? ( + + + )} + + ) : null} + + + + {(isUnderReview && isOwnStatus) ? ( + + ) : null} + +
+ + )} + + ); +}); + +export default PureSensitiveContentOverlay;