From bec47e40f51b9f4688a85ff80df3aaca359a7f0b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 7 Nov 2016 18:42:39 +0100 Subject: [PATCH] Better look/behaviours for video player/lightbox --- .../components/components/lightbox.jsx | 23 +++++++++++++------ .../components/components/video_player.jsx | 22 ++++++++++++++++-- 2 files changed, 36 insertions(+), 9 deletions(-) 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 (
-
-
); }