diff --git a/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json b/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json index e9402876ff..7613ebd930 100644 --- a/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json +++ b/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json @@ -82,4 +82,4 @@ "emojis": [], "card": null, "poll": null -} +} \ No newline at end of file diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index 22ed2473d8..7bbbbd5b71 100644 Binary files a/app/soapbox/components/media_gallery.js and b/app/soapbox/components/media_gallery.js differ diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx index d64d88e4b7..2721d726bc 100644 --- a/app/soapbox/components/status-media.tsx +++ b/app/soapbox/components/status-media.tsx @@ -144,7 +144,6 @@ const StatusMedia: React.FC = ({ = (props) => { const accountAction = props.accountAction || reblogElement; + const inReview = status.visibility === 'self'; + return (
= (props) => { />
-
+
+ {inReview ? ( + + ) : null} + {!group && actualStatus.group && (
Posted in {String(actualStatus.getIn(['group', 'title']))} @@ -385,8 +396,8 @@ const Status: React.FC = (props) => { )}
-
- +
+
); }; diff --git a/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx b/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx new file mode 100644 index 0000000000..a94923c558 --- /dev/null +++ b/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import { fireEvent, render, screen } from '../../../jest/test-helpers'; +import ModerationOverlay from '../moderation-overlay'; + +describe('', () => { + it('defaults to enabled', () => { + render(); + expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Content Under Review'); + }); + + it('can be toggled', () => { + render(); + + fireEvent.click(screen.getByTestId('button')); + expect(screen.getByTestId('moderation-overlay')).not.toHaveTextContent('Content Under Review'); + expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Hide'); + }); +}); diff --git a/app/soapbox/components/statuses/moderation-overlay.tsx b/app/soapbox/components/statuses/moderation-overlay.tsx new file mode 100644 index 0000000000..6d572eb3ab --- /dev/null +++ b/app/soapbox/components/statuses/moderation-overlay.tsx @@ -0,0 +1,93 @@ +import classNames from 'clsx'; +import React, { useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; + +import { useSoapboxConfig } from 'soapbox/hooks'; + +import { Button, HStack, Text } from '../ui'; + +const messages = defineMessages({ + hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide' }, + title: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' }, + subtitle: { id: 'moderation_overlay.subtitle', defaultMessage: 'This Post has been sent to Moderation for review and is only visible to you. If you believe this is an error please contact Support.' }, + contact: { id: 'moderation_overlay.contact', defaultMessage: 'Contact' }, + show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' }, +}); + +const ModerationOverlay = () => { + const intl = useIntl(); + + const { links } = useSoapboxConfig(); + + const [visible, setVisible] = useState(false); + + const toggleVisibility = (event: React.MouseEvent) => { + event.stopPropagation(); + + setVisible((prevValue) => !prevValue); + }; + + return ( +
+ {visible ? ( + + + )} + + + +
+ )} + + ); +}; + +export default ModerationOverlay; \ No newline at end of file diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx index 81cb0a1525..c5130b759e 100644 --- a/app/soapbox/features/status/index.tsx +++ b/app/soapbox/features/status/index.tsx @@ -29,6 +29,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator'; import PullToRefresh from 'soapbox/components/pull-to-refresh'; import ScrollableList from 'soapbox/components/scrollable_list'; import StatusActionBar from 'soapbox/components/status-action-bar'; +import ModerationOverlay from 'soapbox/components/statuses/moderation-overlay'; import SubNavigation from 'soapbox/components/sub_navigation'; import Tombstone from 'soapbox/components/tombstone'; import { Column, Stack } from 'soapbox/components/ui'; @@ -134,6 +135,7 @@ const Thread: React.FC = (props) => { const me = useAppSelector(state => state.me); const status = useAppSelector(state => getStatus(state, { id: props.params.statusId })); const displayMedia = settings.get('displayMedia') as DisplayMedia; + const inReview = status?.visibility === 'self'; const { ancestorsIds, descendantsIds } = useAppSelector(state => { let ancestorsIds = ImmutableOrderedSet(); @@ -459,11 +461,19 @@ const Thread: React.FC = (props) => {
+ {inReview ? ( + + ) : null} +