monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Thibaut Girka 2018-05-07 15:00:55 +02:00
parent 6b94237810
commit 658ac4396c
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 = { static propTypes = {
sensitive: PropTypes.bool, sensitive: PropTypes.bool,
revealed: PropTypes.bool,
standalone: PropTypes.bool, standalone: PropTypes.bool,
letterbox: PropTypes.bool, letterbox: PropTypes.bool,
fullwidth: PropTypes.bool, fullwidth: PropTypes.bool,
@ -216,7 +217,7 @@ export default class MediaGallery extends React.PureComponent {
}; };
state = { state = {
visible: !this.props.sensitive || displaySensitiveMedia, visible: this.props.revealed === undefined ? (!this.props.sensitive || displaySensitiveMedia) : this.props.revealed,
}; };
componentWillReceiveProps (nextProps) { 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} height={110}
inline inline
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
revealed={false}
onOpenVideo={noop} onOpenVideo={noop}
/> />
)} )}
@ -48,7 +49,7 @@ export default class StatusCheckBox extends React.PureComponent {
} else { } else {
media = ( media = (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} > <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> </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, width: PropTypes.number,
height: PropTypes.number, height: PropTypes.number,
sensitive: PropTypes.bool, sensitive: PropTypes.bool,
revealed: PropTypes.bool,
startTime: PropTypes.number, startTime: PropTypes.number,
onOpenVideo: PropTypes.func, onOpenVideo: PropTypes.func,
onCloseVideo: PropTypes.func, onCloseVideo: PropTypes.func,
@ -111,7 +112,7 @@ export default class Video extends React.PureComponent {
fullscreen: false, fullscreen: false,
hovered: false, hovered: false,
muted: false, muted: false,
revealed: !this.props.sensitive || displaySensitiveMedia, revealed: this.props.revealed === undefined ? (!this.props.sensitive || displaySensitiveMedia) : this.props.revealed,
}; };
setPlayerRef = c => { setPlayerRef = c => {
@ -255,7 +256,7 @@ export default class Video extends React.PureComponent {
} }
render () { 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 { containerWidth, currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100; const progress = (currentTime / duration) * 100;
const playerStyle = {}; const playerStyle = {};
@ -270,6 +271,13 @@ export default class Video extends React.PureComponent {
playerStyle.height = height; 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 ( 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}> <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 <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}> <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> <span className='video-player__spoiler__subtitle'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</button> </button>