mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-07-03 10:31:14 +03:00
remove obsolete camera edit form
This commit is contained in:
Josh Hawkins
parent
497084ada1
commit
daadbfe913
@ -1,755 +0,0 @@
|
|||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Form,
|
|
||||||
FormControl,
|
|
||||||
FormField,
|
|
||||||
FormItem,
|
|
||||||
FormLabel,
|
|
||||||
FormMessage,
|
|
||||||
} from "@/components/ui/form";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Switch } from "@/components/ui/switch";
|
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
|
||||||
import Heading from "@/components/ui/heading";
|
|
||||||
import { Separator } from "@/components/ui/separator";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { useForm, useFieldArray } from "react-hook-form";
|
|
||||||
import { z } from "zod";
|
|
||||||
import axios from "axios";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { useState, useMemo, useEffect } from "react";
|
|
||||||
import { LuTrash2, LuPlus } from "react-icons/lu";
|
|
||||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
|
||||||
import useSWR from "swr";
|
|
||||||
import { processCameraName } from "@/utils/cameraUtil";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { ConfigSetBody } from "@/types/cameraWizard";
|
|
||||||
import { Toaster } from "../ui/sonner";
|
|
||||||
|
|
||||||
const RoleEnum = z.enum(["audio", "detect", "record"]);
|
|
||||||
type Role = z.infer<typeof RoleEnum>;
|
|
||||||
|
|
||||||
type CameraEditFormProps = {
|
|
||||||
cameraName?: string;
|
|
||||||
onSave?: () => void;
|
|
||||||
onCancel?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function CameraEditForm({
|
|
||||||
cameraName,
|
|
||||||
onSave,
|
|
||||||
onCancel,
|
|
||||||
}: CameraEditFormProps) {
|
|
||||||
const { t } = useTranslation(["views/settings"]);
|
|
||||||
const { data: config, mutate: mutateConfig } =
|
|
||||||
useSWR<FrigateConfig>("config");
|
|
||||||
const { data: rawPaths, mutate: mutateRawPaths } = useSWR<{
|
|
||||||
cameras: Record<
|
|
||||||
string,
|
|
||||||
{ ffmpeg: { inputs: { path: string; roles: string[] }[] } }
|
|
||||||
>;
|
|
||||||
go2rtc: { streams: Record<string, string | string[]> };
|
|
||||||
}>(cameraName ? "config/raw_paths" : null);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
|
|
||||||
const formSchema = useMemo(
|
|
||||||
() =>
|
|
||||||
z.object({
|
|
||||||
cameraName: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: t("cameraManagement.cameraConfig.nameRequired") }),
|
|
||||||
enabled: z.boolean(),
|
|
||||||
ffmpeg: z.object({
|
|
||||||
inputs: z
|
|
||||||
.array(
|
|
||||||
z.object({
|
|
||||||
path: z.string().min(1, {
|
|
||||||
message: t(
|
|
||||||
"cameraManagement.cameraConfig.ffmpeg.pathRequired",
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
roles: z.array(RoleEnum).min(1, {
|
|
||||||
message: t(
|
|
||||||
"cameraManagement.cameraConfig.ffmpeg.rolesRequired",
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
.min(1, {
|
|
||||||
message: t("cameraManagement.cameraConfig.ffmpeg.inputsRequired"),
|
|
||||||
})
|
|
||||||
.refine(
|
|
||||||
(inputs) => {
|
|
||||||
const roleOccurrences = new Map<Role, number>();
|
|
||||||
inputs.forEach((input) => {
|
|
||||||
input.roles.forEach((role) => {
|
|
||||||
roleOccurrences.set(
|
|
||||||
role,
|
|
||||||
(roleOccurrences.get(role) || 0) + 1,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return Array.from(roleOccurrences.values()).every(
|
|
||||||
(count) => count <= 1,
|
|
||||||
);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: t("cameraManagement.cameraConfig.ffmpeg.rolesUnique"),
|
|
||||||
path: ["inputs"],
|
|
||||||
},
|
|
||||||
),
|
|
||||||
}),
|
|
||||||
go2rtcStreams: z.record(z.string(), z.array(z.string())).optional(),
|
|
||||||
}),
|
|
||||||
[t],
|
|
||||||
);
|
|
||||||
|
|
||||||
type FormValues = z.infer<typeof formSchema>;
|
|
||||||
|
|
||||||
const cameraInfo = useMemo(() => {
|
|
||||||
if (!cameraName || !config?.cameras[cameraName]) {
|
|
||||||
return {
|
|
||||||
friendly_name: undefined,
|
|
||||||
name: cameraName || "",
|
|
||||||
roles: new Set<Role>(),
|
|
||||||
go2rtcStreams: {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const camera = config.cameras[cameraName];
|
|
||||||
const roles = new Set<Role>();
|
|
||||||
|
|
||||||
camera.ffmpeg?.inputs?.forEach((input) => {
|
|
||||||
input.roles.forEach((role) => roles.add(role as Role));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Load existing go2rtc streams
|
|
||||||
const go2rtcStreams = config.go2rtc?.streams || {};
|
|
||||||
|
|
||||||
return {
|
|
||||||
friendly_name: camera?.friendly_name || cameraName,
|
|
||||||
name: cameraName,
|
|
||||||
roles,
|
|
||||||
go2rtcStreams,
|
|
||||||
};
|
|
||||||
}, [cameraName, config]);
|
|
||||||
|
|
||||||
const defaultValues: FormValues = {
|
|
||||||
cameraName: cameraInfo?.friendly_name || cameraName || "",
|
|
||||||
enabled: true,
|
|
||||||
ffmpeg: {
|
|
||||||
inputs: [
|
|
||||||
{
|
|
||||||
path: "",
|
|
||||||
roles: cameraInfo.roles.has("detect") ? [] : ["detect"],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
go2rtcStreams: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Load existing camera config if editing
|
|
||||||
if (cameraName && config?.cameras[cameraName]) {
|
|
||||||
const camera = config.cameras[cameraName];
|
|
||||||
defaultValues.enabled = camera.enabled ?? true;
|
|
||||||
|
|
||||||
// Use raw paths from the admin endpoint if available, otherwise fall back to masked paths
|
|
||||||
const rawCameraData = rawPaths?.cameras?.[cameraName];
|
|
||||||
defaultValues.ffmpeg.inputs = rawCameraData?.ffmpeg?.inputs?.length
|
|
||||||
? rawCameraData.ffmpeg.inputs.map((input) => ({
|
|
||||||
path: input.path,
|
|
||||||
roles: input.roles as Role[],
|
|
||||||
}))
|
|
||||||
: camera.ffmpeg?.inputs?.length
|
|
||||||
? camera.ffmpeg.inputs.map((input) => ({
|
|
||||||
path: input.path,
|
|
||||||
roles: input.roles as Role[],
|
|
||||||
}))
|
|
||||||
: defaultValues.ffmpeg.inputs;
|
|
||||||
|
|
||||||
const go2rtcStreams =
|
|
||||||
rawPaths?.go2rtc?.streams || config.go2rtc?.streams || {};
|
|
||||||
const cameraStreams: Record<string, string[]> = {};
|
|
||||||
|
|
||||||
// get candidate stream names for this camera. could be the camera's own name,
|
|
||||||
// any restream names referenced by this camera, or any keys under live --> streams
|
|
||||||
const validNames = new Set<string>();
|
|
||||||
validNames.add(cameraName);
|
|
||||||
|
|
||||||
// deduce go2rtc stream names from rtsp restream inputs
|
|
||||||
camera.ffmpeg?.inputs?.forEach((input) => {
|
|
||||||
// exclude any query strings or trailing slashes from the stream name
|
|
||||||
const restreamMatch = input.path.match(
|
|
||||||
/^rtsp:\/\/127\.0\.0\.1:8554\/([^?#/]+)(?:[?#].*)?$/,
|
|
||||||
);
|
|
||||||
if (restreamMatch) {
|
|
||||||
const streamName = restreamMatch[1];
|
|
||||||
validNames.add(streamName);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Include live --> streams keys
|
|
||||||
const liveStreams = camera?.live?.streams;
|
|
||||||
if (liveStreams) {
|
|
||||||
Object.keys(liveStreams).forEach((key) => {
|
|
||||||
validNames.add(key);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Map only go2rtc entries that match the collected names
|
|
||||||
Object.entries(go2rtcStreams).forEach(([name, urls]) => {
|
|
||||||
if (validNames.has(name)) {
|
|
||||||
cameraStreams[name] = Array.isArray(urls) ? urls : [urls];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
defaultValues.go2rtcStreams = cameraStreams;
|
|
||||||
}
|
|
||||||
|
|
||||||
const form = useForm<FormValues>({
|
|
||||||
resolver: zodResolver(formSchema),
|
|
||||||
defaultValues,
|
|
||||||
mode: "onChange",
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update form values when rawPaths loads
|
|
||||||
useEffect(() => {
|
|
||||||
if (
|
|
||||||
cameraName &&
|
|
||||||
config?.cameras[cameraName] &&
|
|
||||||
rawPaths?.cameras?.[cameraName]
|
|
||||||
) {
|
|
||||||
const camera = config.cameras[cameraName];
|
|
||||||
const rawCameraData = rawPaths.cameras[cameraName];
|
|
||||||
|
|
||||||
// Update ffmpeg inputs with raw paths
|
|
||||||
if (rawCameraData.ffmpeg?.inputs?.length) {
|
|
||||||
form.setValue(
|
|
||||||
"ffmpeg.inputs",
|
|
||||||
rawCameraData.ffmpeg.inputs.map((input) => ({
|
|
||||||
path: input.path,
|
|
||||||
roles: input.roles as Role[],
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update go2rtc streams with raw URLs
|
|
||||||
if (rawPaths.go2rtc?.streams) {
|
|
||||||
const validNames = new Set<string>();
|
|
||||||
validNames.add(cameraName);
|
|
||||||
|
|
||||||
camera.ffmpeg?.inputs?.forEach((input) => {
|
|
||||||
const restreamMatch = input.path.match(
|
|
||||||
/^rtsp:\/\/127\.0\.0\.1:8554\/([^?#/]+)(?:[?#].*)?$/,
|
|
||||||
);
|
|
||||||
if (restreamMatch) {
|
|
||||||
validNames.add(restreamMatch[1]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const liveStreams = camera?.live?.streams;
|
|
||||||
if (liveStreams) {
|
|
||||||
Object.keys(liveStreams).forEach((key) => validNames.add(key));
|
|
||||||
}
|
|
||||||
|
|
||||||
const cameraStreams: Record<string, string[]> = {};
|
|
||||||
Object.entries(rawPaths.go2rtc.streams).forEach(([name, urls]) => {
|
|
||||||
if (validNames.has(name)) {
|
|
||||||
cameraStreams[name] = Array.isArray(urls) ? urls : [urls];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Object.keys(cameraStreams).length > 0) {
|
|
||||||
form.setValue("go2rtcStreams", cameraStreams);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [cameraName, config, rawPaths, form]);
|
|
||||||
|
|
||||||
const { fields, append, remove } = useFieldArray({
|
|
||||||
control: form.control,
|
|
||||||
name: "ffmpeg.inputs",
|
|
||||||
});
|
|
||||||
|
|
||||||
// Watch ffmpeg.inputs to track used roles
|
|
||||||
const watchedInputs = form.watch("ffmpeg.inputs");
|
|
||||||
|
|
||||||
// Watch go2rtc streams
|
|
||||||
const watchedGo2rtcStreams = form.watch("go2rtcStreams") || {};
|
|
||||||
|
|
||||||
const saveCameraConfig = (values: FormValues) => {
|
|
||||||
setIsLoading(true);
|
|
||||||
const { finalCameraName, friendlyName } = processCameraName(
|
|
||||||
values.cameraName,
|
|
||||||
);
|
|
||||||
|
|
||||||
const configData: ConfigSetBody["config_data"] = {
|
|
||||||
cameras: {
|
|
||||||
[finalCameraName]: {
|
|
||||||
enabled: values.enabled,
|
|
||||||
...(friendlyName && { friendly_name: friendlyName }),
|
|
||||||
ffmpeg: {
|
|
||||||
inputs: values.ffmpeg.inputs.map((input) => ({
|
|
||||||
path: input.path,
|
|
||||||
roles: input.roles,
|
|
||||||
})),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add go2rtc streams if provided
|
|
||||||
if (values.go2rtcStreams && Object.keys(values.go2rtcStreams).length > 0) {
|
|
||||||
configData.go2rtc = {
|
|
||||||
streams: values.go2rtcStreams,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const requestBody: ConfigSetBody = {
|
|
||||||
requires_restart: 1,
|
|
||||||
config_data: configData,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add update_topic for new cameras
|
|
||||||
if (!cameraName) {
|
|
||||||
requestBody.update_topic = `config/cameras/${finalCameraName}/add`;
|
|
||||||
}
|
|
||||||
|
|
||||||
axios
|
|
||||||
.put("config/set", requestBody)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.status === 200) {
|
|
||||||
// Update running go2rtc instance if streams were configured
|
|
||||||
if (
|
|
||||||
values.go2rtcStreams &&
|
|
||||||
Object.keys(values.go2rtcStreams).length > 0
|
|
||||||
) {
|
|
||||||
const updatePromises = Object.entries(values.go2rtcStreams).map(
|
|
||||||
([streamName, urls]) =>
|
|
||||||
axios.put(
|
|
||||||
`go2rtc/streams/${streamName}?src=${encodeURIComponent(urls[0])}`,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
Promise.allSettled(updatePromises).then(() => {
|
|
||||||
toast.success(
|
|
||||||
t("cameraManagement.cameraConfig.toast.success", {
|
|
||||||
cameraName: values.cameraName,
|
|
||||||
}),
|
|
||||||
{ position: "top-center" },
|
|
||||||
);
|
|
||||||
mutateConfig();
|
|
||||||
mutateRawPaths();
|
|
||||||
if (onSave) onSave();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
toast.success(
|
|
||||||
t("cameraManagement.cameraConfig.toast.success", {
|
|
||||||
cameraName: values.cameraName,
|
|
||||||
}),
|
|
||||||
{ position: "top-center" },
|
|
||||||
);
|
|
||||||
mutateConfig();
|
|
||||||
mutateRawPaths();
|
|
||||||
if (onSave) onSave();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
throw new Error(res.statusText);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
const errorMessage =
|
|
||||||
error.response?.data?.message ||
|
|
||||||
error.response?.data?.detail ||
|
|
||||||
"Unknown error";
|
|
||||||
toast.error(
|
|
||||||
t("toast.save.error.title", { errorMessage, ns: "common" }),
|
|
||||||
{ position: "top-center" },
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setIsLoading(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = (values: FormValues) => {
|
|
||||||
if (
|
|
||||||
cameraName &&
|
|
||||||
values.cameraName !== cameraName &&
|
|
||||||
values.cameraName !== cameraInfo?.friendly_name
|
|
||||||
) {
|
|
||||||
// If camera name changed, delete old camera config
|
|
||||||
const deleteRequestBody = {
|
|
||||||
requires_restart: 1,
|
|
||||||
config_data: {
|
|
||||||
cameras: {
|
|
||||||
[cameraName]: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
update_topic: `config/cameras/${cameraName}/remove`,
|
|
||||||
};
|
|
||||||
|
|
||||||
axios
|
|
||||||
.put("config/set", deleteRequestBody)
|
|
||||||
.then(() => saveCameraConfig(values))
|
|
||||||
.catch((error) => {
|
|
||||||
const errorMessage =
|
|
||||||
error.response?.data?.message ||
|
|
||||||
error.response?.data?.detail ||
|
|
||||||
"Unknown error";
|
|
||||||
toast.error(
|
|
||||||
t("toast.save.error.title", { errorMessage, ns: "common" }),
|
|
||||||
{ position: "top-center" },
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setIsLoading(false);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
saveCameraConfig(values);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Determine available roles for new streams
|
|
||||||
const getAvailableRoles = (): Role[] => {
|
|
||||||
const used = new Set<Role>();
|
|
||||||
watchedInputs.forEach((input) => {
|
|
||||||
input.roles.forEach((role) => used.add(role));
|
|
||||||
});
|
|
||||||
return used.has("detect") ? [] : ["detect"];
|
|
||||||
};
|
|
||||||
|
|
||||||
const getUsedRolesExcludingIndex = (excludeIndex: number) => {
|
|
||||||
const roles = new Set<Role>();
|
|
||||||
watchedInputs.forEach((input, idx) => {
|
|
||||||
if (idx !== excludeIndex) {
|
|
||||||
input.roles.forEach((role) => roles.add(role));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return roles;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="scrollbar-container max-w-4xl overflow-y-auto md:mb-24">
|
|
||||||
<Toaster position="top-center" closeButton />
|
|
||||||
<Heading as="h3" className="my-2">
|
|
||||||
{cameraName
|
|
||||||
? t("cameraManagement.cameraConfig.edit")
|
|
||||||
: t("cameraManagement.cameraConfig.add")}
|
|
||||||
</Heading>
|
|
||||||
<div className="my-3 text-sm text-muted-foreground">
|
|
||||||
{t("cameraManagement.cameraConfig.description")}
|
|
||||||
</div>
|
|
||||||
<Separator className="my-3 bg-secondary" />
|
|
||||||
|
|
||||||
<Form {...form}>
|
|
||||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="cameraName"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>{t("cameraManagement.cameraConfig.name")}</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder={t(
|
|
||||||
"cameraManagement.cameraConfig.namePlaceholder",
|
|
||||||
)}
|
|
||||||
{...field}
|
|
||||||
disabled={!!cameraName} // Prevent editing name for existing cameras
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="enabled"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem className="flex items-center space-x-2">
|
|
||||||
<FormControl>
|
|
||||||
<Switch
|
|
||||||
checked={field.value}
|
|
||||||
onCheckedChange={field.onChange}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormLabel>
|
|
||||||
{t("cameraManagement.cameraConfig.enabled")}
|
|
||||||
</FormLabel>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Label className="text-sm font-medium">
|
|
||||||
{t("cameraManagement.cameraConfig.ffmpeg.inputs")}
|
|
||||||
</Label>
|
|
||||||
{fields.map((field, index) => (
|
|
||||||
<Card key={field.id} className="bg-secondary text-primary">
|
|
||||||
<CardContent className="space-y-4 p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h4 className="font-medium">
|
|
||||||
{t("cameraWizard.step3.streamTitle", {
|
|
||||||
number: index + 1,
|
|
||||||
})}
|
|
||||||
</h4>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => remove(index)}
|
|
||||||
disabled={fields.length === 1}
|
|
||||||
className="text-secondary-foreground hover:text-secondary-foreground"
|
|
||||||
>
|
|
||||||
<LuTrash2 className="size-5" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name={`ffmpeg.inputs.${index}.path`}
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel className="text-sm font-medium">
|
|
||||||
{t("cameraManagement.cameraConfig.ffmpeg.path")}
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
className="h-8"
|
|
||||||
placeholder={t(
|
|
||||||
"cameraManagement.cameraConfig.ffmpeg.pathPlaceholder",
|
|
||||||
)}
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-sm font-medium">
|
|
||||||
{t("cameraManagement.cameraConfig.ffmpeg.roles")}
|
|
||||||
</Label>
|
|
||||||
<div className="rounded-lg bg-background p-3">
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{(["detect", "record", "audio"] as const).map(
|
|
||||||
(role) => {
|
|
||||||
const isUsedElsewhere =
|
|
||||||
getUsedRolesExcludingIndex(index).has(role);
|
|
||||||
const isChecked =
|
|
||||||
watchedInputs[index]?.roles?.includes(role) ||
|
|
||||||
false;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={role}
|
|
||||||
className="flex w-full items-center justify-between"
|
|
||||||
>
|
|
||||||
<span className="text-sm capitalize">
|
|
||||||
{role}
|
|
||||||
</span>
|
|
||||||
<Switch
|
|
||||||
checked={isChecked}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
const currentRoles =
|
|
||||||
watchedInputs[index]?.roles || [];
|
|
||||||
const updatedRoles = checked
|
|
||||||
? [...currentRoles, role]
|
|
||||||
: currentRoles.filter((r) => r !== role);
|
|
||||||
form.setValue(
|
|
||||||
`ffmpeg.inputs.${index}.roles`,
|
|
||||||
updatedRoles,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
disabled={!isChecked && isUsedElsewhere}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
<FormMessage>
|
|
||||||
{form.formState.errors.ffmpeg?.inputs?.root &&
|
|
||||||
form.formState.errors.ffmpeg.inputs.root.message}
|
|
||||||
</FormMessage>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
onClick={() => append({ path: "", roles: getAvailableRoles() })}
|
|
||||||
variant="outline"
|
|
||||||
className=""
|
|
||||||
>
|
|
||||||
<LuPlus className="mr-2 size-4" />
|
|
||||||
{t("cameraManagement.cameraConfig.ffmpeg.addInput")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* go2rtc Streams Section */}
|
|
||||||
{Object.keys(watchedGo2rtcStreams).length > 0 && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Label className="text-sm font-medium">
|
|
||||||
{t("cameraManagement.cameraConfig.go2rtcStreams")}
|
|
||||||
</Label>
|
|
||||||
{Object.entries(watchedGo2rtcStreams).map(
|
|
||||||
([streamName, urls]) => (
|
|
||||||
<Card key={streamName} className="bg-secondary text-primary">
|
|
||||||
<CardContent className="space-y-4 p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h4 className="font-medium">{streamName}</h4>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
const updatedStreams = { ...watchedGo2rtcStreams };
|
|
||||||
delete updatedStreams[streamName];
|
|
||||||
form.setValue("go2rtcStreams", updatedStreams);
|
|
||||||
}}
|
|
||||||
className="text-secondary-foreground hover:text-secondary-foreground"
|
|
||||||
>
|
|
||||||
<LuTrash2 className="size-5" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-sm font-medium">
|
|
||||||
{t("cameraManagement.cameraConfig.streamUrls")}
|
|
||||||
</Label>
|
|
||||||
{(Array.isArray(urls) ? urls : [urls]).map(
|
|
||||||
(url, urlIndex) => (
|
|
||||||
<div
|
|
||||||
key={urlIndex}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
className="h-8 flex-1"
|
|
||||||
value={url}
|
|
||||||
onChange={(e) => {
|
|
||||||
const updatedStreams = {
|
|
||||||
...watchedGo2rtcStreams,
|
|
||||||
};
|
|
||||||
const currentUrls = Array.isArray(
|
|
||||||
updatedStreams[streamName],
|
|
||||||
)
|
|
||||||
? updatedStreams[streamName]
|
|
||||||
: [updatedStreams[streamName]];
|
|
||||||
currentUrls[urlIndex] = e.target.value;
|
|
||||||
updatedStreams[streamName] = currentUrls;
|
|
||||||
form.setValue(
|
|
||||||
"go2rtcStreams",
|
|
||||||
updatedStreams,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
placeholder="rtsp://username:password@host:port/path"
|
|
||||||
/>
|
|
||||||
{(Array.isArray(urls) ? urls : [urls]).length >
|
|
||||||
1 && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
const updatedStreams = {
|
|
||||||
...watchedGo2rtcStreams,
|
|
||||||
};
|
|
||||||
const currentUrls = Array.isArray(
|
|
||||||
updatedStreams[streamName],
|
|
||||||
)
|
|
||||||
? updatedStreams[streamName]
|
|
||||||
: [updatedStreams[streamName]];
|
|
||||||
currentUrls.splice(urlIndex, 1);
|
|
||||||
updatedStreams[streamName] = currentUrls;
|
|
||||||
form.setValue(
|
|
||||||
"go2rtcStreams",
|
|
||||||
updatedStreams,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
className="text-secondary-foreground hover:text-secondary-foreground"
|
|
||||||
>
|
|
||||||
<LuTrash2 className="size-4" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
const updatedStreams = { ...watchedGo2rtcStreams };
|
|
||||||
const currentUrls = Array.isArray(
|
|
||||||
updatedStreams[streamName],
|
|
||||||
)
|
|
||||||
? updatedStreams[streamName]
|
|
||||||
: [updatedStreams[streamName]];
|
|
||||||
currentUrls.push("");
|
|
||||||
updatedStreams[streamName] = currentUrls;
|
|
||||||
form.setValue("go2rtcStreams", updatedStreams);
|
|
||||||
}}
|
|
||||||
className="w-fit"
|
|
||||||
>
|
|
||||||
<LuPlus className="mr-2 size-4" />
|
|
||||||
{t("cameraManagement.cameraConfig.addUrl")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
const streamName = `${cameraName}_stream_${Object.keys(watchedGo2rtcStreams).length + 1}`;
|
|
||||||
const updatedStreams = {
|
|
||||||
...watchedGo2rtcStreams,
|
|
||||||
[streamName]: [""],
|
|
||||||
};
|
|
||||||
form.setValue("go2rtcStreams", updatedStreams);
|
|
||||||
}}
|
|
||||||
variant="outline"
|
|
||||||
className=""
|
|
||||||
>
|
|
||||||
<LuPlus className="mr-2 size-4" />
|
|
||||||
{t("cameraManagement.cameraConfig.addGo2rtcStream")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[50%]">
|
|
||||||
<Button
|
|
||||||
className="flex flex-1"
|
|
||||||
aria-label={t("button.cancel", { ns: "common" })}
|
|
||||||
onClick={onCancel}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
{t("button.cancel", { ns: "common" })}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="select"
|
|
||||||
disabled={isLoading}
|
|
||||||
className="flex flex-1"
|
|
||||||
aria-label={t("button.save", { ns: "common" })}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex flex-row items-center gap-2">
|
|
||||||
<ActivityIndicator />
|
|
||||||
<span>{t("button.saving", { ns: "common" })}</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
t("button.save", { ns: "common" })
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -11,7 +11,6 @@ import { Button } from "@/components/ui/button";
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import CameraEditForm from "@/components/settings/CameraEditForm";
|
|
||||||
import CameraWizardDialog from "@/components/settings/CameraWizardDialog";
|
import CameraWizardDialog from "@/components/settings/CameraWizardDialog";
|
||||||
import DeleteCameraDialog from "@/components/overlay/dialog/DeleteCameraDialog";
|
import DeleteCameraDialog from "@/components/overlay/dialog/DeleteCameraDialog";
|
||||||
import {
|
import {
|
||||||
@ -24,10 +23,8 @@ import {
|
|||||||
LuTrash2,
|
LuTrash2,
|
||||||
} from "react-icons/lu";
|
} from "react-icons/lu";
|
||||||
import { Reorder, useDragControls } from "framer-motion";
|
import { Reorder, useDragControls } from "framer-motion";
|
||||||
import { IoMdArrowRoundBack } from "react-icons/io";
|
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { useDocDomain } from "@/hooks/use-doc-domain";
|
import { useDocDomain } from "@/hooks/use-doc-domain";
|
||||||
import { isDesktop } from "react-device-detect";
|
|
||||||
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
|
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
|
||||||
import { Trans } from "react-i18next";
|
import { Trans } from "react-i18next";
|
||||||
import { useEnabledState, useRestart } from "@/api/ws";
|
import { useEnabledState, useRestart } from "@/api/ws";
|
||||||
@ -78,12 +75,10 @@ const REORDER_SAVED_INDICATOR_MS = 1500;
|
|||||||
type ReorderSaveStatus = "idle" | "saving" | "saved";
|
type ReorderSaveStatus = "idle" | "saving" | "saved";
|
||||||
|
|
||||||
type CameraManagementViewProps = {
|
type CameraManagementViewProps = {
|
||||||
setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
|
|
||||||
profileState?: ProfileState;
|
profileState?: ProfileState;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function CameraManagementView({
|
export default function CameraManagementView({
|
||||||
setUnsavedChanges,
|
|
||||||
profileState,
|
profileState,
|
||||||
}: CameraManagementViewProps) {
|
}: CameraManagementViewProps) {
|
||||||
const { t } = useTranslation(["views/settings", "common"]);
|
const { t } = useTranslation(["views/settings", "common"]);
|
||||||
@ -91,12 +86,6 @@ export default function CameraManagementView({
|
|||||||
const { data: config, mutate: updateConfig } =
|
const { data: config, mutate: updateConfig } =
|
||||||
useSWR<FrigateConfig>("config");
|
useSWR<FrigateConfig>("config");
|
||||||
|
|
||||||
const [viewMode, setViewMode] = useState<"settings" | "add" | "edit">(
|
|
||||||
"settings",
|
|
||||||
); // Control view state
|
|
||||||
const [editCameraName, setEditCameraName] = useState<string | undefined>(
|
|
||||||
undefined,
|
|
||||||
); // Track camera being edited
|
|
||||||
const [showWizard, setShowWizard] = useState(false);
|
const [showWizard, setShowWizard] = useState(false);
|
||||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||||
|
|
||||||
@ -226,14 +215,6 @@ export default function CameraManagementView({
|
|||||||
document.title = t("documentTitle.cameraManagement");
|
document.title = t("documentTitle.cameraManagement");
|
||||||
}, [t]);
|
}, [t]);
|
||||||
|
|
||||||
// Handle back navigation from add/edit form
|
|
||||||
const handleBack = useCallback(() => {
|
|
||||||
setViewMode("settings");
|
|
||||||
setEditCameraName(undefined);
|
|
||||||
setUnsavedChanges(false);
|
|
||||||
updateConfig();
|
|
||||||
}, [updateConfig, setUnsavedChanges]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Toaster
|
<Toaster
|
||||||
@ -244,157 +225,124 @@ export default function CameraManagementView({
|
|||||||
/>
|
/>
|
||||||
<div className="flex size-full space-y-6">
|
<div className="flex size-full space-y-6">
|
||||||
<div className="scrollbar-container flex-1 overflow-y-auto pb-2">
|
<div className="scrollbar-container flex-1 overflow-y-auto pb-2">
|
||||||
{viewMode === "settings" ? (
|
<Heading as="h4" className="mb-2">
|
||||||
<>
|
{t("cameraManagement.title")}
|
||||||
<Heading as="h4" className="mb-2">
|
</Heading>
|
||||||
{t("cameraManagement.title")}
|
<p className="mb-6 max-w-5xl text-sm text-muted-foreground">
|
||||||
</Heading>
|
{t("cameraManagement.description")}
|
||||||
<p className="mb-6 max-w-5xl text-sm text-muted-foreground">
|
</p>
|
||||||
{t("cameraManagement.description")}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="w-full max-w-5xl space-y-6">
|
<div className="w-full max-w-5xl space-y-6">
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="select"
|
variant="select"
|
||||||
onClick={() => setShowWizard(true)}
|
onClick={() => setShowWizard(true)}
|
||||||
className="mb-2 flex max-w-48 items-center gap-2"
|
className="mb-2 flex max-w-48 items-center gap-2"
|
||||||
>
|
>
|
||||||
<LuPlus className="h-4 w-4" />
|
<LuPlus className="h-4 w-4" />
|
||||||
{t("cameraManagement.addCamera")}
|
{t("cameraManagement.addCamera")}
|
||||||
</Button>
|
</Button>
|
||||||
{enabledCameras.length + disabledCameras.length > 0 && (
|
{enabledCameras.length + disabledCameras.length > 0 && (
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
onClick={() => setShowDeleteDialog(true)}
|
|
||||||
className="mb-2 flex max-w-48 items-center gap-2 text-white"
|
|
||||||
>
|
|
||||||
<LuTrash2 className="h-4 w-4" />
|
|
||||||
{t("cameraManagement.deleteCamera")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{(enabledCameras.length > 0 || disabledCameras.length > 0) && (
|
|
||||||
<SettingsGroupCard
|
|
||||||
title={
|
|
||||||
<Trans ns="views/settings">
|
|
||||||
cameraManagement.streams.title
|
|
||||||
</Trans>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className={SPLIT_ROW_CLASS_NAME}>
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label>{t("cameraManagement.streams.label")}</Label>
|
|
||||||
<p className="hidden text-sm text-muted-foreground md:block">
|
|
||||||
<Trans ns="views/settings">
|
|
||||||
cameraManagement.streams.description
|
|
||||||
</Trans>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="max-w-md space-y-1.5">
|
|
||||||
<div className="space-y-3 rounded-lg bg-secondary p-4">
|
|
||||||
{orderedCameras.length > 0 && (
|
|
||||||
<Reorder.Group
|
|
||||||
as="div"
|
|
||||||
axis="y"
|
|
||||||
values={orderedCameras}
|
|
||||||
onReorder={setOrderedCameras}
|
|
||||||
className="space-y-2"
|
|
||||||
>
|
|
||||||
{orderedCameras.map((camera) => (
|
|
||||||
<ActiveCameraRow
|
|
||||||
key={camera}
|
|
||||||
camera={camera}
|
|
||||||
onConfigChanged={updateConfig}
|
|
||||||
onDragEnd={handleReorderDragEnd}
|
|
||||||
setRestartDialogOpen={setRestartDialogOpen}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Reorder.Group>
|
|
||||||
)}
|
|
||||||
{orderedCameras.length > 0 &&
|
|
||||||
disabledCameras.length > 0 && (
|
|
||||||
<div className="border-t border-border/40" />
|
|
||||||
)}
|
|
||||||
{disabledCameras.length > 0 && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
||||||
{t(
|
|
||||||
"cameraManagement.streams.disabledSubheading",
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
{disabledCameras.map((camera) => (
|
|
||||||
<DisabledCameraRow
|
|
||||||
key={camera}
|
|
||||||
camera={camera}
|
|
||||||
onConfigChanged={updateConfig}
|
|
||||||
setRestartDialogOpen={setRestartDialogOpen}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<ReorderSaveStatusIndicator
|
|
||||||
status={reorderSaveStatus}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-muted-foreground md:hidden">
|
|
||||||
<Trans ns="views/settings">
|
|
||||||
cameraManagement.streams.description
|
|
||||||
</Trans>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</SettingsGroupCard>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{profileState &&
|
|
||||||
profileState.allProfileNames.length > 0 &&
|
|
||||||
enabledCameras.length > 0 && (
|
|
||||||
<ProfileCameraEnableSection
|
|
||||||
profileState={profileState}
|
|
||||||
cameras={enabledCameras}
|
|
||||||
config={config}
|
|
||||||
onConfigChanged={updateConfig}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{config?.lpr?.enabled && allCameras.length > 0 && (
|
|
||||||
<CameraTypeSection
|
|
||||||
cameras={allCameras}
|
|
||||||
config={config}
|
|
||||||
onConfigChanged={updateConfig}
|
|
||||||
setRestartDialogOpen={setRestartDialogOpen}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="mb-4 flex items-center gap-2">
|
|
||||||
<Button
|
<Button
|
||||||
className={`flex items-center gap-2.5 rounded-lg`}
|
variant="destructive"
|
||||||
aria-label={t("label.back", { ns: "common" })}
|
onClick={() => setShowDeleteDialog(true)}
|
||||||
size="sm"
|
className="mb-2 flex max-w-48 items-center gap-2 text-white"
|
||||||
onClick={handleBack}
|
|
||||||
>
|
>
|
||||||
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
|
<LuTrash2 className="h-4 w-4" />
|
||||||
{isDesktop && (
|
{t("cameraManagement.deleteCamera")}
|
||||||
<div className="text-primary">
|
|
||||||
{t("button.back", { ns: "common" })}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
)}
|
||||||
<div className="md:max-w-5xl">
|
</div>
|
||||||
<CameraEditForm
|
|
||||||
cameraName={viewMode === "edit" ? editCameraName : undefined}
|
{(enabledCameras.length > 0 || disabledCameras.length > 0) && (
|
||||||
onSave={handleBack}
|
<SettingsGroupCard
|
||||||
onCancel={handleBack}
|
title={
|
||||||
|
<Trans ns="views/settings">
|
||||||
|
cameraManagement.streams.title
|
||||||
|
</Trans>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className={SPLIT_ROW_CLASS_NAME}>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>{t("cameraManagement.streams.label")}</Label>
|
||||||
|
<p className="hidden text-sm text-muted-foreground md:block">
|
||||||
|
<Trans ns="views/settings">
|
||||||
|
cameraManagement.streams.description
|
||||||
|
</Trans>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-md space-y-1.5">
|
||||||
|
<div className="space-y-3 rounded-lg bg-secondary p-4">
|
||||||
|
{orderedCameras.length > 0 && (
|
||||||
|
<Reorder.Group
|
||||||
|
as="div"
|
||||||
|
axis="y"
|
||||||
|
values={orderedCameras}
|
||||||
|
onReorder={setOrderedCameras}
|
||||||
|
className="space-y-2"
|
||||||
|
>
|
||||||
|
{orderedCameras.map((camera) => (
|
||||||
|
<ActiveCameraRow
|
||||||
|
key={camera}
|
||||||
|
camera={camera}
|
||||||
|
onConfigChanged={updateConfig}
|
||||||
|
onDragEnd={handleReorderDragEnd}
|
||||||
|
setRestartDialogOpen={setRestartDialogOpen}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Reorder.Group>
|
||||||
|
)}
|
||||||
|
{orderedCameras.length > 0 &&
|
||||||
|
disabledCameras.length > 0 && (
|
||||||
|
<div className="border-t border-border/40" />
|
||||||
|
)}
|
||||||
|
{disabledCameras.length > 0 && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||||
|
{t("cameraManagement.streams.disabledSubheading")}
|
||||||
|
</p>
|
||||||
|
{disabledCameras.map((camera) => (
|
||||||
|
<DisabledCameraRow
|
||||||
|
key={camera}
|
||||||
|
camera={camera}
|
||||||
|
onConfigChanged={updateConfig}
|
||||||
|
setRestartDialogOpen={setRestartDialogOpen}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<ReorderSaveStatusIndicator status={reorderSaveStatus} />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground md:hidden">
|
||||||
|
<Trans ns="views/settings">
|
||||||
|
cameraManagement.streams.description
|
||||||
|
</Trans>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</SettingsGroupCard>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{profileState &&
|
||||||
|
profileState.allProfileNames.length > 0 &&
|
||||||
|
enabledCameras.length > 0 && (
|
||||||
|
<ProfileCameraEnableSection
|
||||||
|
profileState={profileState}
|
||||||
|
cameras={enabledCameras}
|
||||||
|
config={config}
|
||||||
|
onConfigChanged={updateConfig}
|
||||||
/>
|
/>
|
||||||
</div>
|
)}
|
||||||
</>
|
|
||||||
)}
|
{config?.lpr?.enabled && allCameras.length > 0 && (
|
||||||
|
<CameraTypeSection
|
||||||
|
cameras={allCameras}
|
||||||
|
config={config}
|
||||||
|
onConfigChanged={updateConfig}
|
||||||
|
setRestartDialogOpen={setRestartDialogOpen}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user