Better look/behaviours for video player/lightbox
This commit is contained in:
parent
d0d799f911
commit
bec47e40f5
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Reference in a new issue