Skip to content

Commit

Permalink
Change sensitive preview cards to not blur text (mastodon#14143)
Browse files Browse the repository at this point in the history
Also only require click-through for interactive embeds.
  • Loading branch information
ClearlyClaire authored and Mage committed Jan 14, 2022
1 parent 80263ed commit 5f75643
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 10 deletions.
8 changes: 3 additions & 5 deletions app/javascript/mastodon/features/status/components/card.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { FormattedMessage } from 'react-intl';
import punycode from 'punycode';
import classnames from 'classnames';
import Icon from 'mastodon/components/icon';
import classNames from 'classnames';
import { useBlurhash } from 'mastodon/initial_state';
import { decode } from 'blurhash';
import { debounce } from 'lodash';
Expand Down Expand Up @@ -231,23 +230,23 @@ export default class Card extends React.PureComponent {
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);

const description = (
<div className={classNames('status-card__content', { 'status-card__content--blurred': !revealed })}>
<div className='status-card__content'>
{title}
{!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
<span className='status-card__host'>{provider}</span>
</div>
);

let embed = '';
let canvas = <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('status-card__image-preview', { 'status-card__image-preview--hidden' : revealed && this.state.previewLoaded })} />;
let canvas = <canvas width={32} height={32} ref={this.setCanvasRef} className={classnames('status-card__image-preview', { 'status-card__image-preview--hidden' : revealed && this.state.previewLoaded })} />;
let thumbnail = <img src={card.get('image')} alt='' style={{ width: horizontal ? width : null, height: horizontal ? height : null, visibility: revealed ? null : 'hidden' }} 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>
</button>
);
spoilerButton = (
<div className={classNames('spoiler-button', { 'spoiler-button--minified': revealed })}>
<div className={classnames('spoiler-button', { 'spoiler-button--minified': revealed })}>
{spoilerButton}
</div>
);
Expand Down Expand Up @@ -305,7 +304,6 @@ export default class Card extends React.PureComponent {
<a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
{embed}
{description}
{!revealed && spoilerButton}
</a>
);
}
Expand Down
5 changes: 0 additions & 5 deletions app/javascript/styles/mastodon/components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3106,11 +3106,6 @@ a.status-card {
flex: 1 1 auto;
overflow: hidden;
padding: 14px 14px 14px 8px;

&--blurred {
filter: blur(2px);
pointer-events: none;
}
}

.status-card__description {
Expand Down

0 comments on commit 5f75643

Please sign in to comment.