me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Hide media in report modal regardless of whether they are marked sensitive

Browse source 
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:
Thibaut Girka 2018-05-07 15:00:55 +02:00
parent 49181d497f
commit 3333cce41e
3 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/flavours/glitch/components/media_gallery.js
View file

@ -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) {

3
app/javascript/flavours/glitch/features/report/components/status_check_box.js
View file

@ -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>
);
}

14
app/javascript/flavours/glitch/features/video/index.js
View file

@ -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>