Refactor to use 'defaultMediaVisibility' function

app/soapbox/components/status.tsx

@@ -80,7 +80,7 @@ const Status: React.FC<IStatus> = (props) => {
   const didShowCard = useRef(false);
   const node = useRef<HTMLDivElement>(null);
 
-  const [showMedia, setShowMedia] = useState<boolean>(status.visibility === 'self' ? false : defaultMediaVisibility(status, displayMedia));
+  const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
 
   const actualStatus = getActualStatus(status);
 
@@ -90,7 +90,7 @@ const Status: React.FC<IStatus> = (props) => {
   }, []);
 
   useEffect(() => {
-    setShowMedia(status.visibility === 'self' ? false : defaultMediaVisibility(status, displayMedia));
+    setShowMedia(defaultMediaVisibility(status, displayMedia));
   }, [status.id]);
 
   const handleToggleMediaVisibility = (): void => {

app/soapbox/components/statuses/sensitive-content-overlay.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import { Button, HStack, Text } from '../ui';
 
@@ -27,23 +28,15 @@ interface ISensitiveContentOverlay {
 const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
   const { onToggleVisibility, status } = props;
   const isUnderReview = status.visibility === 'self';
-  const isSensitive = status.sensitive;
 
   const settings = useSettings();
-  const displayMedia = settings.get('displayMedia') as string | undefined;
+  const displayMedia = settings.get('displayMedia') as string;
 
   const intl = useIntl();
 
   const { links } = useSoapboxConfig();
 
-  const [visible, setVisible] = useState<boolean>(
-    isUnderReview === true ? false : null
-      || (
-        props.visible !== undefined
-          ? props.visible
-          : (displayMedia !== 'hide_all' && !isSensitive || displayMedia === 'show_all')
-      ),
-  );
+  const [visible, setVisible] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
 
   const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();

app/soapbox/features/status/components/detailed-status.tsx

@@ -50,7 +50,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   const { account } = actualStatus;
   if (!account || typeof account !== 'object') return null;
 
-  const inReview = actualStatus.visibility === 'self';
+  const isUnderReview = actualStatus.visibility === 'self';
   const isSensitive = actualStatus.sensitive;
 
   let statusTypeIcon = null;
@@ -94,11 +94,11 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
           justifyContent='end'
           className={
             classNames('relative', {
-              'min-h-[220px]': inReview || isSensitive,
+              'min-h-[220px]': isUnderReview || isSensitive,
             })
           }
         >
-          {(inReview || isSensitive) ? (
+          {(isUnderReview || isSensitive) ? (
             <SensitiveContentOverlay
               status={status}
               visible={showMedia}

app/soapbox/features/status/index.tsx

@@ -135,7 +135,7 @@ const Thread: React.FC<IThread> = (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 isUnderReview = status?.visibility === 'self';
 
   const { ancestorsIds, descendantsIds } = useAppSelector(state => {
     let ancestorsIds = ImmutableOrderedSet<string>();
@@ -463,14 +463,14 @@ const Thread: React.FC<IThread> = (props) => {
           ref={statusRef}
           className={
             classNames('detailed-status__wrapper focusable relative', {
-              'min-h-[220px]': inReview,
+              'min-h-[220px]': isUnderReview,
             })
           }
           tabIndex={0}
           // FIXME: no "reblogged by" text is added for the screen reader
           aria-label={textForScreenReader(intl, status)}
         >
-          {inReview ? (
+          {isUnderReview ? (
             <SensitiveContentOverlay
               status={status}
               visible={showMedia}

app/soapbox/utils/status.ts

@@ -11,6 +11,12 @@ export const defaultMediaVisibility = (status: StatusEntity | undefined | null,
     status = status.reblog;
   }
 
+  const isUnderReview = status.visibility === 'self';
+
+  if (isUnderReview) {
+    return false;
+  }
+
   return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
 };