Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-15 08:48:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Add new filter action to blur media

Browse Source 
Port c93b2c6809 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire
2025-03-26 08:31:05 +01:00
parent 9c5c86c947
commit 7e8a06ba94
7 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/flavours/glitch/components/media_gallery.jsx
View File

@@ -231,6 +231,7 @@ class MediaGallery extends PureComponent {
visible: PropTypes.bool,
autoplay: PropTypes.bool,
onToggleVisibility: PropTypes.func,
matchedFilters: PropTypes.arrayOf(PropTypes.string),
};
static defaultProps = {
@@ -314,7 +315,7 @@ class MediaGallery extends PureComponent {
}
render () {
const { media, lang, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props;
const { media, lang, sensitive, letterbox, fullwidth, defaultWidth, autoplay, matchedFilters } = this.props;
const { visible } = this.state;
const size = media.size;
const uncached = media.every(attachment => attachment.get('type') === 'unknown');
@@ -343,7 +344,7 @@ class MediaGallery extends PureComponent {
<div className={computedClass} style={style} ref={this.handleRef}>
{children}
{(!visible || uncached) && <SpoilerButton uncached={uncached} sensitive={sensitive} onClick={this.handleOpen} />}
{(!visible || uncached) && <SpoilerButton uncached={uncached} sensitive={sensitive} onClick={this.handleOpen} matchedFilters={matchedFilters} />}
{(visible && !uncached) && (
<div className='media-gallery__actions'>

16
app/javascript/flavours/glitch/components/spoiler_button.tsx
View File

@@ -6,6 +6,7 @@ interface Props {
hidden?: boolean;
sensitive: boolean;
uncached?: boolean;
matchedFilters?: string[];
onClick: React.MouseEventHandler<HTMLButtonElement>;
}
@@ -13,6 +14,7 @@ export const SpoilerButton: React.FC<Props> = ({
hidden = false,
sensitive,
uncached = false,
matchedFilters,
onClick,
}) => {
let warning;
@@ -28,6 +30,20 @@ export const SpoilerButton: React.FC<Props> = ({
action = (
<FormattedMessage id='status.media.open' defaultMessage='Click to open' />
);
} else if (matchedFilters) {
warning = (
<FormattedMessage
id='filter_warning.matches_filter'
defaultMessage='Matches filter “<span>{title}</span>”'
values={{
title: matchedFilters.join(', '),
span: (chunks) => <span className='filter-name'>{chunks}</span>,
}}
/>
);
action = (
<FormattedMessage id='status.media.show' defaultMessage='Click to show' />
);
} else if (sensitive) {
warning = (
<FormattedMessage

5
app/javascript/flavours/glitch/components/status.jsx
View File

@@ -70,7 +70,7 @@ export const defaultMediaVisibility = (status, settings) => {
return true;
}
return (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
return !status.get('matched_media_filters') && (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
};
class Status extends ImmutablePureComponent {
@@ -557,6 +557,7 @@ class Status extends ImmutablePureComponent {
defaultWidth={this.props.cachedMediaWidth}
visible={this.state.showMedia}
onToggleVisibility={this.handleToggleMediaVisibility}
matchedFilters={status.get('matched_media_filters')}
/>
)}
</Bundle>,
@@ -586,6 +587,7 @@ class Status extends ImmutablePureComponent {
blurhash={attachment.get('blurhash')}
visible={this.state.showMedia}
onToggleVisibility={this.handleToggleMediaVisibility}
matchedFilters={status.get('matched_media_filters')}
/>
)}
</Bundle>,
@@ -613,6 +615,7 @@ class Status extends ImmutablePureComponent {
deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
visible={this.state.showMedia}
onToggleVisibility={this.handleToggleMediaVisibility}
matchedFilters={status.get('matched_media_filters')}
/>)}
</Bundle>,
);

5
app/javascript/flavours/glitch/features/audio/index.jsx
View File

@@ -62,6 +62,7 @@ class Audio extends PureComponent {
volume: PropTypes.number,
muted: PropTypes.bool,
deployPictureInPicture: PropTypes.func,
matchedFilters: PropTypes.arrayOf(PropTypes.string),
};
state = {
@@ -478,7 +479,7 @@ class Audio extends PureComponent {
};
render () {
const { src, intl, alt, lang, editable, autoPlay, sensitive, blurhash } = this.props;
const { src, intl, alt, lang, editable, autoPlay, sensitive, blurhash, matchedFilters } = this.props;
const { paused, volume, currentTime, duration, buffer, dragging, revealed } = this.state;
const progress = Math.min((currentTime / duration) * 100, 100);
const muted = this.state.muted || volume === 0;
@@ -520,7 +521,7 @@ class Audio extends PureComponent {
lang={lang}
/>
<SpoilerButton hidden={revealed || editable} sensitive={sensitive} onClick={this.toggleReveal} />
<SpoilerButton hidden={revealed || editable} sensitive={sensitive} onClick={this.toggleReveal} matchedFilters={matchedFilters} />
{(revealed || editable) && <img
src={this.props.poster}

3
app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
View File

@@ -190,6 +190,7 @@ export const DetailedStatus: React.FC<{
onOpenMedia={onOpenMedia}
visible={showMedia}
onToggleVisibility={onToggleMediaVisibility}
matchedFilters={status.get('matched_media_filters')}
/>
);
mediaIcons.push('picture-o');
@@ -217,6 +218,7 @@ export const DetailedStatus: React.FC<{
blurhash={attachment.get('blurhash')}
height={150}
onToggleVisibility={onToggleMediaVisibility}
matchedFilters={status.get('matched_media_filters')}
/>
);
mediaIcons.push('music');
@@ -242,6 +244,7 @@ export const DetailedStatus: React.FC<{
sensitive={status.get('sensitive')}
visible={showMedia}
onToggleVisibility={onToggleMediaVisibility}
matchedFilters={status.get('matched_media_filters')}
letterbox={letterboxMedia}
fullwidth={fullwidthMedia}
preventPlayback={!expanded}

5
app/javascript/flavours/glitch/features/video/index.jsx
View File

@@ -139,6 +139,7 @@ class Video extends PureComponent {
muted: PropTypes.bool,
componentIndex: PropTypes.number,
autoFocus: PropTypes.bool,
matchedFilters: PropTypes.arrayOf(PropTypes.string),
};
static defaultProps = {
@@ -542,7 +543,7 @@ class Video extends PureComponent {
}
render () {
const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, lang, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus } = this.props;
const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, lang, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus, matchedFilters } = this.props;
const { currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, revealed } = this.state;
const progress = Math.min((currentTime / duration) * 100, 100);
const muted = this.state.muted || volume === 0;
@@ -603,7 +604,7 @@ class Video extends PureComponent {
style={{ ...playerStyle, width: '100%' }}
/>}
<SpoilerButton hidden={revealed || editable} sensitive={sensitive} onClick={this.toggleReveal} />
<SpoilerButton hidden={revealed || editable} sensitive={sensitive} onClick={this.toggleReveal} matchedFilters={matchedFilters} />
<div className={classNames('video-player__controls', { active: paused || hovered })}>
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>

10
app/javascript/flavours/glitch/selectors/index.js
View File

@@ -24,12 +24,19 @@ export const makeGetStatus = () => {
}
let filtered = false;
let mediaFiltered = false;
if ((accountReblog || accountBase).get('id') !== me && filters) {
let filterResults = statusReblog?.get('filtered') || statusBase.get('filtered') || ImmutableList();
if (!warnInsteadOfHide && filterResults.some((result) => filters.getIn([result.get('filter'), 'filter_action']) === 'hide')) {
return null;
}
filterResults = filterResults.filter(result => filters.has(result.get('filter')));
let mediaFilters = filterResults.filter(result => filters.getIn([result.get('filter'), 'filter_action']) === 'blur');
if (!mediaFilters.isEmpty()) {
mediaFiltered = mediaFilters.map(result => filters.getIn([result.get('filter'), 'title']));
}
filterResults = filterResults.filter(result => filters.has(result.get('filter')) && filters.getIn([result.get('filter'), 'filter_action']) !== 'blur');
if (!filterResults.isEmpty()) {
filtered = filterResults.map(result => filters.getIn([result.get('filter'), 'title']));
}
@@ -46,6 +53,7 @@ export const makeGetStatus = () => {
map.set('reblog', statusReblog);
map.set('account', accountBase);
map.set('matched_filters', filtered);
map.set('matched_media_filters', mediaFiltered);
});
},
);