From 50c8e149c65465d60d26b8066c0757518a9415b3 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Thu, 9 Jun 2022 01:47:38 +0200
Subject: [PATCH] Prefer local language detection

---
 ios/Podfile.lock                             |  6 +++
 package.json                                 |  1 +
 src/components/Timeline/Shared/Translate.tsx | 41 +++++++++++++-------
 yarn.lock                                    |  5 +++
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 3b78bd9f..aa187b13 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -408,6 +408,8 @@ PODS:
     - React-Core
   - react-native-context-menu-view (1.5.4):
     - React
+  - react-native-language-detection (0.1.0):
+    - React
   - react-native-netinfo (9.0.0):
     - React-Core
   - react-native-pager-view (5.4.11):
@@ -640,6 +642,7 @@ DEPENDENCIES:
   - react-native-blurhash (from `../node_modules/react-native-blurhash`)
   - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
   - react-native-context-menu-view (from `../node_modules/react-native-context-menu-view`)
+  - react-native-language-detection (from `../node_modules/react-native-language-detection`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - "react-native-paste-input (from `../node_modules/@mattermost/react-native-paste-input`)"
@@ -794,6 +797,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/cameraroll"
   react-native-context-menu-view:
     :path: "../node_modules/react-native-context-menu-view"
+  react-native-language-detection:
+    :path: "../node_modules/react-native-language-detection"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-pager-view:
@@ -916,6 +921,7 @@ SPEC CHECKSUMS:
   react-native-blurhash: add4df9a937b4e021a24bc67a0714f13e0bd40b7
   react-native-cameraroll: 2957f2bce63ae896a848fbe0d5352c1bd4d20866
   react-native-context-menu-view: b0beca02aad4bd9f9d7d932bf437e0a03baa69ef
+  react-native-language-detection: 0e43195ad014974f1b7a31b64820eff34a243f2d
   react-native-netinfo: 5b664b2945a8f02102b296f0f812bddd6827ed9c
   react-native-pager-view: 7f00d63688f7df9fad86dfb0154814419cc5eb8d
   react-native-paste-input: efbf0b08fa1673f0e3131da6ea01678c1bb8003e
diff --git a/package.json b/package.json
index cb99f682..28035f02 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "react-native-gesture-handler": "2.4.2",
     "react-native-htmlview": "0.16.0",
     "react-native-image-crop-picker": "^0.37.3",
+    "react-native-language-detection": "^0.1.0",
     "react-native-pager-view": "5.4.11",
     "react-native-reanimated": "2.8.0",
     "react-native-safe-area-context": "4.3.1",
diff --git a/src/components/Timeline/Shared/Translate.tsx b/src/components/Timeline/Shared/Translate.tsx
index d2361aef..eaa48c86 100644
--- a/src/components/Timeline/Shared/Translate.tsx
+++ b/src/components/Timeline/Shared/Translate.tsx
@@ -6,10 +6,11 @@ import { getSettingsLanguage } from '@utils/slices/settingsSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import * as Localization from 'expo-localization'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
+import detectLanguage from 'react-native-language-detection'
 import { useSelector } from 'react-redux'
 
 export interface Props {
@@ -32,17 +33,6 @@ const TimelineTranslate = React.memo(
     const { t } = useTranslation('componentTimeline')
     const { colors } = useTheme()
 
-    const tootLanguage = status.language.slice(0, 2)
-
-    const settingsLanguage = useSelector(getSettingsLanguage)
-
-    if (Localization.locale.includes(tootLanguage)) {
-      return null
-    }
-    if (settingsLanguage?.includes(tootLanguage)) {
-      return null
-    }
-
     let text = status.spoiler_text
       ? [status.spoiler_text, status.content]
       : [status.content]
@@ -53,14 +43,39 @@ const TimelineTranslate = React.memo(
       }
     }
 
+    const [detectedLanguage, setDetectedLanguage] = useState<string>('')
+    useEffect(() => {
+      if (!status.language) {
+        return
+      }
+
+      const detect = async () => {
+        const result = await detectLanguage(text.join(`\n`))
+        setDetectedLanguage(result.detected.slice(0, 2))
+      }
+      detect()
+    }, [])
+
+    const settingsLanguage = useSelector(getSettingsLanguage)
+
     const [enabled, setEnabled] = useState(false)
     const { refetch, data, isLoading, isSuccess, isError } = useTranslateQuery({
-      source: status.language,
+      source: detectedLanguage,
       target: Localization.locale || settingsLanguage || 'en',
       text,
       options: { enabled }
     })
 
+    if (!detectedLanguage) {
+      return null
+    }
+    if (Localization.locale.includes(detectedLanguage)) {
+      return null
+    }
+    if (settingsLanguage?.includes(detectedLanguage)) {
+      return null
+    }
+
     return (
       <>
         <Pressable
diff --git a/yarn.lock b/yarn.lock
index ce36e222..54a33b2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7531,6 +7531,11 @@ react-native-iphone-x-helper@^1.3.1:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
+react-native-language-detection@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-language-detection/-/react-native-language-detection-0.1.0.tgz#06b5d20bffb60dbbd599c8e62b6acf500952afa8"
+  integrity sha512-26CLndVMmMbVp40Y9Herza73nfR08JFTcYkJ3MX5MIQbGRoqgNAG89z8pA1y7dPHHK1Nfa6AWKAYpNv7tMRCaw==
+
 react-native-pager-view@5.4.11:
   version "5.4.11"
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.4.11.tgz#677540293c7b4e0e022efb45727ef9b4efa35409"