From d745bd05837cd69fd96879c158ab76689084fcde Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Mon, 16 Jan 2023 17:55:00 +0800
Subject: [PATCH] feat: improve posts translation logic (#1211)

---
 components/status/StatusActionsMore.vue |  8 -----
 components/status/StatusBody.vue        |  5 ++-
 components/status/StatusContent.vue     |  1 +
 components/status/StatusTranslation.vue | 41 ++++++++++++++++++++++
 composables/masto/translate.ts          | 45 +++++++++++++++++--------
 nuxt.config.ts                          |  1 +
 6 files changed, 78 insertions(+), 23 deletions(-)
 create mode 100644 components/status/StatusTranslation.vue

diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue
index 69fd870c..5a95fdff 100644
--- a/components/status/StatusActionsMore.vue
+++ b/components/status/StatusActionsMore.vue
@@ -206,14 +206,6 @@ const showFavoritedAndBoostedBy = () => {
           />
         </NuxtLink>
 
-        <CommonDropdownItem
-          v-if="isTranslationEnabled && status.language !== languageCode"
-          :text="translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post')"
-          icon="i-ri:translate"
-          :command="command"
-          @click="toggleTranslation"
-        />
-
         <template v-if="isHydrated && currentUser">
           <template v-if="isAuthor">
             <CommonDropdownItem
diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 92238be2..19db607f 100644
--- a/components/status/StatusBody.vue
+++ b/components/status/StatusBody.vue
@@ -37,7 +37,10 @@ const vnode = $computed(() => {
     <div v-else />
     <template v-if="translation.visible">
       <div my2 h-px border="b base" bg-base />
-      <ContentRich class="line-compact" :content="translation.text" :emojis="status.emojis" />
+      <ContentRich v-if="translation.success" class="line-compact" :content="translation.text" :emojis="status.emojis" />
+      <div v-else text-red-4>
+        Error: {{ translation.error }}
+      </div>
     </template>
   </div>
 </template>
diff --git a/components/status/StatusContent.vue b/components/status/StatusContent.vue
index b2851bd8..1ca0d0ec 100644
--- a/components/status/StatusContent.vue
+++ b/components/status/StatusContent.vue
@@ -34,6 +34,7 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
         <p>{{ status.spoilerText }}</p>
       </template>
       <StatusBody v-if="!status.sensitive || status.spoilerText" :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
+      <StatusTranslation :status="status" />
       <StatusPoll v-if="status.poll" :status="status" />
       <StatusMedia
         v-if="status.mediaAttachments?.length"
diff --git a/components/status/StatusTranslation.vue b/components/status/StatusTranslation.vue
new file mode 100644
index 00000000..56e022f6
--- /dev/null
+++ b/components/status/StatusTranslation.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { status } = defineProps<{
+  status: mastodon.v1.Status
+}>()
+
+const {
+  toggle: _toggleTranslation,
+  translation,
+  enabled: isTranslationEnabled,
+} = useTranslation(status)
+
+let translating = $ref(false)
+const toggleTranslation = async () => {
+  translating = true
+  try {
+    await _toggleTranslation()
+  }
+  finally {
+    translating = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <button
+      v-if="isTranslationEnabled && status.language !== languageCode" pl-0 flex="~ center" gap-2
+      :disabled="translating" disabled-bg-transparent btn-text @click="toggleTranslation"
+    >
+      <span v-if="translating" block animate-spin preserve-3d>
+        <span block i-ri:loader-2-fill />
+      </span>
+      <div v-else i-ri:translate />
+      {{ translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post') }}
+    </button>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/composables/masto/translate.ts b/composables/masto/translate.ts
index 0f88fc08..d3567570 100644
--- a/composables/masto/translate.ts
+++ b/composables/masto/translate.ts
@@ -11,24 +11,37 @@ export interface TranslationResponse {
 export const languageCode = process.server ? 'en' : navigator.language.replace(/-.*$/, '')
 export async function translateText(text: string, from?: string | null, to?: string) {
   const config = useRuntimeConfig()
-  const { translatedText } = await $fetch<TranslationResponse>(config.public.translateApi, {
-    method: 'POST',
-    body: {
-      q: text,
-      source: from ?? 'auto',
-      target: to ?? languageCode,
-      format: 'html',
-      api_key: '',
-    },
+  const status = $ref({
+    success: false,
+    error: '',
+    text: '',
   })
-  return translatedText
+  try {
+    const response = await $fetch<TranslationResponse>(config.public.translateApi, {
+      method: 'POST',
+      body: {
+        q: text,
+        source: from ?? 'auto',
+        target: to ?? languageCode,
+        format: 'html',
+        api_key: '',
+      },
+    })
+    status.success = true
+    status.text = response.translatedText
+  }
+  catch (err) {
+    // TODO: improve type
+    status.error = (err as { data: { error: string } }).data.error
+  }
+  return status
 }
 
-const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, { visible: boolean; text: string }>()
+const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, { visible: boolean; text: string; success: boolean; error: string }>()
 
 export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit) {
   if (!translations.has(status))
-    translations.set(status, reactive({ visible: false, text: '' }))
+    translations.set(status, reactive({ visible: false, text: '', success: false, error: '' }))
 
   const translation = translations.get(status)!
 
@@ -36,8 +49,12 @@ export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEd
     if (!('language' in status))
       return
 
-    if (!translation.text)
-      translation.text = await translateText(status.content, status.language)
+    if (!translation.text) {
+      const { success, text, error } = await translateText(status.content, status.language)
+      translation.error = error
+      translation.text = text
+      translation.success = success
+    }
 
     translation.visible = !translation.visible
   }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 55a09dfa..ccebc9e4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -92,6 +92,7 @@ export default defineNuxtConfig({
       env: '', // set in build-env module
       buildInfo: {} as BuildInfo, // set in build-env module
       pwaEnabled: !isDevelopment || process.env.VITE_DEV_PWA === 'true',
+      // We use LibreTranslate(https://github.com/LibreTranslate/LibreTranslate) as our default translation server #76
       translateApi: '',
       defaultServer: 'mas.to',
     },