From 41c36b161044428241fff55f5b97065d551172ef Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 29 Apr 2025 07:09:05 -0600
Subject: [PATCH] Support automatic language selection

---
 web/src/components/menu/GeneralSettings.tsx | 24 ++++++++-------------
 web/src/context/language-provider.tsx       | 23 ++++++++++++--------
 web/src/lib/const.ts                        | 14 ++++++++++++
 3 files changed, 37 insertions(+), 24 deletions(-)
 create mode 100644 web/src/lib/const.ts

diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index f0c55f659f..5fe7a7e70e 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -34,7 +34,7 @@ import {
   useTheme,
 } from "@/context/theme-provider";
 import { IoColorPalette } from "react-icons/io5";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useRestart } from "@/api/ws";
 import {
   Tooltip,
@@ -62,6 +62,7 @@ import { toast } from "sonner";
 import axios from "axios";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useTranslation } from "react-i18next";
+import { supportedLanguageKeys } from "@/lib/const";
 
 type GeneralSettingsProps = {
   className?: string;
@@ -75,20 +76,13 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
 
   // languages
 
-  const languages = [
-    { code: "en", label: t("menu.language.en") },
-    { code: "es", label: t("menu.language.es") },
-    { code: "fr", label: t("menu.language.fr") },
-    { code: "de", label: t("menu.language.de") },
-    { code: "it", label: t("menu.language.it") },
-    { code: "nl", label: t("menu.language.nl") },
-    { code: "nb-NO", label: t("menu.language.nb") },
-    { code: "tr", label: t("menu.language.tr") },
-    { code: "pl", label: t("menu.language.pl") },
-    { code: "zh-CN", label: t("menu.language.zhCN") },
-    { code: "yue-Hant", label: t("menu.language.yue") },
-    { code: "ru", label: t("menu.language.ru") },
-  ];
+  const languages = useMemo(
+    () =>
+      supportedLanguageKeys.map((key) => {
+        return { code: key, label: t(`menu.language.${key}`) };
+      }),
+    [t],
+  );
 
   // settings
 
diff --git a/web/src/context/language-provider.tsx b/web/src/context/language-provider.tsx
index 4d935da978..4c5949dea9 100644
--- a/web/src/context/language-provider.tsx
+++ b/web/src/context/language-provider.tsx
@@ -1,15 +1,14 @@
 import { createContext, useContext, useState, useEffect, useMemo } from "react";
 import i18next from "i18next";
+import { supportedLanguageKeys } from "@/lib/const";
 
 type LanguageProviderState = {
   language: string;
-  systemLanguage: string;
   setLanguage: (language: string) => void;
 };
 
 const initialState: LanguageProviderState = {
   language: i18next.language || "en",
-  systemLanguage: "en",
   setLanguage: () => null,
 };
 
@@ -26,10 +25,22 @@ export function LanguageProvider({
   defaultLanguage?: string;
   storageKey?: string;
 }) {
+  const systemLanguage = useMemo<string>(() => {
+    if (typeof window === "undefined") return defaultLanguage;
+
+    const systemLanguage = window.navigator.language;
+
+    if (supportedLanguageKeys.includes(systemLanguage)) {
+      return systemLanguage;
+    }
+
+    return defaultLanguage;
+  }, [defaultLanguage]);
+
   const [language, setLanguage] = useState<string>(() => {
     try {
       const storedData = localStorage.getItem(storageKey);
-      const newLanguage = storedData || defaultLanguage;
+      const newLanguage = storedData || systemLanguage;
       i18next.changeLanguage(newLanguage);
       return newLanguage;
     } catch (error) {
@@ -39,11 +50,6 @@ export function LanguageProvider({
     }
   });
 
-  const systemLanguage = useMemo<string>(() => {
-    if (typeof window === "undefined") return "en";
-    return window.navigator.language;
-  }, []);
-
   useEffect(() => {
     // set document lang for smart capitalization
     document.documentElement.lang = language;
@@ -54,7 +60,6 @@ export function LanguageProvider({
 
   const value = {
     language,
-    systemLanguage,
     setLanguage: (language: string) => {
       localStorage.setItem(storageKey, language);
       setLanguage(language);
diff --git a/web/src/lib/const.ts b/web/src/lib/const.ts
new file mode 100644
index 0000000000..bd16d8c39e
--- /dev/null
+++ b/web/src/lib/const.ts
@@ -0,0 +1,14 @@
+export const supportedLanguageKeys = [
+  "en",
+  "es",
+  "fr",
+  "de",
+  "it",
+  "nl",
+  "nb-NO",
+  "tr",
+  "pl",
+  "zh-CN",
+  "yue-Hant",
+  "ru",
+];