Add ability to reorder uploaded media before posting in web UI (#28456)

app/javascript/mastodon/actions/compose.js

@@ -75,6 +75,7 @@ export const INIT_MEDIA_EDIT_MODAL = 'INIT_MEDIA_EDIT_MODAL';
 
 export const COMPOSE_CHANGE_MEDIA_DESCRIPTION = 'COMPOSE_CHANGE_MEDIA_DESCRIPTION';
 export const COMPOSE_CHANGE_MEDIA_FOCUS       = 'COMPOSE_CHANGE_MEDIA_FOCUS';
+export const COMPOSE_CHANGE_MEDIA_ORDER       = 'COMPOSE_CHANGE_MEDIA_ORDER';
 
 export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS';
 export const COMPOSE_FOCUS = 'COMPOSE_FOCUS';
@@ -809,3 +810,9 @@ export function changePollSettings(expiresIn, isMultiple) {
     isMultiple,
   };
 }
+
+export const changeMediaOrder = (a, b) => ({
+  type: COMPOSE_CHANGE_MEDIA_ORDER,
+  a,
+  b,
+});

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -21,7 +21,6 @@ import PollButtonContainer from '../containers/poll_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
-import UploadFormContainer from '../containers/upload_form_container';
 import WarningContainer from '../containers/warning_container';
 import { countableText } from '../util/counter';
 
@@ -30,6 +29,7 @@ import { EditIndicator } from './edit_indicator';
 import { NavigationBar } from './navigation_bar';
 import { PollForm } from "./poll_form";
 import { ReplyIndicator } from './reply_indicator';
+import { UploadForm } from './upload_form';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -283,7 +283,7 @@ class ComposeForm extends ImmutablePureComponent {
             />
           </div>
 
-          <UploadFormContainer />
+          <UploadForm />
           <PollForm />
 
           <div className='compose-form__footer'>

app/javascript/mastodon/features/compose/components/upload.jsx

@@ -1,77 +1,81 @@
 import PropTypes from 'prop-types';
+import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useDispatch, useSelector } from 'react-redux';
 
 import spring from 'react-motion/lib/spring';
 
 import CloseIcon from '@/material-icons/400-20px/close.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+import { undoUploadCompose, initMediaEditModal } from 'mastodon/actions/compose';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';
+import Motion from 'mastodon/features/ui/util/optional_motion';
 
-import Motion from '../../ui/util/optional_motion';
+export const Upload = ({ id, onDragStart, onDragEnter, onDragEnd }) => {
+  const dispatch = useDispatch();
+  const media = useSelector(state => state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id));
+  const sensitive = useSelector(state => state.getIn(['compose', 'spoiler']));
 
-export default class Upload extends ImmutablePureComponent {
+  const handleUndoClick = useCallback(() => {
+    dispatch(undoUploadCompose(id));
+  }, [dispatch, id]);
 
-  static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-    sensitive: PropTypes.bool,
-    onUndo: PropTypes.func.isRequired,
-    onOpenFocalPoint: PropTypes.func.isRequired,
-  };
+  const handleFocalPointClick = useCallback(() => {
+    dispatch(initMediaEditModal(id));
+  }, [dispatch, id]);
 
-  handleUndoClick = e => {
-    e.stopPropagation();
-    this.props.onUndo(this.props.media.get('id'));
-  };
+  const handleDragStart = useCallback(() => {
+    onDragStart(id);
+  }, [onDragStart, id]);
 
-  handleFocalPointClick = e => {
-    e.stopPropagation();
-    this.props.onOpenFocalPoint(this.props.media.get('id'));
-  };
+  const handleDragEnter = useCallback(() => {
+    onDragEnter(id);
+  }, [onDragEnter, id]);
 
-  render () {
-    const { media, sensitive } = this.props;
-
-    if (!media) {
-      return null;
-    }
-
-    const focusX = media.getIn(['meta', 'focus', 'x']);
-    const focusY = media.getIn(['meta', 'focus', 'y']);
-    const x = ((focusX /  2) + .5) * 100;
-    const y = ((focusY / -2) + .5) * 100;
-    const missingDescription = (media.get('description') || '').length === 0;
-
-    return (
-      <div className='compose-form__upload'>
-        <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
-          {({ scale }) => (
-            <div className='compose-form__upload__thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: !sensitive ? `url(${media.get('preview_url')})` : null, backgroundPosition: `${x}% ${y}%` }}>
-              {sensitive && <Blurhash
-                hash={media.get('blurhash')}
-                className='compose-form__upload__preview'
-              />}
-
-              <div className='compose-form__upload__actions'>
-                <button type='button' className='icon-button compose-form__upload__delete' onClick={this.handleUndoClick}><Icon icon={CloseIcon} /></button>
-                <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
-              </div>
-
-              <div className='compose-form__upload__warning'>
-                <button type='button' className={classNames('icon-button', { active: missingDescription })} onClick={this.handleFocalPointClick}>{missingDescription && <Icon icon={WarningIcon} />} ALT</button>
-              </div>
-            </div>
-          )}
-        </Motion>
-      </div>
-    );
+  if (!media) {
+    return null;
   }
 
-}
+  const focusX = media.getIn(['meta', 'focus', 'x']);
+  const focusY = media.getIn(['meta', 'focus', 'y']);
+  const x = ((focusX /  2) + .5) * 100;
+  const y = ((focusY / -2) + .5) * 100;
+  const missingDescription = (media.get('description') || '').length === 0;
+
+  return (
+    <div className='compose-form__upload' draggable onDragStart={handleDragStart} onDragEnter={handleDragEnter} onDragEnd={onDragEnd}>
+      <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
+        {({ scale }) => (
+          <div className='compose-form__upload__thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: !sensitive ? `url(${media.get('preview_url')})` : null, backgroundPosition: `${x}% ${y}%` }}>
+            {sensitive && <Blurhash
+              hash={media.get('blurhash')}
+              className='compose-form__upload__preview'
+            />}
+
+            <div className='compose-form__upload__actions'>
+              <button type='button' className='icon-button compose-form__upload__delete' onClick={handleUndoClick}><Icon icon={CloseIcon} /></button>
+              <button type='button' className='icon-button' onClick={handleFocalPointClick}><Icon icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
+            </div>
+
+            <div className='compose-form__upload__warning'>
+              <button type='button' className={classNames('icon-button', { active: missingDescription })} onClick={handleFocalPointClick}>{missingDescription && <Icon icon={WarningIcon} />} ALT</button>
+            </div>
+          </div>
+        )}
+      </Motion>
+    </div>
+  );
+};
+
+Upload.propTypes = {
+  id: PropTypes.string,
+  onDragEnter: PropTypes.func,
+  onDragStart: PropTypes.func,
+  onDragEnd: PropTypes.func,
+};

app/javascript/mastodon/features/compose/components/upload_form.jsx

@@ -1,31 +1,53 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useRef, useCallback } from 'react';
 
-import UploadContainer from '../containers/upload_container';
-import UploadProgressContainer from '../containers/upload_progress_container';
+import { useSelector, useDispatch } from 'react-redux';
 
-export default class UploadForm extends ImmutablePureComponent {
+import { changeMediaOrder } from 'mastodon/actions/compose';
 
-  static propTypes = {
-    mediaIds: ImmutablePropTypes.list.isRequired,
-  };
+import { Upload } from './upload';
+import { UploadProgress } from './upload_progress';
 
-  render () {
-    const { mediaIds } = this.props;
+export const UploadForm = () => {
+  const dispatch = useDispatch();
+  const mediaIds = useSelector(state => state.getIn(['compose', 'media_attachments']).map(item => item.get('id')));
+  const active = useSelector(state => state.getIn(['compose', 'is_uploading']));
+  const progress = useSelector(state => state.getIn(['compose', 'progress']));
+  const isProcessing = useSelector(state => state.getIn(['compose', 'is_processing']));
 
-    return (
-      <>
-        <UploadProgressContainer />
+  const dragItem = useRef();
+  const dragOverItem = useRef();
 
-        {mediaIds.size > 0 && (
-          <div className='compose-form__uploads'>
-            {mediaIds.map(id => (
-              <UploadContainer id={id} key={id} />
-            ))}
-          </div>
-        )}
-      </>
-    );
-  }
+  const handleDragStart = useCallback(id => {
+    dragItem.current = id;
+  }, [dragItem]);
 
-}
+  const handleDragEnter = useCallback(id => {
+    dragOverItem.current = id;
+  }, [dragOverItem]);
+
+  const handleDragEnd = useCallback(() => {
+    dispatch(changeMediaOrder(dragItem.current, dragOverItem.current));
+    dragItem.current = null;
+    dragOverItem.current = null;
+  }, [dispatch, dragItem, dragOverItem]);
+
+  return (
+    <>
+      <UploadProgress active={active} progress={progress} isProcessing={isProcessing} />
+
+      {mediaIds.size > 0 && (
+        <div className='compose-form__uploads'>
+          {mediaIds.map(id => (
+            <Upload
+              key={id}
+              id={id}
+              onDragStart={handleDragStart}
+              onDragEnter={handleDragEnter}
+              onDragEnd={handleDragEnd}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

app/javascript/mastodon/features/compose/components/upload_progress.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -10,46 +9,40 @@ import { Icon }  from 'mastodon/components/icon';
 
 import Motion from '../../ui/util/optional_motion';
 
-export default class UploadProgress extends PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    progress: PropTypes.number,
-    isProcessing: PropTypes.bool,
-  };
-
-  render () {
-    const { active, progress, isProcessing } = this.props;
-
-    if (!active) {
-      return null;
-    }
-
-    let message;
-
-    if (isProcessing) {
-      message = <FormattedMessage id='upload_progress.processing' defaultMessage='Processing…' />;
-    } else {
-      message = <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />;
-    }
-
-    return (
-      <div className='upload-progress'>
-        <Icon id='upload' icon={UploadFileIcon} />
-
-        <div className='upload-progress__message'>
-          {message}
-
-          <div className='upload-progress__backdrop'>
-            <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
-              {({ width }) =>
-                <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
-              }
-            </Motion>
-          </div>
-        </div>
-      </div>
-    );
+export const UploadProgress = ({ active, progress, isProcessing }) => {
+  if (!active) {
+    return null;
   }
 
-}
+  let message;
+
+  if (isProcessing) {
+    message = <FormattedMessage id='upload_progress.processing' defaultMessage='Processing…' />;
+  } else {
+    message = <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />;
+  }
+
+  return (
+    <div className='upload-progress'>
+      <Icon id='upload' icon={UploadFileIcon} />
+
+      <div className='upload-progress__message'>
+        {message}
+
+        <div className='upload-progress__backdrop'>
+          <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
+            {({ width }) =>
+              <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
+            }
+          </Motion>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+UploadProgress.propTypes = {
+  active: PropTypes.bool,
+  progress: PropTypes.number,
+  isProcessing: PropTypes.bool,
+};

app/javascript/mastodon/features/compose/containers/upload_container.js

@@ -1,27 +0,0 @@
-import { connect } from 'react-redux';
-
-import { undoUploadCompose, initMediaEditModal, submitCompose } from '../../../actions/compose';
-import Upload from '../components/upload';
-
-const mapStateToProps = (state, { id }) => ({
-  media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
-  sensitive: state.getIn(['compose', 'spoiler']),
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onUndo: id => {
-    dispatch(undoUploadCompose(id));
-  },
-
-  onOpenFocalPoint: id => {
-    dispatch(initMediaEditModal(id));
-  },
-
-  onSubmit (router) {
-    dispatch(submitCompose(router));
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Upload);

app/javascript/mastodon/features/compose/containers/upload_form_container.js

@@ -1,9 +0,0 @@
-import { connect } from 'react-redux';
-
-import UploadForm from '../components/upload_form';
-
-const mapStateToProps = state => ({
-  mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
-});
-
-export default connect(mapStateToProps)(UploadForm);

app/javascript/mastodon/features/compose/containers/upload_progress_container.js

@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-
-import UploadProgress from '../components/upload_progress';
-
-const mapStateToProps = state => ({
-  active: state.getIn(['compose', 'is_uploading']),
-  progress: state.getIn(['compose', 'progress']),
-  isProcessing: state.getIn(['compose', 'is_processing']),
-});
-
-export default connect(mapStateToProps)(UploadProgress);

app/javascript/mastodon/features/ui/components/focal_point_modal.jsx

@@ -22,7 +22,7 @@ import { GIFV } from 'mastodon/components/gifv';
 import { IconButton } from 'mastodon/components/icon_button';
 import Audio from 'mastodon/features/audio';
 import { CharacterCounter } from 'mastodon/features/compose/components/character_counter';
-import UploadProgress from 'mastodon/features/compose/components/upload_progress';
+import { UploadProgress } from 'mastodon/features/compose/components/upload_progress';
 import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components';
 import { me } from 'mastodon/initial_state';
 import { assetHost } from 'mastodon/utils/config';

app/javascript/mastodon/reducers/compose.js

@@ -45,6 +45,7 @@ import {
   INIT_MEDIA_EDIT_MODAL,
   COMPOSE_CHANGE_MEDIA_DESCRIPTION,
   COMPOSE_CHANGE_MEDIA_FOCUS,
+  COMPOSE_CHANGE_MEDIA_ORDER,
   COMPOSE_SET_STATUS,
   COMPOSE_FOCUS,
 } from '../actions/compose';
@@ -536,6 +537,14 @@ export default function compose(state = initialState, action) {
     return state.set('language', action.language);
   case COMPOSE_FOCUS:
     return state.set('focusDate', new Date()).update('text', text => text.length > 0 ? text : action.defaultText);
+  case COMPOSE_CHANGE_MEDIA_ORDER:
+    return state.update('media_attachments', list => {
+      const indexA = list.findIndex(x => x.get('id') === action.a);
+      const moveItem = list.get(indexA);
+      const indexB = list.findIndex(x => x.get('id') === action.b);
+
+      return list.splice(indexA, 1).splice(indexB, 0, moveItem);
+    });
   default:
     return state;
   }