diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts index 95c13e5a8..4eeb146b1 100644 --- a/src/i18n/i18n.ts +++ b/src/i18n/i18n.ts @@ -1,13 +1,13 @@ import { PostProcessorModule } from 'i18next'; import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; -const en = require('./locales/en.json'); +import en from './locales/en.json'; const resources = { en: { translation: en }, }; -export const Languages = [ +export const languages = [ { label: 'English', value: 'en', @@ -66,7 +66,6 @@ i18n.use(lowerCasePostProcessor) interpolation: { escapeValue: false, // react already safes from xss }, - lng: 'en', resources, }); diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx index 39d1cd71c..1b6b82b0f 100644 --- a/src/renderer/app.tsx +++ b/src/renderer/app.tsx @@ -26,6 +26,7 @@ import { PlayerState, usePlayerStore, useQueueControls } from '/@/renderer/store import { FontType, PlaybackType, PlayerStatus } from '/@/renderer/types'; import '@ag-grid-community/styles/ag-grid.css'; import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc'; +import i18n from '/@/i18n/i18n'; ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]); @@ -39,6 +40,7 @@ const remote = isElectron() ? window.electron.remote : null; export const App = () => { const theme = useTheme(); const accent = useSettingsStore((store) => store.general.accent); + const language = useSettingsStore((store) => store.general.language); const { builtIn, custom, system, type } = useSettingsStore((state) => state.font); const { type: playbackType } = usePlaybackSettings(); const { bindings } = useHotkeySettings(); @@ -178,6 +180,12 @@ export const App = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + if (language) { + i18n.changeLanguage(language); + } + }, [language]); + return ( { getFonts(); }, [fontSettings, localFonts, setSettings, t]); + const handleChangeLanguage = (e: string) => { + setSettings({ + general: { + ...settings, + language: e, + }, + }); + }; + const options: SettingOption[] = [ { control: (