Allow video to be expanded into lightbox

app/assets/javascripts/components/components/extended_video_player.jsx

@@ -3,7 +3,9 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 const ExtendedVideoPlayer = React.createClass({
 
   propTypes: {
-    src: React.PropTypes.string.isRequired
+    src: React.PropTypes.string.isRequired,
+    controls: React.PropTypes.bool.isRequired,
+    muted: React.PropTypes.bool.isRequired
   },
 
   mixins: [PureRenderMixin],
@@ -11,7 +13,7 @@ const ExtendedVideoPlayer = React.createClass({
   render () {
     return (
       <div>
-        <video src={this.props.src} autoPlay muted loop />
+        <video src={this.props.src} autoPlay muted={this.props.muted} controls={this.props.controls} loop />
       </div>
     );
   },

app/assets/javascripts/components/components/status.jsx

@@ -25,6 +25,7 @@ const Status = React.createClass({
     onReblog: React.PropTypes.func,
     onDelete: React.PropTypes.func,
     onOpenMedia: React.PropTypes.func,
+    onOpenVideo: React.PropTypes.func,
     onBlock: React.PropTypes.func,
     me: React.PropTypes.number,
     boostModal: React.PropTypes.bool,
@@ -76,7 +77,7 @@ const Status = React.createClass({
 
     if (status.get('media_attachments').size > 0 && !this.props.muted) {
       if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} />;
+        media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />;
       } else {
         media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} />;
       }

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