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 ?? []);
}