Merge remote-tracking branch 'origin/develop' into media-modal-tsx

app/soapbox/features/ui/components/focal_point_modal.js

@@ -1,125 +0,0 @@
-import classNames from 'clsx';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import { changeUploadCompose } from '../../../actions/compose';
-import { getPointerPosition } from '../../video';
-
-import ImageLoader from './image_loader';
-
-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,
-  };
-
-  componentDidMount() {
-    this.updatePositionFromMedia(this.props.media);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { media } = this.props;
-    if (prevProps.media.get('id') !== media.get('id')) {
-      this.updatePositionFromMedia(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>
-    );
-  }
-
-}

app/soapbox/features/ui/components/modal_root.js

@@ -15,7 +15,6 @@ import {
   ListAdder,
   MissingDescriptionModal,
   ActionsModal,
-  FocalPointModal,
   HotkeysModal,
   ComposeModal,
   ReplyMentionsModal,
@@ -51,7 +50,6 @@ const MODAL_COMPONENTS = {
   'ACTIONS': ActionsModal,
   'EMBED': EmbedModal,
   'LIST_EDITOR': ListEditor,
-  'FOCAL_POINT': FocalPointModal,
   'LIST_ADDER': ListAdder,
   'HOTKEYS': HotkeysModal,
   'COMPOSE': ComposeModal,

app/soapbox/features/ui/util/async-components.ts

@@ -146,10 +146,6 @@ export function ActionsModal() {
   return import(/* webpackChunkName: "features/ui" */'../components/actions_modal');
 }
 
-export function FocalPointModal() {
-  return import(/* webpackChunkName: "features/ui" */'../components/focal_point_modal');
-}
-
 export function HotkeysModal() {
   return import(/* webpackChunkName: "features/ui" */'../components/hotkeys_modal');
 }

app/styles/components/compose-form.scss

@@ -242,39 +242,3 @@
     @apply block shadow-md;
   }
 }
-
-.focal-point {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-
-  &.dragging {
-    cursor: move;
-  }
-
-  img {
-    max-width: 80vw;
-    max-height: 80vh;
-    width: auto;
-    height: auto;
-    margin: auto;
-  }
-
-  &__reticle {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    transform: translate(-50%, -50%);
-    background: url('../images/reticle.png') no-repeat 0 0;
-    border-radius: 50%;
-    box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
-  }
-
-  &__overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-}

app/styles/components/modal.scss

@@ -387,12 +387,6 @@
   }
 }
 
-.focal-point-modal {
-  max-width: 80vw;
-  max-height: 80vh;
-  position: relative;
-}
-
 .column-inline-form {
   padding: 7px 15px;
   padding-right: 5px;