pl-fe: Fix attachment thumbs visibility

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

packages/pl-fe/src/components/attachment-thumbs.tsx

@@ -2,31 +2,36 @@ import React, { Suspense } from 'react';
 
 import { openModal } from 'pl-fe/actions/modals';
 import { MediaGallery } from 'pl-fe/features/ui/util/async-components';
-import { useAppDispatch } from 'pl-fe/hooks';
+import { useAppDispatch, useSettings } from 'pl-fe/hooks';
+
+import { isMediaVisible } from './statuses/sensitive-content-overlay';
 
 import type { MediaAttachment } from 'pl-api';
+import type { Status } from 'pl-fe/normalizers';
 
 interface IAttachmentThumbs {
-  media: Array<MediaAttachment>;
+  status: Pick<Status, 'media_attachments' | 'sensitive' | 'spoiler_text'>;
   onClick?(): void;
-  sensitive?: boolean;
 }
 
-const AttachmentThumbs = (props: IAttachmentThumbs) => {
-  const { media, onClick } = props;
+const AttachmentThumbs = ({ status, onClick }: IAttachmentThumbs) => {
   const dispatch = useAppDispatch();
+  const { displayMedia } = useSettings();
 
   const fallback = <div className='media-gallery--compact' />;
   const onOpenMedia = (media: Array<MediaAttachment>, index: number) => dispatch(openModal('MEDIA', { media, index }));
 
+  const visible = isMediaVisible(status, displayMedia);
+
   return (
     <div className='relative'>
       <Suspense fallback={fallback}>
         <MediaGallery
-          media={media}
+          media={status.media_attachments}
           onOpenMedia={onOpenMedia}
           height={50}
           compact
+          visible={visible}
         />
       </Suspense>
 

packages/pl-fe/src/components/status-media.tsx

@@ -55,7 +55,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
     if (muted) {
       media = (
         <AttachmentThumbs
-          media={status.media_attachments}
+          status={status}
           onClick={onClick}
         />
       );

packages/pl-fe/src/components/statuses/sensitive-content-overlay.tsx

@@ -9,7 +9,7 @@ import { Button, HStack, Text } from '../ui';
 
 import type { Status } from 'pl-fe/normalizers';
 
-const isMediaVisible = (status: Pick<Status, 'hidden' | 'media_attachments' | 'sensitive' | 'spoiler_text'>, displayMedia: 'default' | 'show_all' | 'hide_all') => {
+const isMediaVisible = (status: Pick<Status, 'media_attachments' | 'sensitive' | 'spoiler_text'> & { hidden?: boolean | null }, displayMedia: 'default' | 'show_all' | 'hide_all') => {
   let visible = !(status.sensitive || status.spoiler_text);
 
   if (status.hidden !== null) visible = !status.hidden;

packages/pl-fe/src/features/compose/components/reply-indicator.tsx

@@ -11,7 +11,7 @@ import type { Account, Status } from 'pl-fe/normalizers';
 
 interface IReplyIndicator {
   className?: string;
-  status?: Pick<Status, | 'contentHtml' | 'created_at' | 'media_attachments' | 'search_index' | 'sensitive'> & { account: Pick<Account, 'id'> };
+  status?: Pick<Status, | 'contentHtml' | 'created_at' | 'hidden' | 'media_attachments' | 'search_index' | 'sensitive' | 'spoiler_text'> & { account: Pick<Account, 'id'> };
   onCancel?: () => void;
   hideActions: boolean;
 }
@@ -55,8 +55,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
 
       {status.media_attachments.length > 0 && (
         <AttachmentThumbs
-          media={status.media_attachments}
-          sensitive={status.sensitive}
+          status={status}
         />
       )}
     </Stack>

packages/pl-fe/src/features/draft-statuses/components/draft-status.tsx

@@ -71,8 +71,7 @@ const DraftStatus: React.FC<IDraftStatus> = ({ draftStatus, ...other }) => {
 
           {status.media_attachments.length > 0 && (
             <AttachmentThumbs
-              media={status.media_attachments}
-              sensitive={status.sensitive}
+              status={status}
             />
           )}
 

packages/pl-fe/src/features/scheduled-statuses/components/scheduled-status.tsx

@@ -53,8 +53,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
 
           {status.media_attachments.length > 0 && (
             <AttachmentThumbs
-              media={status.media_attachments}
-              sensitive={status.sensitive}
+              status={status}
             />
           )}
 

packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx

@@ -69,7 +69,7 @@ const CompareHistoryModal: React.FC<BaseModalProps & CompareHistoryModalProps> =
               )}
 
               {version.media_attachments.length > 0 && (
-                <AttachmentThumbs media={version.media_attachments} />
+                <AttachmentThumbs status={version} />
               )}
 
               <Text align='right' tag='span' theme='muted' size='sm'>

packages/pl-fe/src/features/ui/components/modals/report-modal/index.tsx

@@ -58,10 +58,7 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
       <StatusContent status={status} />
 
       {status.media_attachments.length > 0 && (
-        <AttachmentThumbs
-          media={status.media_attachments}
-          sensitive={status.sensitive}
-        />
+        <AttachmentThumbs status={status} />
       )}
     </Stack>
   );