diff options
Diffstat (limited to 'app/assets/javascripts/components/components/video_player.jsx')
-rw-r--r-- | app/assets/javascripts/components/components/video_player.jsx | 29 |
1 files changed, 27 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx index ab21ca9cd..f019664cf 100644 --- a/app/assets/javascripts/components/components/video_player.jsx +++ b/app/assets/javascripts/components/components/video_player.jsx @@ -6,7 +6,8 @@ import { isIOS } from '../is_mobile'; const messages = defineMessages({ toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' }, - toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' } + toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' }, + expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' } }); const videoStyle = { @@ -61,6 +62,15 @@ const spoilerButtonStyle = { zIndex: '100' }; +const expandButtonStyle = { + position: 'absolute', + bottom: '6px', + right: '8px', + color: 'white', + textShadow: "0px 1px 1px black, 1px 0px 1px black", + zIndex: '100' +}; + const VideoPlayer = React.createClass({ propTypes: { media: ImmutablePropTypes.map.isRequired, @@ -68,7 +78,8 @@ const VideoPlayer = React.createClass({ height: React.PropTypes.number, sensitive: React.PropTypes.bool, intl: React.PropTypes.object.isRequired, - autoplay: React.PropTypes.bool + autoplay: React.PropTypes.bool, + onOpenVideo: React.PropTypes.func.isRequired }, getDefaultProps () { @@ -116,6 +127,13 @@ const VideoPlayer = React.createClass({ }); }, + handleExpand () { + const node = ReactDOM.findDOMNode(this).querySelector('video'); + node.pause(); + + this.props.onOpenVideo(this.props.media); + }, + setRef (c) { this.video = c; }, @@ -159,6 +177,12 @@ const VideoPlayer = React.createClass({ </div> ); + let expandButton = ( + <div style={expandButtonStyle} > + <IconButton title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} /> + </div> + ); + let muteButton = ''; if (this.state.hasAudio) { @@ -202,6 +226,7 @@ const VideoPlayer = React.createClass({ <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}> {spoilerButton} {muteButton} + {expandButton} <video ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} /> </div> ); |