mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02:00
[Glitch] Hide sensitive preview cards with blurhash
Port 8e96510b25
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
parent
2da2f7f7c2
commit
776aff9656
@ -656,6 +656,7 @@ class Status extends ImmutablePureComponent {
|
||||
compact
|
||||
cacheWidth={this.props.cacheMediaWidth}
|
||||
defaultWidth={this.props.cachedMediaWidth}
|
||||
sensitive={status.get('sensitive')}
|
||||
/>
|
||||
);
|
||||
mediaIcon = 'link';
|
||||
|
@ -2,10 +2,14 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Immutable from 'immutable';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import punycode from 'punycode';
|
||||
import classnames from 'classnames';
|
||||
import { decode as decodeIDNA } from 'flavours/glitch/util/idna';
|
||||
import Icon from 'flavours/glitch/components/icon';
|
||||
import classNames from 'classnames';
|
||||
import { useBlurhash } from 'flavours/glitch/util/initial_state';
|
||||
import { decode } from 'blurhash';
|
||||
|
||||
const getHostname = url => {
|
||||
const parser = document.createElement('a');
|
||||
@ -55,6 +59,7 @@ export default class Card extends React.PureComponent {
|
||||
compact: PropTypes.bool,
|
||||
defaultWidth: PropTypes.number,
|
||||
cacheWidth: PropTypes.func,
|
||||
sensitive: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
@ -64,12 +69,44 @@ export default class Card extends React.PureComponent {
|
||||
|
||||
state = {
|
||||
width: this.props.defaultWidth || 280,
|
||||
previewLoaded: false,
|
||||
embedded: false,
|
||||
revealed: !this.props.sensitive,
|
||||
};
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!Immutable.is(this.props.card, nextProps.card)) {
|
||||
this.setState({ embedded: false });
|
||||
this.setState({ embedded: false, previewLoaded: false });
|
||||
}
|
||||
if (this.props.sensitive !== nextProps.sensitive) {
|
||||
this.setState({ revealed: !nextProps.sensitive });
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
if (this.props.card && this.props.card.get('blurhash')) {
|
||||
this._decode();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
const { card } = this.props;
|
||||
if (card.get('blurhash') && (!prevProps.card || prevProps.card.get('blurhash') !== card.get('blurhash'))) {
|
||||
this._decode();
|
||||
}
|
||||
}
|
||||
|
||||
_decode () {
|
||||
if (!useBlurhash) return;
|
||||
|
||||
const hash = this.props.card.get('blurhash');
|
||||
const pixels = decode(hash, 32, 32);
|
||||
|
||||
if (pixels) {
|
||||
const ctx = this.canvas.getContext('2d');
|
||||
const imageData = new ImageData(pixels, 32, 32);
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,6 +148,18 @@ export default class Card extends React.PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
setCanvasRef = c => {
|
||||
this.canvas = c;
|
||||
}
|
||||
|
||||
handleImageLoad = () => {
|
||||
this.setState({ previewLoaded: true });
|
||||
}
|
||||
|
||||
handleReveal = () => {
|
||||
this.setState({ revealed: true });
|
||||
}
|
||||
|
||||
renderVideo () {
|
||||
const { card } = this.props;
|
||||
const content = { __html: addAutoPlay(card.get('html')) };
|
||||
@ -130,7 +179,7 @@ export default class Card extends React.PureComponent {
|
||||
|
||||
render () {
|
||||
const { card, maxDescription, compact, defaultWidth } = this.props;
|
||||
const { width, embedded } = this.state;
|
||||
const { width, embedded, revealed } = this.state;
|
||||
|
||||
if (card === null) {
|
||||
return null;
|
||||
@ -145,7 +194,7 @@ export default class Card extends React.PureComponent {
|
||||
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
|
||||
|
||||
const description = (
|
||||
<div className='status-card__content'>
|
||||
<div className={classNames('status-card__content', { 'status-card__content--blurred': !revealed })}>
|
||||
{title}
|
||||
{!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
|
||||
<span className='status-card__host'>{provider}</span>
|
||||
@ -153,7 +202,18 @@ export default class Card extends React.PureComponent {
|
||||
);
|
||||
|
||||
let embed = '';
|
||||
let thumbnail = <div style={{ backgroundImage: `url(${card.get('image')})`, width: horizontal ? width : null, height: horizontal ? height : null }} className='status-card__image-image' />;
|
||||
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 })}>
|
||||
{spoilerButton}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (interactive) {
|
||||
if (embedded) {
|
||||
@ -167,14 +227,18 @@ export default class Card extends React.PureComponent {
|
||||
|
||||
embed = (
|
||||
<div className='status-card__image'>
|
||||
{canvas}
|
||||
{thumbnail}
|
||||
|
||||
<div className='status-card__actions'>
|
||||
<div>
|
||||
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
|
||||
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>}
|
||||
{revealed && (
|
||||
<div className='status-card__actions'>
|
||||
<div>
|
||||
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
|
||||
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!revealed && spoilerButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -188,13 +252,16 @@ export default class Card extends React.PureComponent {
|
||||
} else if (card.get('image')) {
|
||||
embed = (
|
||||
<div className='status-card__image'>
|
||||
{canvas}
|
||||
{thumbnail}
|
||||
{!revealed && spoilerButton}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
embed = (
|
||||
<div className='status-card__image'>
|
||||
<Icon id='file-text' />
|
||||
{!revealed && spoilerButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -184,7 +184,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
||||
mediaIcon = 'picture-o';
|
||||
}
|
||||
} else if (status.get('card')) {
|
||||
media = <Card onOpenMedia={this.props.onOpenMedia} card={status.get('card')} />;
|
||||
media = <Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card')} />;
|
||||
mediaIcon = 'link';
|
||||
}
|
||||
|
||||
|
@ -874,6 +874,11 @@ a.status-card {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
padding: 14px 14px 14px 8px;
|
||||
|
||||
&--blurred {
|
||||
filter: blur(2px);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__description {
|
||||
@ -911,7 +916,8 @@ a.status-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
.status-card__image-image,
|
||||
.status-card__image-preview {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
@ -956,6 +962,24 @@ a.status-card.compact:hover {
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.status-card__image-preview {
|
||||
border-radius: 4px 0 0 4px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
background: $base-overlay-background;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-list {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
|
Loading…
Reference in New Issue
Block a user