diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue index 5a95fdff..e116073c 100644 --- a/components/status/StatusActionsMore.vue +++ b/components/status/StatusActionsMore.vue @@ -27,18 +27,6 @@ const userSettings = useUserSettings() const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id) -const { - toggle: _toggleTranslation, - translation, - enabled: isTranslationEnabled, -} = useTranslation(props.status) - -const toggleTranslation = async () => { - isLoading.translation = true - await _toggleTranslation() - isLoading.translation = false -} - const { client } = $(useMasto()) const getPermalinkUrl = (status: mastodon.v1.Status) => { diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue index 19db607f..ef51dead 100644 --- a/components/status/StatusBody.vue +++ b/components/status/StatusBody.vue @@ -9,7 +9,7 @@ const { withAction?: boolean }>() -const { translation } = useTranslation(status) +const { translation } = useTranslation(status, getLanguageCode()) const emojisObject = useEmojisFallback(() => status.emojis) const vnode = $computed(() => { diff --git a/components/status/StatusTranslation.vue b/components/status/StatusTranslation.vue index 55c367fc..eb090018 100644 --- a/components/status/StatusTranslation.vue +++ b/components/status/StatusTranslation.vue @@ -9,7 +9,7 @@ const { toggle: _toggleTranslation, translation, enabled: isTranslationEnabled, -} = useTranslation(status) +} = useTranslation(status, getLanguageCode()) let translating = $ref(false) const toggleTranslation = async () => { @@ -26,7 +26,7 @@ const toggleTranslation = async () => { <template> <div> <button - v-if="isTranslationEnabled && status.language !== languageCode" p-0 flex="~ center" gap-2 text-sm + v-if="isTranslationEnabled && status.language !== getLanguageCode()" p-0 flex="~ center" gap-2 text-sm :disabled="translating" disabled-bg-transparent btn-text class="disabled-text-$c-text-btn-disabled-deeper" @click="toggleTranslation" > <span v-if="translating" block animate-spin preserve-3d> diff --git a/composables/masto/translate.ts b/composables/masto/translate.ts index d3567570..f87ee314 100644 --- a/composables/masto/translate.ts +++ b/composables/masto/translate.ts @@ -8,8 +8,23 @@ export interface TranslationResponse { } } -export const languageCode = process.server ? 'en' : navigator.language.replace(/-.*$/, '') -export async function translateText(text: string, from?: string | null, to?: string) { +export const getLanguageCode = () => { + let code = 'en' + const getCode = (code: string) => code.replace(/-.*$/, '') + if (!process.server) { + const { locale } = useI18n() + code = getCode(locale.value ? locale.value : navigator.language) + } + return code +} + +interface TranslationErr { + data?: { + error?: string + } +} + +export async function translateText(text: string, from: string | null | undefined, to: string) { const config = useRuntimeConfig() const status = $ref({ success: false, @@ -22,7 +37,7 @@ export async function translateText(text: string, from?: string | null, to?: str body: { q: text, source: from ?? 'auto', - target: to ?? languageCode, + target: to, format: 'html', api_key: '', }, @@ -32,14 +47,18 @@ export async function translateText(text: string, from?: string | null, to?: str } catch (err) { // TODO: improve type - status.error = (err as { data: { error: string } }).data.error + if ((err as TranslationErr).data?.error) + status.error = (err as TranslationErr).data!.error! + else + status.error = 'Unknown Error, Please check your console in browser devtool.' + console.error('Translate Post Error: ', err) } return status } 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) { +export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit, to: string) { if (!translations.has(status)) translations.set(status, reactive({ visible: false, text: '', success: false, error: '' })) @@ -50,7 +69,7 @@ export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEd return if (!translation.text) { - const { success, text, error } = await translateText(status.content, status.language) + const { success, text, error } = await translateText(status.content, status.language, to) translation.error = error translation.text = text translation.success = success