feat: change target language directly in webpage

Author: geekdada

src/common/constant.ts

@@ -0,0 +1,15 @@
+export const supportedLanguages = {
+  ZH: '中文',
+  'EN-US': 'English (American)',
+  'EN-GB': 'English (British)',
+  JA: '日本語',
+  DE: 'German',
+  FR: 'French',
+  ES: 'Spanish',
+  'PT-PT': 'Portuguese',
+  'PT-BR': 'Portuguese (Brazilian)',
+  IT: 'Italian',
+  NL: 'Dutch',
+  PL: 'Polish',
+  RU: 'Russian',
+}

src/common/types.ts

@@ -1,27 +1,18 @@
+import { supportedLanguages } from './constant'
+
 export interface Config {
   token: string
-  targetLang: SupportLanguages
+  targetLang: SupportLanguageKeys
   region: APIRegions
 }
 
-export type SupportLanguages =
-  | 'ZH'
-  | 'EN'
-  | 'JA'
-  | 'DE'
-  | 'FR'
-  | 'ES'
-  | 'PT'
-  | 'IT'
-  | 'NL'
-  | 'PL'
-  | 'RU'
+export type SupportLanguageKeys = keyof typeof supportedLanguages
 
 export type APIRegions = 'default' | 'global' | 'dev'
 
 export type TranslateResult = {
   translations: Array<{
-    detected_source_language: SupportLanguages
+    detected_source_language: SupportLanguageKeys
     text: string
   }>
 }

src/pages/Content/common/types.ts

@@ -1,10 +1,10 @@
-import { SupportLanguages } from '../../../common/types'
+import { SupportLanguageKeys } from '../../../common/types'
 
 export interface TextSelection {
   text: string
   selection: RangySelection
   parentElement?: HTMLElement
-  sourceLang?: SupportLanguages
+  sourceLang?: SupportLanguageKeys
   id?: string
   anchorId?: string
 }
@@ -13,5 +13,5 @@ export interface TranslateJob {
   id: string
   anchorId: string
   text: string
-  sourceLang?: SupportLanguages
+  sourceLang?: SupportLanguageKeys
 }

src/pages/Content/common/utils.ts

@@ -1,10 +1,10 @@
-import { SupportLanguages } from '../../../common/types'
+import { SupportLanguageKeys } from '../../../common/types'
 
 export const getFirstRange = (sel: RangySelection): RangyRange | undefined => {
   return sel.rangeCount ? sel.getRangeAt(0) : undefined
 }
 
-export const getDocumentLang = (): SupportLanguages | undefined => {
+export const getDocumentLang = (): SupportLanguageKeys | undefined => {
   const html = document.querySelector('html')
 
   if (!html) return

src/pages/Content/components/TranslationItem/index.tsx

@@ -4,9 +4,10 @@ import { useSnackbar } from 'notistack'
 import { Collapse } from 'react-collapse'
 import scrollParent from 'scrollparent'
 import tw, { css } from 'twin.macro'
+import { supportedLanguages } from '../../../../common/constant'
 
 import logger from '../../../../common/logger'
-import { TranslateResult } from '../../../../common/types'
+import { SupportLanguageKeys, TranslateResult } from '../../../../common/types'
 import IconButton from '../../../../components/IconButton'
 import ArrowRight from '../../../../components/svg/ArrowRight'
 import ClipboardCopy from '../../../../components/svg/ClipboardCopy'
@@ -23,6 +24,7 @@ const TranslationItem: React.FC<{
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string>()
   const [result, setResult] = useState<string[]>()
+  const [overrideLang, setOverrideLang] = useState<string>()
   const [dirty, setDirty] = useState(0)
   const [collapse, setCollapse] = useState(true)
   const { enqueueSnackbar } = useSnackbar()
@@ -66,12 +68,16 @@ const TranslationItem: React.FC<{
   useEffect(() => {
     if (!config) return
 
+    setResult(undefined)
+    setLoading(true)
+    setError(undefined)
+
     const res = client.send(
       'translate',
       {
         text: cleanText(job.text),
         id: job.id,
-        targetLang: config.targetLang,
+        targetLang: overrideLang || config.targetLang,
       },
       true,
     ) as Promise<TranslateResult>
@@ -89,6 +95,7 @@ const TranslationItem: React.FC<{
           result.push(...item.text.split('\n'))
         })
 
+        setError(undefined)
         setResult(result)
         setLoading(false)
       })
@@ -102,7 +109,7 @@ const TranslationItem: React.FC<{
         setLoading(false)
         enqueueSnackbar(`翻译失败：${err.message}`, { variant: 'error' })
       })
-  }, [job, config, enqueueSnackbar, dirty])
+  }, [job, config, enqueueSnackbar, dirty, overrideLang])
 
   return (
     <div tw="p-3 text-gray-800 space-y-3 select-text">
@@ -131,19 +138,19 @@ const TranslationItem: React.FC<{
           </Collapse>
         </div>
 
-        {loading ? (
-          <div tw="rounded bg-yellow-50 p-3 space-y-2 leading-normal">
-            翻译中…
-          </div>
-        ) : undefined}
+        <div tw="rounded bg-yellow-50 p-3 space-y-2 leading-normal">
+          {error ? <span>{error}</span> : undefined}
 
-        {result ? (
-          <div tw="rounded bg-yellow-50 p-3 space-y-2 leading-normal">
-            {result.map((item, index) => (
-              <div key={index}>{item}</div>
-            ))}
-          </div>
-        ) : undefined}
+          {loading ? <span>{'翻译中…'}</span> : undefined}
+
+          {result ? (
+            <>
+              {result.map((item, index) => (
+                <div key={index}>{item}</div>
+              ))}
+            </>
+          ) : undefined}
+        </div>
       </div>
       <div
         css={[
@@ -154,12 +161,34 @@ const TranslationItem: React.FC<{
             }
           `,
         ]}>
-        <div>
+        <div
+          tw="flex items-center space-x-3"
+          css={css`
+            height: 35px;
+          `}>
           {job.sourceLang && (
-            <div tw="px-2 py-1 bg-green-50 text-green-600 text-sm rounded">
+            <div tw="px-3 py-0 h-full flex items-center bg-green-50 text-green-600 text-sm rounded">
               {job.sourceLang}
             </div>
           )}
+          <div tw="h-full">
+            {config ? (
+              <select
+                tw="px-2 py-0 h-full rounded-md truncate border-none bg-blue-50 text-gray-800"
+                css={css`
+                  width: 100px;
+                `}
+                name="target-lang"
+                value={overrideLang || config.targetLang}
+                onChange={(e) => setOverrideLang(e.target.value)}>
+                {Object.keys(supportedLanguages).map((lang, index) => (
+                  <option value={lang} key={index}>
+                    {supportedLanguages[lang as SupportLanguageKeys]}
+                  </option>
+                ))}
+              </select>
+            ) : undefined}
+          </div>
         </div>
         <div>
           {result ? (

src/pages/Content/providers/config.tsx

@@ -1,9 +1,9 @@
 import React, { createContext, useContext } from 'react'
 
-import { SupportLanguages } from '../../../common/types'
+import { SupportLanguageKeys } from '../../../common/types'
 
 export type ConfigState = {
-  targetLang: SupportLanguages
+  targetLang: SupportLanguageKeys
 }
 
 export const ConfigContext = createContext<ConfigState | undefined>(undefined)

src/pages/Options/Options.tsx

@@ -9,7 +9,8 @@ import { Global } from '@emotion/react'
 import cc from 'chrome-call'
 
 import Client from '../../common/api'
-import { APIRegions, Config } from '../../common/types'
+import { supportedLanguages } from '../../common/constant'
+import { APIRegions, Config, SupportLanguageKeys } from '../../common/types'
 
 import OptionSection from './components/OptionSection'
 
@@ -96,19 +97,11 @@ const Options: React.FC = () => {
                 name="target-lang"
                 value={targetLang}
                 onChange={(e) => setTargetLang(e.target.value)}>
-                <option value="ZH">中文</option>
-                <option value="EN-US">English (American)</option>
-                <option value="EN-GB">English (British)</option>
-                <option value="JA">日本語</option>
-                <option value="DE">German</option>
-                <option value="FR">French</option>
-                <option value="ES">Spanish</option>
-                <option value="PT-PT">Portuguese</option>
-                <option value="PT-BR">Portuguese (Brazilian)</option>
-                <option value="IT">Italian</option>
-                <option value="NL">Dutch</option>
-                <option value="PL">Polish</option>
-                <option value="RU">Russian</option>
+                {Object.keys(supportedLanguages).map((lang, index) => (
+                  <option value={lang} key={index}>
+                    {supportedLanguages[lang as SupportLanguageKeys]}
+                  </option>
+                ))}
               </select>
             </OptionSection>