feat: allow translation of statuses (#76)

This commit is contained in:
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, favourited: false,
bookmarked: false, bookmarked: false,
pinned: false, pinned: false,
translation: false,
}) })
async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked' | 'pinned', newStatus: Promise<Status>) { async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked' | 'pinned', newStatus: Promise<Status>) {
// Optimistic update // Optimistic update
@ -59,6 +60,13 @@ const togglePin = async () => toggleStatusAction(
masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id), 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 () => { const copyLink = async () => {
await clipboard.copy(`${location.origin}${getStatusPath(status)}`) await clipboard.copy(`${location.origin}${getStatusPath(status)}`)
} }
@ -160,6 +168,16 @@ 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">
<button flex gap-1 items-center rounded op50 hover="op100 text-purple" group> <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<{ const { status } = defineProps<{
status: Status status: Status
}>() }>()
const { translation } = useTranslation(status)
</script> </script>
<template> <template>
<div class="status-body"> <div class="status-body">
<ContentRich :content="status.content" :emojis="status.emojis" /> <ContentRich :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
</div> </div>
</template> </template>

47
composables/translate.ts Normal file
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: '', namespaceId: '',
apiToken: '', apiToken: '',
}, },
public: {
translateApi: '',
},
}, },
}) })