diff options
| -rw-r--r-- | app/assets/javascripts/components/components/video_player.jsx | 14 |
1 files changed, 13 insertions, 1 deletions
diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx index fcf966d83..209db33a7 100644 --- a/app/assets/javascripts/components/components/video_player.jsx +++ b/app/assets/javascripts/components/components/video_player.jsx @@ -46,11 +46,23 @@ const VideoPlayer = React.createClass({ this.setState({ muted: !this.state.muted }); }, + handleVideoClick (e) { + e.stopPropagation(); + + const node = ReactDOM.findDOMNode(this).querySelector('video'); + + if (node.paused) { + node.play(); + } else { + node.pause(); + } + }, + 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={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} /> + <video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} /> </div> ); } |