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, returnEmptyString: false,
fallbackLng: "en", fallbackLng: "en",
lng: getLocales()[0].languageCode ?? "en", lng: storage.getString("language") ?? getLocales()[0].languageCode ?? "en",
resources, resources,
}); });

View File

@ -23,6 +23,7 @@ import type { AppContext, AppInitialProps, AppProps } from "next/app";
import { type ComponentType, useState } from "react"; import { type ComponentType, useState } from "react";
import { I18nextProvider } from "react-i18next"; import { I18nextProvider } from "react-i18next";
import resources from "../../../translations"; import resources from "../../../translations";
import { readCookie } from "@kyoo/models/src/account-internal";
export const withTranslations = ( export const withTranslations = (
AppToTranslate: ComponentType<AppProps> & { AppToTranslate: ComponentType<AppProps> & {
@ -57,7 +58,11 @@ export const withTranslations = (
}; };
AppWithTranslations.getInitialProps = async (ctx: AppContext) => { AppWithTranslations.getInitialProps = async (ctx: AppContext) => {
const props: AppInitialProps = await AppToTranslate.getInitialProps(ctx); 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({ await i18n.init({
...commonOptions, ...commonOptions,
lng, lng,

View File

@ -29,7 +29,16 @@ export const useUserTheme = (ssrTheme?: "light" | "dark" | "auto") => {
return value as "light" | "dark" | "auto"; return value as "light" | "dark" | "auto";
}; };
export const setUserTheme = (theme: "light" | "dark" | "auto") => { export const storeData = (key: string, value: string | number | boolean) => {
storage.set("theme", theme); storage.set(key, value);
if (Platform.OS === "web") setCookie("theme", theme); 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/>. * 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 { Link, Select } from "@kyoo/primitives";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Preference, SettingsContainer } from "./base"; import { Preference, SettingsContainer } from "./base";
@ -35,6 +35,15 @@ export const GeneralSettings = () => {
const theme = useUserTheme("auto"); const theme = useUserTheme("auto");
const getLanguageName = useLanguageName(); 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 ( return (
<SettingsContainer title={t("settings.general.label")}> <SettingsContainer title={t("settings.general.label")}>
<Preference <Preference
@ -58,9 +67,7 @@ export const GeneralSettings = () => {
<Select <Select
label={t("settings.general.language.label")} label={t("settings.general.language.label")}
value={i18n.resolvedLanguage!} value={i18n.resolvedLanguage!}
onValueChange={(value) => onValueChange={(value) => changeLanguage(value)}
i18n.changeLanguage(value !== "system" ? value : (i18n.options.lng as string))
}
values={["system", ...Object.keys(i18n.options.resources!)]} values={["system", ...Object.keys(i18n.options.resources!)]}
getLabel={(key) => getLabel={(key) =>
key === "system" ? t("settings.general.language.system") : getLanguageName(key) ?? key key === "system" ? t("settings.general.language.system") : getLanguageName(key) ?? key