feat: add i18n (translation/localization) (#16877)

* Translation module init

* Add more i18n keys

* fix: fix string wrong

* refactor: use namespace translation file

* chore: add more translation key

* fix: fix some page name error

* refactor: change Trans tag for t function

* chore: fix some key not work

* chore: fix SearchFilterDialog i18n key error

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* chore: fix en i18n file filter missing some keys

* chore: add some i18n keys

* chore: add more i18n keys again

* feat: add search page i18n

* feat: add explore model i18n keys

* Update web/src/components/menu/GeneralSettings.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/components/menu/GeneralSettings.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/components/menu/GeneralSettings.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* feat: add more live i18n keys

* feat: add more search setting i18n keys

* fix: remove some comment

* fix: fix some setting page url error

* Update web/src/views/settings/SearchSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* fix: add system missing keys

* fix: update password update i18n keys

* chore: remove outdate translation.json file

* fix: fix exploreSettings error

* chore: add object setting i18n keys

* Update web/src/views/recording/RecordingView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/public/locales/en/components/filter.json

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/components/overlay/ExportDialog.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* feat: add more i18n keys

* fix: fix motionDetectionTuner html node

* feat: add more page i18n keys

* fix: cameraStream i18n keys error

* feat: add Player i18n keys

* feat: add more toast i18n keys

* feat: change explore setting name

* feat: add more document title i18n keys

* feat: add more search i18n keys

* fix: fix accessDenied i18n keys error

* chore: add objectType i18n

* chore: add  inputWithTags i18n

* chore: add SearchFilterDialog i18n

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update web/src/views/settings/ObjectSettingsView.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* chore: add some missing i18n keys

* chore: remove most import { t } from "i18next";

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/components/player/HlsVideoPlayer.tsx

@@ -18,6 +18,7 @@ import { useOverlayState } from "@/hooks/use-overlay-state";
 import { usePersistence } from "@/hooks/use-persistence";
 import { cn } from "@/lib/utils";
 import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record";
+import { useTranslation } from "react-i18next";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -63,6 +64,7 @@ export default function HlsVideoPlayer({
   toggleFullscreen,
   onError,
 }: HlsVideoPlayerProps) {
+  const { t } = useTranslation("components/player");
   const { data: config } = useSWR<FrigateConfig>("config");
 
   // playback
@@ -236,11 +238,11 @@ export default function HlsVideoPlayer({
               const resp = await onUploadFrame(videoRef.current.currentTime);
 
               if (resp && resp.status == 200) {
-                toast.success("Successfully submitted frame to Frigate+", {
+                toast.success(t("toast.success.submittedFrigatePlus"), {
                   position: "top-center",
                 });
               } else {
-                toast.success("Failed to submit frame to Frigate+", {
+                toast.success(t("toast.error.submitFrigatePlusFailed"), {
                   position: "top-center",
                 });
               }

web/src/components/player/LivePlayer.tsx

@@ -23,6 +23,7 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { baseUrl } from "@/api/baseUrl";
 import { PlayerStats } from "./PlayerStats";
 import { LuVideoOff } from "react-icons/lu";
+import { Trans, useTranslation } from "react-i18next";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -71,6 +72,8 @@ export default function LivePlayer({
   onError,
   onResetLiveMode,
 }: LivePlayerProps) {
+  const { t } = useTranslation(["components/player"]);
+
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
 
   // stats
@@ -272,7 +275,7 @@ export default function LivePlayer({
     } else {
       player = (
         <div className="w-5xl text-center text-sm">
-          iOS 17.1 or greater is required for this live stream type.
+          {t("livePlayerRequiredIOSVersion")}
         </div>
       );
     }
@@ -400,12 +403,17 @@ export default function LivePlayer({
       {offline && !showStillWithoutActivity && cameraEnabled && (
         <div className="absolute inset-0 left-1/2 top-1/2 flex h-96 w-96 -translate-x-1/2 -translate-y-1/2">
           <div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">
-            <p className="my-5 text-lg">Stream offline</p>
+            <p className="my-5 text-lg">{t("streamOffline.title")}</p>
             <TbExclamationCircle className="mb-3 size-10" />
             <p className="max-w-96 text-center">
-              No frames have been received on the{" "}
-              {capitalizeFirstLetter(cameraConfig.name)} <code>detect</code>{" "}
-              stream, check error logs
+              <Trans
+                values={{
+                  cameraName: capitalizeFirstLetter(cameraConfig.name),
+                  ns: "components/player",
+                }}
+              >
+                streamOffline.desc
+              </Trans>
             </p>
           </div>
         </div>
@@ -416,7 +424,7 @@ export default function LivePlayer({
           <div className="flex h-32 flex-col items-center justify-center rounded-lg p-4 md:h-48 md:w-48">
             <LuVideoOff className="mb-2 size-8 md:size-10" />
             <p className="max-w-32 text-center text-sm md:max-w-40 md:text-base">
-              Camera is disabled
+              {t("cameraDisabled")}
             </p>
           </div>
         </div>

web/src/components/player/PlayerStats.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
 import { PlayerStatsType } from "@/types/live";
+import { useTranslation } from "react-i18next";
 
 type PlayerStatsProps = {
   stats: PlayerStatsType;
@@ -7,45 +8,46 @@ type PlayerStatsProps = {
 };
 
 export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
+  const { t } = useTranslation(["components/player"]);
   const fullStatsContent = (
     <>
       <p>
-        <span className="text-white/70">Stream Type:</span>{" "}
+        <span className="text-white/70">{t("stats.streamType")}</span>{" "}
         <span className="text-white">{stats.streamType}</span>
       </p>
       <p>
-        <span className="text-white/70">Bandwidth:</span>{" "}
+        <span className="text-white/70">{t("stats.bandwidth")}</span>{" "}
         <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
       </p>
       {stats.latency != undefined && (
         <p>
-          <span className="text-white/70">Latency:</span>{" "}
+          <span className="text-white/70">{t("stats.latency")}</span>{" "}
           <span
             className={`text-white ${stats.latency > 2 ? "text-danger" : ""}`}
           >
-            {stats.latency.toFixed(2)} seconds
+            {t("stats.latency.value", { secounds: stats.latency.toFixed(2) })}
           </span>
         </p>
       )}
       <p>
-        <span className="text-white/70">Total Frames:</span>{" "}
+        <span className="text-white/70">{t("stats.totalFrames")}</span>{" "}
         <span className="text-white">{stats.totalFrames}</span>
       </p>
       {stats.droppedFrames != undefined && (
         <p>
-          <span className="text-white/70">Dropped Frames:</span>{" "}
+          <span className="text-white/70">{t("stats.droppedFrames")}</span>{" "}
           <span className="text-white">{stats.droppedFrames}</span>
         </p>
       )}
       {stats.decodedFrames != undefined && (
         <p>
-          <span className="text-white/70">Decoded Frames:</span>{" "}
+          <span className="text-white/70">{t("stats.decodedFrames")}</span>{" "}
           <span className="text-white">{stats.decodedFrames}</span>
         </p>
       )}
       {stats.droppedFrameRate != undefined && (
         <p>
-          <span className="text-white/70">Dropped Frame Rate:</span>{" "}
+          <span className="text-white/70">{t("stats.droppedFrameRate")}</span>{" "}
           <span className="text-white">
             {stats.droppedFrameRate.toFixed(2)}%
           </span>
@@ -57,27 +59,35 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
   const minimalStatsContent = (
     <div className="flex flex-row items-center justify-center gap-4">
       <div className="flex flex-col items-center justify-start gap-1">
-        <span className="text-white/70">Type</span>
+        <span className="text-white/70">{t("stats.streamType.short")}</span>
         <span className="text-white">{stats.streamType}</span>
       </div>
       <div className="flex flex-col items-center gap-1">
-        <span className="text-white/70">Bandwidth</span>{" "}
+        <span className="text-white/70">{t("stats.bandwidth.short")}</span>{" "}
         <span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
       </div>
       {stats.latency != undefined && (
         <div className="hidden flex-col items-center gap-1 md:flex">
-          <span className="text-white/70">Latency</span>
+          <span className="text-white/70">{t("stats.latency.short")}</span>
           <span
             className={`text-white ${stats.latency >= 2 ? "text-danger" : ""}`}
           >
-            {stats.latency.toFixed(2)} sec
+            {t("stats.latency.short.value", {
+              secounds: stats.latency.toFixed(2),
+            })}
           </span>
         </div>
       )}
       {stats.droppedFrames != undefined && (
         <div className="flex flex-col items-center justify-end gap-1">
-          <span className="text-white/70">Dropped</span>
-          <span className="text-white">{stats.droppedFrames} frames</span>
+          <span className="text-white/70">
+            {t("stats.droppedFrames.short")}
+          </span>
+          <span className="text-white">
+            {t("stats.droppedFrames.short.value", {
+              droppedFrames: stats.droppedFrames,
+            })}
+          </span>
         </div>
       )}
     </div>

web/src/components/player/PreviewPlayer.tsx

@@ -20,6 +20,7 @@ import {
   getPreviewForTimeRange,
   usePreviewForTimeRange,
 } from "@/hooks/use-camera-previews";
+import { useTranslation } from "react-i18next";
 
 type PreviewPlayerProps = {
   className?: string;
@@ -42,6 +43,7 @@ export default function PreviewPlayer({
   onControllerReady,
   onClick,
 }: PreviewPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
   const [currentHourFrame, setCurrentHourFrame] = useState<string>();
   const currentPreview = usePreviewForTimeRange(
     cameraPreviews,
@@ -88,7 +90,7 @@ export default function PreviewPlayer({
         className,
       )}
     >
-      No Preview Found
+      {t("noPreviewFound")}
     </div>
   );
 }
@@ -133,6 +135,7 @@ function PreviewVideoPlayer({
   onClick,
   setCurrentHourFrame,
 }: PreviewVideoPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
   // controlling playback
@@ -324,7 +327,7 @@ function PreviewVideoPlayer({
       </video>
       {cameraPreviews && !currentPreview && (
         <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary dark:bg-black md:rounded-2xl">
-          No Preview Found for {camera.replaceAll("_", " ")}
+          {t("noPreviewFoundFor", { camera: camera.replaceAll("_", " ") })}
         </div>
       )}
       {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
@@ -444,6 +447,8 @@ function PreviewFramesPlayer({
   onControllerReady,
   onClick,
 }: PreviewFramesPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
+
   // frames data
 
   const { data: previewFrames } = useSWR<string[]>(
@@ -544,7 +549,7 @@ function PreviewFramesPlayer({
       />
       {previewFrames?.length === 0 && (
         <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary dark:bg-black md:rounded-2xl">
-          No Preview Found for {camera.replaceAll("_", " ")}
+          {t("noPreviewFoundFor", { cameraName: camera.replaceAll("_", " ") })}
         </div>
       )}
       {firstLoad && <Skeleton className="absolute aspect-video size-full" />}

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -21,6 +21,7 @@ import { cn } from "@/lib/utils";
 import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
 import { Preview } from "@/types/preview";
 import { baseUrl } from "@/api/baseUrl";
+import { useTranslation } from "react-i18next";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -41,6 +42,7 @@ export default function PreviewThumbnailPlayer({
   onClick,
   onTimeUpdate,
 }: PreviewPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
   const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
@@ -167,7 +169,9 @@ export default function PreviewThumbnailPlayer({
 
   const formattedDate = useFormattedTimestamp(
     review.start_time,
-    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+    config?.ui.time_format == "24hour"
+      ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
+      : t("time.formattedTimestampExcludeSeconds", { ns: "common" }),
     config?.ui?.timezone,
   );
 

web/src/components/player/VideoControls.tsx

@@ -33,6 +33,7 @@ import {
 } from "../ui/alert-dialog";
 import { cn } from "@/lib/utils";
 import { FaCompress, FaExpand } from "react-icons/fa";
+import { useTranslation } from "react-i18next";
 
 type VideoControls = {
   volume?: boolean;
@@ -309,6 +310,8 @@ function FrigatePlusUploadButton({
   onUploadFrame,
   containerRef,
 }: FrigatePlusUploadButtonProps) {
+  const { t } = useTranslation(["components/player"]);
+
   const [videoImg, setVideoImg] = useState<string>();
 
   return (
@@ -346,14 +349,16 @@ function FrigatePlusUploadButton({
         className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl"
       >
         <AlertDialogHeader>
-          <AlertDialogTitle>Submit this frame to Frigate+?</AlertDialogTitle>
+          <AlertDialogTitle>{t("submitFrigatePlus.title")}</AlertDialogTitle>
         </AlertDialogHeader>
         <img className="aspect-video w-full object-contain" src={videoImg} />
         <AlertDialogFooter>
           <AlertDialogAction className="bg-selected" onClick={onUploadFrame}>
-            Submit
+            {t("submitFrigatePlus.submit")}
           </AlertDialogAction>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogCancel>
+            {t("button.cancel", { ns: "common" })}
+          </AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -12,6 +12,7 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { VideoResolutionType } from "@/types/live";
 import axios from "axios";
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -50,6 +51,7 @@ export default function DynamicVideoPlayer({
   toggleFullscreen,
   containerRef,
 }: DynamicVideoPlayerProps) {
+  const { t } = useTranslation(["components/player"]);
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -247,7 +249,7 @@ export default function DynamicVideoPlayer({
       )}
       {!isScrubbing && !isLoading && noRecording && (
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-          No recordings found for this time
+          {t("noRecordingsFoundForThisTime")}
         </div>
       )}
     </>