Hide media by default in notification requests (#29572)

app/javascript/mastodon/components/status.jsx

@@ -22,6 +22,7 @@ import Card from '../features/status/components/card';
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
+import { SensitiveMediaContext } from '../features/ui/util/sensitive_media_context';
 import { displayMedia } from '../initial_state';
 
 import { Avatar } from './avatar';
@@ -78,6 +79,8 @@ const messages = defineMessages({
 
 class Status extends ImmutablePureComponent {
 
+  static contextType = SensitiveMediaContext;
+
   static propTypes = {
     status: ImmutablePropTypes.map,
     account: ImmutablePropTypes.record,
@@ -133,19 +136,21 @@ class Status extends ImmutablePureComponent {
   ];
 
   state = {
-    showMedia: defaultMediaVisibility(this.props.status),
+    showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
-    statusId: undefined,
     forceFilter: undefined,
   };
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  componentDidUpdate (prevProps) {
-    if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
+    // This will potentially cause a wasteful redraw, but in most cases `Status` components are used
-      return {
+    // with a `key` directly depending on their `id`, preventing re-use of the component across
-        showMedia: defaultMediaVisibility(nextProps.status),
+    // different IDs.
-        statusId: nextProps.status.get('id'),
+    // But just in case this does change, reset the state on status change.
-      };
+
-    } else {
+    if (this.props.status?.get('id') !== prevProps.status?.get('id')) {
-      return null;
+      this.setState({
+        showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
+        forceFilter: undefined,
+      });
     }
   }
 

app/javascript/mastodon/features/notifications/request.jsx

@@ -15,6 +15,7 @@ import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
 import { IconButton } from 'mastodon/components/icon_button';
 import ScrollableList from 'mastodon/components/scrollable_list';
+import { SensitiveMediaContextProvider } from 'mastodon/features/ui/util/sensitive_media_context';
 
 import NotificationContainer from './containers/notification_container';
 
@@ -106,6 +107,7 @@ export const NotificationRequest = ({ multiColumn, params: { id } }) => {
         )}
       />
 
+      <SensitiveMediaContextProvider hideMediaByDefault>
         <ScrollableList
           scrollKey={`notification_requests/${id}`}
           trackScroll={!multiColumn}
@@ -125,6 +127,7 @@ export const NotificationRequest = ({ multiColumn, params: { id } }) => {
             />
           ))}
         </ScrollableList>
+      </SensitiveMediaContextProvider>
 
       <Helmet>
         <title>{columnTitle}</title>

app/javascript/mastodon/features/ui/util/sensitive_media_context.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext, useMemo } from 'react';
+
+export const SensitiveMediaContext = createContext<{
+  hideMediaByDefault: boolean;
+}>({
+  hideMediaByDefault: false,
+});
+
+export function useSensitiveMediaContext() {
+  return useContext(SensitiveMediaContext);
+}
+
+type ContextValue = React.ContextType<typeof SensitiveMediaContext>;
+
+export const SensitiveMediaContextProvider: React.FC<
+  React.PropsWithChildren<{ hideMediaByDefault: boolean }>
+> = ({ hideMediaByDefault, children }) => {
+  const contextValue = useMemo<ContextValue>(
+    () => ({ hideMediaByDefault }),
+    [hideMediaByDefault],
+  );
+
+  return (
+    <SensitiveMediaContext.Provider value={contextValue}>
+      {children}
+    </SensitiveMediaContext.Provider>
+  );
+};