diff --git a/src/components/Post/Translated/index.tsx b/src/components/Post/Translated/index.tsx
index 68176577a0..53fff5fac5 100644
--- a/src/components/Post/Translated/index.tsx
+++ b/src/components/Post/Translated/index.tsx
@@ -1,13 +1,14 @@
import {useMemo} from 'react'
import {Platform, View} from 'react-native'
import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
+import {HITSLOP_30} from '#/lib/constants'
import {codeToLanguageName, languageName} from '#/locale/helpers'
import {LANGUAGES} from '#/locale/languages'
import {useLanguagePrefs} from '#/state/preferences'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, native, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
import {Loader} from '#/components/Loader'
import * as Select from '#/components/Select'
import {Text} from '#/components/Typography'
@@ -16,24 +17,43 @@ import {useTranslateOnDevice} from '#/translation'
export function TranslatedPost({
postText,
- hideLoading = false,
+ standalone = false,
}: {
postText: string
- hideLoading: boolean
+ /**
+ * Hides the loading state, and adds its own "hide translation button"
+ */
+ standalone?: boolean
}) {
- const {translationState} = useTranslateOnDevice()
+ const {translationState, clearTranslation} = useTranslateOnDevice()
+ const {t: l} = useLingui()
+ const t = useTheme()
- if (translationState.status === 'loading' && !hideLoading) {
+ if (translationState.status === 'loading' && standalone) {
return
}
if (translationState.status === 'success') {
return (
-
+ <>
+
+ {standalone && (
+
+ )}
+ >
)
}
@@ -45,7 +65,7 @@ function TranslationLoading() {
return (
-
+
Translating…
diff --git a/src/screens/PostThread/components/ThreadItemAnchor.tsx b/src/screens/PostThread/components/ThreadItemAnchor.tsx
index 38a339f540..beb6000f61 100644
--- a/src/screens/PostThread/components/ThreadItemAnchor.tsx
+++ b/src/screens/PostThread/components/ThreadItemAnchor.tsx
@@ -420,7 +420,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
shouldProxyLinks={true}
/>
) : undefined}
-
+
{post.embed && (
@@ -617,7 +617,7 @@ function TranslateLink({
)
return (
- needsTranslation && (
+ (needsTranslation || translationState.status !== 'idle') && (
{translationState.status === 'loading' ? (
diff --git a/src/view/com/posts/PostFeedItem.tsx b/src/view/com/posts/PostFeedItem.tsx
index 064c94d2c3..06a33d93cf 100644
--- a/src/view/com/posts/PostFeedItem.tsx
+++ b/src/view/com/posts/PostFeedItem.tsx
@@ -42,12 +42,14 @@ import {Embed} from '#/components/Post/Embed'
import {PostEmbedViewContext} from '#/components/Post/Embed/types'
import {PostRepliedTo} from '#/components/Post/PostRepliedTo'
import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
+import {TranslatedPost} from '#/components/Post/Translated'
import {PostControls} from '#/components/PostControls'
import {DiscoverDebug} from '#/components/PostControls/DiscoverDebug'
import {RichText} from '#/components/RichText'
import {SubtleHover} from '#/components/SubtleHover'
import {useAnalytics} from '#/analytics'
import {useActorStatus} from '#/features/liveNow'
+import {Provider as OnDeviceTranslationProvider} from '#/translation'
import * as bsky from '#/types/bsky'
import {PostFeedReason} from './PostFeedReason'
@@ -108,27 +110,29 @@ export function PostFeedItem({
}
if (richText && moderation) {
return (
-
+
+
+
)
}
return null
@@ -479,6 +483,7 @@ let PostContent = ({
{limitLines && (
)}
+
) : undefined}
{postEmbed ? (