Add overlay style to buttons, continue video after expanding it

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>
+      <div className='extended-video-player'>
-        <video src={this.props.src} autoPlay muted={this.props.muted} controls={this.props.controls} 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/video_player.jsx

@@ -22,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',
@@ -55,8 +55,8 @@ 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'
@@ -64,8 +64,8 @@ const spoilerButtonStyle = {
 
 const expandButtonStyle = {
   position: 'absolute',
-  bottom: '6px',
+  bottom: '4px',
-  right: '8px',
+  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');
+    this.video.pause();
-    node.pause();
+    this.props.onOpenVideo(this.props.media, this.video.currentTime);
-
-    this.props.onOpenVideo(this.props.media);
   },
 
   setRef (c) {
@@ -172,14 +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 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>
       );
     }

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

@@ -75,8 +75,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(openModal('MEDIA', { media, index }));
   },
 
-  onOpenVideo (media) {
+  onOpenVideo (media, time) {
-    dispatch(openModal('VIDEO', { media }));
+    dispatch(openModal('VIDEO', { media, time }));
   },
 
   onBlock (account) {

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) {
+  handleOpenVideo (media, time) {
-    this.props.dispatch(openModal('VIDEO', { media }));
+    this.props.dispatch(openModal('VIDEO', { media, time }));
   },
 
   handleReport (status) {

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} />
+          <div style={closeStyle}><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
-          <ExtendedVideoPlayer src={url} muted={false} controls={true} />
+          <ExtendedVideoPlayer src={url} muted={false} controls={true} time={time} />
         </div>
       </div>
     );

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 {