fix: respect source language of post and move translation UI into menu

This commit is contained in:
Daniel Roe 2022-11-25 11:24:19 +00:00
parent bb05003fa3
commit 3f382bdad0
No known key found for this signature in database
GPG key ID: 22D5008E4F5D9B55
2 changed files with 15 additions and 14 deletions

View file

@ -175,16 +175,6 @@ function mention() {
/> />
</CommonTooltip> </CommonTooltip>
<CommonTooltip v-if="isTranslationEnabled" placement="bottom" content="Translate">
<StatusActionButton
color="text-pink" hover="text-pink" group-hover="bg-pink/10"
icon="i-ri:translate"
:active="translation.visible"
:disabled="isLoading.translation"
@click="toggleTranslation()"
/>
</CommonTooltip>
<CommonDropdown placement="bottom"> <CommonDropdown placement="bottom">
<CommonTooltip placement="bottom" content="More"> <CommonTooltip placement="bottom" content="More">
<StatusActionButton <StatusActionButton
@ -203,6 +193,15 @@ function mention() {
Open in original site Open in original site
</CommonDropdownItem> </CommonDropdownItem>
<CommonDropdownItem v-if="isTranslationEnabled && status.language !== languageCode" icon="i-ri:translate" @click="toggleTranslation">
<template v-if="!translation.visible">
Translate post
</template>
<template v-else>
Show original post
</template>
</CommonDropdownItem>
<template v-if="isAuthor"> <template v-if="isAuthor">
<CommonDropdownItem <CommonDropdownItem
icon="i-ri:pushpin-line" icon="i-ri:pushpin-line"

View file

@ -10,13 +10,14 @@ export interface TranslationResponse {
const config = useRuntimeConfig() const config = useRuntimeConfig()
export async function translateText(text: string) { export const languageCode = process.server ? 'en' : navigator.language.replace(/-.*$/, '')
export async function translateText(text: string, from?: string | null, to?: string) {
const { translatedText } = await $fetch<TranslationResponse>(config.public.translateApi, { const { translatedText } = await $fetch<TranslationResponse>(config.public.translateApi, {
method: 'POST', method: 'POST',
body: { body: {
q: text, q: text,
source: 'auto', source: from ?? 'auto',
target: navigator.language.replace(/-.*$/, ''), target: to ?? languageCode,
format: 'html', format: 'html',
api_key: '', api_key: '',
}, },
@ -34,7 +35,7 @@ export function useTranslation(status: Status) {
async function toggle() { async function toggle() {
if (!translation.text) if (!translation.text)
translation.text = await translateText(status.content) translation.text = await translateText(status.content, status.language)
translation.visible = !translation.visible translation.visible = !translation.visible
} }
@ -45,3 +46,4 @@ export function useTranslation(status: Status) {
translation, translation,
} }
} }