feat: allow translation of statuses (#76)

zio/stable
Daniel Roe 2022-11-25 00:14:16 +00:00 committed by GitHub
parent bef89502a1
commit 8586d58b84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 70 additions and 1 deletions

View File

@ -22,6 +22,7 @@ const isLoading = $ref({
favourited: false,
bookmarked: false,
pinned: false,
translation: false,
})
async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked' | 'pinned', newStatus: Promise<Status>) {
// Optimistic update
@ -59,6 +60,13 @@ const togglePin = async () => toggleStatusAction(
masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
)
const { toggle: _toggleTranslation, translation, enabled: isTranslationEnabled } = useTranslation(_status)
const toggleTranslation = async () => {
isLoading.translation = true
await _toggleTranslation()
isLoading.translation = false
}
const copyLink = async () => {
await clipboard.copy(`${location.origin}${getStatusPath(status)}`)
}
@ -160,6 +168,16 @@ function mention() {
/>
</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">
<CommonTooltip placement="bottom" content="More">
<button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>

View File

@ -4,10 +4,11 @@ import type { Status } from 'masto'
const { status } = defineProps<{
status: Status
}>()
const { translation } = useTranslation(status)
</script>
<template>
<div class="status-body">
<ContentRich :content="status.content" :emojis="status.emojis" />
<ContentRich :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
</div>
</template>

View File

@ -0,0 +1,47 @@
import type { Status } from 'masto'
export interface TranslationResponse {
translatedText: string
detectedLanguage: {
confidence: number
language: string
}
}
const config = useRuntimeConfig()
export async function translateText(text: string) {
const { translatedText } = await $fetch<TranslationResponse>(config.public.translateApi, {
method: 'POST',
body: {
q: text,
source: 'auto',
target: navigator.language.replace(/-.*$/, ''),
format: 'html',
api_key: '',
},
})
return translatedText
}
const translations = new WeakMap<Status, { visible: boolean; text: string }>()
export function useTranslation(status: Status) {
if (!translations.has(status))
translations.set(status, reactive({ visible: false, text: '' }))
const translation = translations.get(status)!
async function toggle() {
if (!translation.text)
translation.text = await translateText(status.content)
translation.visible = !translation.visible
}
return {
enabled: !!config.public.translateApi,
toggle,
translation,
}
}

View File

@ -40,5 +40,8 @@ export default defineNuxtConfig({
namespaceId: '',
apiToken: '',
},
public: {
translateApi: '',
},
},
})