diff --git a/app/assets/javascripts/components/components/media_gallery.jsx b/app/assets/javascripts/components/components/media_gallery.jsx index 73adb0de9..7e92abe2d 100644 --- a/app/assets/javascripts/components/components/media_gallery.jsx +++ b/app/assets/javascripts/components/components/media_gallery.jsx @@ -49,7 +49,7 @@ const MediaGallery = React.createClass({ getInitialState () { return { - visible: false + visible: !this.props.sensitive }; }, @@ -80,13 +80,22 @@ const MediaGallery = React.createClass({ let children; - if (sensitive && !this.state.visible) { - children = ( -
- - -
- ); + if (!this.state.visible) { + if (sensitive) { + children = ( +
+ + +
+ ); + } else { + children = ( +
+ + +
+ ); + } } else { const size = media.take(4).size; @@ -147,20 +156,12 @@ const MediaGallery = React.createClass({ ); }); } - - let spoilerButton; - - if (sensitive) { - spoilerButton = ( -
- -
- ); - } return (
- {spoilerButton} +
+ +
{children}
); diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx index bd6e746ef..3edc8f672 100644 --- a/app/assets/javascripts/components/components/video_player.jsx +++ b/app/assets/javascripts/components/components/video_player.jsx @@ -4,7 +4,8 @@ import IconButton from './icon_button'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; const messages = defineMessages({ - toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' } + toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' }, + toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' } }); const videoStyle = { @@ -20,7 +21,7 @@ const videoStyle = { const muteStyle = { position: 'absolute', top: '10px', - left: '10px', + right: '10px', opacity: '0.8', zIndex: '5' }; @@ -35,7 +36,8 @@ const spoilerStyle = { display: 'flex', alignItems: 'center', justifyContent: 'center', - flexDirection: 'column' + flexDirection: 'column', + position: 'relative' }; const spoilerSpanStyle = { @@ -49,6 +51,13 @@ const spoilerSubSpanStyle = { fontWeight: '500' }; +const spoilerButtonStyle = { + position: 'absolute', + top: '6px', + left: '8px', + zIndex: '100' +}; + const VideoPlayer = React.createClass({ propTypes: { media: ImmutablePropTypes.map.isRequired, @@ -66,7 +75,8 @@ const VideoPlayer = React.createClass({ getInitialState () { return { - visible: false, + visible: !this.props.sensitive, + preview: true, muted: true }; }, @@ -90,22 +100,49 @@ const VideoPlayer = React.createClass({ }, handleOpen () { - this.setState({ visible: true }); + this.setState({ preview: !this.state.preview }); + }, + + handleVisibility () { + this.setState({ + visible: !this.state.visible, + preview: true + }); }, render () { const { media, intl, width, height, sensitive } = this.props; - if (sensitive && !this.state.visible) { - return ( -
- - -
- ); - } else if (!sensitive && !this.state.visible) { + let spoilerButton = ( +
+ +
+ ); + + if (!this.state.visible) { + if (sensitive) { + return ( +
+ {spoilerButton} + + +
+ ); + } else { + return ( +
+ {spoilerButton} + + +
+ ); + } + } + + if (this.state.preview) { return (
+ {spoilerButton}
); @@ -113,6 +150,7 @@ const VideoPlayer = React.createClass({ return (
+ {spoilerButton}