From 00cc3066a2781f1cc21b23677e797c7bfa9a2f6b Mon Sep 17 00:00:00 2001
From: blackle <isabelle@blackle-mori.com>
Date: Thu, 13 Apr 2017 09:04:18 -0400
Subject: Allow video to be expanded into lightbox

---
 .../features/status/components/detailed_status.jsx |  5 ++-
 .../components/features/status/index.jsx           |  6 ++-
 .../features/ui/components/media_modal.jsx         |  2 +-
 .../features/ui/components/modal_root.jsx          |  2 +
 .../features/ui/components/video_modal.jsx         | 46 ++++++++++++++++++++++
 5 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/javascripts/components/features/ui/components/video_modal.jsx

(limited to 'app/assets/javascripts/components/features')

diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
index 2da57252e..ceafc1a32 100644
--- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx
+++ b/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} />;
       }
diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
index 48fea658d..b30d991e4 100644
--- a/app/assets/javascripts/components/features/status/index.jsx
+++ b/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) {
+    this.props.dispatch(openModal('VIDEO', { media }));
+  },
+
   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}
diff --git a/app/assets/javascripts/components/features/ui/components/media_modal.jsx b/app/assets/javascripts/components/features/ui/components/media_modal.jsx
index 35eb2cb0c..130f48b46 100644
--- a/app/assets/javascripts/components/features/ui/components/media_modal.jsx
+++ b/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 (
diff --git a/app/assets/javascripts/components/features/ui/components/modal_root.jsx b/app/assets/javascripts/components/features/ui/components/modal_root.jsx
index e7ac02dde..74eb50039 100644
--- a/app/assets/javascripts/components/features/ui/components/modal_root.jsx
+++ b/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
 };
 
diff --git a/app/assets/javascripts/components/features/ui/components/video_modal.jsx b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
new file mode 100644
index 000000000..fa222d7aa
--- /dev/null
+++ b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
@@ -0,0 +1,46 @@
+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,
+    onClose: React.PropTypes.func.isRequired,
+    intl: React.PropTypes.object.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    const { media, intl, onClose } = this.props;
+
+    const url = media.get('url');
+
+    return (
+      <div className='modal-root__modal media-modal'>
+        <div>
+          <IconButton title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} style={closeStyle} />
+          <ExtendedVideoPlayer src={url} muted={false} controls={true} />
+        </div>
+      </div>
+    );
+  }
+
+});
+
+export default injectIntl(VideoModal);
-- 
cgit 


From 5f8155482ab494e9b509f61baad7e3d5303176f1 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 13 Apr 2017 17:01:09 +0200
Subject: Add overlay style to buttons, continue video after expanding it

---
 .../components/extended_video_player.jsx           | 30 ++++++++++++++++++++--
 .../components/components/icon_button.jsx          | 28 +++++++++++++++++---
 .../components/components/media_gallery.jsx        |  8 +++---
 .../components/components/video_player.jsx         | 26 +++++++++----------
 .../components/containers/status_container.jsx     |  4 +--
 .../components/features/status/index.jsx           |  4 +--
 .../features/ui/components/video_modal.jsx         |  7 ++---
 app/assets/stylesheets/components.scss             | 12 +++++++++
 8 files changed, 88 insertions(+), 31 deletions(-)

(limited to 'app/assets/javascripts/components/features')

diff --git a/app/assets/javascripts/components/components/extended_video_player.jsx b/app/assets/javascripts/components/components/extended_video_player.jsx
index 603f005f9..a64515583 100644
--- a/app/assets/javascripts/components/components/extended_video_player.jsx
+++ b/app/assets/javascripts/components/components/extended_video_player.jsx
@@ -4,16 +4,42 @@ const ExtendedVideoPlayer = React.createClass({
 
   propTypes: {
     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>
-        <video src={this.props.src} autoPlay muted={this.props.muted} controls={this.props.controls} loop />
+      <div className='extended-video-player'>
+        <video
+          ref={this.setRef}
+          src={this.props.src}
+          autoPlay
+          muted={this.props.muted}
+          controls={this.props.controls}
+          loop={!this.props.controls}
+        />
       </div>
     );
   },
diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx
index 33835f9a0..0c683db5d 100644
--- a/app/assets/javascripts/components/components/icon_button.jsx
+++ b/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' />
diff --git a/app/assets/javascripts/components/components/media_gallery.jsx b/app/assets/javascripts/components/components/media_gallery.jsx
index 72b5e977f..10b7d525b 100644
--- a/app/assets/javascripts/components/components/media_gallery.jsx
+++ b/app/assets/javascripts/components/components/media_gallery.jsx
@@ -39,8 +39,8 @@ const spoilerSubSpanStyle = {
 
 const spoilerButtonStyle = {
   position: 'absolute',
-  top: '6px',
-  left: '8px',
+  top: '4px',
+  left: '4px',
   zIndex: '100'
 };
 
@@ -232,8 +232,8 @@ const MediaGallery = React.createClass({
 
     return (
       <div style={{ ...outerStyle, height: `${this.props.height}px` }}>
-        <div style={spoilerButtonStyle}>
-          <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleOpen} />
+        <div style={{ ...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block' }}>
+          <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
         </div>
 
         {children}
diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx
index f019664cf..dce276c75 100644
--- a/app/assets/javascripts/components/components/video_player.jsx
+++ b/app/assets/javascripts/components/components/video_player.jsx
@@ -22,8 +22,8 @@ const videoStyle = {
 
 const muteStyle = {
   position: 'absolute',
-  top: '10px',
-  right: '10px',
+  top: '4px',
+  right: '4px',
   color: 'white',
   textShadow: "0px 1px 1px black, 1px 0px 1px black",
   opacity: '0.8',
@@ -55,8 +55,8 @@ const spoilerSubSpanStyle = {
 
 const spoilerButtonStyle = {
   position: 'absolute',
-  top: '6px',
-  left: '8px',
+  top: '4px',
+  left: '4px',
   color: 'white',
   textShadow: "0px 1px 1px black, 1px 0px 1px black",
   zIndex: '100'
@@ -64,8 +64,8 @@ const spoilerButtonStyle = {
 
 const expandButtonStyle = {
   position: 'absolute',
-  bottom: '6px',
-  right: '8px',
+  bottom: '4px',
+  right: '4px',
   color: 'white',
   textShadow: "0px 1px 1px black, 1px 0px 1px black",
   zIndex: '100'
@@ -128,10 +128,8 @@ const VideoPlayer = React.createClass({
   },
 
   handleExpand () {
-    const node = ReactDOM.findDOMNode(this).querySelector('video');
-    node.pause();
-
-    this.props.onOpenVideo(this.props.media);
+    this.video.pause();
+    this.props.onOpenVideo(this.props.media, this.video.currentTime);
   },
 
   setRef (c) {
@@ -172,14 +170,14 @@ const VideoPlayer = React.createClass({
     const { media, intl, width, height, sensitive, autoplay } = this.props;
 
     let spoilerButton = (
-      <div style={spoilerButtonStyle} >
-        <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
+      <div style={{...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block'}} >
+        <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 title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
+        <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
       </div>
     );
 
@@ -188,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>
       );
     }
diff --git a/app/assets/javascripts/components/containers/status_container.jsx b/app/assets/javascripts/components/containers/status_container.jsx
index d68acd96a..f704ac722 100644
--- a/app/assets/javascripts/components/containers/status_container.jsx
+++ b/app/assets/javascripts/components/containers/status_container.jsx
@@ -75,8 +75,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(openModal('MEDIA', { media, index }));
   },
 
-  onOpenVideo (media) {
-    dispatch(openModal('VIDEO', { media }));
+  onOpenVideo (media, time) {
+    dispatch(openModal('VIDEO', { media, time }));
   },
 
   onBlock (account) {
diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
index b30d991e4..7ead68807 100644
--- a/app/assets/javascripts/components/features/status/index.jsx
+++ b/app/assets/javascripts/components/features/status/index.jsx
@@ -112,8 +112,8 @@ const Status = React.createClass({
     this.props.dispatch(openModal('MEDIA', { media, index }));
   },
 
-  handleOpenVideo (media) {
-    this.props.dispatch(openModal('VIDEO', { media }));
+  handleOpenVideo (media, time) {
+    this.props.dispatch(openModal('VIDEO', { media, time }));
   },
 
   handleReport (status) {
diff --git a/app/assets/javascripts/components/features/ui/components/video_modal.jsx b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
index fa222d7aa..1c3519bd3 100644
--- a/app/assets/javascripts/components/features/ui/components/video_modal.jsx
+++ b/app/assets/javascripts/components/features/ui/components/video_modal.jsx
@@ -20,6 +20,7 @@ const VideoModal = React.createClass({
 
   propTypes: {
     media: ImmutablePropTypes.map.isRequired,
+    time: React.PropTypes.number,
     onClose: React.PropTypes.func.isRequired,
     intl: React.PropTypes.object.isRequired
   },
@@ -27,15 +28,15 @@ const VideoModal = React.createClass({
   mixins: [PureRenderMixin],
 
   render () {
-    const { media, intl, onClose } = this.props;
+    const { media, intl, time, onClose } = this.props;
 
     const url = media.get('url');
 
     return (
       <div className='modal-root__modal media-modal'>
         <div>
-          <IconButton title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} style={closeStyle} />
-          <ExtendedVideoPlayer src={url} muted={false} controls={true} />
+          <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>
     );
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index b135d27c9..1c363ec15 100644
--- a/app/assets/stylesheets/components.scss
+++ b/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 {
-- 
cgit