Persit selected language

This commit is contained in:
Zoe Roux 2024-05-23 14:19:33 +02:00
parent 261c97f97b
commit ad80fd3bde
No known key found for this signature in database
4 changed files with 30 additions and 9 deletions

View File

@ -74,7 +74,7 @@ i18next.use(initReactI18next).init({
},
returnEmptyString: false,
fallbackLng: "en",
lng: getLocales()[0].languageCode ?? "en",
lng: storage.getString("language") ?? getLocales()[0].languageCode ?? "en",
resources,
});

View File

@ -23,6 +23,7 @@ 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<AppProps> & {
@ -57,7 +58,11 @@ export const withTranslations = (
};
AppWithTranslations.getInitialProps = async (ctx: AppContext) => {
const props: AppInitialProps = await AppToTranslate.getInitialProps(ctx);
const lng = ctx.router.locale || ctx.router.defaultLocale || "en";
const lng =
readCookie(ctx.ctx.req?.headers.cookie, "language") ||
ctx.router.locale ||
ctx.router.defaultLocale ||
"en";
await i18n.init({
...commonOptions,
lng,

View File

@ -29,7 +29,16 @@ export const useUserTheme = (ssrTheme?: "light" | "dark" | "auto") => {
return value as "light" | "dark" | "auto";
};
export const setUserTheme = (theme: "light" | "dark" | "auto") => {
storage.set("theme", theme);
if (Platform.OS === "web") setCookie("theme", theme);
export const storeData = (key: string, value: string | number | boolean) => {
storage.set(key, value);
if (Platform.OS === "web") setCookie(key, value);
};
export const deleteData = (key: string) => {
storage.delete(key);
if (Platform.OS === "web") setCookie(key, undefined);
};
export const setUserTheme = (theme: "light" | "dark" | "auto") => {
storeData("theme", theme);
};

View File

@ -18,7 +18,7 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { setUserTheme, useUserTheme } from "@kyoo/models";
import { setUserTheme, storeData, useUserTheme } from "@kyoo/models";
import { Link, Select } from "@kyoo/primitives";
import { useTranslation } from "react-i18next";
import { Preference, SettingsContainer } from "./base";
@ -35,6 +35,15 @@ export const GeneralSettings = () => {
const theme = useUserTheme("auto");
const getLanguageName = useLanguageName();
const changeLanguage = (lang: string) => {
if (lang === "system") {
i18n.changeLanguage(i18n.options.lng as string);
return
}
storeData("language", lang);
i18n.changeLanguage(lang);
};
return (
<SettingsContainer title={t("settings.general.label")}>
<Preference
@ -58,9 +67,7 @@ export const GeneralSettings = () => {
<Select
label={t("settings.general.language.label")}
value={i18n.resolvedLanguage!}
onValueChange={(value) =>
i18n.changeLanguage(value !== "system" ? value : (i18n.options.lng as string))
}
onValueChange={(value) => changeLanguage(value)}
values={["system", ...Object.keys(i18n.options.resources!)]}
getLabel={(key) =>
key === "system" ? t("settings.general.language.system") : getLanguageName(key) ?? key