2023-01-15 20:34:22 +01:00
|
|
|
import { Loading } from '@components/Loading'
|
2021-05-23 22:40:42 +02:00
|
|
|
import { ParseHTML } from '@components/Parse'
|
2022-05-07 00:52:32 +02:00
|
|
|
import CustomText from '@components/Text'
|
2022-12-28 23:41:36 +01:00
|
|
|
import detectLanguage from '@utils/helpers/detectLanguage'
|
|
|
|
import getLanguage from '@utils/helpers/getLanguage'
|
2021-05-19 20:40:16 +02:00
|
|
|
import { useTranslateQuery } from '@utils/queryHooks/translate'
|
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-02-01 22:27:29 +01:00
|
|
|
import * as Localization from 'expo-localization'
|
2022-12-03 20:47:11 +01:00
|
|
|
import React, { useContext, useEffect, useState } from 'react'
|
2021-05-19 20:40:16 +02:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-12-07 23:56:00 +01:00
|
|
|
import { Platform, Pressable } from 'react-native'
|
2022-12-03 20:47:11 +01:00
|
|
|
import StatusContext from './Context'
|
2021-05-19 20:40:16 +02:00
|
|
|
|
2022-12-03 20:47:11 +01:00
|
|
|
const TimelineTranslate = () => {
|
2022-12-18 17:25:18 +01:00
|
|
|
const { status, highlighted, rawContent, detectedLanguage } = useContext(StatusContext)
|
|
|
|
if (!status || !highlighted || !rawContent?.current.length) return null
|
2021-05-19 20:40:16 +02:00
|
|
|
|
2022-12-23 15:53:40 +01:00
|
|
|
const { t } = useTranslation(['componentTimeline'])
|
2022-12-03 20:47:11 +01:00
|
|
|
const { colors } = useTheme()
|
2021-05-19 20:40:16 +02:00
|
|
|
|
2022-12-17 23:21:56 +01:00
|
|
|
const [detected, setDetected] = useState<{
|
2022-12-07 23:56:00 +01:00
|
|
|
language: string
|
|
|
|
confidence: number
|
|
|
|
}>({ language: status.language || '', confidence: 0 })
|
2022-12-03 20:47:11 +01:00
|
|
|
useEffect(() => {
|
|
|
|
const detect = async () => {
|
2022-12-18 17:25:18 +01:00
|
|
|
const result = await detectLanguage(rawContent.current.join('\n\n'))
|
2022-12-17 23:21:56 +01:00
|
|
|
if (result) {
|
|
|
|
setDetected(result)
|
|
|
|
if (detectedLanguage) {
|
|
|
|
detectedLanguage.current = result.language
|
|
|
|
}
|
|
|
|
}
|
2021-05-19 23:28:01 +02:00
|
|
|
}
|
2022-12-03 20:47:11 +01:00
|
|
|
detect()
|
|
|
|
}, [])
|
2021-05-19 20:40:16 +02:00
|
|
|
|
2022-12-03 20:47:11 +01:00
|
|
|
const settingsLanguage = getLanguage()
|
|
|
|
const targetLanguage = settingsLanguage?.startsWith('en')
|
|
|
|
? Localization.locale || settingsLanguage || 'en'
|
|
|
|
: settingsLanguage || Localization.locale || 'en'
|
2022-06-09 01:47:38 +02:00
|
|
|
|
2022-12-03 20:47:11 +01:00
|
|
|
const [enabled, setEnabled] = useState(false)
|
2022-12-10 14:47:19 +01:00
|
|
|
const { refetch, data, isFetching, isSuccess, isError } = useTranslateQuery({
|
2022-12-17 23:21:56 +01:00
|
|
|
source: detected.language,
|
2022-12-03 20:47:11 +01:00
|
|
|
target: targetLanguage,
|
2022-12-18 17:25:18 +01:00
|
|
|
text: rawContent.current,
|
2022-12-03 20:47:11 +01:00
|
|
|
options: { enabled }
|
|
|
|
})
|
2022-06-09 01:47:38 +02:00
|
|
|
|
2022-12-07 23:56:00 +01:00
|
|
|
const devView = () => {
|
|
|
|
return __DEV__ ? (
|
|
|
|
<CustomText fontStyle='S' style={{ color: colors.secondary }}>{` Source: ${
|
2022-12-17 23:21:56 +01:00
|
|
|
detected?.language
|
2022-12-07 23:56:00 +01:00
|
|
|
}; Confidence: ${
|
2022-12-21 01:07:12 +01:00
|
|
|
detected?.confidence?.toString().slice(0, 5) || 'null'
|
2022-12-07 23:56:00 +01:00
|
|
|
}; Target: ${targetLanguage}`}</CustomText>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
|
2022-12-03 20:47:11 +01:00
|
|
|
if (!detectedLanguage) {
|
2022-12-07 23:56:00 +01:00
|
|
|
return devView()
|
2022-12-03 20:47:11 +01:00
|
|
|
}
|
2022-12-07 23:56:00 +01:00
|
|
|
if (
|
|
|
|
Platform.OS === 'ios' &&
|
2022-12-17 23:21:56 +01:00
|
|
|
Localization.locale.slice(0, 2).includes(detected.language.slice(0, 2))
|
2022-12-07 23:56:00 +01:00
|
|
|
) {
|
|
|
|
return devView()
|
2022-12-03 20:47:11 +01:00
|
|
|
}
|
2022-12-07 23:56:00 +01:00
|
|
|
if (
|
|
|
|
Platform.OS === 'android' &&
|
2022-12-17 23:21:56 +01:00
|
|
|
settingsLanguage?.slice(0, 2).includes(detected.language.slice(0, 2))
|
2022-12-07 23:56:00 +01:00
|
|
|
) {
|
|
|
|
return devView()
|
2022-12-03 20:47:11 +01:00
|
|
|
}
|
2022-06-10 19:41:39 +02:00
|
|
|
|
2022-12-03 20:47:11 +01:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Pressable
|
|
|
|
style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
|
|
|
paddingVertical: StyleConstants.Spacing.S,
|
|
|
|
paddingBottom: isSuccess ? 0 : undefined
|
|
|
|
}}
|
|
|
|
onPress={() => {
|
|
|
|
if (enabled) {
|
|
|
|
if (!isSuccess) {
|
|
|
|
refetch()
|
2021-05-19 23:28:01 +02:00
|
|
|
}
|
2022-12-03 20:47:11 +01:00
|
|
|
} else {
|
|
|
|
setEnabled(true)
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<CustomText
|
|
|
|
fontStyle='M'
|
|
|
|
style={{
|
2022-12-10 14:47:19 +01:00
|
|
|
color: isFetching || isSuccess ? colors.secondary : isError ? colors.red : colors.blue
|
2021-05-19 20:40:16 +02:00
|
|
|
}}
|
|
|
|
>
|
2022-12-03 20:47:11 +01:00
|
|
|
{isError
|
2022-12-23 15:53:40 +01:00
|
|
|
? t('componentTimeline:shared.translate.failed')
|
2022-12-03 20:47:11 +01:00
|
|
|
: isSuccess
|
|
|
|
? typeof data?.error === 'string'
|
2022-12-23 15:53:40 +01:00
|
|
|
? t(`componentTimeline:shared.translate.${data.error}` as any)
|
|
|
|
: t('componentTimeline:shared.translate.succeed', {
|
2022-12-03 20:47:11 +01:00
|
|
|
provider: data?.provider,
|
|
|
|
source: data?.sourceLanguage
|
|
|
|
})
|
2022-12-23 15:53:40 +01:00
|
|
|
: t('componentTimeline:shared.translate.default')}
|
2022-12-03 20:47:11 +01:00
|
|
|
</CustomText>
|
2023-01-15 20:34:22 +01:00
|
|
|
{isFetching ? <Loading style={{ marginLeft: StyleConstants.Spacing.S }} /> : null}
|
2022-12-03 20:47:11 +01:00
|
|
|
</Pressable>
|
2022-12-07 23:56:00 +01:00
|
|
|
{devView()}
|
2022-12-03 20:47:11 +01:00
|
|
|
{data && data.error === undefined
|
|
|
|
? data.text.map((d, i) => <ParseHTML key={i} content={d} size={'M'} numberOfLines={999} />)
|
|
|
|
: null}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
2021-05-19 20:40:16 +02:00
|
|
|
|
|
|
|
export default TimelineTranslate
|