add: custom translate source

Users can add custom sources to translate their selected text now.
chunibyocola · Nov 29, 2021 · 5579df6 · 5579df6
1 parent 8766291
commit 5579df6
Show file tree

Hide file tree

Showing 28 changed files with 553 additions and 78 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -368,6 +368,18 @@
     "optionsMultipleTranslateSourceListDescription": {
         "message": "The source you check will be displayed in panel by default. The order of the sources is related to the order in which you checked."
     },
+    "optionsCustomTranslateSource": {
+        "message": "Custom translate source"
+    },
+    "optionsCustomTranslateSourceDescription": {
+        "message": "You can add custom translate sources which built by yourself or others."
+    },
+    "optionsCustomTranslateSourceLearn": {
+        "message": "Learn more about custom translate source."
+    },
+    "optionsURLCanNotBeEmpty": {
+        "message": "URL can not be empty."
+    },
     "themePreset": {
         "message": "Preset"
     },
@@ -452,6 +464,9 @@
     "wordRelated": {
         "message": "Related"
     },
+    "wordName": {
+        "message": "Name"
+    },
     "sentenceAddTranslateSource": {
         "message": "Please add a translate source."
     },

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -368,6 +368,18 @@
     "optionsMultipleTranslateSourceListDescription": {
         "message": "チェックしたソースは、デフォルトでパネルに表示されます。ソースの順序は、チェックした順序に関連しています。"
     },
+    "optionsCustomTranslateSource": {
+        "message": "カスタム翻訳ソース"
+    },
+    "optionsCustomTranslateSourceDescription": {
+        "message": "自分や他の人が作成したカスタム翻訳ソースを追加できます。"
+    },
+    "optionsCustomTranslateSourceLearn": {
+        "message": "カスタム翻訳ソースをもっと知る。"
+    },
+    "optionsURLCanNotBeEmpty": {
+        "message": "URLを空にすることはできません。"
+    },
     "themePreset": {
         "message": "プリセット"
     },
@@ -452,6 +464,9 @@
     "wordRelated": {
         "message": "関連"
     },
+    "wordName": {
+        "message": "名称"
+    },
     "sentenceAddTranslateSource": {
         "message": "翻訳ソースを追加してください。"
     },

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -368,6 +368,18 @@
     "optionsMultipleTranslateSourceListDescription": {
         "message": "你勾选的源将默认被展示在面板中。源的顺序与你勾选的顺序相关。"
     },
+    "optionsCustomTranslateSource": {
+        "message": "自定义翻译源"
+    },
+    "optionsCustomTranslateSourceDescription": {
+        "message": "你可以添加自己或是其他人构造的自定义翻译源。"
+    },
+    "optionsCustomTranslateSourceLearn": {
+        "message": "深入了解自定义翻译源。"
+    },
+    "optionsURLCanNotBeEmpty": {
+        "message": "URL 不能为空。"
+    },
     "themePreset": {
         "message": "预设"
     },
@@ -452,6 +464,9 @@
     "wordRelated": {
         "message": "相关"
     },
+    "wordName": {
+        "message": "名称"
+    },
     "sentenceAddTranslateSource": {
         "message": "请添加翻译源。"
     },

diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -368,6 +368,18 @@
     "optionsMultipleTranslateSourceListDescription": {
         "message": "你勾選的源將默認被展示在面板中。源的順序與你勾選的順序相關。"
     },
+    "optionsCustomTranslateSource": {
+        "message": "自定義翻譯源"
+    },
+    "optionsCustomTranslateSourceDescription": {
+        "message": "你可以添加自己或是其他人構造的自定義翻譯源。"
+    },
+    "optionsCustomTranslateSourceLearn": {
+        "message": "深入瞭解自定義翻譯源。"
+    },
+    "optionsURLCanNotBeEmpty": {
+        "message": "URL 不能為空。"
+    },
     "themePreset": {
         "message": "預設"
     },
@@ -452,6 +464,9 @@
     "wordRelated": {
         "message": "相關"
     },
+    "wordName": {
+        "message": "名稱"
+    },
     "sentenceAddTranslateSource": {
         "message": "請添加翻譯源。"
     },

diff --git a/src/components/MtAddSource/SourceSelector/index.tsx b/src/components/MtAddSource/SourceSelector/index.tsx
@@ -4,6 +4,7 @@ import { TranslateSource, translateSource } from '../../../constants/translateSo
 import SourceFavicon from '../../SourceFavicon';
 import './style.css';
 import { Translation } from '../../../redux/slice/multipleTranslateSlice';
+import { getOptions } from '../../../public/options';
 
 type SourceSelectorProps = {
     show: boolean;
@@ -26,7 +27,7 @@ const SourceSelector: React.FC<SourceSelectorProps> = ({ show, hideCallback, tra
     }, [addSource, hideCallback]);
 
     useEffect(() => {
-        setSourceList(translateSource.filter(v => translations.findIndex(v1 => v1.source === v.source) < 0));
+        setSourceList(translateSource.concat(getOptions().customTranslateSourceList).filter(v => translations.findIndex(v1 => v1.source === v.source) < 0));
     }, [translations]);
 
     return (

diff --git a/src/components/MtResult/index.tsx b/src/components/MtResult/index.tsx
@@ -24,8 +24,8 @@ const MtResult: React.FC<MtResultProps> = ({ source, translateRequest, remove, r
                 className='mt-result__head button flex-justify-content-space-between'
                 onClick={() => setFold(!fold)}
             >
-                <span className='flex-align-items-center'>
-                    <SourceFavicon source={source} />
+                <span className='mt-result__head__left'>
+                    <SourceFavicon source={source} className='mt-result__head__badge' />
                     {translateRequest.status === 'loading' && <IconsLoadingSkeleton />}
                     {translateRequest.status === 'finished' && <>
                         <IconFont

diff --git a/src/components/MtResult/style.css b/src/components/MtResult/style.css
@@ -11,6 +11,16 @@
     color: var(--text-normal);
     font-size: 14px;
 }
+.mt-result__head__left {
+    display: grid;
+    grid-template-columns: auto max-content max-content;
+    align-items: center;
+}
 .mt-result__head-icons {
     margin-right: 5px;
+}
+.mt-result__head__badge {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
diff --git a/src/components/SourceFavicon/index.tsx b/src/components/SourceFavicon/index.tsx
@@ -6,44 +6,43 @@ import mojidict from './favicons/mojidict.png';
 import baidu from './favicons/baidu.png';
 import microsoft from './favicons/microsofttranslator.png';
 import './style.css';
+import { getOptions } from '../../public/options';
 
 type SourceFaviconProps = {
     source: string;
-};
+} & Pick<React.HtmlHTMLAttributes<HTMLSpanElement>, 'className'>;
 
-const SourceFavicon: React.FC<SourceFaviconProps> = ({ source }) => {
+const SourceFavicon: React.FC<SourceFaviconProps> = ({ source, className }) => {
     return (
-        <>
-            <img
-                className='favicon'
-                src={getFavicon(source)}
-                alt='favicon'
-            />
+        <span className={className}>
+            {getFavicon(source)}
             {getName(source)}
-        </>
+        </span>
     );
 };
 
 const getFavicon = (source: string) => {
     switch (source) {
-        case GOOGLE_COM: return google;
-        case BING_COM: return bing;
-        case MOJIDICT_COM: return mojidict;
-        case BAIDU_COM: return baidu;
-        case MICROSOFT_COM: return microsoft;
-        default: return;
+        case GOOGLE_COM: return FaviconImg(google);
+        case BING_COM: return FaviconImg(bing);
+        case MOJIDICT_COM: return FaviconImg(mojidict);
+        case BAIDU_COM: return FaviconImg(baidu);
+        case MICROSOFT_COM: return FaviconImg(microsoft);
+        default: return (<div className='favicon favicon--mock'>{(getOptions().customTranslateSourceList.find(v => v.source === source)?.name ?? source)[0]}</div>);
     }
 };
 
+const FaviconImg = (src: string) => (<img className='favicon' src={src} alt='favicon' />);
+
 const getName = (source: string) => {
     switch (source) {
         case GOOGLE_COM: return 'Google';
         case BING_COM: return 'Bing';
         case MOJIDICT_COM: return 'Mojidict';
         case BAIDU_COM: return 'Baidu';
         case MICROSOFT_COM: return 'Microsoft';
-        default: return;
+        default: return getOptions().customTranslateSourceList.find(v => v.source === source)?.name ?? source;
     }
-}
+};
 
 export default SourceFavicon;
diff --git a/src/components/SourceFavicon/style.css b/src/components/SourceFavicon/style.css
@@ -6,4 +6,13 @@
     padding: 0;
     width: 20px;
     height: 20px;
+}
+.favicon--mock {
+    justify-content: center;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 5px;
+    color: #fff;
+    background: #999;
+    font-weight: bold;
 }
diff --git a/src/components/TsHistory/HistoryResultPanel/index.tsx b/src/components/TsHistory/HistoryResultPanel/index.tsx
@@ -34,9 +34,9 @@ const HistoryResultPanel: React.FC<HistoryResultPanelProps> = ({ translations, t
                 ref={panelEle}
             >
                 {translations.map(({ source, translateRequest }) => (<div className='mt-result' key={source}>
-                    <div className='mt-result__head'>
-                        <span className='flex-align-items-center'>
-                            <SourceFavicon source={source} />
+                    <div className='mt-result__head flex-justify-content-space-between'>
+                        <span className='mt-result__head__left'>
+                            <SourceFavicon source={source} className='mt-result__head__badge' />
                             {translateRequest.status === 'finished' && <>
                                 <IconFont
                                     className='iconbutton button'

diff --git a/src/components/TsVia/index.tsx b/src/components/TsVia/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import SourceSelect from '../SourceSelect';
 import { translateSource } from '../../constants/translateSource';
 import './style.css';
+import { getOptions } from '../../public/options';
 
 type TsViaProps = {
     sourceChange: (source: string) => void;
@@ -17,7 +18,7 @@ const TsVia: React.FC<TsViaProps> = ({ sourceChange, source, disableSourceChange
                 <span className='via__content-pre'>via</span>
                 <SourceSelect
                     source={source}
-                    sourceList={translateSource}
+                    sourceList={translateSource.concat(getOptions().customTranslateSourceList)}
                     onChange={sourceChange}
                     className='via__content-select'
                     disabled={disableSourceChange}

diff --git a/src/constants/defaultOptions.ts b/src/constants/defaultOptions.ts
@@ -65,7 +65,8 @@ const defaultOptions: DefaultOptions = {
     noControlBarWhileFirstActivating: false,
     afterSelectingTextRegExpList: [],
     translateButtonsTL: { first: '', second: LANG_EN, third: LANG_EN },
-    sourceParamsCache: initSourceParams
+    sourceParamsCache: initSourceParams,
+    customTranslateSourceList: []
 };
 
 export default defaultOptions;
diff --git a/src/constants/translateSource.ts b/src/constants/translateSource.ts
@@ -7,6 +7,7 @@ export const MICROSOFT_COM = 'microsofttranslator.com';
 export type TranslateSource = {
     source: string;
     url: string;
+    name?: string;
 };
 
 export const translateSource: TranslateSource[] = [

diff --git a/src/entry/content/SingleTranslateResult/index.tsx b/src/entry/content/SingleTranslateResult/index.tsx
@@ -3,7 +3,7 @@ import { sendTranslate } from '../../../public/send';
 import TsResult from '../../../components/TsResult';
 import LanguageSelection from '../../../components/LanguageSelection';
 import RawText from '../../../components/RawText';
-import { langCode } from '../../../constants/langCode';
+import { googleLangCode, langCode } from '../../../constants/langCode';
 import TsVia from '../../../components/TsVia';
 import { switchTranslateSource } from '../../../public/switch-translate-source';
 import { useAppDispatch, useAppSelector, useInsertResult, useIsEnable } from '../../../public/react-use';
@@ -110,7 +110,7 @@ const SingleTranslateResult: React.FC<SingleTranslateResultProps> = ({ showRtAnd
                     onChange={handleSelectionChange}
                     from={from}
                     to={to}
-                    languageCodes={langCode[source]}
+                    languageCodes={langCode[source] ?? googleLangCode}
                 />
             </div>
             <div className='single-result scrollbar' style={{maxHeight: `${resultMaxHeight}px`}} ref={resultContainerEle}>