Better look/behaviours for video player/lightbox

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 619cc0928..fe9b7984a 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 }) =>
-  <div className='lightbox' style={{ ...overlayStyle, display: isVisible ? 'flex' : 'none' }} onClick={onOverlayClicked}>
-    <div style={dialogStyle}>
-      <IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} />
-      {children}
+const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) => {
+  if (!isVisible) {
+    return <div />;
+  }
+
+  return (
+    <div className='lightbox' style={overlayStyle} onClick={onOverlayClicked}>
+      <div style={dialogStyle}>
+        <IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} />
+        {children}
+      </div>
     </div>
-  </div>
+  );
+};
 
 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 9fab6d7c1..fcf966d83 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 (
       <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${this.props.width}px`, height: `${this.props.height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>
-        <div style={{ position: 'absolute', top: '10px', left: '10px', opacity: '0.8' }}><IconButton title='Toggle sound' icon={this.state.muted ? 'volume-up' : 'volume-off'} onClick={this.handleClick} /></div>
-        <video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={this.state.muted} style={{ width: '100%', height: '100%' }} />
+        <div style={muteStyle}><IconButton title='Toggle sound' icon={this.state.muted ? 'volume-up' : 'volume-off'} onClick={this.handleClick} /></div>
+        <video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={this.state.muted} style={videoStyle} />
       </div>
     );
   }