Merge pull request #468 from ThibG/glitch-soc/features/reports-improvements
Various improvements to the reports modal
This commit is contained in:
commit
e774936358
5 changed files with 19 additions and 9 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,7 +30,7 @@ const makeMapStateToProps = () => {
|
||||||
account: getAccount(state, accountId),
|
account: getAccount(state, accountId),
|
||||||
comment: state.getIn(['reports', 'new', 'comment']),
|
comment: state.getIn(['reports', 'new', 'comment']),
|
||||||
forward: state.getIn(['reports', 'new', 'forward']),
|
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 () {
|
componentDidMount () {
|
||||||
this.props.dispatch(refreshAccountTimeline(this.props.account.get('id')));
|
this.props.dispatch(refreshAccountTimeline(this.props.account.get('id'), true));
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps (nextProps) {
|
componentWillReceiveProps (nextProps) {
|
||||||
if (this.props.account !== nextProps.account && nextProps.account) {
|
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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -532,7 +532,7 @@
|
||||||
.report-modal__statuses {
|
.report-modal__statuses {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
min-height: 20vh;
|
min-height: 20vh;
|
||||||
max-height: 40vh;
|
max-height: 80vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue