matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'sensitive' into fork

Browse Source
This commit is contained in:
marcin mikołajczak
2024-04-28 15:27:15 +02:00
parent 231fe8c0f3 9a5f2bbc77
commit 4d75987b3f
24 changed files with 81 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/media-gallery.tsx
View File

@ -297,7 +297,6 @@ export interface IMediaGallery {
defaultWidth?: number;
cacheWidth?: (width: number) => void;
visible?: boolean;
onToggleVisibility?: () => void;
displayMedia?: string;
compact?: boolean;
className?: string;

30
src/components/quoted-status.tsx
View File

@ -6,8 +6,6 @@ import { useHistory } from 'react-router-dom';
import StatusMedia from 'soapbox/components/status-media';
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 EventPreview from './event-preview';
import OutlineBox from './outline-box';
@ -36,11 +34,8 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
const intl = useIntl();
const history = useHistory();
const { displayMedia } = useSettings();
const overlay = useRef<HTMLDivElement>(null);
const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
const [minHeight, setMinHeight] = useState(208);
useEffect(() => {
@ -71,10 +66,6 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
}
};
const handleToggleMediaVisibility = () => {
setShowMedia(!showMedia);
};
if (!status) {
return null;
}
@ -116,16 +107,12 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
{status.event ? <EventPreview status={status} hideAction /> : (
<Stack
className='relative z-0'
style={{ minHeight: status.hidden ? Math.max(minHeight, 208) + 12 : undefined }}
style={{ minHeight: status.sensitive ? Math.max(minHeight, 208) + 12 : undefined }}
>
{(status.hidden) && (
<SensitiveContentOverlay
status={status}
visible={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
ref={overlay}
/>
)}
<SensitiveContentOverlay
status={status}
ref={overlay}
/>
<Stack space={4}>
<StatusContent
@ -136,12 +123,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
{status.quote && <QuotedStatusIndicator statusId={status.quote as string} />}
{status.media_attachments.size > 0 && (
<StatusMedia
status={status}
muted={compose}
showMedia={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
/>
<StatusMedia status={status} muted={compose} />
)}
</Stack>
</Stack>

16
src/components/status-media.tsx
View File

@ -5,7 +5,8 @@ import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
import PreviewCard from 'soapbox/components/preview-card';
import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
import { useAppDispatch } from 'soapbox/hooks';
import { useAppDispatch, useSettings } from 'soapbox/hooks';
import { defaultMediaVisibility } from 'soapbox/utils/status';
import type { List as ImmutableList } from 'immutable';
import type { Status, Attachment } from 'soapbox/types/entities';
@ -19,8 +20,6 @@ interface IStatusMedia {
onClick?: () => void;
/** Whether or not the media is concealed behind a NSFW banner. */
showMedia?: boolean;
/** Callback when visibility is toggled (eg clicked through NSFW). */
onToggleVisibility?: () => void;
}
/** Render media attachments for a status. */
@ -28,10 +27,12 @@ const StatusMedia: React.FC<IStatusMedia> = ({
status,
muted = false,
onClick,
showMedia = true,
onToggleVisibility = () => { },
showMedia,
}) => {
const dispatch = useAppDispatch();
const { displayMedia } = useSettings();
const visible = showMedia || (status.hidden === null ? defaultMediaVisibility(status, displayMedia) : status.hidden);
const size = status.media_attachments.size;
const firstAttachment = status.media_attachments.first();
@ -75,7 +76,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
alt={video.description}
aspectRatio={Number(video.meta.getIn(['original', 'aspect']))}
height={285}
visible={showMedia}
visible={visible}
inline
/>
</Suspense>
@ -105,8 +106,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
sensitive={status.sensitive}
height={285}
onOpenMedia={openMedia}
visible={showMedia}
onToggleVisibility={onToggleVisibility}
visible={visible}
/>
</Suspense>
);

6
src/components/status.test.tsx
View File

@ -34,11 +34,5 @@ describe('<Status />', () => {
render(<Status status={status} />, undefined, state);
expect(screen.getByTestId('status-action-bar')).toBeInTheDocument();
});
it('is not rendered if status is under review', () => {
const inReviewStatus = status.set('visibility', 'self');
render(<Status status={inReviewStatus as ReducerStatus} />, undefined, state);
expect(screen.queryAllByTestId('status-action-bar')).toHaveLength(0);
});
});
});

40
src/components/status.tsx
View File

@ -12,7 +12,7 @@ import AccountContainer from 'soapbox/containers/account-container';
import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
import { useAppDispatch, useSettings } from 'soapbox/hooks';
import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status';
import { textForScreenReader, getActualStatus } from 'soapbox/utils/status';
import EventPreview from './event-preview';
import StatusActionBar from './status-action-bar';
@ -77,12 +77,11 @@ const Status: React.FC<IStatus> = (props) => {
const history = useHistory();
const dispatch = useAppDispatch();
const { displayMedia, boostModal } = useSettings();
const { boostModal } = useSettings();
const didShowCard = useRef(false);
const node = useRef<HTMLDivElement>(null);
const overlay = useRef<HTMLDivElement>(null);
const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
const [minHeight, setMinHeight] = useState(208);
const actualStatus = getActualStatus(status);
@ -97,20 +96,12 @@ const Status: React.FC<IStatus> = (props) => {
didShowCard.current = Boolean(!muted && !hidden && status?.card);
}, []);
useEffect(() => {
setShowMedia(defaultMediaVisibility(status, displayMedia));
}, [status.id]);
useEffect(() => {
if (overlay.current) {
setMinHeight(overlay.current.getBoundingClientRect().height);
}
}, [overlay.current]);
const handleToggleMediaVisibility = (): void => {
setShowMedia(!showMedia);
};
const handleClick = (e?: React.MouseEvent): void => {
e?.stopPropagation();
@ -188,12 +179,8 @@ const Status: React.FC<IStatus> = (props) => {
}
};
const handleHotkeyToggleHidden = (): void => {
dispatch(toggleStatusHidden(actualStatus));
};
const handleHotkeyToggleSensitive = (): void => {
handleToggleMediaVisibility();
dispatch(toggleStatusHidden(actualStatus));
};
const handleHotkeyReact = (): void => {
@ -377,14 +364,11 @@ const Status: React.FC<IStatus> = (props) => {
openProfile: handleHotkeyOpenProfile,
moveUp: handleHotkeyMoveUp,
moveDown: handleHotkeyMoveDown,
toggleHidden: handleHotkeyToggleHidden,
toggleSensitive: handleHotkeyToggleSensitive,
openMedia: handleHotkeyOpenMedia,
react: handleHotkeyReact,
};
const isUnderReview = actualStatus.visibility === 'self';
const isSensitive = actualStatus.hidden;
const isSoftDeleted = status.tombstone?.reason === 'deleted';
if (isSoftDeleted) {
@ -439,16 +423,12 @@ const Status: React.FC<IStatus> = (props) => {
<Stack
className='relative z-0'
style={{ minHeight: isUnderReview || isSensitive ? Math.max(minHeight, 208) + 12 : undefined }}
style={{ minHeight: actualStatus.sensitive ? Math.max(minHeight, 208) + 12 : undefined }}
>
{(isUnderReview || isSensitive) && (
<SensitiveContentOverlay
status={status}
visible={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
ref={overlay}
/>
)}
<SensitiveContentOverlay
status={actualStatus}
ref={overlay}
/>
{actualStatus.event ? <EventPreview className='shadow-xl' status={actualStatus} /> : (
<Stack space={4}>
@ -467,8 +447,6 @@ const Status: React.FC<IStatus> = (props) => {
status={actualStatus}
muted={muted}
onClick={handleClick}
showMedia={showMedia}
onToggleVisibility={handleToggleMediaVisibility}
/>
{quote}
@ -478,7 +456,7 @@ const Status: React.FC<IStatus> = (props) => {
)}
</Stack>
{(!hideActionBar && !isUnderReview) && (
{!hideActionBar && (
<div className='pt-4'>
<StatusActionBar status={actualStatus} fromBookmarks={fromBookmarks} />
</div>

57
src/components/statuses/sensitive-content-overlay.test.tsx
View File

@ -38,57 +38,6 @@ describe('<SensitiveContentOverlay />', () => {
});
});
describe('when the Status is marked as in review', () => {
beforeEach(() => {
status = normalizeStatus({ visibility: 'self', sensitive: false }) as ReducerStatus;
});
it('displays the "Under review" warning', () => {
render(<SensitiveContentOverlay status={status} />);
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
});
it('allows the user to delete the status', () => {
render(<SensitiveContentOverlay status={status} />);
expect(screen.getByTestId('icon-button')).toBeInTheDocument();
});
it('can be toggled', () => {
render(<SensitiveContentOverlay status={status} />);
fireEvent.click(screen.getByTestId('button'));
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Content Under Review');
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
fireEvent.click(screen.getByTestId('button'));
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Hide');
});
});
describe('when the Status is marked as in review and sensitive', () => {
beforeEach(() => {
status = normalizeStatus({ visibility: 'self', sensitive: true }) as ReducerStatus;
});
it('displays the "Under review" warning', () => {
render(<SensitiveContentOverlay status={status} />);
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
});
it('can be toggled', () => {
render(<SensitiveContentOverlay status={status} />);
fireEvent.click(screen.getByTestId('button'));
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Content Under Review');
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
fireEvent.click(screen.getByTestId('button'));
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Hide');
});
});
describe('when the Status is marked as sensitive and displayMedia set to "show_all"', () => {
let store: any;
@ -100,12 +49,6 @@ describe('<SensitiveContentOverlay />', () => {
}));
});
it('displays the "Under review" warning', () => {
render(<SensitiveContentOverlay status={status} />, undefined, store);
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Sensitive content');
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
});
it('can be toggled', () => {
render(<SensitiveContentOverlay status={status} />, undefined, store);

98
src/components/statuses/sensitive-content-overlay.tsx
View File

@ -1,13 +1,10 @@
import clsx from 'clsx';
import React, { useEffect, useMemo, useState } from 'react';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { openModal } from 'soapbox/actions/modals';
import { deleteStatus } from 'soapbox/actions/statuses';
import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
import { defaultMediaVisibility } from 'soapbox/utils/status';
import { toggleStatusHidden } from 'soapbox/actions/statuses';
import { useAppDispatch, useSettings } from 'soapbox/hooks';
import DropdownMenu from '../dropdown-menu';
import { Button, HStack, Text } from '../ui';
import type { Status as StatusEntity } from 'soapbox/types/entities';
@ -19,73 +16,36 @@ const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide content' },
sensitiveTitle: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
underReviewTitle: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
underReviewSubtitle: { 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.' },
sensitiveSubtitle: { id: 'status.sensitive_warning.subtitle', defaultMessage: 'This content may not be suitable for all audiences.' },
contact: { id: 'moderation_overlay.contact', defaultMessage: 'Contact' },
show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' },
});
interface ISensitiveContentOverlay {
status: StatusEntity;
onToggleVisibility?(): void;
visible?: boolean;
}
const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
const { onToggleVisibility, status } = props;
const { status } = props;
const { account } = useOwnAccount();
const dispatch = useAppDispatch();
const intl = useIntl();
const { displayMedia, deleteModal } = useSettings();
const { links } = useSoapboxConfig();
const { displayMedia } = useSettings();
const isUnderReview = status.visibility === 'self';
const isOwnStatus = status.getIn(['account', 'id']) === account?.id;
let visible = !status.sensitive;
const [visible, setVisible] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
if (status.hidden !== null) visible = status.hidden;
else if (displayMedia === 'show_all') visible = true;
else if (displayMedia === 'hide_all' && status.media_attachments.size) visible = false;
const showHideButton = status.sensitive || (status.media_attachments.size && displayMedia === 'hide_all');
const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
event.stopPropagation();
if (onToggleVisibility) {
onToggleVisibility();
} else {
setVisible((prevValue) => !prevValue);
}
dispatch(toggleStatusHidden(status));
};
const handleDeleteStatus = () => {
if (!deleteModal) {
dispatch(deleteStatus(status.id, false));
} else {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/outline/trash.svg'),
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: require('@tabler/icons/outline/trash.svg'),
destructive: true,
},
];
}, []);
useEffect(() => {
if (typeof props.visible !== 'undefined') {
setVisible(!!props.visible);
}
}, [props.visible]);
if (visible && !showHideButton) return null;
return (
<div
@ -109,11 +69,11 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
<div className='mx-auto w-3/4 space-y-4 text-center' ref={ref}>
<div className='space-y-1'>
<Text theme='white' weight='semibold'>
{intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)}
{intl.formatMessage(messages.sensitiveTitle)}
</Text>
<Text theme='white' size='sm' weight='medium'>
{intl.formatMessage(isUnderReview ? messages.underReviewSubtitle : messages.sensitiveSubtitle)}
{intl.formatMessage(messages.sensitiveSubtitle)}
</Text>
{status.spoiler_text && (
@ -126,27 +86,6 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
</div>
<HStack alignItems='center' justifyContent='center' space={2}>
{isUnderReview ? (
<>
{links.get('support') && (
<a
href={links.get('support')}
target='_blank'
onClick={(event) => event.stopPropagation()}
>
<Button
type='button'
theme='outline'
size='sm'
icon={require('@tabler/icons/outline/headset.svg')}
>
{intl.formatMessage(messages.contact)}
</Button>
</a>
)}
</>
) : null}
<Button
type='button'
theme='outline'
@ -156,13 +95,6 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
>
{intl.formatMessage(messages.show)}
</Button>
{(isUnderReview && isOwnStatus) ? (
<DropdownMenu
items={menu}
src={require('@tabler/icons/outline/dots.svg')}
/>
) : null}
</HStack>
</div>
</div>