From a32a126cac42c73236236b5a9bd660765b9c58ee Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 13 Mar 2024 17:47:48 +0100 Subject: [PATCH] Hide media by default in notification requests (#29572) --- app/javascript/mastodon/components/status.jsx | 25 ++++++----- .../features/notifications/request.jsx | 41 ++++++++++--------- .../ui/util/sensitive_media_context.tsx | 28 +++++++++++++ 3 files changed, 65 insertions(+), 29 deletions(-) create mode 100644 app/javascript/mastodon/features/ui/util/sensitive_media_context.tsx diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index be9a1cec65..7b97e45766 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/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), - statusId: undefined, + showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault), forceFilter: undefined, }; - static getDerivedStateFromProps(nextProps, prevState) { - if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) { - return { - showMedia: defaultMediaVisibility(nextProps.status), - statusId: nextProps.status.get('id'), - }; - } else { - return null; + componentDidUpdate (prevProps) { + // This will potentially cause a wasteful redraw, but in most cases `Status` components are used + // with a `key` directly depending on their `id`, preventing re-use of the component across + // different IDs. + // But just in case this does change, reset the state on status change. + + if (this.props.status?.get('id') !== prevProps.status?.get('id')) { + this.setState({ + showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault), + forceFilter: undefined, + }); } } diff --git a/app/javascript/mastodon/features/notifications/request.jsx b/app/javascript/mastodon/features/notifications/request.jsx index 5977a6ce96..da9ed21e55 100644 --- a/app/javascript/mastodon/features/notifications/request.jsx +++ b/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,25 +107,27 @@ export const NotificationRequest = ({ multiColumn, params: { id } }) => { )} /> - - {notifications.map(item => ( - item && - ))} - + + + {notifications.map(item => ( + item && + ))} + + {columnTitle} diff --git a/app/javascript/mastodon/features/ui/util/sensitive_media_context.tsx b/app/javascript/mastodon/features/ui/util/sensitive_media_context.tsx new file mode 100644 index 0000000000..408154c31b --- /dev/null +++ b/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; + +export const SensitiveMediaContextProvider: React.FC< + React.PropsWithChildren<{ hideMediaByDefault: boolean }> +> = ({ hideMediaByDefault, children }) => { + const contextValue = useMemo( + () => ({ hideMediaByDefault }), + [hideMediaByDefault], + ); + + return ( + + {children} + + ); +};