diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx index 9e14becb..cd9caf64 100644 --- a/front/apps/mobile/app/_layout.tsx +++ b/front/apps/mobile/app/_layout.tsx @@ -68,15 +68,18 @@ const clientStorage = { export const clientPersister = createSyncStoragePersister({ storage: clientStorage }); +const sysLang = getLocales()[0].languageCode ?? "en"; i18next.use(initReactI18next).init({ interpolation: { escapeValue: false, }, returnEmptyString: false, fallbackLng: "en", - lng: storage.getString("language") ?? getLocales()[0].languageCode ?? "en", + lng: storage.getString("language") ?? sysLang, resources, }); +// @ts-expect-error Manually added value +i18next.systemLanguage = sysLang; const NavigationThemeProvider = ({ children }: { children: ReactNode }) => { const theme = useTheme(); diff --git a/front/apps/web/src/i18n.tsx b/front/apps/web/src/i18n.tsx index a0ff74cb..2a796455 100644 --- a/front/apps/web/src/i18n.tsx +++ b/front/apps/web/src/i18n.tsx @@ -18,12 +18,12 @@ * along with Kyoo. If not, see . */ +import { readCookie } from "@kyoo/models/src/account-internal"; import i18next, { type InitOptions } from "i18next"; import type { AppContext, AppInitialProps, AppProps } from "next/app"; import { type ComponentType, useState } from "react"; import { I18nextProvider } from "react-i18next"; import resources from "../../../translations"; -import { readCookie } from "@kyoo/models/src/account-internal"; export const withTranslations = ( AppToTranslate: ComponentType & { @@ -47,6 +47,7 @@ export const withTranslations = ( ...commonOptions, lng: props.pageProps.__lang, }); + i18next.systemLanguage = props.pageProps.__sysLang; return i18next; }); @@ -58,16 +59,15 @@ export const withTranslations = ( }; AppWithTranslations.getInitialProps = async (ctx: AppContext) => { const props: AppInitialProps = await AppToTranslate.getInitialProps(ctx); - const lng = - readCookie(ctx.ctx.req?.headers.cookie, "language") || - ctx.router.locale || - ctx.router.defaultLocale || - "en"; + const sysLng = ctx.router.locale || ctx.router.defaultLocale || "en"; + const lng = readCookie(ctx.ctx.req?.headers.cookie, "language") || sysLng; await i18n.init({ ...commonOptions, lng, }); + i18n.systemLanguage = sysLng; props.pageProps.__lang = lng; + props.pageProps.__sysLang = sysLng; return props; }; diff --git a/front/apps/web/tsconfig.json b/front/apps/web/tsconfig.json index 0cd6e2a1..7ac1302d 100755 --- a/front/apps/web/tsconfig.json +++ b/front/apps/web/tsconfig.json @@ -19,6 +19,6 @@ "~/*": ["src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../../packages/ui/src/i18n-d.d.ts"], "exclude": ["node_modules"] } diff --git a/front/packages/ui/src/i18n-d.d.ts b/front/packages/ui/src/i18n-d.d.ts index 4d963c6e..4fac2975 100644 --- a/front/packages/ui/src/i18n-d.d.ts +++ b/front/packages/ui/src/i18n-d.d.ts @@ -26,4 +26,8 @@ declare module "i18next" { returnNull: false; resources: { translation: typeof en }; } + + interface i18n { + systemLanguage: string; + } } diff --git a/front/packages/ui/src/settings/general.tsx b/front/packages/ui/src/settings/general.tsx index 39bcb4a7..de8bc7fe 100644 --- a/front/packages/ui/src/settings/general.tsx +++ b/front/packages/ui/src/settings/general.tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -import { setUserTheme, storeData, useUserTheme } from "@kyoo/models"; +import { deleteData, setUserTheme, storeData, useUserTheme } from "@kyoo/models"; import { Link, Select } from "@kyoo/primitives"; import { useTranslation } from "react-i18next"; import { Preference, SettingsContainer } from "./base"; @@ -37,8 +37,9 @@ export const GeneralSettings = () => { const changeLanguage = (lang: string) => { if (lang === "system") { - i18n.changeLanguage(i18n.options.lng as string); - return + i18n.changeLanguage(i18n.systemLanguage); + deleteData("language"); + return; } storeData("language", lang); i18n.changeLanguage(lang); @@ -66,7 +67,7 @@ export const GeneralSettings = () => { >