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 ? (