Better look/behaviours for video player/lightbox
This commit is contained in:
parent
d0d799f911
commit
bec47e40f5
|
@ -8,7 +8,9 @@ const overlayStyle = {
|
||||||
height: '100%',
|
height: '100%',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignContent: 'center',
|
alignContent: 'center',
|
||||||
background: 'rgba(0, 0, 0, 0.5)'
|
background: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
display: 'flex',
|
||||||
|
zIndex: '9999'
|
||||||
};
|
};
|
||||||
|
|
||||||
const dialogStyle = {
|
const dialogStyle = {
|
||||||
|
@ -27,13 +29,20 @@ const closeStyle = {
|
||||||
right: '4px'
|
right: '4px'
|
||||||
};
|
};
|
||||||
|
|
||||||
const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) =>
|
const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) => {
|
||||||
<div className='lightbox' style={{ ...overlayStyle, display: isVisible ? 'flex' : 'none' }} onClick={onOverlayClicked}>
|
if (!isVisible) {
|
||||||
<div style={dialogStyle}>
|
return <div />;
|
||||||
<IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} />
|
}
|
||||||
{children}
|
|
||||||
|
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>
|
||||||
</div>
|
);
|
||||||
|
};
|
||||||
|
|
||||||
Lightbox.propTypes = {
|
Lightbox.propTypes = {
|
||||||
isVisible: React.PropTypes.bool,
|
isVisible: React.PropTypes.bool,
|
||||||
|
|
|
@ -2,6 +2,24 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import IconButton from './icon_button';
|
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({
|
const VideoPlayer = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
media: ImmutablePropTypes.map.isRequired,
|
media: ImmutablePropTypes.map.isRequired,
|
||||||
|
@ -31,8 +49,8 @@ const VideoPlayer = React.createClass({
|
||||||
render () {
|
render () {
|
||||||
return (
|
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={{ 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>
|
<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={{ width: '100%', height: '100%' }} />
|
<video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={this.state.muted} style={videoStyle} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue