feat: refactor the filename; add setting to change translator provider

src/components/SettingsModal.tsx

@@ -3,15 +3,15 @@ import React, { useEffect, useState } from 'react'
 import SwitchButton from './SwitchButton'
 import { supportedLanguages } from '@translate-tools/core/translators/GoogleTranslator'
 import { TranslateSettingModel } from '@/models/TranslateSettingModel'
-import { settingService } from '@/services/setting.service'
+import { TranslatorProvider, settingService } from '@/services/setting.service'
 import { KuroshiroMode, KuroshiroSettingModel, KuroshiroTo } from '@/models/KuroshiroSettingModel'
 
 export default function SettingModal() {
-  const [translate, setTranslate] = useState<TranslateSettingModel>(settingService.getGoogleTranslateSetting())
+  const [translate, setTranslate] = useState<TranslateSettingModel>(settingService.getTranslatorSetting())
   const [kuroshiro, setKuroshiro] = useState<KuroshiroSettingModel>(settingService.getKuroshiroSetting())
 
   useEffect(() => {
-    settingService.setGoogleTranslateSetting(translate)
+    settingService.setTranslatorSetting(translate)
   }, [translate])
 
   useEffect(() => {
@@ -30,7 +30,7 @@ export default function SettingModal() {
               defaultChecked={translate.active}
             />
           </div>
-          <p className="description">Enable the google translator</p>
+          <p className="description">Enable the translator</p>
         </div>
         {translate.active && (
           <div className="translate-child">
@@ -50,6 +50,22 @@ export default function SettingModal() {
                 </select>
               </div>
             </div>
+            <div className="card child">
+              <div className='input'>
+                <div className="title">Translator Provider</div>
+                <select
+                  className="input-field"
+                  onChange={(e) => setTranslate((data) => ({ ...data, provider: e.target.value as `${TranslatorProvider}` }))}
+                >
+                  {Object.values(TranslatorProvider).map((provider) =>
+                    <option
+                      value={provider}
+                      key={provider}
+                      selected={provider === translate.provider}>{provider}</option>
+                  )}
+                </select>
+              </div>
+            </div>
             <div className="card child">
               <div className='input'>
                 <div className="title">CORS Proxy</div>
@@ -59,7 +75,7 @@ export default function SettingModal() {
                   defaultValue={translate.corsProxy ?? ''}
                 />
               </div>
-              <p className="description">Must be filled, Google Translate API blocked by CORS if not have proxy.<a href='https://github.com/Richie-Z/romajin/issues/1#issuecomment-2017152225'> Read this issue </a></p>
+              <p className="description">Must be filled, Accessing the Translate API is blocked by CORS if not accessing through a proxy.<a href='https://github.com/Richie-Z/romajin/issues/1#issuecomment-2017152225'> Read this issue </a></p>
             </div>
           </div>
         )}

src/models/TranslateSettingModel.ts

@@ -1,5 +1,8 @@
+import { TranslatorProvider } from "@/services/setting.service"
+
 export type TranslateSettingModel = {
   active: boolean
   targetLanguage: string
-  corsProxy: string
+  corsProxy: string,
+  provider: `${TranslatorProvider}`
 }

src/services/romajin.service.ts

@@ -1,6 +1,6 @@
 import { checkDomExists, createElement, getContextText, getElement, isJapanese } from "@/utils";
 import { kuroshiroService } from "./kuroshiro.service";
-import { googleTranslatorService } from "./googleTranslator.service";
+import { translatorService } from "./translator.service";
 import { settingService } from "./setting.service";
 import { TRANSLATE_ICON } from "@/constants/TRANSLATE_ICON";
 import ContextNotification from "@/components/ContextNotification";
@@ -43,10 +43,10 @@ export class RomajinService {
       const oriLyric = this.originalLyric.split('\n')[i]
       const oriLyricBox = createElement({ className: 'lyrics-lyricsContent-text' }); oriLyricBox.textContent = oriLyric;
 
-      if (settingService.getGoogleTranslateSetting().active) {
+      if (settingService.getTranslatorSetting().active) {
         (async () => {
           if (oriLyric === " ♪ " || oriLyric.length === 0 || !isJapanese(oriLyric)) return
-          const translated = await googleTranslatorService.translate(oriLyric)
+          const translated = await translatorService.translate(oriLyric)
           let englishLyricBox = createElement({ className: 'lyrics-lyricsContent-text sub english' }); englishLyricBox.textContent = translated
           val.insertBefore(englishLyricBox, oriLyricBox)
         })()
@@ -66,12 +66,12 @@ export class RomajinService {
     await kuroshiroService.init()
     this.initContextMenu()
     let isAlreadyTranslated = false;
-    let translateSetting = settingService.getGoogleTranslateSetting();
+    let translateSetting = settingService.getTranslatorSetting();
     let kuroshiroSetting = settingService.getKuroshiroSetting();
     let isSettingChanged = false;
 
     setInterval(() => {
-      if (JSON.stringify(translateSetting) !== JSON.stringify(settingService.getGoogleTranslateSetting()) ||
+      if (JSON.stringify(translateSetting) !== JSON.stringify(settingService.getTranslatorSetting()) ||
         JSON.stringify(kuroshiroSetting) !== JSON.stringify(settingService.getKuroshiroSetting())
       ) {
         isSettingChanged = true
@@ -83,7 +83,7 @@ export class RomajinService {
         romajinService.renderLyric()
       })
       if (isSettingChanged) {
-        translateSetting = settingService.getGoogleTranslateSetting();
+        translateSetting = settingService.getTranslatorSetting();
         kuroshiroSetting = settingService.getKuroshiroSetting();
         isSettingChanged = false;
       }
@@ -105,7 +105,7 @@ export class RomajinService {
         Spicetify.showNotification(React.createElement(ContextNotification, {
           ori: selectedText,
           romaji: await kuroshiroService.convert(selectedText),
-          translated: settingService.getGoogleTranslateSetting().active ? await googleTranslatorService.translate(selectedText) : undefined
+          translated: settingService.getTranslatorSetting().active ? await translatorService.translate(selectedText) : undefined
         }) as any, false, 3500)
       },
       () => {

src/services/setting.service.ts

@@ -1,10 +1,16 @@
 import { KuroshiroSettingModel } from "@/models/KuroshiroSettingModel";
 import { TranslateSettingModel } from "@/models/TranslateSettingModel"
 
-const DEFAULT_GOOGLE_TRANSLATE_SETTING: TranslateSettingModel = {
+export enum TranslatorProvider {
+  GOOGLE = "google",
+  YANDEX = "yandex"
+}
+
+const DEFAULT_TRANSLATOR_SETTING: TranslateSettingModel = {
   active: true,
   targetLanguage: 'en',
-  corsProxy: ''
+  corsProxy: '',
+  provider: TranslatorProvider.GOOGLE
 }
 
 const DEFAULT_KUROSHIRO_SETTING: KuroshiroSettingModel = {
@@ -13,16 +19,16 @@ const DEFAULT_KUROSHIRO_SETTING: KuroshiroSettingModel = {
 }
 
 export class SettingService {
-  private readonly googleTranslateSettingKey: string = "romajin:google_translate"
+  private readonly translatorSettingKey: string = "romajin:translator"
   private readonly kuroshiroSettingKey: string = "romajin:kuroshiro"
 
-  public getGoogleTranslateSetting(): TranslateSettingModel {
-    const localData = localStorage.getItem(this.googleTranslateSettingKey);
-    return localData ? JSON.parse(localData) : DEFAULT_GOOGLE_TRANSLATE_SETTING
+  public getTranslatorSetting(): TranslateSettingModel {
+    const localData = localStorage.getItem(this.translatorSettingKey);
+    return localData ? JSON.parse(localData) : DEFAULT_TRANSLATOR_SETTING
   }
 
-  public setGoogleTranslateSetting(setting: TranslateSettingModel) {
-    localStorage.setItem(this.googleTranslateSettingKey, JSON.stringify(setting))
+  public setTranslatorSetting(setting: TranslateSettingModel) {
+    localStorage.setItem(this.translatorSettingKey, JSON.stringify(setting))
   }
 
   public getKuroshiroSetting(): KuroshiroSettingModel {

src/services/translator.service.ts

@@ -0,0 +1,24 @@
+import { GoogleTranslator } from "@translate-tools/core/translators/GoogleTranslator";
+import { YandexTranslator } from "@translate-tools/core/translators/YandexTranslator";
+import { TranslatorProvider, settingService } from "./setting.service";
+import { BaseTranslator } from "@translate-tools/core/translators/BaseTranslator";
+
+export class TranslatorService {
+
+  /**
+   * Translates the input text from Japanese to the target language using Google Translate | Yandex.
+   * @param {string} text - The text to be translated.
+   */
+  public async translate(text: string): Promise<string> {
+    const options = {
+      corsProxy: settingService.getTranslatorSetting().corsProxy,
+    }
+    const translator: BaseTranslator = settingService.getTranslatorSetting().provider === TranslatorProvider.GOOGLE
+      ? new GoogleTranslator(options)
+      : new YandexTranslator(options);
+    const res = await translator.translate(text, "ja", settingService.getTranslatorSetting().targetLanguage);
+    return res;
+  }
+}
+
+export const translatorService = new TranslatorService()

tsconfig.json

@@ -31,9 +31,6 @@
       "./node_modules/@types",
       "./src/types"
     ],
-    "types": [
-      "google-translate-api-browser"
-    ]
   },
   "include": [
     "./src/**/*.*"