diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx index 70067ff5c0..dd1bb75e4d 100644 --- a/web/src/views/events/EventView.tsx +++ b/web/src/views/events/EventView.tsx @@ -44,6 +44,7 @@ import SummaryTimeline from "@/components/timeline/SummaryTimeline"; import { RecordingStartingPoint } from "@/types/record"; import VideoControls from "@/components/player/VideoControls"; import { TimeRange } from "@/types/timeline"; +import { useAllowedCameras } from "@/hooks/use-allowed-cameras"; import { useCameraMotionNextTimestamp } from "@/hooks/use-camera-activity"; import useOptimisticState from "@/hooks/use-optimistic-state"; import { Skeleton } from "@/components/ui/skeleton"; @@ -918,25 +919,26 @@ function MotionReview({ }: MotionReviewProps) { const segmentDuration = 30; const { data: config } = useSWR("config"); + const allowedCameras = useAllowedCameras(); const reviewCameras = useMemo(() => { if (!config) { return []; } - let cameras; - if (!filter || !filter.cameras) { - cameras = Object.values(config.cameras); - } else { - const filteredCams = filter.cameras; - - cameras = Object.values(config.cameras).filter((cam) => - filteredCams.includes(cam.name), - ); - } + const selectedCams = filter?.cameras; + const cameras = Object.values(config.cameras).filter((cam) => { + if (!allowedCameras.includes(cam.name)) { + return false; + } + if (selectedCams && !selectedCams.includes(cam.name)) { + return false; + } + return true; + }); return cameras.sort((a, b) => a.ui.order - b.ui.order); - }, [config, filter]); + }, [config, filter, allowedCameras]); const videoPlayersRef = useRef<{ [camera: string]: PreviewController }>({});