From 2c6ec37e6a796d2d7be7be58ac0e3c6c8bbd6a18 Mon Sep 17 00:00:00 2001
From: William Pitcock <nenolod@dereferenced.org>
Date: Mon, 18 Feb 2019 05:03:26 +0000
Subject: [PATCH 01/14] media description support

---
 src/components/attachment/attachment.vue             | 2 +-
 src/components/media_modal/media_modal.vue           | 2 ++
 src/components/post_status_form/post_status_form.js  | 3 +++
 src/components/post_status_form/post_status_form.vue | 6 ++++++
 src/components/still-image/still-image.js            | 3 ++-
 src/components/still-image/still-image.vue           | 2 ++
 src/i18n/en.json                                     | 1 +
 src/services/api/api.service.js                      | 4 +++-
 src/services/status_poster/status_poster.service.js  | 5 +++--
 9 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index a7e217c1..98f772c0 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -51,7 +51,6 @@
       :class="{'hidden': hidden && preloadImage }"
       :href="attachment.url"
       target="_blank"
-      :title="attachment.description"
       @click="openModal"
     >
       <StillImage
@@ -59,6 +58,7 @@
         :mimetype="attachment.mimetype"
         :src="attachment.large_thumb_url || attachment.url"
         :image-load-handler="onImageLoad"
+        :alt="attachment.description"
       />
     </a>
 
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 80d2a8b9..d52f00a5 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -8,6 +8,8 @@
       v-if="type === 'image'"
       class="modal-image"
       :src="currentMedia.url"
+      :alt="currentMedia.description"
+      :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
       @touchmove.stop="mediaTouchMove"
       @click="hide"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 9027566f..df2999f2 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -78,6 +78,7 @@ const PostStatusForm = {
         nsfw: false,
         files: [],
         poll: {},
+        mediaDescriptions: {},
         visibility: scope,
         contentType
       },
@@ -190,6 +191,7 @@ const PostStatusForm = {
         visibility: newStatus.visibility,
         sensitive: newStatus.nsfw,
         media: newStatus.files,
+        mediaDescriptions: newStatus.mediaDescriptions || {},
         store: this.$store,
         inReplyToStatusId: this.replyTo,
         contentType: newStatus.contentType,
@@ -200,6 +202,7 @@ const PostStatusForm = {
             status: '',
             spoilerText: '',
             files: [],
+            mediaDescriptions: {},
             visibility: newStatus.visibility,
             contentType: newStatus.contentType,
             poll: {}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index e3d8d087..551df948 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -266,6 +266,7 @@
               :href="file.url"
             >{{ file.url }}</a>
           </div>
+          <input type="text" :placeholder="$t('post_status.media_description')" v-model="newStatus.mediaDescriptions[file.id]"></input>
         </div>
       </div>
       <div
@@ -399,6 +400,11 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+
+    input {
+      min-width: 300px;
+      flex: 1;
+    }
   }
 
   .status-input-wrapper {
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index e48fef47..ab40bbd7 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -4,7 +4,8 @@ const StillImage = {
     'referrerpolicy',
     'mimetype',
     'imageLoadError',
-    'imageLoadHandler'
+    'imageLoadHandler',
+    'alt'
   ],
   data () {
     return {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index f2ddeb7b..9130ec98 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -10,6 +10,8 @@
     <!-- NOTE: key is required to force to re-render img tag when src is changed -->
     <img
       ref="src"
+      :alt="alt"
+      :title="alt"
       :key="src"
       :src="src"
       :referrerpolicy="referrerpolicy"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2840904f..a0b70572 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -174,6 +174,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": {
       "text/plain": "Plain text",
       "text/html": "HTML",
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index dfffc291..cb205e3f 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -617,7 +617,8 @@ const postStatus = ({
   poll,
   mediaIds = [],
   inReplyToStatusId,
-  contentType
+  contentType,
+  mediaDescriptions
 }) => {
   const form = new FormData()
   const pollOptions = poll.options || []
@@ -644,6 +645,7 @@ const postStatus = ({
       form.append('poll[options][]', option)
     })
   }
+  form.append('descriptions', JSON.stringify(mediaDescriptions))
   if (inReplyToStatusId) {
     form.append('in_reply_to_id', inReplyToStatusId)
   }
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index 9e904d3a..090ff673 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -1,7 +1,7 @@
 import { map } from 'lodash'
 import apiService from '../api/api.service.js'
 
-const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
+const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain', mediaDescriptions = {} }) => {
   const mediaIds = map(media, 'id')
 
   return apiService.postStatus({
@@ -13,7 +13,8 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, m
     mediaIds,
     inReplyToStatusId,
     contentType,
-    poll })
+    poll,
+    mediaDescriptions })
     .then((data) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {

From 1ff55e17b1931f0578458256f4ca912e3c50e0cc Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sun, 28 Jun 2020 02:16:58 -0400
Subject: [PATCH 02/14] fix invalid end tag on input element

---
 src/components/post_status_form/post_status_form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 551df948..6eefc853 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -266,7 +266,7 @@
               :href="file.url"
             >{{ file.url }}</a>
           </div>
-          <input type="text" :placeholder="$t('post_status.media_description')" v-model="newStatus.mediaDescriptions[file.id]"></input>
+          <input type="text" :placeholder="$t('post_status.media_description')" v-model="newStatus.mediaDescriptions[file.id]">
         </div>
       </div>
       <div

From 03aa1f315406a238eb1cea6b9cc64abf1567b978 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sun, 28 Jun 2020 02:31:57 -0400
Subject: [PATCH 03/14] fix vue style warnings

---
 src/components/post_status_form/post_status_form.vue | 6 +++++-
 src/components/still-image/still-image.vue           | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 6eefc853..49291455 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -266,7 +266,11 @@
               :href="file.url"
             >{{ file.url }}</a>
           </div>
-          <input type="text" :placeholder="$t('post_status.media_description')" v-model="newStatus.mediaDescriptions[file.id]">
+          <input
+            v-model="newStatus.mediaDescriptions[file.id]"
+            type="text"
+            :placeholder="$t('post_status.media_description')"
+          >
         </div>
       </div>
       <div
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 9130ec98..2ebf33ba 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -10,9 +10,9 @@
     <!-- NOTE: key is required to force to re-render img tag when src is changed -->
     <img
       ref="src"
+      :key="src"
       :alt="alt"
       :title="alt"
-      :key="src"
       :src="src"
       :referrerpolicy="referrerpolicy"
       @load="onLoad"

From 529d72c2970a7eff46cc83e9a8465d8eec8a5dec Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sun, 28 Jun 2020 16:05:22 -0400
Subject: [PATCH 04/14] suppress enter key on media description input field

---
 src/components/post_status_form/post_status_form.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 49291455..76fa30d8 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -270,6 +270,7 @@
             v-model="newStatus.mediaDescriptions[file.id]"
             type="text"
             :placeholder="$t('post_status.media_description')"
+            @keydown.enter.prevent=""
           >
         </div>
       </div>

From 96d2c86d3bc1c26da2ca46ec04fb27a9de348e47 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 29 Jun 2020 14:48:22 +0300
Subject: [PATCH 05/14] change placeholders to use descriptions, use icons with
 placeholders, change uploads to use attachment component

---
 src/components/attachment/attachment.js       | 28 ++++++---
 src/components/attachment/attachment.vue      | 28 +++++----
 src/components/media_modal/media_modal.vue    |  8 +++
 .../post_status_form/post_status_form.js      |  4 +-
 .../post_status_form/post_status_form.vue     | 60 ++++++-------------
 .../video_attachment/video_attachment.vue     |  2 +
 src/modules/media_viewer.js                   |  2 +-
 static/fontello.json                          |  6 ++
 8 files changed, 75 insertions(+), 63 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index b832e10f..561a5a98 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -8,7 +8,6 @@ const Attachment = {
   props: [
     'attachment',
     'nsfw',
-    'statusId',
     'size',
     'allowPlay',
     'setMedia',
@@ -30,9 +29,21 @@ const Attachment = {
     VideoAttachment
   },
   computed: {
-    usePlaceHolder () {
+    usePlaceholder () {
       return this.size === 'hide' || this.type === 'unknown'
     },
+    placeholderName () {
+      if (this.attachment.description === '' || !this.attachment.description) {
+        return this.type.toUpperCase()
+      }
+      return this.attachment.description
+    },
+    placeholderIconClass () {
+      if (this.type === 'image') return 'icon-picture'
+      if (this.type === 'video') return 'icon-video'
+      if (this.type === 'audio') return 'icon-music'
+      return 'icon-link'
+    },
     referrerpolicy () {
       return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
     },
@@ -51,6 +62,12 @@ const Attachment = {
     fullwidth () {
       return this.type === 'html' || this.type === 'audio'
     },
+    useModal () {
+      return this.size === 'hide' ? ['image', 'video', 'audio']
+        : this.mergedConfig.playVideosInModal
+          ? ['image', 'video']
+          : ['image']
+    },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
@@ -60,12 +77,7 @@ const Attachment = {
       }
     },
     openModal (event) {
-      const modalTypes = this.mergedConfig.playVideosInModal
-        ? ['image', 'video']
-        : ['image']
-      if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
-        this.usePlaceHolder
-      ) {
+      if (this.useModal) {
         event.stopPropagation()
         event.preventDefault()
         this.setMedia()
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 98f772c0..a18bf186 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="usePlaceHolder"
+    v-if="usePlaceholder"
     @click="openModal"
   >
     <a
@@ -8,8 +8,11 @@
       class="placeholder"
       target="_blank"
       :href="attachment.url"
+      :alt="attachment.description"
+      :title="attachment.description"
     >
-      [{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}]
+      <span :class="placeholderIconClass" />
+      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
   </div>
   <div
@@ -22,6 +25,8 @@
       v-if="hidden"
       class="image-attachment"
       :href="attachment.url"
+      :alt="attachment.description"
+      :title="attachment.description"
       @click.prevent="toggleHidden"
     >
       <img
@@ -83,6 +88,8 @@
     <audio
       v-if="type === 'audio'"
       :src="attachment.url"
+      :alt="attachment.description"
+      :title="attachment.description"
       controls
     />
 
@@ -116,22 +123,19 @@
   display: flex;
   flex-wrap: wrap;
 
-  .attachment.media-upload-container {
-    flex: 0 0 auto;
-    max-height: 200px;
+  .non-gallery {
     max-width: 100%;
-    display: flex;
-    align-items: center;
-    video {
-      max-width: 100%;
-    }
   }
 
   .placeholder {
-    margin-right: 8px;
-    margin-bottom: 4px;
+    display: inline-block;
+    padding: 0.3em 1em 0.3em 0;
     color: $fallback--link;
     color: var(--postLink, $fallback--link);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   .nsfw-placeholder {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index d52f00a5..46931667 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -20,6 +20,14 @@
       :attachment="currentMedia"
       :controls="true"
     />
+    <audio
+      v-if="type === 'audio'"
+      class="modal-image"
+      :src="currentMedia.url"
+      :alt="currentMedia.description"
+      :title="currentMedia.description"
+      controls
+    />
     <button
       v-if="canNavigate"
       :title="$t('media_modal.previous')"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index df2999f2..6bbf6cf1 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -3,6 +3,7 @@ import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
 import PollForm from '../poll/poll_form.vue'
+import Attachment from '../attachment/attachment.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import { reject, map, uniqBy } from 'lodash'
@@ -38,7 +39,8 @@ const PostStatusForm = {
     EmojiInput,
     PollForm,
     ScopeSelector,
-    Checkbox
+    Checkbox,
+    Attachment
   },
   mounted () {
     this.resize(this.$refs.textarea)
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 49291455..a33e1a59 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -245,31 +245,17 @@
             class="fa button-icon icon-cancel"
             @click="removeMediaFile(file)"
           />
-          <div class="media-upload-container attachment">
-            <img
-              v-if="type(file) === 'image'"
-              class="thumbnail media-upload"
-              :src="file.url"
-            >
-            <video
-              v-if="type(file) === 'video'"
-              :src="file.url"
-              controls
-            />
-            <audio
-              v-if="type(file) === 'audio'"
-              :src="file.url"
-              controls
-            />
-            <a
-              v-if="type(file) === 'unknown'"
-              :href="file.url"
-            >{{ file.url }}</a>
-          </div>
+          <attachment
+            :attachment="file"
+            :set-media="() => $store.dispatch('setMedia', newStatus.files)"
+            size="small"
+            allow-play="false"
+          />
           <input
             v-model="newStatus.mediaDescriptions[file.id]"
             type="text"
             :placeholder="$t('post_status.media_description')"
+            @keydown.prevent.enter=""
           >
         </div>
       </div>
@@ -386,11 +372,9 @@
   }
 
   .media-upload-wrapper {
-    flex: 0 0 auto;
-    max-width: 100%;
-    min-width: 50px;
     margin-right: .2em;
     margin-bottom: .5em;
+    width: 260px;
 
     .icon-cancel {
       display: inline-block;
@@ -405,9 +389,18 @@
       border-bottom-right-radius: 0;
     }
 
+    img, video {
+      object-fit: contain;
+      max-height: 140px;
+    }
+
+    .video {
+      max-height: 140px;
+    }
+
     input {
-      min-width: 300px;
       flex: 1;
+      width: 100%;
     }
   }
 
@@ -423,23 +416,8 @@
 
     .attachment {
       margin: 0;
+      padding: 0;
       position: relative;
-      flex: 0 0 auto;
-      border: 1px solid $fallback--border;
-      border: 1px solid var(--border, $fallback--border);
-      text-align: center;
-
-      audio {
-        min-width: 300px;
-        flex: 1 0 auto;
-      }
-
-      a {
-        display: block;
-        text-align: left;
-        line-height: 1.2;
-        padding: .5em;
-      }
     }
 
     i {
diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
index 97ddf1cd..1ffed4e0 100644
--- a/src/components/video_attachment/video_attachment.vue
+++ b/src/components/video_attachment/video_attachment.vue
@@ -4,6 +4,8 @@
     :src="attachment.url"
     :loop="loopVideo"
     :controls="controls"
+    :alt="attachment.description"
+    :title="attachment.description"
     playsinline
     @loadeddata="onVideoDataLoad"
   />
diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
index a24b408d..721c25e6 100644
--- a/src/modules/media_viewer.js
+++ b/src/modules/media_viewer.js
@@ -22,7 +22,7 @@ const mediaViewer = {
     setMedia ({ commit }, attachments) {
       const media = attachments.filter(attachment => {
         const type = fileTypeService.fileType(attachment.mimetype)
-        return type === 'image' || type === 'video'
+        return type === 'image' || type === 'video' || type === 'audio'
       })
       commit('setMedia', media)
     },
diff --git a/static/fontello.json b/static/fontello.json
index ac3f0a18..f3053b8d 100755
--- a/static/fontello.json
+++ b/static/fontello.json
@@ -375,6 +375,12 @@
       "css": "download",
       "code": 59429,
       "src": "fontawesome"
+    },
+    {
+      "uid": "9ea0a737ccc45d6c510dcbae56058849",
+      "css": "music",
+      "code": 59430,
+      "src": "fontawesome"
     }
   ]
 }
\ No newline at end of file

From a09709f71d5477e2620d04e1cf6178fdb87671b3 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 29 Jun 2020 15:37:46 +0300
Subject: [PATCH 06/14] update changelog with media-descriptions and the fixes

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 887588f3..e3387b51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Autocomplete domains from list of known instances
 - 'Bot' settings option and badge
 - Added profile meta data fields that can be set in profile settings
+- Descriptions can be set on uploaded files before posting
 
 ### Changed
 - Registration page no longer requires email if the server is configured not to require it
@@ -26,6 +27,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Close the media modal on navigation events
 - Add colons to the emoji alt text, to make them copyable
 - Add better visual indication for drag-and-drop for files
+- When disabling attachments, the placeholder links now show an icon and the description instead of just IMAGE or VIDEO etc
 
 ### Fixed
 - Custom Emoji will display in poll options now.
@@ -37,6 +39,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Subject field now appears disabled when posting
 - Fix status ellipsis menu being cut off in notifications column
 - Fixed autocomplete sometimes not returning the right user when there's already some results
+- Videos and audio and misc files show description as alt/title properly now
+- Clicking on non-image/video files no longer opens an empty modal
+- Audio files can now be played back in the frontend with hidden attachments
+- Videos are not cropped awkwardly in the uploads section anymore
 
 ## [2.0.3] - 2020-05-02
 ### Fixed

From 0ca3a6e63d6dd8ed59cdf0c14780b5616667accc Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 30 Jun 2020 11:02:10 +0300
Subject: [PATCH 07/14] fix gallery-videos being weirdly offset

---
 src/components/gallery/gallery.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 1ffa7b3c..ca91c9c1 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -50,9 +50,7 @@
     align-content: stretch;
   }
 
-  // FIXME: specificity problem with this and .attachments.attachment
-  // we shouldn't have the need for .image here
-  .attachment.image {
+  .gallery-row-inner .attachment {
     margin: 0 0.5em 0 0;
     flex-grow: 1;
     height: 100%;

From b8ed904c0c4a387dccc1b107452bc0d669c174e2 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 2 Jul 2020 14:28:35 +0300
Subject: [PATCH 08/14] change px to em

---
 src/components/post_status_form/post_status_form.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0b79c9d8..442b9297 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -374,7 +374,7 @@
   .media-upload-wrapper {
     margin-right: .2em;
     margin-bottom: .5em;
-    width: 260px;
+    width: 18em;
 
     .icon-cancel {
       display: inline-block;
@@ -391,11 +391,11 @@
 
     img, video {
       object-fit: contain;
-      max-height: 140px;
+      max-height: 10em;
     }
 
     .video {
-      max-height: 140px;
+      max-height: 10em;
     }
 
     input {

From 4d25be7cb35f86ba2abe883116dc6442c93a1d9d Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 6 Jul 2020 13:42:33 +0300
Subject: [PATCH 09/14] fix modal types check being broken

---
 src/components/attachment/attachment.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 561a5a98..fe28e5f3 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -63,10 +63,11 @@ const Attachment = {
       return this.type === 'html' || this.type === 'audio'
     },
     useModal () {
-      return this.size === 'hide' ? ['image', 'video', 'audio']
+      const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
         : this.mergedConfig.playVideosInModal
           ? ['image', 'video']
           : ['image']
+      return modalTypes.includes(this.type)
     },
     ...mapGetters(['mergedConfig'])
   },

From d55c09df1844bf8fc99b7a3414cbd71ae2c8bad3 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 6 Jul 2020 15:06:13 +0300
Subject: [PATCH 10/14] fix edge case of videos and unknown files together

---
 src/components/attachment/attachment.js  | 3 ++-
 src/components/attachment/attachment.vue | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 23af693f..cb31020d 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -60,7 +60,8 @@ const Attachment = {
       return this.size === 'small'
     },
     fullwidth () {
-      return this.type === 'html' || this.type === 'audio'
+      if (this.size === 'hide') return false
+      return this.type === 'html' || this.type === 'audio' || this.type === 'unknown'
     },
     useModal () {
       const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index a18bf186..be7377e9 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="usePlaceholder"
+    :class="{ 'fullwidth': fullwidth }"
     @click="openModal"
   >
     <a

From b4709f93d46d1d88eb5cb0104b3ae07bd5cd823c Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 7 Jul 2020 09:07:20 +0300
Subject: [PATCH 11/14] add more ways to set description

---
 .../post_status_form/post_status_form.js      | 73 ++++++++++++-------
 .../post_status_form/post_status_form.vue     |  1 +
 src/services/api/api.service.js               | 16 +++-
 .../status_poster/status_poster.service.js    | 15 +++-
 4 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6bbf6cf1..6c0947af 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -6,7 +6,7 @@ import PollForm from '../poll/poll_form.vue'
 import Attachment from '../attachment/attachment.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
-import { reject, map, uniqBy } from 'lodash'
+import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
@@ -169,7 +169,7 @@ const PostStatusForm = {
     ...mapGetters(['mergedConfig'])
   },
   methods: {
-    postStatus (newStatus) {
+    async postStatus (newStatus) {
       if (this.posting) { return }
       if (this.submitDisabled) { return }
 
@@ -187,41 +187,43 @@ const PostStatusForm = {
       }
 
       this.posting = true
-      statusPoster.postStatus({
+
+      await this.setAllMediaDescriptions()
+
+      const data = await statusPoster.postStatus({
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
         visibility: newStatus.visibility,
         sensitive: newStatus.nsfw,
         media: newStatus.files,
-        mediaDescriptions: newStatus.mediaDescriptions || {},
         store: this.$store,
         inReplyToStatusId: this.replyTo,
         contentType: newStatus.contentType,
         poll
-      }).then((data) => {
-        if (!data.error) {
-          this.newStatus = {
-            status: '',
-            spoilerText: '',
-            files: [],
-            mediaDescriptions: {},
-            visibility: newStatus.visibility,
-            contentType: newStatus.contentType,
-            poll: {}
-          }
-          this.pollFormVisible = false
-          this.$refs.mediaUpload.clearFile()
-          this.clearPollForm()
-          this.$emit('posted')
-          let el = this.$el.querySelector('textarea')
-          el.style.height = 'auto'
-          el.style.height = undefined
-          this.error = null
-        } else {
-          this.error = data.error
-        }
-        this.posting = false
       })
+
+      if (!data.error) {
+        this.newStatus = {
+          status: '',
+          spoilerText: '',
+          files: [],
+          visibility: newStatus.visibility,
+          contentType: newStatus.contentType,
+          poll: {}
+        }
+        this.pollFormVisible = false
+        this.$refs.mediaUpload.clearFile()
+        this.clearPollForm()
+        this.$emit('posted')
+        let el = this.$el.querySelector('textarea')
+        el.style.height = 'auto'
+        el.style.height = undefined
+        this.error = null
+      } else {
+        this.error = data.error
+      }
+
+      this.posting = false
     },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
@@ -393,6 +395,23 @@ const PostStatusForm = {
     },
     dismissScopeNotice () {
       this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
+    },
+    debounceSendDescription: debounce(function (id, description) {
+      statusPoster.setMediaDescription({ store: this.$store, id, description })
+    }, 500),
+    updateMediaDescription (fileId, e) {
+      const description = e.target.value
+      this.newStatus.mediaDescriptions[fileId] = description
+      this.debounceSendDescription(fileId, description)
+    },
+    setMediaDescription (id) {
+      const description = this.newStatus.mediaDescriptions[id]
+      if (!description || description.trim() === '') return
+      return statusPoster.setMediaDescription({ store: this.$store, id, description })
+    },
+    setAllMediaDescriptions () {
+      const ids = this.newStatus.files.map(file => file.id)
+      return Promise.all(ids.map(id => this.setMediaDescription(id)))
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 442b9297..ea7b5b80 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -255,6 +255,7 @@
             v-model="newStatus.mediaDescriptions[file.id]"
             type="text"
             :placeholder="$t('post_status.media_description')"
+            @blur="setMediaDescription(file.id)"
             @keydown.enter.prevent=""
           >
         </div>
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index c4d7fb53..067acbe9 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -645,8 +645,7 @@ const postStatus = ({
   poll,
   mediaIds = [],
   inReplyToStatusId,
-  contentType,
-  mediaDescriptions
+  contentType
 }) => {
   const form = new FormData()
   const pollOptions = poll.options || []
@@ -673,7 +672,6 @@ const postStatus = ({
       form.append('poll[options][]', option)
     })
   }
-  form.append('descriptions', JSON.stringify(mediaDescriptions))
   if (inReplyToStatusId) {
     form.append('in_reply_to_id', inReplyToStatusId)
   }
@@ -712,6 +710,17 @@ const uploadMedia = ({ formData, credentials }) => {
     .then((data) => parseAttachment(data))
 }
 
+const setMediaDescription = ({ id, description, credentials }) => {
+  return promisedRequest({
+    url: `${MASTODON_MEDIA_UPLOAD_URL}/${id}`,
+    method: 'PUT',
+    headers: authHeaders(credentials),
+    payload: {
+      description
+    }
+  }).then((data) => parseAttachment(data))
+}
+
 const importBlocks = ({ file, credentials }) => {
   const formData = new FormData()
   formData.append('list', file)
@@ -1181,6 +1190,7 @@ const apiService = {
   postStatus,
   deleteStatus,
   uploadMedia,
+  setMediaDescription,
   fetchMutes,
   muteUser,
   unmuteUser,
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index 090ff673..7f5f501c 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -1,7 +1,7 @@
 import { map } from 'lodash'
 import apiService from '../api/api.service.js'
 
-const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain', mediaDescriptions = {} }) => {
+const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
   const mediaIds = map(media, 'id')
 
   return apiService.postStatus({
@@ -13,8 +13,8 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, m
     mediaIds,
     inReplyToStatusId,
     contentType,
-    poll,
-    mediaDescriptions })
+    poll
+  })
     .then((data) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {
@@ -39,9 +39,16 @@ const uploadMedia = ({ store, formData }) => {
   return apiService.uploadMedia({ credentials, formData })
 }
 
+const setMediaDescription = ({ store, id, description }) => {
+  const credentials = store.state.users.currentUser.credentials
+
+  return apiService.setMediaDescription({ credentials, id, description })
+}
+
 const statusPosterService = {
   postStatus,
-  uploadMedia
+  uploadMedia,
+  setMediaDescription
 }
 
 export default statusPosterService

From f4bdbf76917ba1eb36586ecd1a37d393f672e931 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 7 Jul 2020 09:08:50 +0300
Subject: [PATCH 12/14] remove unnecessary code

---
 src/components/post_status_form/post_status_form.js  | 10 +---------
 src/components/post_status_form/post_status_form.vue |  1 -
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6c0947af..dc5a0386 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -6,7 +6,7 @@ import PollForm from '../poll/poll_form.vue'
 import Attachment from '../attachment/attachment.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
-import { reject, map, uniqBy, debounce } from 'lodash'
+import { reject, map, uniqBy } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
@@ -396,14 +396,6 @@ const PostStatusForm = {
     dismissScopeNotice () {
       this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
     },
-    debounceSendDescription: debounce(function (id, description) {
-      statusPoster.setMediaDescription({ store: this.$store, id, description })
-    }, 500),
-    updateMediaDescription (fileId, e) {
-      const description = e.target.value
-      this.newStatus.mediaDescriptions[fileId] = description
-      this.debounceSendDescription(fileId, description)
-    },
     setMediaDescription (id) {
       const description = this.newStatus.mediaDescriptions[id]
       if (!description || description.trim() === '') return
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index ea7b5b80..442b9297 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -255,7 +255,6 @@
             v-model="newStatus.mediaDescriptions[file.id]"
             type="text"
             :placeholder="$t('post_status.media_description')"
-            @blur="setMediaDescription(file.id)"
             @keydown.enter.prevent=""
           >
         </div>

From 84d728b9708fbb64f20de1f65f9bb1af7f426d59 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 7 Jul 2020 11:31:24 +0300
Subject: [PATCH 13/14] fix issue on posting another status

---
 src/components/post_status_form/post_status_form.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 48c3615d..18f02eba 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -230,7 +230,8 @@ const PostStatusForm = {
           files: [],
           visibility: newStatus.visibility,
           contentType: newStatus.contentType,
-          poll: {}
+          poll: {},
+          mediaDescriptions: {}
         }
         this.pollFormVisible = false
         this.$refs.mediaUpload.clearFile()
@@ -240,7 +241,7 @@ const PostStatusForm = {
         el.style.height = 'auto'
         el.style.height = undefined
         this.error = null
-        this.previewStatus()
+        if (this.preview) this.previewStatus()
       } else {
         this.error = data.error
       }

From 97c62587d06d3bf657973e4c2d8fce2fb9707d85 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 7 Jul 2020 11:34:40 +0300
Subject: [PATCH 14/14] remove console log

---
 src/components/status_content/status_content.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 2b9ea50c..67d9bd3c 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -100,7 +100,6 @@ const StatusContent = {
       )
     },
     attachmentTypes () {
-      console.log(this.status.attachments)
       return this.status.attachments.map(file => fileType.fileType(file.mimetype))
     },
     maxThumbnails () {