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 = () => {
>