Add languages (#17662)

* Add Dutch to languages menu

* Add Norwegian to languages menu

* fix

* consolidate
This commit is contained in:
Josh Hawkins 2025-04-13 13:11:28 -05:00 committed by GitHub
parent da62c41e87
commit 4feba8bcf3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 75 deletions

View File

@ -113,7 +113,7 @@
"configurationEditor": "Configuration Editor",
"languages": "Languages",
"language": {
"en": "English",
"en": "English (English)",
"es": "Español (Spanish)",
"zhCN": "简体中文 (Simplified Chinese)",
"hi": "हिन्दी (Hindi)",

View File

@ -73,6 +73,17 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
const { data: config } = useSWR<FrigateConfig>("config");
const logoutUrl = config?.proxy?.logout_url || "/api/logout";
// languages
const languages = [
{ code: "en", label: t("menu.language.en") },
{ code: "es", label: t("menu.language.es") },
{ code: "zh-CN", label: t("menu.language.zhCN") },
{ code: "tr", label: t("menu.language.tr") },
{ code: "nl", label: t("menu.language.nl") },
{ code: "nb", label: t("menu.language.nb") },
];
// settings
const { language, setLanguage } = useLanguage();
@ -313,80 +324,27 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
}
>
<span tabIndex={0} className="sr-only" />
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label={t("menu.language.en")}
onClick={() => setLanguage("en")}
>
{language.trim() === "en" ? (
<>
<LuLanguages className="mr-2 size-4" />
{t("menu.language.en")}
</>
) : (
<span className="ml-6 mr-2">{t("menu.language.en")}</span>
)}
</MenuItem>
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label={t("menu.language.es")}
onClick={() => setLanguage("es")}
>
{language === "es" ? (
<>
<LuLanguages className="mr-2 size-4" />
{t("menu.language.es")}
</>
) : (
<span className="ml-6 mr-2">{t("menu.language.es")}</span>
)}
</MenuItem>
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label={t("menu.language.zhCN")}
onClick={() => setLanguage("zh-CN")}
>
{language === "zh-CN" ? (
<>
<LuLanguages className="mr-2 size-4" />
{t("menu.language.zhCN")}
</>
) : (
<span className="ml-6 mr-2">
{t("menu.language.zhCN")}
</span>
)}
</MenuItem>
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label={t("menu.language.tr")}
onClick={() => setLanguage("tr")}
>
{language === "tr" ? (
<>
<LuLanguages className="mr-2 size-4" />
{t("menu.language.tr")}
</>
) : (
<span className="ml-6 mr-2">{t("menu.language.tr")}</span>
)}
</MenuItem>
{languages.map(({ code, label }) => (
<MenuItem
key={code}
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label={label}
onClick={() => setLanguage(code)}
>
{language.trim() === code ? (
<>
<LuLanguages className="mr-2 size-4" />
{label}
</>
) : (
<span className="ml-6 mr-2">{label}</span>
)}
</MenuItem>
))}
</SubItemContent>
</Portal>
</SubItem>