]> Untitled Git - lemmy-ui.git/commitdiff
projects / lemmy-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from parent 1: 79f4009)
Match more specific locales to supported ones (#1241)
authorYuri Pieters <MageJohn@users.noreply.github.com>
Fri, 16 Jun 2023 14:49:23 +0000 (15:49 +0100)
committerGitHub <noreply@github.com>
Fri, 16 Jun 2023 14:49:23 +0000 (10:49 -0400)
To do this, replace the current system for choosing the language with one that makes use of i18next features.

Co-authored-by: Yuri Pieters <yuri@zopatista.com>
Co-authored-by: Dessalines <dessalines@users.noreply.github.com>
src/shared/components/common/html-tags.tsx patch | blob | history
src/shared/components/common/moment-time.tsx patch | blob | history
src/shared/components/person/settings.tsx patch | blob | history
src/shared/i18next.ts patch | blob | history
src/shared/utils.ts patch | blob | history

diff --git a/src/shared/components/common/html-tags.tsx b/src/shared/components/common/html-tags.tsx
index 0e6cb2d03ad381528ed3f78447e0c0bc18d2b1bf..f32b0fc048a04687102fc740f08912c7fb0701c3 100644 (file)
--- 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<HtmlTagsProps, any> {
     const url = httpExternalPath(this.props.path);
     const desc = this.props.description;
     const image = this.props.image;
-    const lang = getLanguages()[0];
 
     return (
       <Helmet title={this.props.title}>
-        <html lang={lang == "browser" ? "en" : lang} />
+        <html lang={i18n.resolvedLanguage} />
 
         {["title", "og:title", "twitter:title"].map(t => (
           <meta key={t} property={t} content={this.props.title} />
diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx
index 10714f5bb48fea50e3b18766ac608f3f44fb521b..30c1682c9eaaf6d7980768b35036bfd0e8a060df 100644 (file)
--- 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<MomentTimeProps, any> {
   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 a29f61b008102ba4d60e3ab0d4988bd13e8f34d4..56d57a7a56850778c7e1a65923d36b4b38e2e0e9 100644 (file)
--- 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<any, SettingsState> {
   }
 
   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 eaedbbf817b4fada361b862b4c7d7c33c26b3083..47ca6501542b536b0a2eead58434f2c1f59eda4f 100644 (file)
--- 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 067b78ac2a6f5a82974bf91c78ef88c0367737c3..766e38a847ed97d177941bf29b48dde87739704a 100644 (file)
--- 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<T extends any[], R>(
   } 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<string[]> {
   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 ?? []);
   }
Unnamed repository; edit this file 'description' to name the repository.