Add a keyboard shortcut to hide/show media (#10647)

* Move control of media visibility to parent component

* Add keyboard shortcut to toggle media visibility
This commit is contained in:
ThibG
2019-05-25 23:20:51 +02:00
committed by Eugen Rochko
parent c90f3b9865
commit a472190729
7 changed files with 75 additions and 12 deletions

View File

@ -30,6 +30,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
onHeightChange: PropTypes.func,
domain: PropTypes.string.isRequired,
compact: PropTypes.bool,
showMedia: PropTypes.bool,
onToggleMediaVisibility: PropTypes.func,
};
state = {
@ -122,6 +124,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
inline
onOpenVideo={this.handleOpenVideo}
sensitive={status.get('sensitive')}
visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility}
/>
);
} else {
@ -132,6 +136,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
media={status.get('media_attachments')}
height={300}
onOpenMedia={this.props.onOpenMedia}
visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility}
/>
);
}

View File

@ -41,7 +41,7 @@ import { openModal } from '../../actions/modal';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import { boostModal, deleteModal } from '../../initial_state';
import { boostModal, deleteModal, displayMedia } from '../../initial_state';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
import { textForScreenReader } from '../../components/status';
import Icon from 'mastodon/components/icon';
@ -131,6 +131,7 @@ class Status extends ImmutablePureComponent {
state = {
fullscreen: false,
showMedia: !this.props.status ? undefined : (displayMedia !== 'hide_all' && !this.props.status.get('sensitive') || displayMedia === 'show_all'),
};
componentWillMount () {
@ -146,6 +147,13 @@ class Status extends ImmutablePureComponent {
this._scrolledIntoView = false;
this.props.dispatch(fetchStatus(nextProps.params.statusId));
}
if (!Immutable.is(nextProps.status, this.props.status) && nextProps.status) {
this.setState({ showMedia: displayMedia !== 'hide_all' && !nextProps.status.get('sensitive') || displayMedia === 'show_all' });
}
}
handleToggleMediaVisibility = () => {
this.setState({ showMedia: !this.state.showMedia });
}
handleFavouriteClick = (status) => {
@ -312,6 +320,10 @@ class Status extends ImmutablePureComponent {
this.handleToggleHidden(this.props.status);
}
handleHotkeyToggleSensitive = () => {
this.handleToggleMediaVisibility();
}
handleMoveUp = id => {
const { status, ancestorsIds, descendantsIds } = this.props;
@ -432,6 +444,7 @@ class Status extends ImmutablePureComponent {
mention: this.handleHotkeyMention,
openProfile: this.handleHotkeyOpenProfile,
toggleHidden: this.handleHotkeyToggleHidden,
toggleSensitive: this.handleHotkeyToggleSensitive,
};
return (
@ -455,6 +468,8 @@ class Status extends ImmutablePureComponent {
onOpenMedia={this.handleOpenMedia}
onToggleHidden={this.handleToggleHidden}
domain={domain}
showMedia={this.state.showMedia}
onToggleMediaVisibility={this.handleToggleMediaVisibility}
/>
<ActionBar