From 735d04b0074ac245fd837d884a0192b42bf5c1b5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 7 Jun 2022 14:26:12 -0500
Subject: [PATCH] QuotedStatus: properly display sensitive media

---
 app/soapbox/components/status.tsx             | 11 +---------
 .../status/components/quoted_status.tsx       | 20 +++++++++++++++++--
 app/soapbox/features/status/index.tsx         |  3 ++-
 app/soapbox/utils/status.ts                   | 11 ++++++++++
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 2b1325a60..774ffed7c 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -8,6 +8,7 @@ import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 import Icon from 'soapbox/components/icon';
 import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
@@ -50,16 +51,6 @@ export const textForScreenReader = (intl: IntlShape, status: StatusEntity, reblo
   return values.join(', ');
 };
 
-export const defaultMediaVisibility = (status: StatusEntity, displayMedia: string): boolean => {
-  if (!status) return false;
-
-  if (status.reblog && typeof status.reblog === 'object') {
-    status = status.reblog;
-  }
-
-  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
-};
-
 interface IStatus extends RouteComponentProps {
   id?: string,
   contextType?: string,
diff --git a/app/soapbox/features/status/components/quoted_status.tsx b/app/soapbox/features/status/components/quoted_status.tsx
index 8cb4db1f6..6c0fae410 100644
--- a/app/soapbox/features/status/components/quoted_status.tsx
+++ b/app/soapbox/features/status/components/quoted_status.tsx
@@ -1,11 +1,13 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import StatusMedia from 'soapbox/components/status-media';
 import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
+import { useSettings } from 'soapbox/hooks';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -27,6 +29,11 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   const intl = useIntl();
   const history = useHistory();
 
+  const settings = useSettings();
+  const displayMedia = settings.get('displayMedia');
+
+  const [showMedia, setShowMedia] = useState(defaultMediaVisibility(status, displayMedia));
+
   const handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!status) return;
     const account = status.account as AccountEntity;
@@ -44,6 +51,10 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
     }
   };
 
+  const handleToggleMediaVisibility = () => {
+    setShowMedia(!showMedia);
+  };
+
   const renderReplyMentions = () => {
     if (!status?.in_reply_to_id) {
       return null;
@@ -135,7 +146,12 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
         dangerouslySetInnerHTML={{ __html: status.contentHtml }}
       />
 
-      <StatusMedia status={status} muted={compose} />
+      <StatusMedia
+        status={status}
+        muted={compose}
+        showMedia={showMedia}
+        onToggleVisibility={handleToggleMediaVisibility}
+      />
     </Stack>
   );
 };
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 39d768e9f..735f1804a 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -49,13 +49,14 @@ import {
 import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing_indicator';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { textForScreenReader, defaultMediaVisibility } from 'soapbox/components/status';
+import { textForScreenReader } from 'soapbox/components/status';
 import SubNavigation from 'soapbox/components/sub_navigation';
 import Tombstone from 'soapbox/components/tombstone';
 import { Column, Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
 import { makeGetStatus } from 'soapbox/selectors';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
 
diff --git a/app/soapbox/utils/status.ts b/app/soapbox/utils/status.ts
index b735fb75d..439edfc02 100644
--- a/app/soapbox/utils/status.ts
+++ b/app/soapbox/utils/status.ts
@@ -2,6 +2,17 @@ import { isIntegerId } from 'soapbox/utils/numbers';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
+/** Get the initial visibility of media attachments from user settings. */
+export const defaultMediaVisibility = (status: StatusEntity | undefined, displayMedia: string): boolean => {
+  if (!status) return false;
+
+  if (status.reblog && typeof status.reblog === 'object') {
+    status = status.reblog;
+  }
+
+  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
+};
+
 /** Grab the first external link from a status. */
 export const getFirstExternalLink = (status: StatusEntity): HTMLAnchorElement | null => {
   try {