diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features')
5 files changed, 61 insertions, 22 deletions
diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js index 2935a6021..f7b475f8d 100644 --- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js +++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js @@ -71,6 +71,10 @@ export default class KeyboardShortcuts extends ImmutablePureComponent { <td><kbd>x</kbd></td> <td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td> </tr> + <tr> + <td><kbd>h</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td> + </tr> {collapseEnabled && ( <tr> <td><kbd>shift</kbd>+<kbd>x</kbd></td> diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index 03d98fde8..ddedac4d4 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -33,6 +33,8 @@ export default class DetailedStatus extends ImmutablePureComponent { onHeightChange: PropTypes.func, domain: PropTypes.string.isRequired, compact: PropTypes.bool, + showMedia: PropTypes.bool, + onToggleMediaVisibility: PropTypes.func, }; state = { @@ -144,7 +146,8 @@ export default class DetailedStatus extends ImmutablePureComponent { preventPlayback={!expanded} onOpenVideo={this.handleOpenVideo} autoplay - revealed={settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text') ? true : undefined} + visible={this.props.showMedia} + onToggleVisibility={this.props.onToggleMediaVisibility} /> ); mediaIcon = 'video-camera'; @@ -158,7 +161,8 @@ export default class DetailedStatus extends ImmutablePureComponent { fullwidth={settings.getIn(['media', 'fullwidth'])} hidden={!expanded} onOpenMedia={this.props.onOpenMedia} - revealed={settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text') ? true : undefined} + visible={this.props.showMedia} + onToggleVisibility={this.props.onToggleMediaVisibility} /> ); mediaIcon = 'picture-o'; diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index 57d70db1a..145a33fff 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -41,7 +41,7 @@ import { HotKeys } from 'react-hotkeys'; import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state'; import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'flavours/glitch/util/fullscreen'; import { autoUnfoldCW } from 'flavours/glitch/util/content_warning'; -import { textForScreenReader } from 'flavours/glitch/components/status'; +import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status'; const messages = defineMessages({ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, @@ -134,6 +134,9 @@ export default class Status extends ImmutablePureComponent { isExpanded: undefined, threadExpanded: undefined, statusId: undefined, + loadedStatusId: undefined, + showMedia: undefined, + revealBehindCW: undefined, }; componentDidMount () { @@ -152,17 +155,31 @@ export default class Status extends ImmutablePureComponent { } static getDerivedStateFromProps(props, state) { - if (state.statusId === props.params.statusId || !props.params.statusId) { - return null; + let update = {}; + let updated = false; + + if (props.params.statusId && state.statusId !== props.params.statusId) { + props.dispatch(fetchStatus(props.params.statusId)); + update.threadExpanded = undefined; + update.statusId = props.params.statusId; + updated = true; } - props.dispatch(fetchStatus(props.params.statusId)); + const revealBehindCW = props.settings.getIn(['media', 'reveal_behind_cw']); + if (revealBehindCW !== state.revealBehindCW) { + update.revealBehindCW = revealBehindCW; + if (revealBehindCW) update.showMedia = defaultMediaVisibility(props.status, props.settings); + updated = true; + } - return { - threadExpanded: undefined, - isExpanded: autoUnfoldCW(props.settings, props.status), - statusId: props.params.statusId, - }; + if (props.status && state.loadedStatusId !== props.status.get('id')) { + update.showMedia = defaultMediaVisibility(props.status, props.settings); + update.loadedStatusId = props.status.get('id'); + update.isExpanded = autoUnfoldCW(props.settings, props.status); + updated = true; + } + + return updated ? update : null; } handleExpandedToggle = () => { @@ -171,6 +188,10 @@ export default class Status extends ImmutablePureComponent { } }; + handleToggleMediaVisibility = () => { + this.setState({ showMedia: !this.state.showMedia }); + } + handleModalFavourite = (status) => { this.props.dispatch(favourite(status)); } @@ -304,6 +325,10 @@ export default class Status extends ImmutablePureComponent { this.props.dispatch(openModal('EMBED', { url: status.get('url') })); } + handleHotkeyToggleSensitive = () => { + this.handleToggleMediaVisibility(); + } + handleHotkeyMoveUp = () => { this.handleMoveUp(this.props.status.get('id')); } @@ -477,6 +502,7 @@ export default class Status extends ImmutablePureComponent { mention: this.handleHotkeyMention, openProfile: this.handleHotkeyOpenProfile, toggleSpoiler: this.handleExpandedToggle, + toggleSensitive: this.handleHotkeyToggleSensitive, }; return ( @@ -505,6 +531,8 @@ export default class Status extends ImmutablePureComponent { expanded={isExpanded} onToggleHidden={this.handleExpandedToggle} domain={domain} + showMedia={this.state.showMedia} + onToggleMediaVisibility={this.handleToggleMediaVisibility} /> <ActionBar diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 13c71337a..f8fff934d 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -101,6 +101,7 @@ const keyMap = { toggleSpoiler: 'x', bookmark: 'd', toggleCollapse: 'shift+x', + toggleSensitive: 'h', }; @connect(mapStateToProps) diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 2e0d59d47..b73ea0b07 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { fromJS } from 'immutable'; +import { fromJS, is } from 'immutable'; import { throttle } from 'lodash'; import classNames from 'classnames'; import { isFullscreen, requestFullscreen, exitFullscreen } from 'flavours/glitch/util/fullscreen'; @@ -94,7 +94,6 @@ 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, @@ -102,9 +101,11 @@ export default class Video extends React.PureComponent { fullwidth: PropTypes.bool, detailed: PropTypes.bool, inline: PropTypes.bool, - preventPlayback: PropTypes.bool, - intl: PropTypes.object.isRequired, cacheWidth: PropTypes.func, + intl: PropTypes.object.isRequired, + visible: PropTypes.bool, + onToggleVisibility: PropTypes.func, + preventPlayback: PropTypes.bool, blurhash: PropTypes.string, link: PropTypes.node, }; @@ -119,12 +120,12 @@ export default class Video extends React.PureComponent { fullscreen: false, hovered: false, muted: false, - revealed: this.props.revealed === undefined ? (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all') : this.props.revealed, + revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'), }; componentWillReceiveProps (nextProps) { - if (nextProps.revealed === true) { - this.setState({ revealed: true }); + if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) { + this.setState({ revealed: nextProps.visible }); } } @@ -305,9 +306,6 @@ export default class Video extends React.PureComponent { if (this.video && this.state.revealed && this.props.preventPlayback && !prevProps.preventPlayback) { this.video.pause(); } - } - - componentDidUpdate (prevProps) { if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) { this._decode(); } @@ -349,7 +347,11 @@ export default class Video extends React.PureComponent { this.video.pause(); } - this.setState({ revealed: !this.state.revealed }); + if (this.props.onToggleVisibility) { + this.props.onToggleVisibility(); + } else { + this.setState({ revealed: !this.state.revealed }); + } } handleLoadedData = () => { |