From 6aa6f6f300d2f9de1e6c70a67b9459ae4c4b5a8f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 17:53:35 +0300
Subject: [PATCH 01/10] fix console errors

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

diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 9db176f07..ea32890ea 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -24,7 +24,6 @@
         :attachments="status.attachments"
         :limit="compact ? 1 : 0"
         :size="attachmentSize"
-        @setMedia="onMedia"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />

From 8cc1ad67dff93b5faa1ed1bab663d16748eec68d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:11:38 +0300
Subject: [PATCH 02/10] fix links sticking to mentionsline

---
 src/components/mentions_line/mentions_line.scss | 2 +-
 src/components/rich_content/rich_content.jsx    | 7 +++++++
 test/unit/specs/components/rich_content.spec.js | 4 ++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 222940c80..50eb0c275 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -4,7 +4,7 @@
     color: var(--link);
   }
 
-  .mention-link:not(:last-child) {
+  .mention-link {
     margin-right: 0.25em;
   }
 }
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 1353541fc..8ab007e39 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -121,6 +121,13 @@ export default Vue.component('RichContent', {
           // in MentionsLine
           return currentMentions !== null ? item.trim() : item
         }
+        // We add space with mentionsLine, otherwise non-text elements will
+        // stick to them.
+        if (currentMentions !== null) {
+          // single whitespace trim
+          item = item[0].match(/\s/) ? item.slice(1) : item
+        }
+
         currentMentions = null
         if (item.includes(':')) {
           item = ['', processTextForEmoji(
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index b29edeab4..c84df34b6 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -59,7 +59,7 @@ describe('RichContent', () => {
   it('replaces mention with mentionsline', () => {
     const html = p(
       makeMention('John'),
-      ' how are you doing today?'
+      '  how are you doing today?' // also testing single-trimming function
     )
     const wrapper = shallowMount(RichContent, {
       localVue,
@@ -74,7 +74,7 @@ describe('RichContent', () => {
 
     expect(wrapper.html()).to.eql(compwrap(p(
       mentionsLine(1),
-      ' how are you doing today?'
+      ' how are you doing today?' // space removed to compensate for <ML> padding
     )))
   })
 

From c8a7b6f4338e5240762915ef40aeb81e8d9beefe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:21:25 +0300
Subject: [PATCH 03/10] fix long posts double-fading in notifications

---
 src/components/status_body/status_body.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index f4167ac1f..91c331359 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -50,6 +50,7 @@ const StatusContent = {
     // Using max-height + overflow: auto for status components resulted in false positives
     // very often with japanese characters, and it was very annoying.
     tallStatus () {
+      if (this.singleLine || this.compact) return false
       const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
       return lengthScore > 20
     },

From 07c12ae16273498209ce557b59ea610e40365ad9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:26:37 +0300
Subject: [PATCH 04/10] replace poll with an icon in notifications

---
 src/components/status_content/status_content.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index ea32890ea..69635aad1 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -10,13 +10,20 @@
       :single-line="singleLine"
       @parseReady="$emit('parseReady', $event)"
     >
-      <div v-if="status.poll && status.poll.options">
+      <div v-if="status.poll && status.poll.options && !compact">
         <Poll
           :base-poll="status.poll"
           :emoji="status.emojis"
         />
       </div>
 
+      <div v-else-if="status.poll && status.poll.options && compact">
+        <FAIcon
+          icon="poll-h"
+          size="2x"
+        />
+      </div>
+
       <gallery
         v-if="status.attachments.length !== 0"
         class="attachments media-body"

From 299c00cf74fbef8b8b597330b8c0e6e28765ab7e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:35:26 +0300
Subject: [PATCH 05/10] fix video attachments in notifications not having
 pointer cursor

---
 src/components/attachment/attachment.js  | 3 +++
 src/components/attachment/attachment.vue | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index bd4240872..b2ba16557 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -118,6 +118,9 @@ const Attachment = {
       }
       return modalTypes.includes(this.type)
     },
+    videoTag () {
+      return this.useModal ? 'button' : 'span'
+    },
     ...mapGetters(['mergedConfig'])
   },
   watch: {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 98d9c3ec5..8a1c31c72 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -127,9 +127,11 @@
         />
       </a>
 
-      <span
+      <component
+        :is="videoTag"
         v-if="type === 'video' && !hidden"
         class="video-container"
+        :class="{ 'button-unstyled': 'isModal' }"
         :href="attachment.url"
         @click.stop.prevent="openModal"
       >
@@ -145,7 +147,7 @@
           class="play-icon"
           icon="play-circle"
         />
-      </span>
+      </component>
 
       <span
         v-if="type === 'audio' && !hidden"

From 0087d33c7516551ac674110859027a10855ab98f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 18:41:13 +0300
Subject: [PATCH 06/10] fix "+X more" sticking

---
 src/components/mentions_line/mentions_line.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 50eb0c275..976a3fc7d 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -2,6 +2,7 @@
   .showMoreLess {
     white-space: normal;
     color: var(--link);
+    margin-right: 0.25em;
   }
 
   .mention-link {

From f5823a96e970b6936185b7545c68d9401f8b3281 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 19:43:52 +0300
Subject: [PATCH 07/10] add key attribute to make image refresh in media modal
 to give feedback when images are still loaded

---
 src/components/media_modal/media_modal.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index a578bc71d..31455e480 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -8,6 +8,7 @@
       v-if="type === 'image'"
       class="modal-image"
       :src="currentMedia.url"
+      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
@@ -19,11 +20,13 @@
       class="modal-image"
       :attachment="currentMedia"
       :controls="true"
+      :key="currentMedia.url"
     />
     <audio
       v-if="type === 'audio'"
       class="modal-image"
       :src="currentMedia.url"
+      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       controls
@@ -31,6 +34,7 @@
     <Flash
       v-if="type === 'flash'"
       class="modal-image"
+      :key="currentMedia.url"
       :src="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"

From 34d265467a77d4e680e3c56c254df7dfb904fc18 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 19:45:48 +0300
Subject: [PATCH 08/10] add media description into media modal

---
 src/components/media_modal/media_modal.js  |   3 +
 src/components/media_modal/media_modal.vue | 126 ++++++++++++---------
 2 files changed, 76 insertions(+), 53 deletions(-)

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index b69193667..2e6aa1e33 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -29,6 +29,9 @@ const MediaModal = {
     media () {
       return this.$store.state.mediaViewer.media
     },
+    description () {
+      return this.currentMedia.description
+    },
     currentIndex () {
       return this.$store.state.mediaViewer.currentIndex
     },
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 31455e480..2a5710560 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -61,6 +61,12 @@
         icon="chevron-right"
       />
     </button>
+    <span
+      v-if="description"
+      class="description"
+    >
+      {{ description }}
+    </span>
   </Modal>
 </template>
 
@@ -69,6 +75,7 @@
 <style lang="scss">
 .modal-view.media-modal-view {
   z-index: 1001;
+  flex-direction: column;
 
   .modal-view-button-arrow {
     opacity: 0.75;
@@ -84,63 +91,76 @@
   }
 }
 
-@keyframes media-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.modal-image {
-  max-width: 90%;
-  max-height: 90%;
-  box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
-  image-orientation: from-image; // NOTE: only FF supports this
-  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
-}
-
-.modal-view-button-arrow {
-  position: absolute;
-  display: block;
-  top: 50%;
-  margin-top: -50px;
-  width: 70px;
-  height: 100px;
-  border: 0;
-  padding: 0;
-  opacity: 0;
-  box-shadow: none;
-  background: none;
-  appearance: none;
-  overflow: visible;
-  cursor: pointer;
-  transition: opacity 333ms cubic-bezier(.4,0,.22,1);
-
-  .arrow-icon {
-    position: absolute;
-    top: 35px;
-    height: 30px;
-    width: 32px;
-    font-size: 14px;
-    line-height: 30px;
-    color: #FFF;
-    text-align: center;
-    background-color: rgba(0,0,0,.3);
-  }
-
-  &--prev {
-    left: 0;
-    .arrow-icon {
-      left: 6px;
+.media-modal-view {
+  @keyframes media-fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
     }
   }
 
-  &--next {
-    right: 0;
+  /* Hardcoded since background is also hardcoded */
+  .description {
+    color: white;
+    margin-top: 1em;
+    text-shadow: 0 0 10px black, 0 0 10px black;
+    max-width: 500px;
+    max-height: 9.5em;
+    overflow-y: auto;
+    padding: 0 2em;
+  }
+
+  .modal-image {
+    max-width: 90%;
+    max-height: 90%;
+    box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+    image-orientation: from-image; // NOTE: only FF supports this
+    animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
+  }
+
+  .modal-view-button-arrow {
+    position: absolute;
+    display: block;
+    top: 50%;
+    margin-top: -50px;
+    width: 70px;
+    height: 100px;
+    border: 0;
+    padding: 0;
+    opacity: 0;
+    box-shadow: none;
+    background: none;
+    appearance: none;
+    overflow: visible;
+    cursor: pointer;
+    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+
     .arrow-icon {
-      right: 6px;
+      position: absolute;
+      top: 35px;
+      height: 30px;
+      width: 32px;
+      font-size: 14px;
+      line-height: 30px;
+      color: #FFF;
+      text-align: center;
+      background-color: rgba(0,0,0,.3);
+    }
+
+    &--prev {
+      left: 0;
+      .arrow-icon {
+        left: 6px;
+      }
+    }
+
+    &--next {
+      right: 0;
+      .arrow-icon {
+        right: 6px;
+      }
     }
   }
 }

From 830a03a0d13738ed1677d364fdf03821fbc507ab Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 21:04:28 +0300
Subject: [PATCH 09/10] inline description display

---
 src/components/attachment/attachment.js   | 12 +++++++++---
 src/components/attachment/attachment.scss | 13 ++-----------
 src/components/attachment/attachment.vue  |  8 ++++++++
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index b2ba16557..fea7c6f86 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -15,7 +15,8 @@ import {
   faStop,
   faSearchPlus,
   faTrashAlt,
-  faPencilAlt
+  faPencilAlt,
+  faAlignRight
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -28,7 +29,8 @@ library.add(
   faStop,
   faSearchPlus,
   faTrashAlt,
-  faPencilAlt
+  faPencilAlt,
+  faAlignRight
 )
 
 const Attachment = {
@@ -52,7 +54,8 @@ const Attachment = {
       img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
       modalOpen: false,
       showHidden: false,
-      flashLoaded: false
+      flashLoaded: false,
+      showDescription: false
     }
   },
   components: {
@@ -157,6 +160,9 @@ const Attachment = {
     setFlashLoaded (event) {
       this.flashLoaded = event
     },
+    toggleDescription () {
+      this.showDescription = !this.showDescription
+    },
     toggleHidden (event) {
       if (
         (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 33e058e79..065c38d2e 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -42,19 +42,10 @@
       position: absolute;
       left: 0;
       right: 0;
-      top: 0;
+      bottom: 0;
+      padding-top: 0;
       background: var(--popover);
       box-shadow: var(--popupShadow);
-      opacity: 0;
-      transition: 0.35s all;
-      transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-    }
-  }
-
-  &:hover {
-    .description-container.-static {
-      opacity: 1;
-      transform: translateY(-3em);
     }
   }
 
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 8a1c31c72..82a72a8d9 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -86,6 +86,14 @@
         >
           <FAIcon icon="stop" />
         </button>
+        <button
+          v-if="attachment.description && size !== 'small' && !edit"
+          class="button-unstyled attachment-button"
+          @click.prevent="toggleDescription"
+          :title="$t('status.show_attachment_description')"
+        >
+          <FAIcon icon="align-right" />
+        </button>
         <button
           v-if="!useModal"
           class="button-unstyled attachment-button"

From 0507eb6550830f7b76910d51200675de0aa9b1de Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 21:04:49 +0300
Subject: [PATCH 10/10] ability to move attachments around when making a new
 post

---
 src/components/attachment/attachment.js       |  8 +++++++
 src/components/attachment/attachment.vue      | 24 +++++++++++++++++--
 src/components/gallery/gallery.js             |  2 ++
 src/components/gallery/gallery.vue            | 10 ++++----
 .../post_status_form/post_status_form.js      | 13 +++++++++-
 .../post_status_form/post_status_form.vue     |  2 ++
 src/i18n/en.json                              |  7 ++++++
 7 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index fea7c6f86..f9c8d9816 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -42,6 +42,8 @@ const Attachment = {
     'size',
     'setMedia',
     'remove',
+    'shiftUp',
+    'shiftDn',
     'edit'
   ],
   data () {
@@ -154,6 +156,12 @@ const Attachment = {
     onRemove () {
       this.remove && this.remove(this.attachment)
     },
+    onShiftUp () {
+      this.shiftUp && this.shiftUp(this.attachment)
+    },
+    onShiftDn () {
+      this.shiftDn && this.shiftDn(this.attachment)
+    },
     stopFlash () {
       this.$refs.flash.closePlayer()
     },
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 82a72a8d9..4abf63dd7 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -30,7 +30,7 @@
       </button>
     </div>
     <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"
+      v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
       class="description-container"
       :class="{ '-static': !edit }"
     >
@@ -83,6 +83,7 @@
           v-if="type === 'flash' && flashLoaded"
           class="button-unstyled attachment-button"
           @click.prevent="stopFlash"
+          :title="$t('status.attachment_stop_flash')"
         >
           <FAIcon icon="stop" />
         </button>
@@ -98,6 +99,7 @@
           v-if="!useModal"
           class="button-unstyled attachment-button"
           @click.prevent="openModalForce"
+          :title="$t('status.show_attachment_in_modal')"
         >
           <FAIcon icon="search-plus" />
         </button>
@@ -105,13 +107,31 @@
           v-if="nsfw && hideNsfwLocal"
           class="button-unstyled attachment-button"
           @click.prevent="toggleHidden"
+          :title="$t('status.hide_attachment')"
         >
           <FAIcon icon="times" />
         </button>
+        <button
+          v-if="shiftUp"
+          class="button-unstyled attachment-button"
+          @click.prevent="onShiftUp"
+          :title="$t('status.move_up')"
+        >
+          <FAIcon icon="chevron-left" />
+        </button>
+        <button
+          v-if="shiftDn"
+          class="button-unstyled attachment-button"
+          @click.prevent="onShiftDn"
+          :title="$t('status.move_down')"
+        >
+          <FAIcon icon="chevron-right" />
+        </button>
         <button
           v-if="remove"
           class="button-unstyled attachment-button"
           @click.prevent="onRemove"
+          :title="$t('status.remove_attachment')"
         >
           <FAIcon icon="trash-alt" />
         </button>
@@ -209,7 +229,7 @@
       </span>
     </div>
     <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"
+      v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"
       class="description-container"
       :class="{ '-static': !edit }"
     >
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 15436d61b..094b3e570 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -12,6 +12,8 @@ const Gallery = {
     'size',
     'editable',
     'removeAttachment',
+    'shiftUpAttachment',
+    'shiftDnAttachment',
     'editAttachment',
     'grid'
   ],
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 18b94d584..f9cad8a9c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -6,8 +6,8 @@
   >
     <div class="gallery-rows">
       <div
-        v-for="(row, index) in rows"
-        :key="index"
+        v-for="(row, rowIndex) in rows"
+        :key="rowIndex"
         class="gallery-row"
         :style="rowStyle(row)"
         :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
@@ -16,8 +16,8 @@
           class="gallery-row-inner"
           :class="{ '-grid': grid }"
         >
-          <attachment
-            v-for="attachment in row.items"
+          <Attachment
+            v-for="(attachment, attachmentIndex) in row.items"
             :key="attachment.id"
             class="gallery-item"
             :nsfw="nsfw"
@@ -26,6 +26,8 @@
             :size="size"
             :editable="editable"
             :remove="removeAttachment"
+            :shiftUp="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
+            :shiftDn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
             :edit="editAttachment"
             :description="descriptions && descriptions[attachment.id]"
             :hide-description="size === 'small' || tooManyAttachments && hidingLong"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 1a12db9c8..fe07309fc 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -391,9 +391,20 @@ const PostStatusForm = {
       this.$emit('resize')
     },
     editAttachment (fileInfo, newText) {
-      console.log(fileInfo, newText)
       this.newStatus.mediaDescriptions[fileInfo.id] = newText
     },
+    shiftUpMediaFile (fileInfo) {
+      const { files } = this.newStatus
+      const index = this.newStatus.files.indexOf(fileInfo)
+      files.splice(index, 1)
+      files.splice(index - 1, 0, fileInfo)
+    },
+    shiftDnMediaFile (fileInfo) {
+      const { files } = this.newStatus
+      const index = this.newStatus.files.indexOf(fileInfo)
+      files.splice(index, 1)
+      files.splice(index + 1, 0, fileInfo)
+    },
     uploadFailed (errString, templateArgs) {
       templateArgs = templateArgs || {}
       this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 87e6d2abe..2e0980a25 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -298,6 +298,8 @@
         :editable="true"
         :edit-attachment="editAttachment"
         :remove-attachment="removeMediaFile"
+        :shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
+        :shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a4f24c647..0ccd0da78 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -721,6 +721,13 @@
     "many_attachments": "Post has {number} attachment(s)",
     "collapse_attachments": "Collapse attachments",
     "show_all_attachments": "Show all attachments",
+    "show_attachment_in_modal": "Show in media modal",
+    "show_attachment_description": "Preview description (open attachment for full description)",
+    "hide_attachment": "Hide attachment",
+    "remove_attachment": "Remove attachment",
+    "attachment_stop_flash": "Stop Flash player",
+    "move_up": "Shift attachment left",
+    "move_down": "Shift attachment right",
     "open_gallery": "Open gallery"
   },
   "user_card": {