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

app/controllers/api/v1/media_controller.rb

@@ -10,18 +10,24 @@ class Api::V1::MediaController < Api::BaseController
   respond_to :json
 
   def create
-    @media = current_account.media_attachments.create!(file: media_params[:file])
+    @media = current_account.media_attachments.create!(media_params)
     render json: @media, serializer: REST::MediaAttachmentSerializer
   rescue Paperclip::Errors::NotIdentifiedByImageMagickError
     render json: file_type_error, status: 422
   rescue Paperclip::Error
     render json: processing_error, status: 500
   end
 
+  def update
+    @media = current_account.media_attachments.where(status_id: nil).find(params[:id])
+    @media.update!(media_params)
+    render json: @media, serializer: REST::MediaAttachmentSerializer
+  end
+
   private
 
   def media_params
-    params.permit(:file)
+    params.permit(:file, :description)
   end
 
   def file_type_error

app/javascript/mastodon/actions/compose.js

@@ -37,6 +37,10 @@ export const COMPOSE_COMPOSING_CHANGE = 'COMPOSE_COMPOSING_CHANGE';
 
 export const COMPOSE_EMOJI_INSERT = 'COMPOSE_EMOJI_INSERT';
 
+export const COMPOSE_UPLOAD_CHANGE_REQUEST     = 'COMPOSE_UPLOAD_UPDATE_REQUEST';
+export const COMPOSE_UPLOAD_CHANGE_SUCCESS     = 'COMPOSE_UPLOAD_UPDATE_SUCCESS';
+export const COMPOSE_UPLOAD_CHANGE_FAIL        = 'COMPOSE_UPLOAD_UPDATE_FAIL';
+
 export function changeCompose(text) {
   return {
     type: COMPOSE_CHANGE,
@@ -165,6 +169,40 @@ export function uploadCompose(files) {
   };
 };
 
+export function changeUploadCompose(id, description) {
+  return (dispatch, getState) => {
+    dispatch(changeUploadComposeRequest());
+
+    api(getState).put(`/api/v1/media/${id}`, { description }).then(response => {
+      dispatch(changeUploadComposeSuccess(response.data));
+    }).catch(error => {
+      dispatch(changeUploadComposeFail(id, error));
+    });
+  };
+};
+
+export function changeUploadComposeRequest() {
+  return {
+    type: COMPOSE_UPLOAD_CHANGE_REQUEST,
+    skipLoading: true,
+  };
+};
+export function changeUploadComposeSuccess(media) {
+  return {
+    type: COMPOSE_UPLOAD_CHANGE_SUCCESS,
+    media: media,
+    skipLoading: true,
+  };
+};
+
+export function changeUploadComposeFail(error) {
+  return {
+    type: COMPOSE_UPLOAD_CHANGE_FAIL,
+    error: error,
+    skipLoading: true,
+  };
+};
+
 export function uploadComposeRequest() {
   return {
     type: COMPOSE_UPLOAD_REQUEST,

app/javascript/mastodon/components/extended_video_player.js

@@ -5,6 +5,7 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
 
   static propTypes = {
     src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
     width: PropTypes.number,
     height: PropTypes.number,
     time: PropTypes.number,
@@ -31,15 +32,20 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
   }
 
   render () {
+    const { src, muted, controls, alt } = this.props;
+
     return (
       <div className='extended-video-player'>
         <video
           ref={this.setRef}
-          src={this.props.src}
+          src={src}
           autoPlay
-          muted={this.props.muted}
-          controls={this.props.controls}
-          loop={!this.props.controls}
+          role='button'
+          tabIndex='0'
+          aria-label={alt}
+          muted={muted}
+          controls={controls}
+          loop={!controls}
         />
       </div>
     );

app/javascript/mastodon/components/media_gallery.js

@@ -136,7 +136,7 @@ class Item extends React.PureComponent {
           onClick={this.handleClick}
           target='_blank'
         >
-          <img src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' />
+          <img src={previewUrl} srcSet={srcSet} sizes={sizes} alt={attachment.get('description')} />
         </a>
       );
     } else if (attachment.get('type') === 'gifv') {
@@ -146,6 +146,7 @@ class Item extends React.PureComponent {
         <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
           <video
             className='media-gallery__item-gifv-thumbnail'
+            aria-label={attachment.get('description')}
             role='application'
             src={attachment.get('url')}
             onClick={this.handleClick}