Enable adding a media description

src/config/locales/de/translation.json

@@ -188,7 +188,8 @@
       "change_visibility": "Sichtbarkeit ändern",
       "add_cw": "Inhalt hinzufügen Warnung",
       "change_sensitive": "Ändern Sie empfindlich",
-      "pined_hashtag": "Pin the hashtag"
+      "pined_hashtag": "Pin the hashtag",
+      "description": "Für Menschen mit Sehbehinderung beschreiben",
     },
     "jump": {
       "jump_to": "Springe zu..."

src/config/locales/en/translation.json

@@ -200,7 +200,8 @@
       "change_visibility": "Change visibility",
       "add_cw": "Add contents warning",
       "change_sensitive": "Change sensitive",
-      "pined_hashtag": "Pin the hashtag"
+      "pined_hashtag": "Pin the hashtag",
+      "description": "Describe for the visually impaired",
     },
     "jump": {
       "jump_to": "Jump to..."

src/config/locales/fr/translation.json

@@ -188,7 +188,8 @@
       "change_visibility": "Changer la visibilité",
       "add_cw": "Ajouter un avertissement de contenu",
       "change_sensitive": "Changer sensible",
-      "pined_hashtag": "Pin the hashtag"
+      "pined_hashtag": "Pin the hashtag",
+      "description": "Décrire pour les malvoyant·e·s",
     },
     "jump": {
       "jump_to": "Aller à..."

src/config/locales/ja/translation.json

@@ -200,7 +200,8 @@
       "change_visibility": "プライバシー設定",
       "add_cw": "閲覧注意を追加",
       "change_sensitive": "メディアの閲覧注意設定",
-      "pined_hashtag": "ハッシュタグを固定する"
+      "pined_hashtag": "ハッシュタグを固定する",
+      "description": "視覚障害者のための説明",
     },
     "jump": {
       "jump_to": "移動..."

src/config/locales/ko/translation.json

@@ -188,7 +188,8 @@
       "change_visibility": "공개 범위 변경",
       "add_cw": "경고 문구 추가",
       "change_sensitive": "민감한 미디어 설정",
-      "pined_hashtag": "해시태그고정"
+      "pined_hashtag": "해시태그고정",
+      "description": "시각장애인을 위한 설명",
     },
     "jump": {
       "jump_to": "이동"

src/config/locales/pl/translation.json

@@ -188,7 +188,8 @@
       "change_visibility": "Zmień widoczność",
       "add_cw": "Dodaj ostrzeżenie zawartości",
       "change_sensitive": "Zmień wrażliwy",
-      "pined_hashtag": "Pin the hashtag"
+      "pined_hashtag": "Pin the hashtag",
+      "description": "Wprowadź opis dla niewidomych i niedowidzących",
     },
     "jump": {
       "jump_to": "Przejdź do…"

src/renderer/components/TimelineSpace/Modals/NewToot.vue

@@ -20,7 +20,8 @@
     <div class="preview">
       <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
         <img :src="media.preview_url" class="preview-image" />
-        <el-button size="small" type="text" @click="removeAttachment(media)" class="remove-image"><icon name="times-circle"></icon></el-button>
+        <el-button type="text" @click="removeAttachment(media)" class="remove-image"><icon name="times-circle"></icon></el-button>
+        <textarea rows="2" maxlength="420" class="image-description" :placeholder="$t('modals.new_toot.description')" v-model="mediaDescriptions[media.id]" ></textarea>
       </div>
     </div>
     <div slot="footer" class="dialog-footer">
@@ -93,6 +94,7 @@ export default {
   data () {
     return {
       status: '',
+      mediaDescriptions: {},
       spoiler: '',
       showContentWarning: false,
       visibilityList: Visibility
@@ -207,8 +209,12 @@ export default {
         })
       }
 
-      const status = await this.$store.dispatch('TimelineSpace/Modals/NewToot/postToot', form)
-        .catch(() => {
+      const status = await this.$store.dispatch('TimelineSpace/Modals/NewToot/updateMedia', this.mediaDescriptions)
+        .then(() => {
+          return this.$store.dispatch('TimelineSpace/Modals/NewToot/postToot', form)
+        })
+        .catch((e) => {
+          console.error(e)
           this.$message({
             message: this.$t('message.toot_error'),
             type: 'error'
@@ -262,6 +268,7 @@ export default {
     },
     removeAttachment (media) {
       this.$store.commit('TimelineSpace/Modals/NewToot/removeMedia', media)
+      delete this.mediaDescriptions[media.id]
     },
     changeVisibility (level) {
       this.$store.commit('TimelineSpace/Modals/NewToot/changeVisibilityValue', level)
@@ -319,23 +326,60 @@ export default {
 
     .preview {
       box-sizing: border-box;
-      padding: 0 12px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
 
       .image-wrapper {
         position: relative;
-        display: inline-block;
+        flex: 1 1 0;
+        min-width: 40%;
+        height: 150px;
+        margin: 4px;
 
         .preview-image {
-          width: 60px;
-          margin-right: 8px;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border: 0;
+          border-radius: 8px;
+        }
+
+        .image-description {
+          position: absolute;
+          left: 0px;
+          bottom: 0px;
+          width: 100%;
+          box-sizing: border-box;
+          border: 0;
+          border-bottom-left-radius: 8px;
+          border-bottom-right-radius: 8px;
+          background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
+          font-size: var(--font-base-size);
+          color: #fff;
+          opacity: 1;
+          resize: none;
+
+          &::placeholder {
+            color: #c0c4cc;
+          }
         }
 
         .remove-image {
           position: absolute;
-          top: 0;
-          left: 0;
+          top: 2px;
+          left: 2px;
           padding: 0;
           cursor: pointer;
+          font-size: 1.5rem;
+
+          .fa-icon {
+            font-size: 0.9em;
+            width: auto;
+            height: 1em;
+            max-width: 100%;
+            max-height: 100%;
+          }
         }
       }
     }

src/renderer/store/TimelineSpace/Modals/NewToot.js

@@ -74,7 +74,24 @@ const NewToot = {
     }
   },
   actions: {
-    postToot ({ state, commit, rootState }, form) {
+    async updateMedia ({state, commit, rootState}, media) {
+      if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
+        throw new AuthenticationError()
+      }
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return Promise.all(
+        Object.keys(media).map(async (id, index) => {
+          return client.put(`/media/${id}`, { description: media[id] })
+        }
+        )).catch(err => {
+        console.error(err)
+        throw err
+      })
+    },
+    async postToot ({ state, commit, rootState }, form) {
       if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
         throw new AuthenticationError()
       }