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)}` })); }, }); export default @connect(mapStateToProps, mapDispatchToProps) 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> ); } }