Fixed #529

src/components/Timeline/Shared/Translate.tsx

@@ -1,5 +1,6 @@
 import { ParseHTML } from '@components/Parse'
 import CustomText from '@components/Text'
+import detectLanguage from '@helpers/detectLanguage'
 import getLanguage from '@helpers/getLanguage'
 import { useTranslateQuery } from '@utils/queryHooks/translate'
 import { StyleConstants } from '@utils/styles/constants'
@@ -7,38 +8,44 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import * as Localization from 'expo-localization'
 import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable } from 'react-native'
+import { Platform, Pressable } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
-import detectLanguage from 'react-native-language-detection'
 import StatusContext from './Context'
 
 const TimelineTranslate = () => {
-  const { status, highlighted } = useContext(StatusContext)
+  const { status, highlighted, copiableContent } = useContext(StatusContext)
   if (!status || !highlighted) return null
 
   const { t } = useTranslation('componentTimeline')
   const { colors } = useTheme()
 
-  const text = status.spoiler_text ? [status.spoiler_text, status.content] : [status.content]
+  const backupTextProcessing = (): string[] => {
+    const text = status.spoiler_text ? [status.spoiler_text, status.content] : [status.content]
 
-  for (const i in text) {
-    for (const emoji of status.emojis) {
-      text[i] = text[i].replaceAll(`:${emoji.shortcode}:`, ' ')
+    for (const i in text) {
+      for (const emoji of status.emojis) {
+        text[i] = text[i].replaceAll(`:${emoji.shortcode}:`, ' ')
+      }
+      text[i] = text[i]
+        .replace(/(<([^>]+)>)/gi, ' ')
+        .replace(/@.*? /gi, ' ')
+        .replace(/#.*? /gi, ' ')
+        .replace(/http(s):\/\/.*? /gi, ' ')
     }
-    text[i] = text[i]
-      .replace(/(<([^>]+)>)/gi, ' ')
-      .replace(/@.*? /gi, ' ')
-      .replace(/#.*? /gi, ' ')
-      .replace(/http(s):\/\/.*? /gi, ' ')
+    return text
   }
+  const text = copiableContent?.current.content
+    ? [copiableContent?.current.content]
+    : backupTextProcessing()
 
-  const [detectedLanguage, setDetectedLanguage] = useState<string>('')
+  const [detectedLanguage, setDetectedLanguage] = useState<{
+    language: string
+    confidence: number
+  }>({ language: status.language || '', confidence: 0 })
   useEffect(() => {
     const detect = async () => {
-      const result = await detectLanguage(text.join(`\n\n`)).catch(() => {
-        // No need to log language detection failure
-      })
-      result?.detected && setDetectedLanguage(result.detected.slice(0, 2))
+      const result = await detectLanguage(text.join('\n\n'))
+      result && setDetectedLanguage(result)
     }
     detect()
   }, [])
@@ -50,20 +57,36 @@ const TimelineTranslate = () => {
 
   const [enabled, setEnabled] = useState(false)
   const { refetch, data, isLoading, isSuccess, isError } = useTranslateQuery({
-    source: detectedLanguage,
+    source: detectedLanguage.language,
     target: targetLanguage,
     text,
     options: { enabled }
   })
 
+  const devView = () => {
+    return __DEV__ ? (
+      <CustomText fontStyle='S' style={{ color: colors.secondary }}>{` Source: ${
+        detectedLanguage?.language
+      }; Confidence: ${
+        detectedLanguage?.confidence.toString().slice(0, 5) || 'null'
+      }; Target: ${targetLanguage}`}</CustomText>
+    ) : null
+  }
+
   if (!detectedLanguage) {
-    return null
+    return devView()
   }
-  if (Localization.locale.slice(0, 2).includes(detectedLanguage)) {
-    return null
+  if (
+    Platform.OS === 'ios' &&
+    Localization.locale.slice(0, 2).includes(detectedLanguage.language.slice(0, 2))
+  ) {
+    return devView()
   }
-  if (settingsLanguage?.slice(0, 2).includes(detectedLanguage)) {
-    return null
+  if (
+    Platform.OS === 'android' &&
+    settingsLanguage?.slice(0, 2).includes(detectedLanguage.language.slice(0, 2))
+  ) {
+    return devView()
   }
 
   return (
@@ -102,9 +125,6 @@ const TimelineTranslate = () => {
                 })
             : t('shared.translate.default')}
         </CustomText>
-        <CustomText>
-          {__DEV__ ? ` Source: ${detectedLanguage}; Target: ${targetLanguage}` : undefined}
-        </CustomText>
         {isLoading ? (
           <Circle
             size={StyleConstants.Font.Size.M}
@@ -113,6 +133,7 @@ const TimelineTranslate = () => {
           />
         ) : null}
       </Pressable>
+      {devView()}
       {data && data.error === undefined
         ? data.text.map((d, i) => <ParseHTML key={i} content={d} size={'M'} numberOfLines={999} />)
         : null}