erik/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-08-20 21:08:15 -07:00
Code Issues Projects Releases Wiki Activity

Fix #29431: "Always hide media" now hides images/thumbnails from links

Browse source 
The images/videos that are automatically loaded by links do not blur
when the option is selected in the preferences/appearance, as is it a
different class from the ones uploaded by the devices of users.
So i used a variable called visible to check what is the option selected
for the display_media, then i modified the spoilerbutton in a way that
allows to hide, by bluring, the images/thumbnails and as a mini
spoilerButton if the person wants to hide it but it is in the option
"Always Show media"
This commit is contained in:
Alexandre Umbelino 2024-04-04 18:29:49 +01:00
parent 5d4dbbcc67
commit 22a78e24ca
2 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
app/javascript/mastodon/features/status/components/card.jsx
View file

@ -18,7 +18,8 @@ import { Blurhash } from 'mastodon/components/blurhash';
import { Icon } from 'mastodon/components/icon';
import { MoreFromAuthor } from 'mastodon/components/more_from_author';
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
import { useBlurhash } from 'mastodon/initial_state';
import { displayMedia, useBlurhash } from 'mastodon/initial_state';
import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
const IDNA_PREFIX = 'xn--';
@ -64,12 +65,14 @@ export default class Card extends PureComponent {
card: ImmutablePropTypes.map,
onOpenMedia: PropTypes.func.isRequired,
sensitive: PropTypes.bool,
visible: PropTypes.bool,
};
state = {
previewLoaded: false,
embedded: false,
revealed: !this.props.sensitive,
visible: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
};
UNSAFE_componentWillReceiveProps (nextProps) {
@ -80,6 +83,12 @@ export default class Card extends PureComponent {
if (this.props.sensitive !== nextProps.sensitive) {
this.setState({ revealed: !nextProps.sensitive });
}
if (nextProps.visible === undefined) {
this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
} else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
this.setState({ visible: nextProps.visible });
}
}
componentDidMount () {
@ -112,6 +121,12 @@ export default class Card extends PureComponent {
this.setState({ revealed: true });
};
handleOpen = (e) => {
e.preventDefault();
e.stopPropagation();
this.setState({ visible: !this.state.visible });
};
renderVideo () {
const { card } = this.props;
const content = { __html: addAutoPlay(card.get('html')) };
@ -128,7 +143,7 @@ export default class Card extends PureComponent {
render () {
const { card } = this.props;
const { embedded, revealed } = this.state;
const { embedded, revealed, visible } = this.state;
if (card === null) {
return null;
@ -165,14 +180,14 @@ export default class Card extends PureComponent {
thumbnailStyle.aspectRatio = 1;
}
let embed;
let embed, spoilerButton;
let canvas = (
<Blurhash
className={classNames('status-card__image-preview', {
'status-card__image-preview--hidden': revealed && this.state.previewLoaded,
})}
hash={card.get('blurhash')}
className={classNames('status-card__image-preview', {
'status-card__image-preview--hidden': visible && this.state.previewLoaded,
})}
dummy={!useBlurhash}
/>
);
@ -180,17 +195,24 @@ export default class Card extends PureComponent {
const thumbnailDescription = card.get('image_description');
const thumbnail = <img src={card.get('image')} alt={thumbnailDescription} title={thumbnailDescription} lang={language} style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let spoilerButton = (
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'>
<FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
</span>
</button>
);
if (visible) {
spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
<Icon id='eye-slash' icon={VisibilityOffIcon} />
</button>);
} else {
spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'>
{revealed ? <FormattedMessage id='status.status_hidden' defaultMessage='Status hidden' /> : <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />}
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
</span>
</button>
);
}
spoilerButton = (
<div className={classNames('spoiler-button', { 'spoiler-button--minified': revealed })}>
<div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}>
{spoilerButton}
</div>
);
@ -204,11 +226,12 @@ export default class Card extends PureComponent {
{canvas}
{thumbnail}
{revealed ? (
{visible ? (
<div className='status-card__actions' onClick={this.handleEmbedClick} role='none'>
<div>
<button type='button' onClick={this.handleEmbedClick}><Icon id='play' icon={PlayArrowIcon} /></button>
<a href={card.get('url')} onClick={this.handleExternalLinkClick} target='_blank' rel='noopener noreferrer'><Icon id='external-link' icon={OpenInNewIcon} /></a>
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'><Icon id='eye-slash' icon={VisibilityOffIcon} /></button>
</div>
</div>
) : spoilerButton}
@ -226,6 +249,7 @@ export default class Card extends PureComponent {
embed = (
<div className='status-card__image'>
{canvas}
{spoilerButton}
{thumbnail}
</div>
);

2
app/javascript/mastodon/features/status/components/detailed_status.jsx
View file

@ -209,7 +209,7 @@ class DetailedStatus extends ImmutablePureComponent {
);
}
} else if (status.get('spoiler_text').length === 0) {
media = <Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} />;
media = <Card visible={this.props.showMedia} sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)}/>;
}
if (status.get('application')) {