mastofe

focal_point_modal.js (3408B)

import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import ImageLoader from './image_loader';
import classNames from 'classnames';
import { changeUploadCompose } from '../../../actions/compose';
import { getPointerPosition } from '../../video';
const mapStateToProps = (state, { id }) => ({
  media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
});
const mapDispatchToProps = (dispatch, { id }) => ({
  onSave: (x, y) => {
    dispatch(changeUploadCompose(id, { focus: `${x.toFixed(2)},${y.toFixed(2)}` }));
  },
});
@connect(mapStateToProps, mapDispatchToProps)
export default class FocalPointModal extends ImmutablePureComponent {
  static propTypes = {
    media: ImmutablePropTypes.map.isRequired,
  };
  state = {
    x: 0,
    y: 0,
    focusX: 0,
    focusY: 0,
    dragging: false,
  };
  componentWillMount () {
    this.updatePositionFromMedia(this.props.media);
  }
  componentWillReceiveProps (nextProps) {
    if (this.props.media.get('id') !== nextProps.media.get('id')) {
      this.updatePositionFromMedia(nextProps.media);
    }
  }
  componentWillUnmount () {
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('mouseup', this.handleMouseUp);
  }
  handleMouseDown = e => {
    document.addEventListener('mousemove', this.handleMouseMove);
    document.addEventListener('mouseup', this.handleMouseUp);
    this.updatePosition(e);
    this.setState({ dragging: true });
  }
  handleMouseMove = e => {
    this.updatePosition(e);
  }
  handleMouseUp = () => {
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('mouseup', this.handleMouseUp);
    this.setState({ dragging: false });
    this.props.onSave(this.state.focusX, this.state.focusY);
  }
  updatePosition = e => {
    const { x, y } = getPointerPosition(this.node, e);
    const focusX   = (x - .5) *  2;
    const focusY   = (y - .5) * -2;
    this.setState({ x, y, focusX, focusY });
  }
  updatePositionFromMedia = media => {
    const focusX = media.getIn(['meta', 'focus', 'x']);
    const focusY = media.getIn(['meta', 'focus', 'y']);
    if (focusX && focusY) {
      const x = (focusX /  2) + .5;
      const y = (focusY / -2) + .5;
      this.setState({ x, y, focusX, focusY });
    } else {
      this.setState({ x: 0.5, y: 0.5, focusX: 0, focusY: 0 });
    }
  }
  setRef = c => {
    this.node = c;
  }
  render () {
    const { media } = this.props;
    const { x, y, dragging } = this.state;
    const width  = media.getIn(['meta', 'original', 'width']) || null;
    const height = media.getIn(['meta', 'original', 'height']) || null;
    return (
      <div className='modal-root__modal video-modal focal-point-modal'>
        <div className={classNames('focal-point', { dragging })} ref={this.setRef}>
          <ImageLoader
            previewSrc={media.get('preview_url')}
            src={media.get('url')}
            width={width}
            height={height}
          />
          <div className='focal-point__reticle' style={{ top: `${y * 100}%`, left: `${x * 100}%` }} />
          <div className='focal-point__overlay' onMouseDown={this.handleMouseDown} />
        </div>
      </div>
    );
  }
}