diff --git a/packages/pl-fe/src/components/media-gallery.tsx b/packages/pl-fe/src/components/media-gallery.tsx index 354abf638..3ea6c3f71 100644 --- a/packages/pl-fe/src/components/media-gallery.tsx +++ b/packages/pl-fe/src/components/media-gallery.tsx @@ -58,6 +58,7 @@ interface IItem { dimensions: Dimensions; last?: boolean; total: number; + visible?: boolean; } const Item: React.FC = ({ @@ -68,6 +69,7 @@ const Item: React.FC = ({ dimensions, last, total, + visible, }) => { const { autoPlayGif } = useSettings(); const { mediaPreview } = usePlFeConfig(); @@ -264,7 +266,7 @@ const Item: React.FC = ({ hash={attachment.blurhash} className='media-gallery__preview' /> - {thumbnail} + {(visible || !attachment.blurhash) && thumbnail} ); }; @@ -278,6 +280,7 @@ interface IMediaGallery { displayMedia?: string; compact?: boolean; className?: string; + visible?: boolean; } const MediaGallery: React.FC = (props) => { @@ -289,6 +292,7 @@ const MediaGallery: React.FC = (props) => { cacheWidth, compact, height, + visible, } = props; const [width, setWidth] = useState(defaultWidth); @@ -537,6 +541,7 @@ const MediaGallery: React.FC = (props) => { dimensions={sizeData.itemsDimensions[i]} last={i === ATTACHMENT_LIMIT - 1} total={media.length} + visible={visible} /> )); diff --git a/packages/pl-fe/src/components/status-media.tsx b/packages/pl-fe/src/components/status-media.tsx index edbd7655b..a391c1267 100644 --- a/packages/pl-fe/src/components/status-media.tsx +++ b/packages/pl-fe/src/components/status-media.tsx @@ -6,7 +6,8 @@ import PreviewCard from 'pl-fe/components/preview-card'; import PlaceholderCard from 'pl-fe/features/placeholder/components/placeholder-card'; import { MediaGallery, Video, Audio } from 'pl-fe/features/ui/util/async-components'; import { useAppDispatch, useSettings } from 'pl-fe/hooks'; -import { defaultMediaVisibility } from 'pl-fe/utils/status'; + +import { isMediaVisible } from './statuses/sensitive-content-overlay'; import type { MediaAttachment } from 'pl-api'; import type { Status } from 'pl-fe/normalizers'; @@ -18,8 +19,6 @@ interface IStatusMedia { muted?: boolean; /** Callback when compact media is clicked. */ onClick?: () => void; - /** Whether or not the media is concealed behind a NSFW banner. */ - showMedia?: boolean; } /** Render media attachments for a status. */ @@ -27,12 +26,11 @@ const StatusMedia: React.FC = ({ status, muted = false, onClick, - showMedia, }) => { const dispatch = useAppDispatch(); const { displayMedia } = useSettings(); - const visible = showMedia || (status.hidden === null ? defaultMediaVisibility(status, displayMedia) : !status.hidden); + const visible = isMediaVisible(status, displayMedia); const size = status.media_attachments.length; const firstAttachment = status.media_attachments[0]; @@ -102,6 +100,7 @@ const StatusMedia: React.FC = ({ media={status.media_attachments} height={285} onOpenMedia={openMedia} + visible={visible} /> ); diff --git a/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx b/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx index 6163fb1ac..a52d1fa7a 100644 --- a/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx +++ b/packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx @@ -9,6 +9,24 @@ import { Button, HStack, Text } from '../ui'; import type { Status } from 'pl-fe/normalizers'; +const isMediaVisible = (status: Pick, displayMedia: 'default' | 'show_all' | 'hide_all') => { + let visible = !status.sensitive; + + if (status.hidden !== null) visible = !status.hidden; + else if (displayMedia === 'show_all') visible = true; + else if (displayMedia === 'hide_all' && status.media_attachments.length) visible = false; + + return visible; +}; + +const showOverlay = (status: Pick, displayMedia: 'default' | 'show_all' | 'hide_all') => { + const visible = isMediaVisible(status, displayMedia); + + const showHideButton = status.sensitive || (status.media_attachments.length && displayMedia === 'hide_all'); + + return !visible || showHideButton; +}; + const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, @@ -31,13 +49,7 @@ const SensitiveContentOverlay = React.forwardRef) => { event.stopPropagation(); @@ -46,7 +58,7 @@ const SensitiveContentOverlay = React.forwardRef = ({ status }) => { - +