Refactor Translations

src/modules/preferences.ts

@@ -1,5 +1,5 @@
 import { CE } from "../utils/html";
-import { t } from "./translation";
+import { SUPPORTED_LANGUAGES, t } from "./translation";
 import { SettingElement, SettingElementType } from "./settings";
 import { UserAgentProfile } from "../utils/user-agent";
 import { StreamStat } from "./stream/stream-stats";
@@ -100,23 +100,7 @@ export class Preferences {
         [PrefKey.BETTER_XCLOUD_LOCALE]: {
             label: t('language'),
             default: localStorage.getItem('better_xcloud_locale') || 'en-US',
-            options: {
+            options: SUPPORTED_LANGUAGES,
-                'en-ID': 'Bahasa Indonesia',
-                'de-DE': 'Deutsch',
-                'en-US': 'English (United States)',
-                'es-ES': 'español (España)',
-                'fr-FR': 'français',
-                'it-IT': 'italiano',
-                'ja-JP': '日本語',
-                'ko-KR': '한국어',
-                'pl-PL': 'polski',
-                'pt-BR': 'português (Brasil)',
-                'ru-RU': 'русский',
-                'tr-TR': 'Türkçe',
-                'uk-UA': 'українська',
-                'vi-VN': 'Tiếng Việt',
-                'zh-CN': '中文(简体)',
-            },
         },
         [PrefKey.SERVER_REGION]: {
             label: t('region'),

src/modules/translation.ts

@@ -1,48 +1,22 @@
-import { LOCALE } from "../utils/global";
+export const SUPPORTED_LANGUAGES = {
-
+    'en-ID': 'Bahasa Indonesia',
-const Translations = {
+    'de-DE': 'Deutsch',
-    enUS: -1,
+    'en-US': 'English (United States)',
-
+    'es-ES': 'español (España)',
-    getLocale: () => {
+    'fr-FR': 'français',
-        const supportedLocales = [
+    'it-IT': 'italiano',
-            'de-DE',
+    'ja-JP': '日本語',
-            'en-ID',
+    'ko-KR': '한국어',
-            'en-US',
+    'pl-PL': 'polski',
-            'es-ES',
+    'pt-BR': 'português (Brasil)',
-            'fr-FR',
+    'ru-RU': 'русский',
-            'it-IT',
+    'tr-TR': 'Türkçe',
-            'ja-JP',
+    'uk-UA': 'українська',
-            'ko-KR',
+    'vi-VN': 'Tiếng Việt',
-            'pl-PL',
+    'zh-CN': '中文(简体)',
-            'pt-BR',
+};
-            'ru-RU',
-            'tr-TR',
-            'uk-UA',
-            'vi-VN',
-            'zh-CN',
-        ];
-
-        Translations.enUS = supportedLocales.indexOf('en-US');
-
-        let locale = localStorage.getItem('better_xcloud_locale');
-        if (!locale) {
-            locale = window.navigator.language || 'en-US';
-            if (supportedLocales.indexOf(locale) === -1) {
-                locale = 'en-US';
-            }
-            localStorage.setItem('better_xcloud_locale', locale);
-        }
-
-        return supportedLocales.indexOf(locale);
-    },
-
-    get: <T=string>(key: string, values?: any): T => {
-        const texts = (Translations as any)[key] || alert(`Missing translation key: ${key}`);
-        const translation = texts[LOCALE] || texts[Translations.enUS];
-
-        return values ? translation(values) : translation;
-    },
 
+const Texts = {
     "activate": [
         "Aktivieren",
         "Aktifkan",
@@ -3222,7 +3196,39 @@ const Translations = {
         "Thời gian hoàn thành dự kiến",
         "预计等待时间",
     ],
+};
+
+class Translations {
+    static #enUS = -1;
+    static #selectedLocale = -1;
+
+    static refreshCurrentLocale() {
+        const supportedLocales = Object.keys(SUPPORTED_LANGUAGES);
+        supportedLocales.sort();
+
+        Translations.#enUS = supportedLocales.indexOf('en-US');
+
+        let locale = localStorage.getItem('better_xcloud_locale');
+        if (!locale) {
+            locale = window.navigator.language || 'en-US';
+            if (supportedLocales.indexOf(locale) === -1) {
+                locale = 'en-US';
+            }
+            localStorage.setItem('better_xcloud_locale', locale);
+        }
+
+        Translations.#selectedLocale = supportedLocales.indexOf(locale);
+    }
+
+    static get<T=string>(key: keyof typeof Texts, values?: any): T {
+        const texts = Texts[key] || alert(`Missing translation key: ${key}`);
+        const translation = texts[Translations.#selectedLocale] || texts[Translations.#enUS];
+
+        return values ? (translation as any)(values) : translation;
+    }
 }
 
 export const t = Translations.get;
-export const getLocale = Translations.getLocale;
+export const refreshCurrentLocale = Translations.refreshCurrentLocale;
+
+refreshCurrentLocale();

src/modules/ui/global-settings.ts

@@ -1,9 +1,9 @@
-import { STATES, AppInterface, SCRIPT_HOME, SCRIPT_VERSION, refreshLocale } from "../../utils/global";
+import { STATES, AppInterface, SCRIPT_HOME, SCRIPT_VERSION } from "../../utils/global";
 import { CE, createButton, Icon, ButtonStyle } from "../../utils/html";
 import { getPreferredServerRegion } from "../../utils/region";
 import { UserAgent, UserAgentProfile } from "../../utils/user-agent";
 import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "../preferences";
-import { t } from "../translation";
+import { t, refreshCurrentLocale } from "../translation";
 
 const SETTINGS_UI = {
     'Better xCloud': {
@@ -160,7 +160,7 @@ export function setupSettingsUi() {
 
         if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
             // Update locale
-            refreshLocale();
+            refreshCurrentLocale();
 
             const $btn = $reloadBtnWrapper.firstElementChild! as HTMLButtonElement;
             $btn.textContent = t('settings-reloading');
@@ -229,7 +229,7 @@ export function setupSettingsUi() {
                 $control = toPrefElement(PrefKey.USER_AGENT_PROFILE, (e: Event) => {
                     const value = (e.target as HTMLInputElement).value;
                     let isCustom = value === UserAgentProfile.CUSTOM;
-                    let userAgent = UserAgent.get(value);
+                    let userAgent = UserAgent.get(value as UserAgentProfile);
 
                     $inpCustomUserAgent.value = userAgent;
                     $inpCustomUserAgent.readOnly = !isCustom;

src/utils/global.ts

@@ -1,5 +1,3 @@
-import { getLocale } from "../modules/translation";
-
 export const AppInterface = window.AppInterface;
 export const NATIVE_FETCH = window.fetch;
 export const STATES: BxStates = {
@@ -14,9 +12,3 @@ export const STATES: BxStates = {
 
 export const SCRIPT_VERSION = '3.5.3';
 export const SCRIPT_HOME = 'https://github.com/redphx/better-xcloud';
-
-export var LOCALE = getLocale();
-
-export const refreshLocale = () => {
-    LOCALE = getLocale();
-}

src/utils/user-agent.ts

@@ -19,13 +19,12 @@ export class UserAgent {
         return (window.navigator as any).orgUserAgent || window.navigator.userAgent;
     }
 
-    static get(profile: string): string {
+    static get(profile: UserAgentProfile): string {
         const defaultUserAgent = UserAgent.getDefault();
         if (profile === UserAgentProfile.CUSTOM) {
             return getPref(PrefKey.USER_AGENT_CUSTOM);
         }
 
-        // TODO: check type
         return (UserAgent.#USER_AGENTS as any)[profile] || defaultUserAgent;
     }