From f005f2022c463c7fa4d6c777c218d47ec0f39577 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Thu, 23 May 2024 13:45:28 +0200 Subject: [PATCH 1/7] Disable returnEmptyString --- front/apps/mobile/app/_layout.tsx | 1 + front/apps/web/src/i18n.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx index 33d83466..e2064be9 100644 --- a/front/apps/mobile/app/_layout.tsx +++ b/front/apps/mobile/app/_layout.tsx @@ -72,6 +72,7 @@ i18next.use(initReactI18next).init({ interpolation: { escapeValue: false, }, + returnEmptyString: false, fallbackLng: "en", lng: getLocales()[0].languageCode ?? "en", resources, diff --git a/front/apps/web/src/i18n.tsx b/front/apps/web/src/i18n.tsx index cf692d44..588e5676 100644 --- a/front/apps/web/src/i18n.tsx +++ b/front/apps/web/src/i18n.tsx @@ -34,6 +34,8 @@ export const withTranslations = ( interpolation: { escapeValue: false, }, + returnEmptyString: false, + fallbackLng: "en", resources, }; @@ -43,7 +45,6 @@ export const withTranslations = ( i18next.init({ ...commonOptions, lng: props.pageProps.__lang, - fallbackLng: "en", }); return i18next; }, [props.pageProps.__lang]); @@ -60,7 +61,6 @@ export const withTranslations = ( await i18n.init({ ...commonOptions, lng, - fallbackLng: "en", }); props.pageProps.__lang = lng; return props; From 261c97f97bd1618735f1211fb304fdf6774bd6df Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Thu, 23 May 2024 14:19:02 +0200 Subject: [PATCH 2/7] Fix i18n double init on web --- front/apps/web/src/i18n.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/front/apps/web/src/i18n.tsx b/front/apps/web/src/i18n.tsx index 588e5676..f061c911 100644 --- a/front/apps/web/src/i18n.tsx +++ b/front/apps/web/src/i18n.tsx @@ -20,7 +20,7 @@ import i18next, { type InitOptions } from "i18next"; import type { AppContext, AppInitialProps, AppProps } from "next/app"; -import { type ComponentType, useMemo } from "react"; +import { type ComponentType, useState } from "react"; import { I18nextProvider } from "react-i18next"; import resources from "../../../translations"; @@ -40,14 +40,14 @@ export const withTranslations = ( }; const AppWithTranslations = (props: AppProps) => { - const li18n = useMemo(() => { + const [li18n] = useState(() => { if (typeof window === "undefined") return i18n; i18next.init({ ...commonOptions, lng: props.pageProps.__lang, }); return i18next; - }, [props.pageProps.__lang]); + }); return ( From ad80fd3bdeeff2ac09881ee28d3e630140c1c2b1 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Thu, 23 May 2024 14:19:33 +0200 Subject: [PATCH 3/7] Persit selected language --- front/apps/mobile/app/_layout.tsx | 2 +- front/apps/web/src/i18n.tsx | 7 ++++++- front/packages/models/src/theme.ts | 15 ++++++++++++--- front/packages/ui/src/settings/general.tsx | 15 +++++++++++---- 4 files changed, 30 insertions(+), 9 deletions(-) diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx index e2064be9..9e14becb 100644 --- a/front/apps/mobile/app/_layout.tsx +++ b/front/apps/mobile/app/_layout.tsx @@ -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, }); diff --git a/front/apps/web/src/i18n.tsx b/front/apps/web/src/i18n.tsx index f061c911..a0ff74cb 100644 --- a/front/apps/web/src/i18n.tsx +++ b/front/apps/web/src/i18n.tsx @@ -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 & { @@ -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, diff --git a/front/packages/models/src/theme.ts b/front/packages/models/src/theme.ts index 36ccb119..773389ec 100644 --- a/front/packages/models/src/theme.ts +++ b/front/packages/models/src/theme.ts @@ -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); }; diff --git a/front/packages/ui/src/settings/general.tsx b/front/packages/ui/src/settings/general.tsx index 47192293..39bcb4a7 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, 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 ( { changeLanguage(value)} values={["system", ...Object.keys(i18n.options.resources!)]} getLabel={(key) => From 75a05296f7739075d6993677eba825cd7b27a8b9 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Thu, 23 May 2024 14:56:24 +0200 Subject: [PATCH 6/7] Fix types --- front/packages/ui/src/browse/header.tsx | 4 ++-- front/packages/ui/src/components/watchlist-info.tsx | 2 +- front/packages/ui/src/errors/connection.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/front/packages/ui/src/browse/header.tsx b/front/packages/ui/src/browse/header.tsx index e5e25e15..ba75cabd 100644 --- a/front/packages/ui/src/browse/header.tsx +++ b/front/packages/ui/src/browse/header.tsx @@ -55,7 +55,7 @@ const SortTrigger = forwardRef(funct {...tooltip(t("browse.sortby-tt"))} > -

{t(`browse.sortkey.${sortKey}`)}

+

{t(`browse.sortkey.${sortKey}` as any)}

); }); @@ -102,7 +102,7 @@ export const BrowseSettings = ({ {availableSorts.map((x) => ( ( }`)} onSelect={() => mutation.mutate(x)} selected={x === status} /> diff --git a/front/packages/ui/src/errors/connection.tsx b/front/packages/ui/src/errors/connection.tsx index b7a61ebb..1d83fb90 100644 --- a/front/packages/ui/src/errors/connection.tsx +++ b/front/packages/ui/src/errors/connection.tsx @@ -64,7 +64,7 @@ export const ConnectionError = () => { return (

{t("errors.connection")}

-

{error?.errors[0] ?? t("error.unknown")}

+

{error?.errors[0] ?? t("errors.unknown")}

{t("errors.connection-tips")}