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

@@ -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"
 }

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>

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]);

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")}