limit cameras in review/history

web/src/components/filter/ReviewFilterGroup.tsx

@@ -25,6 +25,7 @@ import { CamerasFilterButton } from "./CamerasFilterButton";
 import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 
 const REVIEW_FILTERS = [
   "cameras",
@@ -72,6 +73,7 @@ export default function ReviewFilterGroup({
   setMotionOnly,
 }: ReviewFilterGroupProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
+  const allowedCameras = useAllowedCameras();
 
   const allLabels = useMemo<string[]>(() => {
     if (filterList?.labels) {
@@ -83,7 +85,9 @@ export default function ReviewFilterGroup({
     }
 
     const labels = new Set<string>();
-    const cameras = filter?.cameras || Object.keys(config.cameras);
+    const cameras = (filter?.cameras || allowedCameras).filter((camera) =>
+      allowedCameras.includes(camera),
+    );
 
     cameras.forEach((camera) => {
       if (camera == "birdseye") {
@@ -106,7 +110,7 @@ export default function ReviewFilterGroup({
     });
 
     return [...labels].sort();
-  }, [config, filterList, filter]);
+  }, [config, filterList, filter, allowedCameras]);
 
   const allZones = useMemo<string[]>(() => {
     if (filterList?.zones) {
@@ -118,7 +122,9 @@ export default function ReviewFilterGroup({
     }
 
     const zones = new Set<string>();
-    const cameras = filter?.cameras || Object.keys(config.cameras);
+    const cameras = (filter?.cameras || allowedCameras).filter((camera) =>
+      allowedCameras.includes(camera),
+    );
 
     cameras.forEach((camera) => {
       if (camera == "birdseye") {
@@ -134,11 +140,11 @@ export default function ReviewFilterGroup({
     });
 
     return [...zones].sort();
-  }, [config, filterList, filter]);
+  }, [config, filterList, filter, allowedCameras]);
 
   const filterValues = useMemo(
     () => ({
-      cameras: Object.keys(config?.cameras ?? {}).sort(
+      cameras: allowedCameras.sort(
         (a, b) =>
           (config?.cameras[a]?.ui?.order ?? 0) -
           (config?.cameras[b]?.ui?.order ?? 0),
@@ -146,7 +152,7 @@ export default function ReviewFilterGroup({
       labels: Object.values(allLabels || {}),
       zones: Object.values(allZones || {}),
     }),
-    [config, allLabels, allZones],
+    [config, allLabels, allZones, allowedCameras],
   );
 
   const groups = useMemo(() => {

web/src/views/recording/RecordingView.tsx

@@ -65,6 +65,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
+import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 
 type RecordingViewProps = {
   startCamera: string;
@@ -97,11 +98,17 @@ export function RecordingView({
 
   const timezone = useTimezone(config);
 
+  const allowedCameras = useAllowedCameras();
+  const effectiveCameras = useMemo(
+    () => allCameras.filter((camera) => allowedCameras.includes(camera)),
+    [allCameras, allowedCameras],
+  );
+
   const { data: recordingsSummary } = useSWR<RecordingsSummary>([
     "recordings/summary",
     {
       timezone: timezone,
-      cameras: allCameras.join(",") ?? null,
+      cameras: effectiveCameras.join(",") ?? null,
     },
   ]);
 
@@ -276,14 +283,16 @@ export function RecordingView({
 
   const onSelectCamera = useCallback(
     (newCam: string) => {
-      setMainCamera(newCam);
-      setFullResolution({
-        width: 0,
-        height: 0,
-      });
-      setPlaybackStart(currentTime);
+      if (allowedCameras.includes(newCam)) {
+        setMainCamera(newCam);
+        setFullResolution({
+          width: 0,
+          height: 0,
+        });
+        setPlaybackStart(currentTime);
+      }
     },
-    [currentTime],
+    [currentTime, allowedCameras],
   );
 
   // fullscreen
@@ -488,12 +497,9 @@ export function RecordingView({
         </div>
         <div className="flex items-center justify-end gap-2">
           <MobileCameraDrawer
-            allCameras={allCameras}
+            allCameras={effectiveCameras}
             selected={mainCamera}
-            onSelectCamera={(cam) => {
-              setPlaybackStart(currentTime);
-              setMainCamera(cam);
-            }}
+            onSelectCamera={onSelectCamera}
           />
           {isDesktop && (
             <ExportDialog
@@ -674,7 +680,7 @@ export function RecordingView({
                 containerRef={mainLayoutRef}
               />
             </div>
-            {isDesktop && allCameras.length > 1 && (
+            {isDesktop && effectiveCameras.length > 1 && (
               <div
                 ref={previewRowRef}
                 className={cn(
@@ -686,7 +692,7 @@ export function RecordingView({
                 )}
               >
                 <div className="w-2" />
-                {allCameras.map((cam) => {
+                {effectiveCameras.map((cam) => {
                   if (cam == mainCamera || cam == "birdseye") {
                     return;
                   }