From 882efe128a870f33c5bff6a97caced79d1b57f6f Mon Sep 17 00:00:00 2001 From: Yuri Pieters Date: Fri, 16 Jun 2023 15:49:23 +0100 Subject: [PATCH] Match more specific locales to supported ones (#1241) To do this, replace the current system for choosing the language with one that makes use of i18next features. Co-authored-by: Yuri Pieters Co-authored-by: Dessalines --- src/shared/components/common/html-tags.tsx | 6 ++-- src/shared/components/common/moment-time.tsx | 6 ++-- src/shared/components/person/settings.tsx | 7 ++--- src/shared/i18next.ts | 26 ++++++++++++++++-- src/shared/utils.ts | 29 ++------------------ 5 files changed, 33 insertions(+), 41 deletions(-) diff --git a/src/shared/components/common/html-tags.tsx b/src/shared/components/common/html-tags.tsx index 0e6cb2d0..f32b0fc0 100644 --- a/src/shared/components/common/html-tags.tsx +++ b/src/shared/components/common/html-tags.tsx @@ -2,7 +2,8 @@ import { htmlToText } from "html-to-text"; import { Component } from "inferno"; import { Helmet } from "inferno-helmet"; import { httpExternalPath } from "../../env"; -import { getLanguages, md } from "../../utils"; +import { i18n } from "../../i18next"; +import { md } from "../../utils"; interface HtmlTagsProps { title: string; @@ -17,11 +18,10 @@ export class HtmlTags extends Component { const url = httpExternalPath(this.props.path); const desc = this.props.description; const image = this.props.image; - const lang = getLanguages()[0]; return ( - + {["title", "og:title", "twitter:title"].map(t => ( diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx index 10714f5b..30c1682c 100644 --- a/src/shared/components/common/moment-time.tsx +++ b/src/shared/components/common/moment-time.tsx @@ -1,7 +1,7 @@ import { Component } from "inferno"; import moment from "moment"; import { i18n } from "../../i18next"; -import { capitalizeFirstLetter, getLanguages } from "../../utils"; +import { capitalizeFirstLetter } from "../../utils"; import { Icon } from "./icon"; interface MomentTimeProps { @@ -15,9 +15,7 @@ export class MomentTime extends Component { constructor(props: any, context: any) { super(props, context); - const lang = getLanguages(); - - moment.locale(lang); + moment.locale([...i18n.languages]); } createdAndModifiedTimes() { diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx index a29f61b0..56d57a7a 100644 --- a/src/shared/components/person/settings.tsx +++ b/src/shared/components/person/settings.tsx @@ -25,7 +25,6 @@ import { fetchCommunities, fetchThemeList, fetchUsers, - getLanguages, myAuth, myAuthRequired, personToChoice, @@ -1058,12 +1057,12 @@ export class Settings extends Component { } handleInterfaceLangChange(i: Settings, event: any) { + const newLang = event.target.value ?? "browser"; + i18n.changeLanguage(newLang === "browser" ? navigator.languages : newLang); + i.setState( s => ((s.saveUserSettingsForm.interface_language = event.target.value), s) ); - i18n.changeLanguage( - getLanguages(i.state.saveUserSettingsForm.interface_language).at(0) - ); } handleDiscussionLanguageChange(val: number[]) { diff --git a/src/shared/i18next.ts b/src/shared/i18next.ts index eaedbbf8..47ca6501 100644 --- a/src/shared/i18next.ts +++ b/src/shared/i18next.ts @@ -1,4 +1,5 @@ import i18next, { i18nTyped, Resource } from "i18next"; +import { UserService } from "./services"; import { ar } from "./translations/ar"; import { bg } from "./translations/bg"; import { ca } from "./translations/ca"; @@ -30,7 +31,7 @@ import { sv } from "./translations/sv"; import { vi } from "./translations/vi"; import { zh } from "./translations/zh"; import { zh_Hant } from "./translations/zh_Hant"; -import { getLanguages } from "./utils"; +import { isBrowser } from "./utils"; export const languages = [ { resource: ar, code: "ar", name: "العربية" }, @@ -73,12 +74,31 @@ function format(value: any, format: any): any { return format === "uppercase" ? value.toUpperCase() : value; } -i18next.init({ +class LanguageDetector { + static readonly type = "languageDetector"; + + detect() { + const langs: string[] = []; + + const myLang = + UserService.Instance.myUserInfo?.local_user_view.local_user + .interface_language ?? "browser"; + + if (myLang !== "browser") langs.push(myLang); + + if (isBrowser()) langs.push(...navigator.languages); + + return langs; + } +} + +i18next.use(LanguageDetector).init({ debug: false, compatibilityJSON: "v3", + supportedLngs: languages.map(l => l.code), + nonExplicitSupportedLngs: true, // load: 'languageOnly', // initImmediate: false, - lng: getLanguages()[0], fallbackLng: "en", resources, interpolation: { format }, diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 067b78ac..766e38a8 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -42,7 +42,7 @@ import moment from "moment"; import tippy from "tippy.js"; import Toastify from "toastify-js"; import { getHttpBase } from "./env"; -import { i18n, languages } from "./i18next"; +import { i18n } from "./i18next"; import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces"; import { HttpService, UserService } from "./services"; @@ -399,31 +399,6 @@ export function debounce( } as (...e: T) => R; } -export function getLanguages( - override?: string, - myUserInfo = UserService.Instance.myUserInfo -): string[] { - const myLang = myUserInfo?.local_user_view.local_user.interface_language; - const lang = override || myLang || "browser"; - - if (lang == "browser" && isBrowser()) { - return getBrowserLanguages(); - } else { - return [lang]; - } -} - -function getBrowserLanguages(): string[] { - // Intersect lemmy's langs, with the browser langs - const langs = languages ? languages.map(l => l.code) : ["en"]; - - // NOTE, mobile browsers seem to be missing this list, so append en - const allowedLangs = navigator.languages - .concat("en") - .filter(v => langs.includes(v)); - return allowedLangs; -} - export async function fetchThemeList(): Promise { return fetch("/css/themelist").then(res => res.json()); } @@ -1276,7 +1251,7 @@ export function personSelectName({ export function initializeSite(site?: GetSiteResponse) { UserService.Instance.myUserInfo = site?.my_user; - i18n.changeLanguage(getLanguages()[0]); + i18n.changeLanguage(); if (site) { setupEmojiDataModel(site.custom_emojis ?? []); }