pl-fe: likely improve sensitive attachments behavior, display blurhash only when hidden

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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<IItem> = ({
@@ -68,6 +69,7 @@ const Item: React.FC<IItem> = ({
   dimensions,
   last,
   total,
+  visible,
 }) => {
   const { autoPlayGif } = useSettings();
   const { mediaPreview } = usePlFeConfig();
@@ -264,7 +266,7 @@ const Item: React.FC<IItem> = ({
         hash={attachment.blurhash}
         className='media-gallery__preview'
       />
-      {thumbnail}
+      {(visible || !attachment.blurhash) && thumbnail}
     </div>
   );
 };
@@ -278,6 +280,7 @@ interface IMediaGallery {
   displayMedia?: string;
   compact?: boolean;
   className?: string;
+  visible?: boolean;
 }
 
 const MediaGallery: React.FC<IMediaGallery> = (props) => {
@@ -289,6 +292,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     cacheWidth,
     compact,
     height,
+    visible,
   } = props;
   const [width, setWidth] = useState<number>(defaultWidth);
 
@@ -537,6 +541,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
       dimensions={sizeData.itemsDimensions[i]}
       last={i === ATTACHMENT_LIMIT - 1}
       total={media.length}
+      visible={visible}
     />
   ));
 

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<IStatusMedia> = ({
   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<IStatusMedia> = ({
             media={status.media_attachments}
             height={285}
             onOpenMedia={openMedia}
+            visible={visible}
           />
         </Suspense>
       );

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<Status, 'hidden' | 'media_attachments' | 'sensitive'>, 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<Status, 'hidden' | 'media_attachments' | 'sensitive'>, 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<HTMLDivElement, ISensitiveConte
   const intl = useIntl();
   const { displayMedia } = useSettings();
 
-  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;
-
-  const showHideButton = status.sensitive || (status.media_attachments.length && displayMedia === 'hide_all');
+  const visible = isMediaVisible(status, displayMedia);
 
   const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
@@ -46,7 +58,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
     else dispatch(revealStatusMedia(status.id));
   };
 
-  if (visible && !showHideButton) return null;
+  if (!showOverlay(status, displayMedia)) return null;
 
   return (
     <div
@@ -96,4 +108,4 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
   );
 });
 
-export { SensitiveContentOverlay as default };
+export { SensitiveContentOverlay as default, isMediaVisible, showOverlay };

packages/pl-fe/src/features/admin/components/report-status.tsx

@@ -48,7 +48,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     <HStack space={2} alignItems='start'>
       <Stack space={2} className='overflow-hidden' grow>
         <StatusContent status={status} />
-        <StatusMedia status={status} showMedia />
+        <StatusMedia status={status} />
       </Stack>
 
       <div className='flex-none'>