Add ability to hide cameras from review UI (#23387)

* Add field to control if cameras show in review

* i18n

* Add config to UI

web/src/components/filter/ReviewFilterGroup.tsx

@@ -144,11 +144,13 @@ export default function ReviewFilterGroup({
 
   const filterValues = useMemo(
     () => ({
-      cameras: allowedCameras.sort(
-        (a, b) =>
-          (config?.cameras[a]?.ui?.order ?? 0) -
-          (config?.cameras[b]?.ui?.order ?? 0),
-      ),
+      cameras: allowedCameras
+        .filter((cam) => config?.cameras[cam]?.ui?.review !== false)
+        .sort(
+          (a, b) =>
+            (config?.cameras[a]?.ui?.order ?? 0) -
+            (config?.cameras[b]?.ui?.order ?? 0),
+        ),
       labels: Object.values(allLabels || {}),
       zones: Object.values(allZones || {}),
     }),

web/src/pages/Events.tsx

@@ -70,13 +70,15 @@ export default function Events() {
     undefined,
   );
 
-  const motionSearchCameras = useMemo(() => {
+  const reviewCameras = useMemo(() => {
     if (!config?.cameras) {
       return [] as string[];
     }
 
-    return Object.keys(config.cameras).filter((cam) =>
-      allowedCameras.includes(cam),
+    return Object.keys(config.cameras).filter(
+      (cam) =>
+        allowedCameras.includes(cam) &&
+        config.cameras[cam]?.ui?.review !== false,
     );
   }, [allowedCameras, config?.cameras]);
 
@@ -85,12 +87,12 @@ export default function Events() {
       return null;
     }
 
-    if (motionSearchCameras.includes(motionSearchCamera)) {
+    if (reviewCameras.includes(motionSearchCamera)) {
       return motionSearchCamera;
     }
 
-    return motionSearchCameras[0] ?? null;
-  }, [motionSearchCamera, motionSearchCameras]);
+    return reviewCameras[0] ?? null;
+  }, [motionSearchCamera, reviewCameras]);
 
   const motionSearchTimeRange = useMemo(() => {
     if (motionSearchDay) {
@@ -357,6 +359,10 @@ export default function Events() {
     const motion: ReviewSegment[] = [];
 
     reviews?.forEach((segment) => {
+      if (config?.cameras[segment.camera]?.ui?.review === false) {
+        return;
+      }
+
       all.push(segment);
 
       switch (segment.severity) {
@@ -378,7 +384,7 @@ export default function Events() {
       detection: detections,
       significant_motion: motion,
     };
-  }, [reviews]);
+  }, [reviews, config?.cameras]);
 
   // update review items in place when a review segment ends
   const reviewUpdate = useFrigateReviews();
@@ -635,7 +641,7 @@ export default function Events() {
     }
 
     setStartTime(recording.startTime);
-    const allCameras = reviewFilter?.cameras ?? allowedCameras;
+    const allCameras = reviewFilter?.cameras ?? reviewCameras;
 
     return {
       camera: recording.camera,
@@ -680,7 +686,7 @@ export default function Events() {
       ) : (
         <MotionSearchView
           config={config}
-          cameras={motionSearchCameras}
+          cameras={reviewCameras}
           selectedCamera={selectedMotionSearchCamera}
           onCameraSelect={handleMotionSearchCameraSelect}
           cameraLocked={true}

web/src/types/frigateConfig.ts

@@ -5,6 +5,7 @@ export interface UiConfig {
   timezone?: string;
   time_format?: "browser" | "12hour" | "24hour";
   dashboard: boolean;
+  review: boolean;
   order: number;
   unit_system?: "metric" | "imperial";
 }

web/src/views/recording/RecordingView.tsx

@@ -123,8 +123,13 @@ export function RecordingView({
 
   const allowedCameras = useAllowedCameras();
   const effectiveCameras = useMemo(
-    () => allCameras.filter((camera) => allowedCameras.includes(camera)),
-    [allCameras, allowedCameras],
+    () =>
+      allCameras.filter(
+        (camera) =>
+          allowedCameras.includes(camera) &&
+          config?.cameras[camera]?.ui?.review !== false,
+      ),
+    [allCameras, allowedCameras, config?.cameras],
   );
   const [mainCamera, setMainCamera] = useState(startCamera);
 

web/src/views/settings/CameraManagementView.tsx

@@ -75,6 +75,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -704,6 +705,8 @@ type CameraDetailsEditorProps = {
 type CameraDetailsFormValues = {
   friendlyName: string;
   webuiUrl: string;
+  dashboard: boolean;
+  review: boolean;
 };
 
 function CameraDetailsEditor({
@@ -717,11 +720,15 @@ function CameraDetailsEditor({
 
   const currentFriendlyName = config?.cameras?.[cameraName]?.friendly_name;
   const currentWebuiUrl = config?.cameras?.[cameraName]?.webui_url;
+  const currentDashboard = config?.cameras?.[cameraName]?.ui?.dashboard ?? true;
+  const currentReview = config?.cameras?.[cameraName]?.ui?.review ?? true;
 
   const formSchema = useMemo(
     () =>
       z.object({
         friendlyName: z.string(),
+        dashboard: z.boolean(),
+        review: z.boolean(),
         webuiUrl: z.string().refine(
           (val) => {
             const trimmed = val.trim();
@@ -748,6 +755,8 @@ function CameraDetailsEditor({
     defaultValues: {
       friendlyName: currentFriendlyName ?? "",
       webuiUrl: currentWebuiUrl ?? "",
+      dashboard: currentDashboard,
+      review: currentReview,
     },
   });
 
@@ -757,9 +766,18 @@ function CameraDetailsEditor({
       form.reset({
         friendlyName: currentFriendlyName ?? "",
         webuiUrl: currentWebuiUrl ?? "",
+        dashboard: currentDashboard,
+        review: currentReview,
       });
     }
-  }, [open, currentFriendlyName, currentWebuiUrl, form]);
+  }, [
+    open,
+    currentFriendlyName,
+    currentWebuiUrl,
+    currentDashboard,
+    currentReview,
+    form,
+  ]);
 
   const onSubmit = useCallback(
     async (values: CameraDetailsFormValues) => {
@@ -768,7 +786,7 @@ function CameraDetailsEditor({
       // only send fields the user actually changed
       const newFriendly = values.friendlyName.trim() || null;
       const newWebui = values.webuiUrl.trim() || null;
-      const cameraUpdate: Record<string, string | null> = {};
+      const cameraUpdate: Record<string, unknown> = {};
       if (newFriendly !== (currentFriendlyName ?? null)) {
         cameraUpdate.friendly_name = newFriendly;
       }
@@ -776,6 +794,17 @@ function CameraDetailsEditor({
         cameraUpdate.webui_url = newWebui;
       }
 
+      const uiUpdate: Record<string, boolean> = {};
+      if (values.dashboard !== currentDashboard) {
+        uiUpdate.dashboard = values.dashboard;
+      }
+      if (values.review !== currentReview) {
+        uiUpdate.review = values.review;
+      }
+      if (Object.keys(uiUpdate).length > 0) {
+        cameraUpdate.ui = uiUpdate;
+      }
+
       if (Object.keys(cameraUpdate).length === 0) {
         setOpen(false);
         return;
@@ -818,6 +847,8 @@ function CameraDetailsEditor({
       cameraName,
       currentFriendlyName,
       currentWebuiUrl,
+      currentDashboard,
+      currentReview,
       isSaving,
       onConfigChanged,
       t,
@@ -914,6 +945,60 @@ function CameraDetailsEditor({
                   </FormItem>
                 )}
               />
+              <FormField
+                control={form.control}
+                name="dashboard"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between gap-3">
+                    <div className="space-y-0.5">
+                      <FormLabel>
+                        {t("cameraManagement.streams.details.dashboardLabel", {
+                          ns: "views/settings",
+                        })}
+                      </FormLabel>
+                      <p className="text-xs text-muted-foreground">
+                        {t("cameraManagement.streams.details.dashboardHelp", {
+                          ns: "views/settings",
+                        })}
+                      </p>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        disabled={isSaving}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="review"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between gap-3">
+                    <div className="space-y-0.5">
+                      <FormLabel>
+                        {t("cameraManagement.streams.details.reviewLabel", {
+                          ns: "views/settings",
+                        })}
+                      </FormLabel>
+                      <p className="text-xs text-muted-foreground">
+                        {t("cameraManagement.streams.details.reviewHelp", {
+                          ns: "views/settings",
+                        })}
+                      </p>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        disabled={isSaving}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
               <DialogFooter className="pt-2">
                 <Button
                   type="button"