Hide media in report modal regardless of whether they are marked sensitive
The rationale behind this is that if the user wants to report violent media, they might not want to see it repeatedly. The “sensitive” property is still kept, displaying different messages for hidden media depending on whether they are marked as sensitive.
This commit is contained in:
parent
6b94237810
commit
658ac4396c
|
@ -202,6 +202,7 @@ export default class MediaGallery extends React.PureComponent {
|
|||
|
||||
static propTypes = {
|
||||
sensitive: PropTypes.bool,
|
||||
revealed: PropTypes.bool,
|
||||
standalone: PropTypes.bool,
|
||||
letterbox: PropTypes.bool,
|
||||
fullwidth: PropTypes.bool,
|
||||
|
@ -216,7 +217,7 @@ export default class MediaGallery extends React.PureComponent {
|
|||
};
|
||||
|
||||
state = {
|
||||
visible: !this.props.sensitive || displaySensitiveMedia,
|
||||
visible: this.props.revealed === undefined ? (!this.props.sensitive || displaySensitiveMedia) : this.props.revealed,
|
||||
};
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
|
|
|
@ -40,6 +40,7 @@ export default class StatusCheckBox extends React.PureComponent {
|
|||
height={110}
|
||||
inline
|
||||
sensitive={status.get('sensitive')}
|
||||
revealed={false}
|
||||
onOpenVideo={noop}
|
||||
/>
|
||||
)}
|
||||
|
@ -48,7 +49,7 @@ export default class StatusCheckBox extends React.PureComponent {
|
|||
} else {
|
||||
media = (
|
||||
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} >
|
||||
{Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={noop} />}
|
||||
{Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} revealed={false} height={110} onOpenMedia={noop} />}
|
||||
</Bundle>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -92,6 +92,7 @@ export default class Video extends React.PureComponent {
|
|||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
sensitive: PropTypes.bool,
|
||||
revealed: PropTypes.bool,
|
||||
startTime: PropTypes.number,
|
||||
onOpenVideo: PropTypes.func,
|
||||
onCloseVideo: PropTypes.func,
|
||||
|
@ -111,7 +112,7 @@ export default class Video extends React.PureComponent {
|
|||
fullscreen: false,
|
||||
hovered: false,
|
||||
muted: false,
|
||||
revealed: !this.props.sensitive || displaySensitiveMedia,
|
||||
revealed: this.props.revealed === undefined ? (!this.props.sensitive || displaySensitiveMedia) : this.props.revealed,
|
||||
};
|
||||
|
||||
setPlayerRef = c => {
|
||||
|
@ -255,7 +256,7 @@ export default class Video extends React.PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props;
|
||||
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed, sensitive } = this.props;
|
||||
const { containerWidth, currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
|
||||
const progress = (currentTime / duration) * 100;
|
||||
const playerStyle = {};
|
||||
|
@ -270,6 +271,13 @@ export default class Video extends React.PureComponent {
|
|||
playerStyle.height = height;
|
||||
}
|
||||
|
||||
let warning;
|
||||
if (sensitive) {
|
||||
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
|
||||
} else {
|
||||
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })} style={playerStyle} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
|
||||
<video
|
||||
|
@ -292,7 +300,7 @@ export default class Video extends React.PureComponent {
|
|||
/>
|
||||
|
||||
<button type='button' className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}>
|
||||
<span className='video-player__spoiler__title'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
|
||||
<span className='video-player__spoiler__title'>{warning}</span>
|
||||
<span className='video-player__spoiler__subtitle'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</button>
|
||||
|
||||
|
|
Reference in New Issue