diff --git a/app/assets/javascripts/components/components/lightbox.jsx b/app/assets/javascripts/components/components/lightbox.jsx index 619cc0928d..fe9b7984ae 100644 --- a/app/assets/javascripts/components/components/lightbox.jsx +++ b/app/assets/javascripts/components/components/lightbox.jsx @@ -8,7 +8,9 @@ const overlayStyle = { height: '100%', justifyContent: 'center', alignContent: 'center', - background: 'rgba(0, 0, 0, 0.5)' + background: 'rgba(0, 0, 0, 0.5)', + display: 'flex', + zIndex: '9999' }; const dialogStyle = { @@ -27,13 +29,20 @@ const closeStyle = { right: '4px' }; -const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) => -
-
- - {children} +const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) => { + if (!isVisible) { + return
; + } + + return ( +
+
+ + {children} +
-
+ ); +}; Lightbox.propTypes = { isVisible: React.PropTypes.bool, diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx index 9fab6d7c10..fcf966d839 100644 --- a/app/assets/javascripts/components/components/video_player.jsx +++ b/app/assets/javascripts/components/components/video_player.jsx @@ -2,6 +2,24 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from './icon_button'; +const videoStyle = { + position: 'relative', + zIndex: '1', + width: '100%', + height: '100%', + objectFit: 'cover', + top: '50%', + transform: 'translateY(-50%)' +}; + +const muteStyle = { + position: 'absolute', + top: '10px', + left: '10px', + opacity: '0.8', + zIndex: '5' +}; + const VideoPlayer = React.createClass({ propTypes: { media: ImmutablePropTypes.map.isRequired, @@ -31,8 +49,8 @@ const VideoPlayer = React.createClass({ render () { return (
-
-
); }