media modal: add support for media descriptions

src/components/attachment/attachment.vue

@@ -25,9 +25,9 @@
       class="image-attachment"
       :class="{'hidden': hidden && preloadImage }"
       :href="attachment.url" target="_blank"
-      :title="attachment.description"
     >
-      <StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
+      <StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"
+       :alt="attachment.description"/>
     </a>
 
     <a class="video-container"

src/components/media_modal/media_modal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="modal-view" v-if="showing" @click.prevent="hide">
-    <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
+    <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url" :alt="currentMedia.description" :title="currentMedia.description"></img>
     <VideoAttachment
       class="modal-image"
       v-if="type === 'video'"

src/components/post_status_form/post_status_form.js

@@ -67,6 +67,7 @@ const PostStatusForm = {
         status: statusText,
         nsfw: false,
         files: [],
+        mediaDescriptions: {},
         visibility: scope
       },
       caret: 0
@@ -242,6 +243,7 @@ const PostStatusForm = {
         visibility: newStatus.visibility,
         sensitive: newStatus.nsfw,
         media: newStatus.files,
+        mediaDescriptions: newStatus.mediaDescriptions || {},
         store: this.$store,
         inReplyToStatusId: this.replyTo,
         contentType: newStatus.contentType
@@ -251,6 +253,7 @@ const PostStatusForm = {
             status: '',
             spoilerText: '',
             files: [],
+            mediaDescriptions: {},
             visibility: newStatus.visibility,
             contentType: newStatus.contentType
           }

src/components/post_status_form/post_status_form.vue

@@ -86,6 +86,7 @@
             <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
             <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
           </div>
+          <input type="text" :placeholder="$t('post_status.media_description')" v-model="newStatus.mediaDescriptions[file.id]"></input>
         </div>
       </div>
       <div class="upload_settings" v-if="newStatus.files.length > 0">
@@ -158,6 +159,11 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+
+    input {
+      min-width: 300px;
+      flex: 1;
+    }
   }
 
   .attachments {

src/components/still-image/still-image.js

@@ -3,7 +3,8 @@ const StillImage = {
     'src',
     'referrerpolicy',
     'mimetype',
-    'imageLoadError'
+    'imageLoadError',
+    'alt'
   ],
   data () {
     return {

src/components/still-image/still-image.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='still-image' :class='{ animated: animated }'>
     <canvas ref="canvas" v-if="animated"></canvas>
-    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad" @error="onError"/>
+    <img ref="src" :alt="alt" :title="alt" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad" @error="onError"/>
   </div>
 </template>
 

src/i18n/en.json

@@ -60,6 +60,7 @@
     "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
     "account_not_locked_warning_link": "locked",
     "attachments_sensitive": "Mark attachments as sensitive",
+    "media_description": "Media description",
     "content_type": {
       "plain_text": "Plain text"
     },

src/services/api/api.service.js

@@ -424,7 +424,7 @@ const unretweet = ({ id, credentials }) => {
   })
 }
 
-const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks}) => {
+const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks, mediaDescriptions}) => {
   const idsText = mediaIds.join(',')
   const form = new FormData()
 
@@ -435,6 +435,7 @@ const postStatus = ({credentials, status, spoilerText, visibility, sensitive, me
   if (visibility) form.append('visibility', visibility)
   if (sensitive) form.append('sensitive', sensitive)
   if (contentType) form.append('content_type', contentType)
+  form.append('descriptions', JSON.stringify(mediaDescriptions))
   form.append('media_ids', idsText)
   if (inReplyToStatusId) {
     form.append('in_reply_to_status_id', inReplyToStatusId)

src/services/status_poster/status_poster.service.js

@@ -1,10 +1,10 @@
 import { map } from 'lodash'
 import apiService from '../api/api.service.js'
 
-const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
+const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain', mediaDescriptions = {} }) => {
   const mediaIds = map(media, 'id')
 
-  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks: store.state.instance.noAttachmentLinks})
+  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks: store.state.instance.noAttachmentLinks, mediaDescriptions})
     .then((data) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {