[Glitch] Hide media by default in notification requests

Port a32a126cac to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire 2024-03-13 17:47:48 +01:00
parent 65ca37bbaa
commit e7b49181af
3 changed files with 66 additions and 27 deletions

View File

@ -20,6 +20,7 @@ import Card from '../features/status/components/card';
// to use the progress bar to show download progress // to use the progress bar to show download progress
import Bundle from '../features/ui/components/bundle'; import Bundle from '../features/ui/components/bundle';
import { MediaGallery, Video, Audio } from '../features/ui/util/async-components'; 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 { displayMedia } from '../initial_state';
import AttachmentList from './attachment_list'; import AttachmentList from './attachment_list';
@ -72,6 +73,8 @@ export const defaultMediaVisibility = (status, settings) => {
class Status extends ImmutablePureComponent { class Status extends ImmutablePureComponent {
static contextType = SensitiveMediaContext;
static propTypes = { static propTypes = {
containerId: PropTypes.string, containerId: PropTypes.string,
id: PropTypes.string, id: PropTypes.string,
@ -125,8 +128,7 @@ class Status extends ImmutablePureComponent {
isCollapsed: false, isCollapsed: false,
autoCollapsed: false, autoCollapsed: false,
isExpanded: undefined, isExpanded: undefined,
showMedia: undefined, showMedia: defaultMediaVisibility(this.props.status, this.props.settings) && !(this.context?.hideMediaByDefault),
statusId: undefined,
revealBehindCW: undefined, revealBehindCW: undefined,
showCard: false, showCard: false,
forceFilter: undefined, forceFilter: undefined,
@ -211,12 +213,6 @@ class Status extends ImmutablePureComponent {
updated = true; updated = true;
} }
if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
update.showMedia = defaultMediaVisibility(nextProps.status, nextProps.settings);
update.statusId = nextProps.status.get('id');
updated = true;
}
if (nextProps.settings.getIn(['media', 'reveal_behind_cw']) !== prevState.revealBehindCW) { if (nextProps.settings.getIn(['media', 'reveal_behind_cw']) !== prevState.revealBehindCW) {
update.revealBehindCW = nextProps.settings.getIn(['media', 'reveal_behind_cw']); update.revealBehindCW = nextProps.settings.getIn(['media', 'reveal_behind_cw']);
if (update.revealBehindCW) { if (update.revealBehindCW) {
@ -312,6 +308,18 @@ class Status extends ImmutablePureComponent {
if (snapshot !== null && this.props.updateScrollBottom && this.node.offsetTop < snapshot.top) { if (snapshot !== null && this.props.updateScrollBottom && this.node.offsetTop < snapshot.top) {
this.props.updateScrollBottom(snapshot.height - snapshot.top); this.props.updateScrollBottom(snapshot.height - snapshot.top);
} }
// 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.props.settings) && !(this.context?.hideMediaByDefault),
forceFilter: undefined,
});
}
} }
componentWillUnmount() { componentWillUnmount() {

View File

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

View File

@ -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>
);
};