diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx index f2234b359..ba5f2eb22 100644 --- a/web/src/components/filter/ReviewFilterGroup.tsx +++ b/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("config"); + const allowedCameras = useAllowedCameras(); const allLabels = useMemo(() => { if (filterList?.labels) { @@ -83,7 +85,9 @@ export default function ReviewFilterGroup({ } const labels = new Set(); - 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(() => { if (filterList?.zones) { @@ -118,7 +122,9 @@ export default function ReviewFilterGroup({ } const zones = new Set(); - 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(() => { diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx index 12783eb6c..acf1cdf9c 100644 --- a/web/src/views/recording/RecordingView.tsx +++ b/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([ "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({
{ - setPlaybackStart(currentTime); - setMainCamera(cam); - }} + onSelectCamera={onSelectCamera} /> {isDesktop && (
- {isDesktop && allCameras.length > 1 && ( + {isDesktop && effectiveCameras.length > 1 && (
- {allCameras.map((cam) => { + {effectiveCameras.map((cam) => { if (cam == mainCamera || cam == "birdseye") { return; }