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

Merge pull request #468 from ThibG/glitch-soc/features/reports-improvements

Browse source 
Various improvements to the reports modal
This commit is contained in:
beatrix 2018-05-07 09:45:13 -04:00 committed by GitHub
commit e774936358
5 changed files with 19 additions and 9 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>
);
}

6
app/javascript/flavours/glitch/features/ui/components/report_modal.js
View file

@ -30,7 +30,7 @@ const makeMapStateToProps = () => {
account: getAccount(state, accountId),
comment: state.getIn(['reports', 'new', 'comment']),
forward: state.getIn(['reports', 'new', 'forward']),
statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])),
statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])),
};
};
@ -64,12 +64,12 @@ export default class ReportModal extends ImmutablePureComponent {
}
componentDidMount () {
this.props.dispatch(refreshAccountTimeline(this.props.account.get('id')));
this.props.dispatch(refreshAccountTimeline(this.props.account.get('id'), true));
}
componentWillReceiveProps (nextProps) {
if (this.props.account !== nextProps.account && nextProps.account) {
this.props.dispatch(refreshAccountTimeline(nextProps.account.get('id')));
this.props.dispatch(refreshAccountTimeline(nextProps.account.get('id'), true));
}
}

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>

2
app/javascript/flavours/glitch/styles/components/modal.scss
View file

@ -532,7 +532,7 @@
.report-modal__statuses {
flex: 1 1 auto;
min-height: 20vh;
max-height: 40vh;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;