Add ability to specify alternative text for media attachments (#5123)

* Fix #117 - Add ability to specify alternative text for media attachments

- POST /api/v1/media accepts `description` straight away
- PUT /api/v1/media/:id to update `description` (only for unattached ones)
- Serialized as `name` of Document object in ActivityPub
- Uploads form adjusted for better performance and description input

* Add tests

* Change undo button blend mode to difference

1 files changed, 11 insertions, 33 deletions

diff --git a/app/javascript/mastodon/features/compose/components/upload_form.js b/app/javascript/mastodon/features/compose/components/upload_form.js
index cf2d2658a..b7f112205 100644
--- a/app/javascript/mastodon/features/compose/components/upload_form.js
+++ b/app/javascript/mastodon/features/compose/components/upload_form.js
@@ -1,49 +1,27 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
-import IconButton from '../../../components/icon_button';
-import { defineMessages, injectIntl } from 'react-intl';
 import UploadProgressContainer from '../containers/upload_progress_container';
-import Motion from 'react-motion/lib/Motion';
-import spring from 'react-motion/lib/spring';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import UploadContainer from '../containers/upload_container';
 
-const messages = defineMessages({
-  undo: { id: 'upload_form.undo', defaultMessage: 'Undo' },
-});
-
-@injectIntl
-export default class UploadForm extends React.PureComponent {
+export default class UploadForm extends ImmutablePureComponent {
 
   static propTypes = {
-    media: ImmutablePropTypes.list.isRequired,
-    onRemoveFile: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
+    mediaIds: ImmutablePropTypes.list.isRequired,
   };
 
-  onRemoveFile = (e) => {
-    const id = e.currentTarget.parentElement.getAttribute('data-id');
-    this.props.onRemoveFile(id);
-  }
-
   render () {
-    const { intl, media } = this.props;
-
-    const uploads = media.map(attachment =>
-      <div className='compose-form__upload' key={attachment.get('id')}>
-        <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
-          {({ scale }) =>
-            <div className='compose-form__upload-thumbnail' data-id={attachment.get('id')} style={{ transform: `translateZ(0) scale(${scale})`, backgroundImage: `url(${attachment.get('preview_url')})` }}>
-              <IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.onRemoveFile} />
-            </div>
-          }
-        </Motion>
-      </div>
-    );
+    const { mediaIds } = this.props;
 
     return (
       <div className='compose-form__upload-wrapper'>
         <UploadProgressContainer />
-        <div className='compose-form__uploads-wrapper'>{uploads}</div>
+
+        <div className='compose-form__uploads-wrapper'>
+          {mediaIds.map(id => (
+            <UploadContainer id={id} key={id} />
+          ))}
+        </div>
       </div>
     );
   }