From 44d44f87ac9f06dbc61fcc94336da0bc17653242 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 23 Apr 2025 07:19:20 -0500
Subject: [PATCH] i18n tweaks (#17865)

* Add plural variant to i18n selected key

Weblate needs both keys to populate other languages

* move smart capitalization logic into language provider

* fix key
---
 web/public/locales/en/views/events.json |  3 ++-
 web/src/App.tsx                         | 10 +---------
 web/src/context/language-provider.tsx   |  3 +++
 web/src/views/live/LiveCameraView.tsx   |  2 +-
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/web/public/locales/en/views/events.json b/web/public/locales/en/views/events.json
index 2c01df8c2..8fd64f14e 100644
--- a/web/public/locales/en/views/events.json
+++ b/web/public/locales/en/views/events.json
@@ -31,6 +31,7 @@
     "label": "View new review items",
     "button": "New Items To Review"
   },
-  "selected": "{{count}} selected",
+  "selected_one": "{{count}} selected",
+  "selected_other": "{{count}} selected",
   "camera": "Camera"
 }
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 83a3b0304..a0062549f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -6,13 +6,12 @@ import Sidebar from "@/components/navigation/Sidebar";
 import { isDesktop, isMobile } from "react-device-detect";
 import Statusbar from "./components/Statusbar";
 import Bottombar from "./components/navigation/Bottombar";
-import React, { Suspense, lazy } from "react";
+import { Suspense, lazy } from "react";
 import { Redirect } from "./components/navigation/Redirect";
 import { cn } from "./lib/utils";
 import { isPWA } from "./utils/isPWA";
 import ProtectedRoute from "@/components/auth/ProtectedRoute";
 import { AuthProvider } from "@/context/auth-context";
-import { useTranslation } from "react-i18next";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -27,13 +26,6 @@ const Logs = lazy(() => import("@/pages/Logs"));
 const AccessDenied = lazy(() => import("@/pages/AccessDenied"));
 
 function App() {
-  const { i18n } = useTranslation();
-
-  // Set the lang attribute on the html element when language changes
-  React.useEffect(() => {
-    document.documentElement.lang = i18n.language;
-  }, [i18n.language]);
-
   return (
     <Providers>
       <AuthProvider>
diff --git a/web/src/context/language-provider.tsx b/web/src/context/language-provider.tsx
index e0c965494..4d935da97 100644
--- a/web/src/context/language-provider.tsx
+++ b/web/src/context/language-provider.tsx
@@ -45,6 +45,9 @@ export function LanguageProvider({
   }, []);
 
   useEffect(() => {
+    // set document lang for smart capitalization
+    document.documentElement.lang = language;
+
     if (language === systemLanguage) return;
     i18next.changeLanguage(language);
   }, [language, systemLanguage]);
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 79dbd2f87..a9b4710b8 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -1758,7 +1758,7 @@ function FrigateCameraFeatures({
                 isRecording && "animate-pulse bg-red-500 hover:bg-red-600",
               )}
             >
-              {t("manualRecording." + isRecording ? "end" : "start")}
+              {t("manualRecording." + (isRecording ? "end" : "start"))}
             </Button>
             <p className="text-sm text-muted-foreground">
               {t("manualRecording.tips")}