allow translating to any other language

src/components/status_body/status_body.js

@@ -9,6 +9,7 @@ import {
   faLink,
   faPollH
 } from '@fortawesome/free-solid-svg-icons'
+import Select from 'src/components/select/select.vue'
 
 library.add(
   faFile,
@@ -39,7 +40,8 @@ const StatusContent = {
     return {
       postLength: this.status.text.length,
       parseReadyDone: false,
-      renderMisskeyMarkdown
+      renderMisskeyMarkdown,
+      translateFrom: null
     }
   },
   computed: {
@@ -80,10 +82,14 @@ const StatusContent = {
     attachmentTypes () {
       return this.status.attachments.map(file => fileType.fileType(file.mimetype))
     },
+    translationLanguages () {
+      return (this.$store.getters.mergedConfig.supportedTranslationLanguages || []).map(lang => ({ key: lang.code, value: lang.code, label: lang.name }))
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
-    RichContent
+    RichContent,
+    Select
   },
   mounted () {
     this.status.attentions && this.status.attentions.forEach(attn => {
@@ -126,6 +132,10 @@ const StatusContent = {
     },
     generateTagLink (tag) {
       return `/tag/${tag}`
+    },
+    translateStatus () {
+      const translateTo = this.$store.getters.mergedConfig.translationLanguage || this.$store.state.instance.interfaceLanguage
+      this.$store.dispatch('translateStatus', { id: this.status.id, language: translateTo, from: this.translateFrom })
     }
   }
 }

src/components/status_body/status_body.vue

@@ -72,6 +72,27 @@
               :attentions="status.attentions"
               @parseReady="onParseReady"
             />
+            <div>
+              <label class="label">{{ $t('status.override_translation_source_language') }}</label>
+              {{ ' ' }}
+              <Select
+                id="source-language-switcher"
+                v-model="translateFrom"
+                class="preset-switcher"
+              >
+                <option
+                  v-for="language in translationLanguages"
+                  :key="language.key"
+                  :value="language.value"
+                >
+                  {{ language.label }}
+                </option>
+              </Select>
+              {{ ' ' }}
+              <button @click="translateStatus" class="btn button-default">
+                {{ $t('status.translate') }}
+              </button>
+            </div>
           </div>
         </div>
         <button

src/i18n/en.json

@@ -846,6 +846,7 @@
         "mute_conversation": "Mute conversation",
         "nsfw": "NSFW",
         "open_gallery": "Open gallery",
+        "override_translation_source_language": "Override source language",
         "pin": "Pin on profile",
         "pinned": "Pinned",
         "plus_more": "+{number} more",

src/modules/api.js

@@ -255,7 +255,7 @@ const api = {
     getSupportedTranslationlanguages (store) {
       store.state.backendInteractor.getSupportedTranslationlanguages({ store })
         .then((data) => {
-          store.dispatch('setInstanceOption', { name: 'supportedTranslationLanguages', value: data })
+          store.dispatch('setOption', { name: 'supportedTranslationLanguages', value: data })
         })
     },
 

src/modules/statuses.js

@@ -641,8 +641,8 @@ const statuses = {
       rootState.api.backendInteractor.unpinOwnStatus({ id: statusId })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
-    translateStatus ({ rootState, commit }, { id, translation, language }) {
-      return rootState.api.backendInteractor.translateStatus({ id: id, translation, language })
+    translateStatus ({ rootState, commit }, { id, translation, language, from }) {
+      return rootState.api.backendInteractor.translateStatus({ id: id, translation, language, from })
         .then((translation) => commit('setTranslatedStatus', { id, translation }))
     },
     muteConversation ({ rootState, commit }, statusId) {

src/services/api/api.service.js

@@ -744,8 +744,9 @@ const getSupportedTranslationlanguages = ({ credentials }) => {
   return promisedRequest({ url: AKKOMA_LANGUAGES_URL, credentials })
 }
 
-const translateStatus = ({ id, credentials, language }) => {
-  return promisedRequest({ url: AKKOMA_TRANSLATE_URL(id, language), method: 'GET', credentials })
+const translateStatus = ({ id, credentials, language, from }) => {
+  const queryString = from ? `?from=${from}` : ''
+  return promisedRequest({ url: AKKOMA_TRANSLATE_URL(id, language) + queryString, method: 'GET', credentials })
     .then((data) => {
       return data
     })