i18n fixes (#17184)

* update PR template

* fix hook

* fix input

* fix hook

* add all audio detector keys

* add frigate+ keys

* fix spelling, formatting, and spacing

* fix labels

* capitalization

* fix timestamp

* fix menu

* fix plus text

* fix download label

* docs

* fix docs build

* fix docs formatting
This commit is contained in:
Josh Hawkins
2025-03-16 11:13:34 -06:00
committed by GitHub
parent d34533981f
commit c724892158
27 changed files with 685 additions and 227 deletions
+1 -1
View File
@@ -77,7 +77,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
});
}
} else {
toast.error(t("form.errors.webUnkownError"), {
toast.error(t("form.errors.webUnknownError"), {
position: "top-center",
});
}
+12 -7
View File
@@ -74,7 +74,7 @@ export default function InputWithTags({
setSearch,
allSuggestions,
}: InputWithTagsProps) {
const { t } = useTranslation(["views/search"]);
const { t, i18n } = useTranslation(["views/search"]);
const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false,
});
@@ -900,12 +900,17 @@ export default function InputWithTags({
className="cursor-pointer"
onSelect={() => handleSuggestionClick(suggestion)}
>
{currentFilterType
? formatFilterValues(currentFilterType, suggestion)
: t("filter.label." + suggestion)}
{" ("}
{suggestion}
{")"}
{i18n.language === "en" ? (
suggestion
) : (
<>
{suggestion} {" ("}
{currentFilterType
? formatFilterValues(currentFilterType, suggestion)
: t("filter.label." + suggestion)}
{")"}
</>
)}
</CommandItem>
))}
</CommandGroup>
@@ -104,7 +104,7 @@ export default function SearchResultActions({
download={`${searchResult.camera}_${searchResult.label}.mp4`}
>
<LuDownload className="mr-2 size-4" />
<span>{t("itemMenu.downloadVideo")}</span>
<span>{t("itemMenu.downloadVideo.label")}</span>
</a>
</MenuItem>
)}
@@ -570,8 +570,12 @@ export default function ObjectLifecycle({
timezone: config.ui.timezone,
strftime_fmt:
config.ui.time_format == "24hour"
? t("time.formattedTimestamp2.24hour")
: t("time.formattedTimestamp2"),
? t("time.formattedTimestamp2.24hour", {
ns: "common",
})
: t("time.formattedTimestamp2", {
ns: "common",
}),
time_style: "medium",
date_style: "medium",
})}
@@ -226,7 +226,7 @@ export default function SearchDetailDialog({
{item == "object_lifecycle" && (
<FaRotate className="size-4" />
)}
<div className="capitalize">{t("type.{item}")}</div>
<div className="capitalize">{t(`type.${item}`)}</div>
</ToggleGroupItem>
))}
</ToggleGroup>
@@ -310,8 +310,8 @@ function ObjectDetailsTab({
const formattedDate = useFormattedTimestamp(
search?.start_time ?? 0,
config?.ui.time_format == "24hour"
? t("time.formattedTimestampWithYear.24hour")
: t("time.formattedTimestampWithYear"),
? t("time.formattedTimestampWithYear.24hour", { ns: "common" })
: t("time.formattedTimestampWithYear", { ns: "common" }),
config?.ui.timezone,
);
@@ -902,10 +902,10 @@ export function ObjectSnapshotTab({
"text-lg font-semibold leading-none tracking-tight"
}
>
{t("explore.submitToPlus.label")}
{t("explore.plus.submitToPlus.label")}
</div>
<div className="text-sm text-muted-foreground">
{t("explore.submitToPlus.desc")}
{t("explore.plus.submitToPlus.desc")}
</div>
</div>
+2 -2
View File
@@ -25,7 +25,7 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
<span
className={`text-white ${stats.latency > 2 ? "text-danger" : ""}`}
>
{t("stats.latency.value", { secounds: stats.latency.toFixed(2) })}
{t("stats.latency.value", { seconds: stats.latency.toFixed(2) })}
</span>
</p>
)}
@@ -73,7 +73,7 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
className={`text-white ${stats.latency >= 2 ? "text-danger" : ""}`}
>
{t("stats.latency.short.value", {
secounds: stats.latency.toFixed(2),
seconds: stats.latency.toFixed(2),
})}
</span>
</div>
@@ -290,14 +290,18 @@ export function CameraStreamingDialog({
</SelectTrigger>
<SelectContent>
<SelectItem value="no-streaming">
{t("group.camera.setting.streamMethod.method.noStreaming")}
{t(
"group.camera.setting.streamMethod.method.noStreaming.label",
)}
</SelectItem>
<SelectItem value="smart">
{t("group.camera.setting.streamMethod.method.smartStreaming")}
{t(
"group.camera.setting.streamMethod.method.smartStreaming.label",
)}
</SelectItem>
<SelectItem value="continuous">
{t(
"group.camera.setting.streamMethod.method.continuousStreaming",
"group.camera.setting.streamMethod.method.continuousStreaming.label",
)}
</SelectItem>
</SelectContent>
@@ -344,7 +348,7 @@ export function CameraStreamingDialog({
htmlFor="compatibility"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{t("group.camera.setting.compatibilityMode")}
{t("group.camera.setting.compatibilityMode.label")}
</Label>
</div>
<div className="flex flex-col gap-2 leading-none">
+3 -6
View File
@@ -12,10 +12,7 @@ import {
import { Switch } from "./switch";
import { cn } from "@/lib/utils";
import { LuCheck } from "react-icons/lu";
import { useTranslation } from "react-i18next";
const { t } = useTranslation(["common"]);
import { t } from "i18next";
export interface DateRangePickerProps {
/** Click handler for applying the updates from DateRangePicker. */
@@ -433,7 +430,7 @@ export function DateRangePicker({
}
}}
>
{t("button.apply", { ns: "common"})}
{t("button.apply", { ns: "common" })}
</Button>
<Button
onClick={() => {
@@ -444,7 +441,7 @@ export function DateRangePicker({
variant="ghost"
aria-label={t("button.reset", { ns: "common" })}
>
{t("button.reset", { ns: "common"})}
{t("button.reset", { ns: "common" })}
</Button>
</div>
</div>
+23 -25
View File
@@ -1,11 +1,9 @@
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
import * as React from "react";
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"
import { useTranslation } from "react-i18next"
const { t } = useTranslation(["common"])
import { cn } from "@/lib/utils";
import { ButtonProps, buttonVariants } from "@/components/ui/button";
import { t } from "i18next";
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
<nav
@@ -14,8 +12,8 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
className={cn("mx-auto flex w-full justify-center", className)}
{...props}
/>
)
Pagination.displayName = "Pagination"
);
Pagination.displayName = "Pagination";
const PaginationContent = React.forwardRef<
HTMLUListElement,
@@ -26,21 +24,21 @@ const PaginationContent = React.forwardRef<
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
))
PaginationContent.displayName = "PaginationContent"
));
PaginationContent.displayName = "PaginationContent";
const PaginationItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
<li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"
));
PaginationItem.displayName = "PaginationItem";
type PaginationLinkProps = {
isActive?: boolean
isActive?: boolean;
} & Pick<ButtonProps, "size"> &
React.ComponentProps<"a">
React.ComponentProps<"a">;
const PaginationLink = ({
className,
@@ -55,12 +53,12 @@ const PaginationLink = ({
variant: isActive ? "outline" : "ghost",
size,
}),
className
className,
)}
{...props}
/>
)
PaginationLink.displayName = "PaginationLink"
);
PaginationLink.displayName = "PaginationLink";
const PaginationPrevious = ({
className,
@@ -75,8 +73,8 @@ const PaginationPrevious = ({
<ChevronLeft className="h-4 w-4" />
<span>{t("pagination.previous")}</span>
</PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"
);
PaginationPrevious.displayName = "PaginationPrevious";
const PaginationNext = ({
className,
@@ -91,8 +89,8 @@ const PaginationNext = ({
<span>{t("pagination.next")}</span>
<ChevronRight className="h-4 w-4" />
</PaginationLink>
)
PaginationNext.displayName = "PaginationNext"
);
PaginationNext.displayName = "PaginationNext";
const PaginationEllipsis = ({
className,
@@ -106,8 +104,8 @@ const PaginationEllipsis = ({
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">{t("pagination.more")}</span>
</span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"
);
PaginationEllipsis.displayName = "PaginationEllipsis";
export {
Pagination,
@@ -117,4 +115,4 @@ export {
PaginationLink,
PaginationNext,
PaginationPrevious,
}
};