administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-28 06:39:01 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
GuoQing Liu
2025-03-16 10:36:20 -05:00
committed by GitHub
co-authored by Josh Hawkins
parent db541abed4
commit d34533981f
150 changed files with 6809 additions and 1926 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/settings/CameraStreamingDialog.tsx
+53 -38
View File
@@ -31,6 +31,7 @@ import useSWR from "swr";
import { LuCheck, LuExternalLink, LuInfo, LuX } from "react-icons/lu";
import { Link } from "react-router-dom";
import { LiveStreamMetadata } from "@/types/live";
import { Trans, useTranslation } from "react-i18next";
type CameraStreamingDialogProps = {
camera: string;
@@ -49,6 +50,7 @@ export function CameraStreamingDialog({
setIsDialogOpen,
onSave,
}: CameraStreamingDialogProps) {
const { t } = useTranslation(["components/camera"]);
const { data: config } = useSWR<FrigateConfig>("config");
const [isLoading, setIsLoading] = useState(false);
@@ -167,30 +169,36 @@ export function CameraStreamingDialog({
<DialogContent className="sm:max-w-[425px]">
<DialogHeader className="mb-4">
<DialogTitle className="capitalize">
{camera.replaceAll("_", " ")} Streaming Settings
{t("group.camera.setting.title", {
cameraName: camera.replaceAll("_", " "),
})}
</DialogTitle>
<DialogDescription>
Change the live streaming options for this camera group's dashboard.{" "}
<em>These settings are device/browser-specific.</em>
<Trans ns="components/camera">group.camera.setting.desc</Trans>
</DialogDescription>
</DialogHeader>
<div className="flex flex-col space-y-8">
{!isRestreamed && (
<div className="flex flex-col gap-2">
<Label>Stream</Label>
<Label></Label>
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
<LuX className="size-4 text-danger" />
<div>Restreaming is not enabled for this camera.</div>
<div>
{t("streaming.restreaming.disabled", {
ns: "components/dialog",
})}
</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">Info</span>
<span className="sr-only">
{t("button.info", { ns: "common" })}
</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-80 text-xs">
Set up go2rtc for additional live view options and audio for
this camera.
{t("streaming.restreaming.desc", { ns: "components/dialog" })}
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live"
@@ -198,7 +206,9 @@ export function CameraStreamingDialog({
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
{t("streaming.restreaming.readTheDocumentation", {
ns: "components/dialog",
})}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@@ -231,22 +241,23 @@ export function CameraStreamingDialog({
{supportsAudioOutput ? (
<>
<LuCheck className="size-4 text-success" />
<div>Audio is available for this stream</div>
<div>{t("group.camera.setting.audioIsAvailable")}</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>Audio is unavailable for this stream</div>
<div>{t("group.camera.setting.audioIsUnavailable")}</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">Info</span>
<span className="sr-only">
{t("button.info", { ns: "common" })}
</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-80 text-xs">
Audio must be output from your camera and configured
in go2rtc for this stream.
{t("group.camera.setting.audio.desc")}
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live"
@@ -254,7 +265,7 @@ export function CameraStreamingDialog({
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
{t("group.camera.setting.audio.desc.document")}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@@ -268,7 +279,7 @@ export function CameraStreamingDialog({
)}
<div className="flex flex-col items-start gap-2">
<Label htmlFor="streaming-method" className="text-right">
Streaming Method
{t("group.camera.setting.streamMethod.label")}
</Label>
<Select
value={streamType}
@@ -278,38 +289,44 @@ export function CameraStreamingDialog({
<SelectValue placeholder="Choose a streaming option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="no-streaming">No Streaming</SelectItem>
<SelectItem value="no-streaming">
{t("group.camera.setting.streamMethod.method.noStreaming")}
</SelectItem>
<SelectItem value="smart">
Smart Streaming (recommended)
{t("group.camera.setting.streamMethod.method.smartStreaming")}
</SelectItem>
<SelectItem value="continuous">
{t(
"group.camera.setting.streamMethod.method.continuousStreaming",
)}
</SelectItem>
<SelectItem value="continuous">Continuous Streaming</SelectItem>
</SelectContent>
</Select>
{streamType === "no-streaming" && (
<p className="text-sm text-muted-foreground">
Camera images will only update once per minute and no live
streaming will occur.
{t("group.camera.setting.streamMethod.method.noStreaming.desc")}
</p>
)}
{streamType === "smart" && (
<p className="text-sm text-muted-foreground">
Smart streaming will update your camera image once per minute when
no detectable activity is occurring to conserve bandwidth and
resources. When activity is detected, the image seamlessly
switches to a live stream.
{t(
"group.camera.setting.streamMethod.method.smartStreaming.desc",
)}
</p>
)}
{streamType === "continuous" && (
<>
<p className="text-sm text-muted-foreground">
Camera image will always be a live stream when visible on the
dashboard, even if no activity is being detected.
{t(
"group.camera.setting.streamMethod.method.continuousStreaming.desc",
)}
</p>
<div className="flex items-center gap-2">
<IoIosWarning className="mr-2 size-5 text-danger" />
<div className="max-w-[85%] text-sm">
Continuous streaming may cause high bandwidth usage and
performance issues. Use with caution.
{t(
"group.camera.setting.streamMethod.method.continuousStreaming.desc.warning",
)}
</div>
</div>
</>
@@ -327,14 +344,12 @@ export function CameraStreamingDialog({
htmlFor="compatibility"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Compatibility mode
{t("group.camera.setting.compatibilityMode")}
</Label>
</div>
<div className="flex flex-col gap-2 leading-none">
<p className="text-sm text-muted-foreground">
Enable this option only if your camera's live stream is displaying
color artifacts and has a diagonal line on the right side of the
image.
{t("group.camera.setting.compatibilityMode.desc")}
</p>
</div>
</div>
@@ -343,14 +358,14 @@ export function CameraStreamingDialog({
<div className="flex flex-row gap-2 pt-5">
<Button
className="flex flex-1"
aria-label="Cancel"
aria-label={t("button.cancel", { ns: "common" })}
onClick={handleCancel}
>
Cancel
{t("button.cancel", { ns: "common" })}
</Button>
<Button
variant="select"
aria-label="Save"
aria-label={t("button.save", { ns: "common" })}
disabled={isLoading}
className="flex flex-1"
onClick={handleSave}
@@ -358,10 +373,10 @@ export function CameraStreamingDialog({
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>{t("button.saving", { ns: "common" })}</span>
</div>
) : (
"Save"
t("button.save", { ns: "common" })
)}
</Button>
</div>
web/src/components/settings/MotionMaskEditPane.tsx
+40 -30
View File
@@ -22,6 +22,7 @@ import { Toaster } from "../ui/sonner";
import ActivityIndicator from "../indicators/activity-indicator";
import { Link } from "react-router-dom";
import { LuExternalLink } from "react-icons/lu";
import { Trans, useTranslation } from "react-i18next";
type MotionMaskEditPaneProps = {
polygons?: Polygon[];
@@ -50,6 +51,7 @@ export default function MotionMaskEditPane({
snapPoints,
setSnapPoints,
}: MotionMaskEditPaneProps) {
const { t } = useTranslation(["views/settings"]);
const { data: config, mutate: updateConfig } =
useSWR<FrigateConfig>("config");
@@ -105,7 +107,7 @@ export default function MotionMaskEditPane({
polygon: z.object({ name: z.string(), isFinished: z.boolean() }),
})
.refine(() => polygon?.isFinished === true, {
message: "The polygon drawing must be finished before saving.",
message: t("masksAndZones.polygonDrawing.error.mustBeFinished"),
path: ["polygon.isFinished"],
});
@@ -163,16 +165,26 @@ export default function MotionMaskEditPane({
.then((res) => {
if (res.status === 200) {
toast.success(
`${polygon.name || "Motion Mask"} has been saved. Restart Frigate to apply changes.`,
polygon.name
? t("masksAndZones.motionMasks.toast.success", {
polygonName: polygon.name,
})
: t("masksAndZones.motionMasks.toast.success.noName"),
{
position: "top-center",
},
);
updateConfig();
} else {
toast.error(`Failed to save config changes: ${res.statusText}`, {
position: "top-center",
});
toast.error(
t("toast.save.error", {
errorMessage: res.statusText,
ns: "common",
}),
{
position: "top-center",
},
);
}
})
.catch((error) => {
@@ -180,7 +192,7 @@ export default function MotionMaskEditPane({
error.response?.data?.message ||
error.response?.data?.detail ||
"Unknown error";
toast.error(`Failed to save config changes: ${errorMessage}`, {
toast.error(t("toast.save.error", { errorMessage, ns: "common" }), {
position: "top-center",
});
})
@@ -194,6 +206,7 @@ export default function MotionMaskEditPane({
scaledHeight,
setIsLoading,
cameraConfig,
t,
]);
function onSubmit(values: z.infer<typeof formSchema>) {
@@ -209,8 +222,8 @@ export default function MotionMaskEditPane({
}
useEffect(() => {
document.title = "Edit Motion Mask - Frigate";
}, []);
document.title = t("masksAndZones.motionMasks.documentTitle");
}, [t]);
if (!polygon) {
return;
@@ -220,14 +233,13 @@ export default function MotionMaskEditPane({
<>
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Motion Mask
{polygon.name.length
? t("masksAndZones.motionMasks.edit")
: t("masksAndZones.motionMasks.add")}
</Heading>
<div className="my-3 space-y-3 text-sm text-muted-foreground">
<p>
Motion masks are used to prevent unwanted types of motion from
triggering detection (example: tree branches, camera timestamps).
Motion masks should be used <em>very sparingly</em>, over-masking will
make it more difficult for objects to be tracked.
<Trans ns="views/settings">masksAndZones.motionMasks.context</Trans>
</p>
<div className="flex items-center text-primary">
@@ -237,7 +249,7 @@ export default function MotionMaskEditPane({
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
{t("masksAndZones.motionMasks.context.documentation")}{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@@ -246,11 +258,9 @@ export default function MotionMaskEditPane({
{polygons && activePolygonIndex !== undefined && (
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
polygons[activePolygonIndex].points.length == 0
? "points"
: "point"}
{t("masksAndZones.motionMasks.point", {
count: polygons[activePolygonIndex].points.length,
})}
{polygons[activePolygonIndex].isFinished && (
<FaCheckCircle className="ml-2 size-5" />
)}
@@ -265,7 +275,7 @@ export default function MotionMaskEditPane({
</div>
)}
<div className="mb-3 text-sm text-muted-foreground">
Click to draw a polygon on the image.
{t("masksAndZones.motionMasks.clickDrawPolygon")}
</div>
<Separator className="my-3 bg-secondary" />
@@ -273,19 +283,19 @@ export default function MotionMaskEditPane({
{polygonArea && polygonArea >= 0.35 && (
<>
<div className="mb-3 text-sm text-danger">
The motion mask is covering {Math.round(polygonArea * 100)}% of the
camera frame. Large motion masks are not recommended.
{t("masksAndZones.motionMasks.polygonAreaTooLarge", {
polygonArea: Math.round(polygonArea * 100),
})}
</div>
<div className="mb-3 text-sm text-primary">
Motion masks do not prevent objects from being detected. You should
use a required zone instead.
{t("masksAndZones.motionMasks.polygonAreaTooLarge.tips")}
<Link
to="https://github.com/blakeblackshear/frigate/discussions/13040"
target="_blank"
rel="noopener noreferrer"
className="my-3 block"
>
Read the documentation{" "}
{t("masksAndZones.motionMasks.polygonAreaTooLarge.documentation")}{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@@ -319,14 +329,14 @@ export default function MotionMaskEditPane({
<div className="flex flex-row gap-2 pt-5">
<Button
className="flex flex-1"
aria-label="Cancel"
aria-label={t("button.cancel", { ns: "common" })}
onClick={onCancel}
>
Cancel
{t("button.cancel", { ns: "common" })}
</Button>
<Button
variant="select"
aria-label="Save"
aria-label={t("button.save", { ns: "common" })}
disabled={isLoading}
className="flex flex-1"
type="submit"
@@ -334,10 +344,10 @@ export default function MotionMaskEditPane({
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>{t("button.saving", { ns: "common" })}</span>
</div>
) : (
"Save"
t("button.save", { ns: "common" })
)}
</Button>
</div>
web/src/components/settings/ObjectMaskEditPane.tsx
+51 -30
View File
@@ -38,6 +38,7 @@ import { toast } from "sonner";
import { Toaster } from "../ui/sonner";
import ActivityIndicator from "../indicators/activity-indicator";
import { getAttributeLabels } from "@/utils/iconUtil";
import { useTranslation } from "react-i18next";
type ObjectMaskEditPaneProps = {
polygons?: Polygon[];
@@ -66,6 +67,7 @@ export default function ObjectMaskEditPane({
snapPoints,
setSnapPoints,
}: ObjectMaskEditPaneProps) {
const { t } = useTranslation(["views/settings"]);
const { data: config, mutate: updateConfig } =
useSWR<FrigateConfig>("config");
@@ -107,7 +109,7 @@ export default function ObjectMaskEditPane({
polygon: z.object({ isFinished: z.boolean(), name: z.string() }),
})
.refine(() => polygon?.isFinished === true, {
message: "The polygon drawing must be finished before saving.",
message: t("masksAndZones.polygonDrawing.error.mustBeFinished"),
path: ["polygon.isFinished"],
});
@@ -195,16 +197,26 @@ export default function ObjectMaskEditPane({
.then((res) => {
if (res.status === 200) {
toast.success(
`${polygon.name || "Object Mask"} has been saved. Restart Frigate to apply changes.`,
polygon.name
? t("masksAndZones.objectMasks.toast.success", {
polygonName: polygon.name,
})
: t("masksAndZones.objectMasks.toast.success.noName"),
{
position: "top-center",
},
);
updateConfig();
} else {
toast.error(`Failed to save config changes: ${res.statusText}`, {
position: "top-center",
});
toast.error(
t("toast.save.error", {
errorMessage: res.statusText,
ns: "common",
}),
{
position: "top-center",
},
);
}
})
.catch((error) => {
@@ -212,9 +224,15 @@ export default function ObjectMaskEditPane({
error.response?.data?.message ||
error.response?.data?.detail ||
"Unknown error";
toast.error(`Failed to save config changes: ${errorMessage}`, {
position: "top-center",
});
toast.error(
t("toast.save.error", {
errorMessage,
ns: "common",
}),
{
position: "top-center",
},
);
})
.finally(() => {
setIsLoading(false);
@@ -227,6 +245,7 @@ export default function ObjectMaskEditPane({
scaledHeight,
setIsLoading,
cameraConfig,
t,
],
);
@@ -243,8 +262,8 @@ export default function ObjectMaskEditPane({
}
useEffect(() => {
document.title = "Edit Object Mask - Frigate";
}, []);
document.title = t("masksAndZones.objectMasks.documentTitle");
}, [t]);
if (!polygon) {
return;
@@ -254,23 +273,20 @@ export default function ObjectMaskEditPane({
<>
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Object Mask
{polygon.name.length
? t("masksAndZones.objectMasks.edit")
: t("masksAndZones.objectMasks.add")}
</Heading>
<div className="my-2 text-sm text-muted-foreground">
<p>
Object filter masks are used to filter out false positives for a given
object type based on location.
</p>
<p>{t("masksAndZones.objectMasks.context")}</p>
</div>
<Separator className="my-3 bg-secondary" />
{polygons && activePolygonIndex !== undefined && (
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
polygons[activePolygonIndex].points.length == 0
? "points"
: "point"}
{t("masksAndZones.objectMasks.point", {
count: polygons[activePolygonIndex].points.length,
})}
{polygons[activePolygonIndex].isFinished && (
<FaCheckCircle className="ml-2 size-5" />
)}
@@ -285,7 +301,7 @@ export default function ObjectMaskEditPane({
</div>
)}
<div className="mb-3 text-sm text-muted-foreground">
Click to draw a polygon on the image.
{t("masksAndZones.objectMasks.clickDrawPolygon")}
</div>
<Separator className="my-3 bg-secondary" />
@@ -310,7 +326,9 @@ export default function ObjectMaskEditPane({
name="objects"
render={({ field }) => (
<FormItem>
<FormLabel>Objects</FormLabel>
<FormLabel>
{t("masksAndZones.objectMasks.objects")}
</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
@@ -326,7 +344,7 @@ export default function ObjectMaskEditPane({
</SelectContent>
</Select>
<FormDescription>
The object type that that applies to this object mask.
{t("masksAndZones.objectMasks.objects.desc")}
</FormDescription>
<FormMessage />
</FormItem>
@@ -346,25 +364,25 @@ export default function ObjectMaskEditPane({
<div className="flex flex-row gap-2 pt-5">
<Button
className="flex flex-1"
aria-label="Cancel"
aria-label={t("button.cancel", { ns: "common" })}
onClick={onCancel}
>
Cancel
{t("button.cancel", { ns: "common" })}
</Button>
<Button
variant="select"
disabled={isLoading}
className="flex flex-1"
aria-label="Save"
aria-label={t("button.save", { ns: "common" })}
type="submit"
>
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>{t("button.saving", { ns: "common" })}</span>
</div>
) : (
"Save"
t("button.save", { ns: "common" })
)}
</Button>
</div>
@@ -380,6 +398,7 @@ type ZoneObjectSelectorProps = {
};
export function ZoneObjectSelector({ camera }: ZoneObjectSelectorProps) {
const { t } = useTranslation(["views/settings"]);
const { data: config } = useSWR<FrigateConfig>("config");
const attributeLabels = useMemo(() => {
@@ -423,11 +442,13 @@ export function ZoneObjectSelector({ camera }: ZoneObjectSelectorProps) {
return (
<>
<SelectGroup>
<SelectItem value="all_labels">All object types</SelectItem>
<SelectItem value="all_labels">
{t("masksAndZones.objectMasks.objects.allObjectTypes")}
</SelectItem>
<SelectSeparator className="bg-secondary" />
{allLabels.map((item) => (
<SelectItem key={item} value={item}>
{item.replaceAll("_", " ").charAt(0).toUpperCase() + item.slice(1)}
{t(item, { ns: "objects" })}
</SelectItem>
))}
</SelectGroup>
web/src/components/settings/PolygonEditControls.tsx
+12 -6
View File
@@ -4,6 +4,7 @@ import { MdOutlineRestartAlt, MdUndo } from "react-icons/md";
import { Button } from "../ui/button";
import { TbPolygon, TbPolygonOff } from "react-icons/tb";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";
type PolygonEditControlsProps = {
polygons: Polygon[];
@@ -20,6 +21,7 @@ export default function PolygonEditControls({
snapPoints,
setSnapPoints,
}: PolygonEditControlsProps) {
const { t } = useTranslation(["views/settings"]);
const undo = () => {
if (activePolygonIndex === undefined || !polygons) {
return;
@@ -80,35 +82,37 @@ export default function PolygonEditControls({
<Button
variant="default"
className="size-6 rounded-md p-1"
aria-label="Remove last point"
aria-label={t("masksAndZones.form.polygonDrawing.removeLastPoint")}
disabled={!polygons[activePolygonIndex].points.length}
onClick={undo}
>
<MdUndo className="text-secondary-foreground" />
</Button>
</TooltipTrigger>
<TooltipContent>Remove last point</TooltipContent>
<TooltipContent>
{t("masksAndZones.form.polygonDrawing.removeLastPoint")}
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="default"
className="size-6 rounded-md p-1"
aria-label="Clear all points"
aria-label={t("masksAndZones.form.polygonDrawing.reset.label")}
disabled={!polygons[activePolygonIndex].points.length}
onClick={reset}
>
<MdOutlineRestartAlt className="text-secondary-foreground" />
</Button>
</TooltipTrigger>
<TooltipContent>Reset</TooltipContent>
<TooltipContent>{t("button.reset", { ns: "common" })}</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant={snapPoints ? "select" : "default"}
className={cn("size-6 rounded-md p-1")}
aria-label="Snap points"
aria-label={t("masksAndZones.form.polygonDrawing.snapPoints.true")}
onClick={() => setSnapPoints((prev) => !prev)}
>
{snapPoints ? (
@@ -119,7 +123,9 @@ export default function PolygonEditControls({
</Button>
</TooltipTrigger>
<TooltipContent>
{snapPoints ? "Don't snap points" : "Snap points"}
{snapPoints
? t("masksAndZones.form.polygonDrawing.snapPoints.false")
: t("masksAndZones.form.polygonDrawing.snapPoints.true")}
</TooltipContent>
</Tooltip>
</div>
web/src/components/settings/PolygonItem.tsx
+52 -22
View File
@@ -36,6 +36,7 @@ import { reviewQueries } from "@/utils/zoneEdutUtil";
import IconWrapper from "../ui/icon-wrapper";
import { StatusBarMessagesContext } from "@/context/statusbar-provider";
import { buttonVariants } from "../ui/button";
import { Trans, useTranslation } from "react-i18next";
type PolygonItemProps = {
polygon: Polygon;
@@ -56,6 +57,7 @@ export default function PolygonItem({
setEditPane,
handleCopyCoordinates,
}: PolygonItemProps) {
const { t } = useTranslation("views/settings");
const { data: config, mutate: updateConfig } =
useSWR<FrigateConfig>("config");
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -175,14 +177,25 @@ export default function PolygonItem({
.put(`config/set?${url}`, { requires_restart: 0 })
.then((res) => {
if (res.status === 200) {
toast.success(`${polygon?.name} has been deleted.`, {
position: "top-center",
});
toast.success(
t("masksAndZones.form.polygonDrawing.delete.success", {
name: polygon?.name,
}),
{
position: "top-center",
},
);
updateConfig();
} else {
toast.error(`Failed to save config changes: ${res.statusText}`, {
position: "top-center",
});
toast.error(
t("toast.save.error", {
errorMessage: res.statusText,
ns: "common",
}),
{
position: "top-center",
},
);
}
})
.catch((error) => {
@@ -190,7 +203,7 @@ export default function PolygonItem({
error.response?.data?.message ||
error.response?.data?.detail ||
"Unknown error";
toast.error(`Failed to save config changes: ${errorMessage}`, {
toast.error(t("toast.save.error", { errorMessage, ns: "common" }), {
position: "top-center",
});
})
@@ -198,7 +211,7 @@ export default function PolygonItem({
setIsLoading(false);
});
},
[updateConfig, cameraConfig],
[updateConfig, cameraConfig, t],
);
const handleDelete = () => {
@@ -253,19 +266,30 @@ export default function PolygonItem({
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Confirm Delete</AlertDialogTitle>
<AlertDialogTitle>
{t("masksAndZones.form.polygonDrawing.delete.title")}
</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogDescription>
Are you sure you want to delete the{" "}
{polygon.type.replace("_", " ")} <em>{polygon.name}</em>?
<Trans
ns="views/settings"
values={{
type: polygon.type.replace("_", " "),
name: polygon.name,
}}
>
masksAndZones.form.polygonDrawing.delete.desc
</Trans>
</AlertDialogDescription>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
{t("button.cancel", { ns: "common" })}
</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: "destructive" })}
onClick={handleDelete}
>
Delete
{t("button.delete", { ns: "common" })}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
@@ -279,26 +303,26 @@ export default function PolygonItem({
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
aria-label="Edit"
aria-label={t("button.edit", { ns: "common" })}
onClick={() => {
setActivePolygonIndex(index);
setEditPane(polygon.type);
}}
>
Edit
{t("button.edit", { ns: "common" })}
</DropdownMenuItem>
<DropdownMenuItem
aria-label="Copy"
aria-label={t("button.copy", { ns: "common" })}
onClick={() => handleCopyCoordinates(index)}
>
Copy
{t("button.copy", { ns: "common" })}
</DropdownMenuItem>
<DropdownMenuItem
aria-label="Delete"
aria-label={t("button.delete", { ns: "common" })}
disabled={isLoading}
onClick={() => setDeleteDialogOpen(true)}
>
Delete
{t("button.delete", { ns: "common" })}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -317,7 +341,9 @@ export default function PolygonItem({
}}
/>
</TooltipTrigger>
<TooltipContent>Edit</TooltipContent>
<TooltipContent>
{t("button.edit", { ns: "common" })}
</TooltipContent>
</Tooltip>
<Tooltip>
@@ -330,7 +356,9 @@ export default function PolygonItem({
onClick={() => handleCopyCoordinates(index)}
/>
</TooltipTrigger>
<TooltipContent>Copy coordinates</TooltipContent>
<TooltipContent>
{t("button.copyCoordinates", { ns: "common" })}
</TooltipContent>
</Tooltip>
<Tooltip>
@@ -344,7 +372,9 @@ export default function PolygonItem({
onClick={() => !isLoading && setDeleteDialogOpen(true)}
/>
</TooltipTrigger>
<TooltipContent>Delete</TooltipContent>
<TooltipContent>
{t("button.delete", { ns: "common" })}
</TooltipContent>
</Tooltip>
</div>
)}
web/src/components/settings/SearchSettings.tsx
+24 -17
View File
@@ -17,8 +17,9 @@ import FilterSwitch from "../filter/FilterSwitch";
import { SearchFilter, SearchSource } from "@/types/search";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { useTranslation } from "react-i18next";
type SearchSettingsProps = {
type ExploreSettingsProps = {
className?: string;
columns: number;
defaultView: string;
@@ -27,7 +28,7 @@ type SearchSettingsProps = {
setDefaultView: (view: string) => void;
onUpdateFilter: (filter: SearchFilter) => void;
};
export default function SearchSettings({
export default function ExploreSettings({
className,
columns,
setColumns,
@@ -35,7 +36,8 @@ export default function SearchSettings({
filter,
setDefaultView,
onUpdateFilter,
}: SearchSettingsProps) {
}: ExploreSettingsProps) {
const { t } = useTranslation(["components/filter"]);
const { data: config } = useSWR<FrigateConfig>("config");
const [open, setOpen] = useState(false);
@@ -46,21 +48,20 @@ export default function SearchSettings({
const trigger = (
<Button
className="flex items-center gap-2"
aria-label="Explore Settings"
aria-label={t("explore.settings.title")}
size="sm"
>
<FaCog className="text-secondary-foreground" />
Settings
{t("explore.settings.title")}
</Button>
);
const content = (
<div className={cn(className, "my-3 space-y-5 py-3 md:mt-0 md:py-0")}>
<div className="space-y-4">
<div className="space-y-0.5">
<div className="text-md">Default View</div>
<div className="text-md">{t("explore.settings.defaultView")}</div>
<div className="space-y-1 text-xs text-muted-foreground">
When no filters are selected, display a summary of the most recent
tracked objects per label, or display an unfiltered grid.
{t("explore.settings.defaultView.desc")}
</div>
</div>
<Select
@@ -68,7 +69,9 @@ export default function SearchSettings({
onValueChange={(value) => setDefaultView(value)}
>
<SelectTrigger className="w-full">
{defaultView == "summary" ? "Summary" : "Unfiltered Grid"}
{defaultView == "summary"
? t("explore.settings.defaultView.summary")
: t("explore.settings.defaultView.unfilteredGrid")}
</SelectTrigger>
<SelectContent>
<SelectGroup>
@@ -78,7 +81,9 @@ export default function SearchSettings({
className="cursor-pointer"
value={value}
>
{value == "summary" ? "Summary" : "Unfiltered Grid"}
{value == "summary"
? t("explore.settings.defaultView.summary")
: t("explore.settings.defaultView.unfilteredGrid")}
</SelectItem>
))}
</SelectGroup>
@@ -90,9 +95,9 @@ export default function SearchSettings({
<DropdownMenuSeparator />
<div className="flex w-full flex-col space-y-4">
<div className="space-y-0.5">
<div className="text-md">Grid Columns</div>
<div className="text-md">{t("explore.settings.gridColumns")}</div>
<div className="space-y-1 text-xs text-muted-foreground">
Select the number of columns in the grid view.
{t("explore.settings.gridColumns.desc")}
</div>
</div>
<div className="flex items-center space-x-4">
@@ -148,20 +153,22 @@ export function SearchTypeContent({
searchSources,
setSearchSources,
}: SearchTypeContentProps) {
const { t } = useTranslation(["components/filter"]);
return (
<>
<div className="overflow-x-hidden">
<DropdownMenuSeparator className="mb-3" />
<div className="space-y-0.5">
<div className="text-md">Search Source</div>
<div className="text-md">
{t("explore.settings.searchSource.label")}
</div>
<div className="space-y-1 text-xs text-muted-foreground">
Choose whether to search the thumbnails or descriptions of your
tracked objects.
{t("explore.settings.searchSource.desc")}
</div>
</div>
<div className="mt-2.5 flex flex-col gap-2.5">
<FilterSwitch
label="Thumbnail Image"
label={t("explore.settings.searchSource.options.thumbnailImage")}
isChecked={searchSources?.includes("thumbnail") ?? false}
onCheckedChange={(isChecked) => {
const updatedSources = searchSources ? [...searchSources] : [];
@@ -179,7 +186,7 @@ export function SearchTypeContent({
}}
/>
<FilterSwitch
label="Description"
label={t("explore.settings.searchSource.options.description")}
isChecked={searchSources?.includes("description") ?? false}
onCheckedChange={(isChecked) => {
const updatedSources = searchSources ? [...searchSources] : [];
web/src/components/settings/ZoneEditPane.tsx
+98 -66
View File
@@ -29,6 +29,7 @@ import { toast } from "sonner";
import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
import ActivityIndicator from "../indicators/activity-indicator";
import { getAttributeLabels } from "@/utils/iconUtil";
import { Trans, useTranslation } from "react-i18next";
type ZoneEditPaneProps = {
polygons?: Polygon[];
@@ -59,6 +60,7 @@ export default function ZoneEditPane({
snapPoints,
setSnapPoints,
}: ZoneEditPaneProps) {
const { t } = useTranslation(["views/settings"]);
const { data: config, mutate: updateConfig } =
useSWR<FrigateConfig>("config");
@@ -102,7 +104,9 @@ export default function ZoneEditPane({
name: z
.string()
.min(2, {
message: "Zone name must be at least 2 characters.",
message: t(
"masksAndZones.form.zoneName.error.mustBeAtLeastTwoCharacters",
),
})
.transform((val: string) => val.trim().replace(/\s+/g, "_"))
.refine(
@@ -110,7 +114,9 @@ export default function ZoneEditPane({
return !cameras.map((cam) => cam.name).includes(value);
},
{
message: "Zone name must not be the name of a camera.",
message: t(
"masksAndZones.form.zoneName.error.mustNotBeSameWithCamera",
),
},
)
.refine(
@@ -123,7 +129,7 @@ export default function ZoneEditPane({
return !otherPolygonNames.includes(value);
},
{
message: "Zone name already exists on this camera.",
message: t("masksAndZones.form.zoneName.error.alreadyExists"),
},
)
.refine(
@@ -131,27 +137,31 @@ export default function ZoneEditPane({
return !value.includes(".");
},
{
message: "Zone name must not contain a period.",
message: t(
"masksAndZones.form.zoneName.error.mustNotContainPeriod",
),
},
)
.refine((value: string) => /^[a-zA-Z0-9_-]+$/.test(value), {
message: "Zone name has an illegal character.",
message: t("masksAndZones.form.zoneName.error.hasIllegalCharacter"),
}),
inertia: z.coerce
.number()
.min(1, {
message: "Inertia must be above 0.",
message: t("masksAndZones.form.inertia.error.mustBeAboveZero"),
})
.or(z.literal("")),
loitering_time: z.coerce
.number()
.min(0, {
message: "Loitering time must be greater than or equal to 0.",
message: t(
"masksAndZones.form.loiteringTime.error.mustBeGreaterOrEqualZero",
),
})
.optional()
.or(z.literal("")),
isFinished: z.boolean().refine(() => polygon?.isFinished === true, {
message: "The polygon drawing must be finished before saving.",
message: t("masksAndZones.polygonDrawing.error.mustBeFinished"),
}),
objects: z.array(z.string()).optional(),
review_alerts: z.boolean().default(false).optional(),
@@ -160,28 +170,28 @@ export default function ZoneEditPane({
lineA: z.coerce
.number()
.min(0.1, {
message: "Distance must be greater than or equal to 0.1",
message: t("masksAndZones.form.distance.error"),
})
.optional()
.or(z.literal("")),
lineB: z.coerce
.number()
.min(0.1, {
message: "Distance must be greater than or equal to 0.1",
message: t("masksAndZones.form.distance.error"),
})
.optional()
.or(z.literal("")),
lineC: z.coerce
.number()
.min(0.1, {
message: "Distance must be greater than or equal to 0.1",
message: t("masksAndZones.form.distance.error"),
})
.optional()
.or(z.literal("")),
lineD: z.coerce
.number()
.min(0.1, {
message: "Distance must be greater than or equal to 0.1",
message: t("masksAndZones.form.distance.error"),
})
.optional()
.or(z.literal("")),
@@ -201,7 +211,7 @@ export default function ZoneEditPane({
return true;
},
{
message: "All distance fields must be filled to use speed estimation.",
message: t("masksAndZones.form.distance.error.mustBeFilled"),
path: ["speedEstimation"],
},
)
@@ -215,8 +225,9 @@ export default function ZoneEditPane({
);
},
{
message:
"Zones with loitering times greater than 0 should not be used with speed estimation.",
message: t(
"masksAndZones.zones.speedThreshold.toast.error.loiteringTimeError",
),
path: ["loitering_time"],
},
);
@@ -255,11 +266,11 @@ export default function ZoneEditPane({
polygon.points.length !== 4
) {
toast.error(
"Speed estimation has been disabled for this zone. Zones with speed estimation must have exactly 4 points.",
t("masksAndZones.zones.speedThreshold.toast.error.pointLengthError"),
);
form.setValue("speedEstimation", false);
}
}, [polygon, form]);
}, [polygon, form, t]);
const saveToConfig = useCallback(
async (
@@ -319,7 +330,7 @@ export default function ZoneEditPane({
// Wait for the config to be updated
mutatedConfig = await updateConfig();
} catch (error) {
toast.error(`Failed to save config changes.`, {
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
position: "top-center",
});
return;
@@ -401,16 +412,24 @@ export default function ZoneEditPane({
.then((res) => {
if (res.status === 200) {
toast.success(
`Zone (${zoneName}) has been saved. Restart Frigate to apply changes.`,
t("masksAndZones.zones.toast.success", {
zoneName,
}),
{
position: "top-center",
},
);
updateConfig();
} else {
toast.error(`Failed to save config changes: ${res.statusText}`, {
position: "top-center",
});
toast.error(
t("toast.save.error", {
errorMessage: res.statusText,
ns: "common",
}),
{
position: "top-center",
},
);
}
})
.catch((error) => {
@@ -418,9 +437,15 @@ export default function ZoneEditPane({
error.response?.data?.message ||
error.response?.data?.detail ||
"Unknown error";
toast.error(`Failed to save config changes: ${errorMessage}`, {
position: "top-center",
});
toast.error(
t("toast.save.error", {
errorMessage,
ns: "common",
}),
{
position: "top-center",
},
);
})
.finally(() => {
setIsLoading(false);
@@ -434,6 +459,7 @@ export default function ZoneEditPane({
scaledHeight,
setIsLoading,
cameraConfig,
t,
],
);
@@ -454,8 +480,8 @@ export default function ZoneEditPane({
}
useEffect(() => {
document.title = "Edit Zone - Frigate";
}, []);
document.title = t("masksAndZones.zones.documentTitle");
}, [t]);
if (!polygon) {
return;
@@ -465,23 +491,21 @@ export default function ZoneEditPane({
<>
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Zone
{polygon.name.length
? t("masksAndZones.zones.edit")
: t("masksAndZones.zones.add")}
</Heading>
<div className="my-2 text-sm text-muted-foreground">
<p>
Zones allow you to define a specific area of the frame so you can
determine whether or not an object is within a particular area.
</p>
<p>{t("masksAndZones.zones.desc")}</p>
</div>
<Separator className="my-3 bg-secondary" />
{polygons && activePolygonIndex !== undefined && (
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
polygons[activePolygonIndex].points.length == 0
? "points"
: "point"}
{t("masksAndZones.zones.point", {
count: polygons[activePolygonIndex].points.length,
})}
{polygons[activePolygonIndex].isFinished && (
<FaCheckCircle className="ml-2 size-5" />
)}
@@ -496,7 +520,7 @@ export default function ZoneEditPane({
</div>
)}
<div className="mb-3 text-sm text-muted-foreground">
Click to draw a polygon on the image.
{t("masksAndZones.zones.clickDrawPolygon")}
</div>
<Separator className="my-3 bg-secondary" />
@@ -508,17 +532,16 @@ export default function ZoneEditPane({
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormLabel>{t("masksAndZones.zones.name")}</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
placeholder="Enter a name..."
placeholder={t("masksAndZones.zones.name.inputPlaceHolder")}
{...field}
/>
</FormControl>
<FormDescription>
Name must be at least 2 characters and must not be the name of
a camera or another zone.
{t("masksAndZones.zones.name.tips")}
</FormDescription>
<FormMessage />
</FormItem>
@@ -530,7 +553,7 @@ export default function ZoneEditPane({
name="inertia"
render={({ field }) => (
<FormItem>
<FormLabel>Inertia</FormLabel>
<FormLabel>{t("masksAndZones.zones.inertia")}</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@@ -539,8 +562,9 @@ export default function ZoneEditPane({
/>
</FormControl>
<FormDescription>
Specifies how many frames that an object must be in a zone
before they are considered in the zone. <em>Default: 3</em>
<Trans ns="views/settings">
masksAndZones.zones.inertia.desc
</Trans>
</FormDescription>
<FormMessage />
</FormItem>
@@ -552,7 +576,7 @@ export default function ZoneEditPane({
name="loitering_time"
render={({ field }) => (
<FormItem>
<FormLabel>Loitering Time</FormLabel>
<FormLabel>{t("masksAndZones.zones.loiteringTime")}</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@@ -561,8 +585,9 @@ export default function ZoneEditPane({
/>
</FormControl>
<FormDescription>
Sets a minimum amount of time in seconds that the object must
be in the zone for it to activate. <em>Default: 0</em>
<Trans ns="views/settings">
masksAndZones.zones.loiteringTime.desc
</Trans>
</FormDescription>
<FormMessage />
</FormItem>
@@ -570,9 +595,9 @@ export default function ZoneEditPane({
/>
<Separator className="my-2 flex bg-secondary" />
<FormItem>
<FormLabel>Objects</FormLabel>
<FormLabel>{t("masksAndZones.zones.objects")}</FormLabel>
<FormDescription>
List of objects that apply to this zone.
{t("masksAndZones.zones.objects.desc")}
</FormDescription>
<ZoneObjectSelector
camera={polygon.camera}
@@ -606,7 +631,7 @@ export default function ZoneEditPane({
className="cursor-pointer text-primary"
htmlFor="allLabels"
>
Speed Estimation
{t("masksAndZones.zones.speedEstimation")}
</FormLabel>
<Switch
checked={field.value}
@@ -618,7 +643,9 @@ export default function ZoneEditPane({
polygons[activePolygonIndex].points.length !== 4
) {
toast.error(
"Zones with speed estimation must have exactly 4 points.",
t(
"masksAndZones.zones.speedEstimation.pointLengthError",
),
);
return;
}
@@ -627,7 +654,9 @@ export default function ZoneEditPane({
if (checked && loiteringTime && loiteringTime > 0) {
toast.error(
"Zones with loitering times greater than 0 should not be used with speed estimation.",
t(
"masksAndZones.zones.speedEstimation.loiteringTimeError",
),
);
}
field.onChange(checked);
@@ -637,8 +666,7 @@ export default function ZoneEditPane({
</FormControl>
</div>
<FormDescription>
Enable speed estimation for objects in this zone. The zone
must have exactly 4 points.
{t("masksAndZones.zones.speedEstimation.desc")}
</FormDescription>
<FormMessage />
</FormItem>
@@ -750,8 +778,12 @@ export default function ZoneEditPane({
render={({ field }) => (
<FormItem>
<FormLabel>
Speed Threshold (
{config?.ui.unit_system == "imperial" ? "mph" : "kph"})
{t("masksAndZones.zones.speedThreshold", {
unit:
config?.ui.unit_system == "imperial"
? t("unit.speed.mph")
: t("unit.speed.kph"),
})}
</FormLabel>
<FormControl>
<Input
@@ -760,8 +792,7 @@ export default function ZoneEditPane({
/>
</FormControl>
<FormDescription>
Specifies a minimum speed for objects to be considered
in this zone.
{t("masksAndZones.zones.speedThreshold.desc")}
</FormDescription>
<FormMessage />
</FormItem>
@@ -782,25 +813,25 @@ export default function ZoneEditPane({
<div className="flex flex-row gap-2 pt-5">
<Button
className="flex flex-1"
aria-label="Cancel"
aria-label={t("button.cancel", { ns: "common" })}
onClick={onCancel}
>
Cancel
{t("button.cancel", { ns: "common" })}
</Button>
<Button
variant="select"
disabled={isLoading}
className="flex flex-1"
aria-label="Save"
aria-label={t("button.save", { ns: "common" })}
type="submit"
>
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>{t("button.saving", { ns: "common" })}</span>
</div>
) : (
"Save"
t("button.save", { ns: "common" })
)}
</Button>
</div>
@@ -823,6 +854,7 @@ export function ZoneObjectSelector({
selectedLabels,
updateLabelFilter,
}: ZoneObjectSelectorProps) {
const { t } = useTranslation(["views/settings"]);
const { data: config } = useSWR<FrigateConfig>("config");
const attributeLabels = useMemo(() => {
@@ -880,7 +912,7 @@ export function ZoneObjectSelector({
<div className="scrollbar-container h-auto overflow-y-auto overflow-x-hidden">
<div className="my-2.5 flex items-center justify-between">
<Label className="cursor-pointer text-primary" htmlFor="allLabels">
All Objects
{t("masksAndZones.zones.allObjects")}
</Label>
<Switch
className="ml-1"
@@ -901,7 +933,7 @@ export function ZoneObjectSelector({
className="w-full cursor-pointer capitalize text-primary"
htmlFor={item}
>
{item.replaceAll("_", " ")}
{t(item, { ns: "objects" })}
</Label>
<Switch
key={item}