cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Better look/behaviours for video player/lightbox

This commit is contained in:
Eugen Rochko 2016-11-07 18:42:39 +01:00
parent d0d799f911
commit bec47e40f5
2 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/javascripts/components/components/lightbox.jsx
View File

@ -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,

22
app/assets/javascripts/components/components/video_player.jsx
View File

@ -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>
); );
} }