diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx index 03a43722a..ead0b894a 100644 --- a/app/soapbox/components/translate-button.tsx +++ b/app/soapbox/components/translate-button.tsx @@ -1,8 +1,9 @@ +import { List as ImmutableList } from 'immutable'; import React from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses'; -import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks'; +import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks'; import { Stack } from './ui'; @@ -16,11 +17,17 @@ const TranslateButton: React.FC = ({ status }) => { const dispatch = useAppDispatch(); const intl = useIntl(); const features = useFeatures(); + const instance = useInstance(); const me = useAppSelector((state) => state.me); + const sourceLanguages = instance.pleroma.getIn(['metadata', 'translation', 'source_languages']) as ImmutableList; + const targetLanguages = instance.pleroma.getIn(['metadata', 'translation', 'target_languages']) as ImmutableList; + const renderTranslate = me && ['public', 'unlisted'].includes(status.visibility) && status.contentHtml.length > 0 && status.language !== null && intl.locale !== status.language; + const supportsLanguages = (!sourceLanguages || sourceLanguages.includes(status.language!)) && (!targetLanguages || targetLanguages.includes(intl.locale)); + const handleTranslate: React.MouseEventHandler = (e) => { e.stopPropagation(); @@ -31,7 +38,7 @@ const TranslateButton: React.FC = ({ status }) => { } }; - if (!features.translations || !renderTranslate) return null; + if (!features.translations || !renderTranslate || !supportsLanguages) return null; if (status.translation) { const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' });