Merge branch 'blackle-videolightbox'

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

@@ -3,15 +3,43 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 const ExtendedVideoPlayer = React.createClass({
 
   propTypes: {
-    src: React.PropTypes.string.isRequired
+    src: React.PropTypes.string.isRequired,
+    time: React.PropTypes.number,
+    controls: React.PropTypes.bool.isRequired,
+    muted: React.PropTypes.bool.isRequired
   },
 
   mixins: [PureRenderMixin],
 
+  handleLoadedData () {
+    if (this.props.time) {
+      this.video.currentTime = this.props.time;
+    }
+  },
+
+  componentDidMount () {
+    this.video.addEventListener('loadeddata', this.handleLoadedData);
+  },
+
+  componentWillUnmount () {
+    this.video.removeEventListener('loadeddata', this.handleLoadedData);
+  },
+
+  setRef (c) {
+    this.video = c;
+  },
+
   render () {
     return (
-      <div>
+      <div className='extended-video-player'>
-        <video src={this.props.src} autoPlay muted loop />
+        <video
+          ref={this.setRef}
+          src={this.props.src}
+          autoPlay
+          muted={this.props.muted}
+          controls={this.props.controls}
+          loop={!this.props.controls}
+        />
       </div>
     );
   },

app/assets/javascripts/components/components/icon_button.jsx

@@ -13,7 +13,8 @@ const IconButton = React.createClass({
     activeStyle: React.PropTypes.object,
     disabled: React.PropTypes.bool,
     inverted: React.PropTypes.bool,
-    animate: React.PropTypes.bool
+    animate: React.PropTypes.bool,
+    overlay: React.PropTypes.bool
   },
 
   getDefaultProps () {
@@ -21,7 +22,8 @@ const IconButton = React.createClass({
       size: 18,
       active: false,
       disabled: false,
-      animate: false
+      animate: false,
+      overlay: false
     };
   },
 
@@ -39,7 +41,7 @@ const IconButton = React.createClass({
     let style = {
       fontSize: `${this.props.size}px`,
       width: `${this.props.size * 1.28571429}px`,
-      height: `${this.props.size}px`,
+      height: `${this.props.size * 1.28571429}px`,
       lineHeight: `${this.props.size}px`,
       ...this.props.style
     };
@@ -48,13 +50,31 @@ const IconButton = React.createClass({
       style = { ...style, ...this.props.activeStyle };
     }
 
+    const classes = ['icon-button'];
+
+    if (this.props.active) {
+      classes.push('active');
+    }
+
+    if (this.props.disabled) {
+      classes.push('disabled');
+    }
+
+    if (this.props.inverted) {
+      classes.push('inverted');
+    }
+
+    if (this.props.overlay) {
+      classes.push('overlayed');
+    }
+
     return (
       <Motion defaultStyle={{ rotate: this.props.active ? -360 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
         {({ rotate }) =>
           <button
             aria-label={this.props.title}
             title={this.props.title}
-            className={`icon-button ${this.props.active ? 'active' : ''} ${this.props.disabled ? 'disabled' : ''} ${this.props.inverted ? 'inverted' : ''}`}
+            className={classes.join(' ')}
             onClick={this.handleClick}
             style={style}>
             <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />

app/assets/javascripts/components/components/media_gallery.jsx

@@ -39,8 +39,8 @@ const spoilerSubSpanStyle = {
 
 const spoilerButtonStyle = {
   position: 'absolute',
-  top: '6px',
+  top: '4px',
-  left: '8px',
+  left: '4px',
   zIndex: '100'
 };
 
@@ -232,8 +232,8 @@ const MediaGallery = React.createClass({
 
     return (
       <div style={{ ...outerStyle, height: `${this.props.height}px` }}>
-        <div style={spoilerButtonStyle}>
+        <div style={{ ...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block' }}>
-          <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleOpen} />
+          <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
         </div>
 
         {children}

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 = {
@@ -21,8 +22,8 @@ const videoStyle = {
 
 const muteStyle = {
   position: 'absolute',
-  top: '10px',
+  top: '4px',
-  right: '10px',
+  right: '4px',
   color: 'white',
   textShadow: "0px 1px 1px black, 1px 0px 1px black",
   opacity: '0.8',
@@ -54,8 +55,17 @@ const spoilerSubSpanStyle = {
 
 const spoilerButtonStyle = {
   position: 'absolute',
-  top: '6px',
+  top: '4px',
-  left: '8px',
+  left: '4px',
+  color: 'white',
+  textShadow: "0px 1px 1px black, 1px 0px 1px black",
+  zIndex: '100'
+};
+
+const expandButtonStyle = {
+  position: 'absolute',
+  bottom: '4px',
+  right: '4px',
   color: 'white',
   textShadow: "0px 1px 1px black, 1px 0px 1px black",
   zIndex: '100'
@@ -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,11 @@ const VideoPlayer = React.createClass({
     });
   },
 
+  handleExpand () {
+    this.video.pause();
+    this.props.onOpenVideo(this.props.media, this.video.currentTime);
+  },
+
   setRef (c) {
     this.video = c;
   },
@@ -154,8 +170,14 @@ const VideoPlayer = React.createClass({
     const { media, intl, width, height, sensitive, autoplay } = this.props;
 
     let spoilerButton = (
-      <div style={spoilerButtonStyle} >
+      <div style={{...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block'}} >
-        <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
+        <IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
+      </div>
+    );
+
+    let expandButton = (
+      <div style={expandButtonStyle} >
+        <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
       </div>
     );
 
@@ -164,7 +186,7 @@ const VideoPlayer = React.createClass({
     if (this.state.hasAudio) {
       muteButton = (
         <div style={muteStyle}>
-          <IconButton title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
+          <IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
         </div>
       );
     }
@@ -202,6 +224,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>
     );

app/assets/javascripts/components/containers/status_container.jsx

@@ -75,6 +75,10 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(openModal('MEDIA', { media, index }));
   },
 
+  onOpenVideo (media, time) {
+    dispatch(openModal('VIDEO', { media, time }));
+  },
+
   onBlock (account) {
     dispatch(blockAccount(account.get('id')));
   },

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

@@ -17,7 +17,8 @@ const DetailedStatus = React.createClass({
 
   propTypes: {
     status: ImmutablePropTypes.map.isRequired,
-    onOpenMedia: React.PropTypes.func.isRequired
+    onOpenMedia: React.PropTypes.func.isRequired,
+    onOpenVideo: React.PropTypes.func.isRequired,
   },
 
   mixins: [PureRenderMixin],
@@ -39,7 +40,7 @@ const DetailedStatus = React.createClass({
 
     if (status.get('media_attachments').size > 0) {
       if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={300} height={150} autoplay />;
+        media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={300} height={150} onOpenVideo={this.props.onOpenVideo} autoplay />;
       } else {
         media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />;
       }

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

@@ -112,6 +112,10 @@ const Status = React.createClass({
     this.props.dispatch(openModal('MEDIA', { media, index }));
   },
 
+  handleOpenVideo (media, time) {
+    this.props.dispatch(openModal('VIDEO', { media, time }));
+  },
+
   handleReport (status) {
     this.props.dispatch(initReport(status.get('account'), status));
   },
@@ -151,7 +155,7 @@ const Status = React.createClass({
           <div className='scrollable'>
             {ancestors}
 
-            <DetailedStatus status={status} me={me} onOpenMedia={this.handleOpenMedia} />
+            <DetailedStatus status={status} me={me} onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} />
             <ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} onMention={this.handleMentionClick} onReport={this.handleReport} />
 
             {descendants}

app/assets/javascripts/components/features/ui/components/media_modal.jsx

@@ -111,7 +111,7 @@ const MediaModal = React.createClass({
     if (attachment.get('type') === 'image') {
       content = <ImageLoader src={url} imgProps={{ style: { display: 'block' } }} />;
     } else if (attachment.get('type') === 'gifv') {
-      content = <ExtendedVideoPlayer src={url} />;
+      content = <ExtendedVideoPlayer src={url} muted={true} controls={false} />;
     }
 
     return (

app/assets/javascripts/components/features/ui/components/modal_root.jsx

@@ -1,10 +1,12 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import MediaModal from './media_modal';
+import VideoModal from './video_modal';
 import BoostModal from './boost_modal';
 import { TransitionMotion, spring } from 'react-motion';
 
 const MODAL_COMPONENTS = {
   'MEDIA': MediaModal,
+  'VIDEO': VideoModal,
   'BOOST': BoostModal
 };
 

app/assets/javascripts/components/features/ui/components/video_modal.jsx

@@ -0,0 +1,47 @@
+import LoadingIndicator from '../../../components/loading_indicator';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ExtendedVideoPlayer from '../../../components/extended_video_player';
+import { defineMessages, injectIntl } from 'react-intl';
+import IconButton from '../../../components/icon_button';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' }
+});
+
+const closeStyle = {
+  position: 'absolute',
+  zIndex: '100',
+  top: '4px',
+  right: '4px'
+};
+
+const VideoModal = React.createClass({
+
+  propTypes: {
+    media: ImmutablePropTypes.map.isRequired,
+    time: React.PropTypes.number,
+    onClose: React.PropTypes.func.isRequired,
+    intl: React.PropTypes.object.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    const { media, intl, time, onClose } = this.props;
+
+    const url = media.get('url');
+
+    return (
+      <div className='modal-root__modal media-modal'>
+        <div>
+          <div style={closeStyle}><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
+          <ExtendedVideoPlayer src={url} muted={false} controls={true} time={time} />
+        </div>
+      </div>
+    );
+  }
+
+});
+
+export default injectIntl(VideoModal);

app/assets/javascripts/components/locales/en.jsx

@@ -125,6 +125,7 @@ const en = {
   "upload_progress.label": "Uploading...",
   "video_player.toggle_sound": "Toggle sound",
   "video_player.toggle_visible": "Toggle visibility",
+  "video_player.expand": "Expand video",
 };
 
 export default en;

app/assets/stylesheets/components.scss

@@ -112,6 +112,18 @@
       color: $color3;
     }
   }
+
+  &.overlayed {
+    box-sizing: content-box;
+    background: rgba($color8, 0.6);
+    color: rgba($color5, 0.7);
+    border-radius: 4px;
+    padding: 2px;
+
+    &:hover {
+      background: rgba($color8, 0.9);
+    }
+  }
 }
 
 .text-icon-button {