add camera search, select-all/clear, and group selection to the multi-camera export dialog (#23516)

* display zone names consistently using friendly_name or raw id without transformation

* enforce camera-level access on go2rtc live stream websocket endpoints

frigate/api/auth.py

@@ -12,6 +12,7 @@ import time
 from datetime import datetime
 from pathlib import Path
 from typing import List, Optional
+from urllib.parse import parse_qs, urlparse
 
 from fastapi import APIRouter, Depends, HTTPException, Request, Response
 from fastapi.responses import JSONResponse, RedirectResponse
@@ -26,7 +27,11 @@ from frigate.api.defs.request.app_body import (
     AppPutRoleBody,
 )
 from frigate.api.defs.tags import Tags
-from frigate.api.media_auth import check_camera_access, deny_response_for_media_uri
+from frigate.api.media_auth import (
+    check_camera_access,
+    deny_response_for_media_uri,
+    is_role_restricted,
+)
 from frigate.config import AuthConfig, NetworkingConfig, ProxyConfig
 from frigate.const import CONFIG_DIR, JWT_SECRET_ENV_VAR, PASSWORD_HASH_ALGORITHM
 from frigate.models import User
@@ -658,6 +663,10 @@ def auth(request: Request):
         if deny_status is not None:
             return Response("", status_code=deny_status)
 
+        deny_status = deny_response_for_go2rtc_stream(original_url, role, request)
+        if deny_status is not None:
+            return Response("", status_code=deny_status)
+
         return success_response
 
     # now apply authentication
@@ -757,6 +766,10 @@ def auth(request: Request):
         if deny_status is not None:
             return Response("", status_code=deny_status)
 
+        deny_status = deny_response_for_go2rtc_stream(original_url, role, request)
+        if deny_status is not None:
+            return Response("", status_code=deny_status)
+
         return success_response
     except Exception as e:
         logger.error(f"Error parsing jwt: {e}")
@@ -1112,6 +1125,66 @@ def _get_stream_owner_cameras(request: Request, stream_name: str) -> set[str]:
     return owner_cameras
 
 
+# nginx proxies these paths straight to go2rtc with authentication-only checks
+# (see auth_request.conf). Each names the desired stream via the `src` query
+# param, so the camera-level check must happen here in the `/auth` subrequest —
+# `require_go2rtc_stream_access` only guards the REST `/go2rtc/streams/{name}`
+# endpoint, not these proxied live-stream paths.
+GO2RTC_STREAM_PROXY_PATHS = frozenset(
+    {
+        "/live/mse/api/ws",
+        "/live/webrtc/api/ws",
+        "/api/go2rtc/webrtc",
+    }
+)
+
+
+def deny_response_for_go2rtc_stream(
+    original_url: Optional[str], role: Optional[str], request: Request
+) -> Optional[int]:
+    """Block role-restricted users from go2rtc live streams they cannot access.
+
+    Returns 403 when any `src` stream named in `original_url` resolves to a
+    camera outside the role's allow-list (or when no `src` is provided on a
+    stream-proxy path), otherwise None. Mirrors the resolution logic in
+    `require_go2rtc_stream_access` so substream names map to their owning
+    camera correctly.
+    """
+    if not original_url:
+        return None
+
+    parsed = urlparse(original_url)
+    if parsed.path not in GO2RTC_STREAM_PROXY_PATHS:
+        return None
+
+    frigate_config = request.app.frigate_config
+
+    # admin and full-access roles (no allow-list) bypass the camera check
+    if not role or not is_role_restricted(role, frigate_config):
+        return None
+
+    sources = parse_qs(parsed.query).get("src", [])
+    if not sources:
+        # a stream-proxy request naming no stream has nothing legitimate to
+        # show a restricted user
+        return 403
+
+    allowed_cameras = set(
+        User.get_allowed_cameras(
+            role,
+            frigate_config.auth.roles,
+            set(frigate_config.cameras.keys()),
+        )
+    )
+
+    # deny if any requested source resolves outside the allow-list
+    for src in sources:
+        if not (_get_stream_owner_cameras(request, src) & allowed_cameras):
+            return 403
+
+    return None
+
+
 async def require_go2rtc_stream_access(
     stream_name: Optional[str] = None,
     request: Request = None,

frigate/test/test_go2rtc_stream_auth.py

@@ -0,0 +1,175 @@
+"""Unit tests for `deny_response_for_go2rtc_stream`.
+
+Covers the camera-level authorization enforced in the `/auth` subrequest for
+the nginx-proxied go2rtc live-stream paths (MSE/WebRTC WebSockets and the
+WebRTC signaling endpoint). These paths name the stream via the `src` query
+param, which the static-media auth in `media_auth` does not inspect.
+"""
+
+import types
+import unittest
+
+from frigate.api.auth import deny_response_for_go2rtc_stream
+from frigate.config import FrigateConfig
+
+_CONFIG = {
+    "mqtt": {"host": "mqtt"},
+    "auth": {
+        "roles": {
+            "limited_user": ["front_door"],
+            "dual_user": ["front_door", "back_door"],
+        }
+    },
+    "cameras": {
+        "front_door": {
+            "ffmpeg": {
+                "inputs": [{"path": "rtsp://10.0.0.1:554/video", "roles": ["detect"]}]
+            },
+            "detect": {"height": 1080, "width": 1920, "fps": 5},
+            # go2rtc stream name differs from the camera name (substream)
+            "live": {"streams": {"Main Stream": "front_door_sub"}},
+        },
+        "back_door": {
+            "ffmpeg": {
+                "inputs": [{"path": "rtsp://10.0.0.2:554/video", "roles": ["detect"]}]
+            },
+            "detect": {"height": 1080, "width": 1920, "fps": 5},
+        },
+        "garage": {
+            "ffmpeg": {
+                "inputs": [{"path": "rtsp://10.0.0.3:554/video", "roles": ["detect"]}]
+            },
+            "detect": {"height": 1080, "width": 1920, "fps": 5},
+        },
+    },
+}
+
+
+def _request(config: FrigateConfig) -> types.SimpleNamespace:
+    return types.SimpleNamespace(app=types.SimpleNamespace(frigate_config=config))
+
+
+class TestDenyResponseForGo2rtcStream(unittest.TestCase):
+    def setUp(self) -> None:
+        self.config = FrigateConfig(**_CONFIG)
+        self.request = _request(self.config)
+
+    def _deny(self, url: str, role: str):
+        return deny_response_for_go2rtc_stream(url, role, self.request)
+
+    # --- non-stream paths pass through ---
+
+    def test_non_stream_path_passes_through(self):
+        self.assertIsNone(
+            self._deny("http://host/clips/back_door-1.jpg", "limited_user")
+        )
+
+    def test_empty_url_passes_through(self):
+        self.assertIsNone(self._deny("", "limited_user"))
+
+    def test_jsmpeg_path_not_handled_here(self):
+        # jsmpeg is authorized per-frame in the output pipeline, not here
+        self.assertIsNone(
+            self._deny("http://host/live/jsmpeg/back_door", "limited_user")
+        )
+
+    # --- restricted role: allowed vs forbidden cameras ---
+
+    def test_mse_allowed_camera(self):
+        self.assertIsNone(
+            self._deny("http://host/live/mse/api/ws?src=front_door", "limited_user")
+        )
+
+    def test_mse_forbidden_camera_denied(self):
+        self.assertEqual(
+            self._deny("http://host/live/mse/api/ws?src=back_door", "limited_user"),
+            403,
+        )
+
+    def test_webrtc_ws_forbidden_camera_denied(self):
+        self.assertEqual(
+            self._deny("http://host/live/webrtc/api/ws?src=back_door", "limited_user"),
+            403,
+        )
+
+    def test_webrtc_signaling_forbidden_camera_denied(self):
+        self.assertEqual(
+            self._deny("http://host/api/go2rtc/webrtc?src=back_door", "limited_user"),
+            403,
+        )
+
+    def test_unknown_camera_denied(self):
+        self.assertEqual(
+            self._deny("http://host/live/mse/api/ws?src=nonexistent", "limited_user"),
+            403,
+        )
+
+    def test_missing_src_denied(self):
+        self.assertEqual(self._deny("http://host/live/mse/api/ws", "limited_user"), 403)
+
+    # --- multi-camera role: each assigned camera allowed, others denied ---
+
+    def test_multi_camera_role_allows_first_assigned(self):
+        self.assertIsNone(
+            self._deny("http://host/live/mse/api/ws?src=front_door", "dual_user")
+        )
+
+    def test_multi_camera_role_allows_second_assigned(self):
+        self.assertIsNone(
+            self._deny("http://host/live/mse/api/ws?src=back_door", "dual_user")
+        )
+
+    def test_multi_camera_role_denies_unassigned(self):
+        # garage is configured but not in dual_user's allow-list
+        self.assertEqual(
+            self._deny("http://host/live/mse/api/ws?src=garage", "dual_user"),
+            403,
+        )
+
+    # --- substream names resolve to their owning camera ---
+
+    def test_allowed_substream_resolves_to_owning_camera(self):
+        # front_door_sub is owned by front_door, which limited_user may access
+        self.assertIsNone(
+            self._deny("http://host/live/mse/api/ws?src=front_door_sub", "limited_user")
+        )
+
+    # --- multiple src values: deny if any is forbidden ---
+
+    def test_multiple_src_one_forbidden_denied(self):
+        self.assertEqual(
+            self._deny(
+                "http://host/live/mse/api/ws?src=front_door&src=back_door",
+                "limited_user",
+            ),
+            403,
+        )
+
+    def test_multiple_src_all_allowed(self):
+        self.assertIsNone(
+            self._deny(
+                "http://host/live/mse/api/ws?src=front_door&src=front_door_sub",
+                "limited_user",
+            )
+        )
+
+    # --- privileged roles bypass the check ---
+
+    def test_admin_bypasses(self):
+        self.assertIsNone(
+            self._deny("http://host/live/mse/api/ws?src=back_door", "admin")
+        )
+
+    def test_builtin_viewer_role_bypasses(self):
+        # the built-in viewer role is not in the config allow-list map, so it
+        # is treated as full access
+        self.assertIsNone(
+            self._deny("http://host/live/mse/api/ws?src=back_door", "viewer")
+        )
+
+    def test_missing_role_bypasses(self):
+        self.assertIsNone(self._deny("http://host/live/mse/api/ws?src=back_door", None))
+
+
+if __name__ == "__main__":
+    unittest.main()

web/public/locales/en/components/dialog.json

@@ -70,6 +70,13 @@
       "selectFromTimeline": "Select from Timeline",
       "cameraSelection": "Cameras",
       "cameraSelectionHelp": "Cameras with tracked objects in this time range are pre-selected",
+      "searchOrSelectGroup": "Search, or select a camera group...",
+      "selectAll": "Select all cameras",
+      "clearSelection": "Clear selection",
+      "selectWithActivity": "Cameras with tracked objects",
+      "selectGroup": "Select group",
+      "noMatchingCameras": "No cameras match your search",
+      "selectedCount": "{{selected}} / {{total}} selected",
       "checkingActivity": "Checking camera activity...",
       "noCameras": "No cameras available",
       "detectionCount_one": "1 tracked object",

web/src/components/config-form/sectionExtras/CameraReviewClassification.tsx

@@ -243,12 +243,7 @@ export default function CameraReviewClassification({
                         handleZoneToggle("alerts.required_zones", zone.name)
                       }
                     />
-                    <Label
+                    <Label className="font-normal">
-                      className={cn(
-                        "font-normal",
-                        !zone.friendly_name && "smart-capitalize",
-                      )}
-                    >
                       {zone.friendly_name || zone.name}
                     </Label>
                   </div>

web/src/components/config-form/theme/widgets/ZoneSwitchesWidget.tsx

@@ -29,8 +29,8 @@ function getZoneDisplayName(zoneName: string, context?: FormContext): string {
       }
     }
   }
-  // Fallback to cleaning up the zone name
+  // Fallback to the raw zone id verbatim (no friendly_name available)
-  return String(zoneName).replace(/_/g, " ");
+  return String(zoneName);
 }
 
 export function ZoneSwitchesWidget(props: WidgetProps) {

web/src/components/overlay/ExportDialog.tsx

@@ -39,6 +39,16 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../ui/command";
+import { IconRenderer } from "../icons/IconPicker";
+import * as LuIcons from "react-icons/lu";
 import { isDesktop, isMobile } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import SaveExportOverlay from "./SaveExportOverlay";
@@ -376,6 +386,9 @@ export function ExportContent({
   const [newCaseName, setNewCaseName] = useState("");
   const [newCaseDescription, setNewCaseDescription] = useState("");
   const [isStartingBatchExport, setIsStartingBatchExport] = useState(false);
+  const [cameraSearch, setCameraSearch] = useState("");
+  const [cameraMenuOpen, setCameraMenuOpen] = useState(false);
+  const cameraMenuRef = useRef<HTMLDivElement>(null);
   const multiRangeKey = useMemo(() => {
     if (activeTab !== "multi" || !range) {
       return undefined;
@@ -577,6 +590,75 @@ export function ExportContent({
     );
   }, []);
 
+  const availableCameraIds = useMemo(
+    () => cameraActivities.map((activity) => activity.camera),
+    [cameraActivities],
+  );
+
+  const activeCameraIds = useMemo(
+    () =>
+      cameraActivities
+        .filter((activity) => activity.hasDetections)
+        .map((activity) => activity.camera),
+    [cameraActivities],
+  );
+
+  const cameraGroups = useMemo(
+    () =>
+      Object.entries(config?.camera_groups ?? {})
+        .map(([name, group]) => ({
+          name,
+          icon: group.icon,
+          order: group.order,
+          cameras: group.cameras.filter((cameraId) =>
+            availableCameraIds.includes(cameraId),
+          ),
+        }))
+        .filter((group) => group.cameras.length > 0)
+        .sort((a, b) => a.order - b.order),
+    [config?.camera_groups, availableCameraIds],
+  );
+
+  // Filter the rendered camera cards by the search query
+  const filteredCameraActivities = useMemo(() => {
+    const query = cameraSearch.trim().toLowerCase();
+    if (!query) {
+      return cameraActivities;
+    }
+    return cameraActivities.filter((activity) => {
+      const friendlyName = resolveCameraName(config, activity.camera);
+      return (
+        activity.camera.toLowerCase().includes(query) ||
+        friendlyName.toLowerCase().includes(query)
+      );
+    });
+  }, [cameraActivities, cameraSearch, config]);
+
+  // Group/all/activity selection replaces the current selection
+  const applyCameraSelection = useCallback((cameraIds: string[]) => {
+    setHasManualCameraSelection(true);
+    setSelectedCameraIds(cameraIds);
+    setCameraMenuOpen(false);
+  }, []);
+
+  // Close the dropdown when focus leaves the camera selection control entirely
+  const handleCameraInputBlur = useCallback((event: React.FocusEvent) => {
+    if (
+      cameraMenuRef.current &&
+      !cameraMenuRef.current.contains(event.relatedTarget as Node)
+    ) {
+      setCameraMenuOpen(false);
+    }
+  }, []);
+
+  // Reset the search and dropdown when leaving the multi-camera tab
+  useEffect(() => {
+    if (activeTab !== "multi") {
+      setCameraSearch("");
+      setCameraMenuOpen(false);
+    }
+  }, [activeTab]);
+
   const startBatchExport = useCallback(async () => {
     if (isStartingBatchExport) {
       return;
@@ -802,7 +884,7 @@ export function ExportContent({
 
           {isAdmin && (
             <div className="space-y-2">
-              <Label className="text-sm text-secondary-foreground">
+              <Label className="text-sm text-primary">
                 {t("export.case.label")}
               </Label>
               <Select
@@ -859,7 +941,7 @@ export function ExportContent({
           )}
         >
           <div className="space-y-2">
-            <Label className="text-sm text-secondary-foreground">
+            <Label className="text-sm text-primary">
               {t("export.multiCamera.timeRange")}
             </Label>
             <div className="flex items-center gap-2">
@@ -902,16 +984,109 @@ export function ExportContent({
           </div>
 
           <div className="space-y-2">
-            <Label className="text-sm text-secondary-foreground">
+            <div className="flex items-center justify-between gap-2">
-              {t("export.multiCamera.cameraSelection")}
+              <Label className="text-sm text-primary">
-            </Label>
+                {t("export.multiCamera.cameraSelection")}
+              </Label>
+              {availableCameraIds.length > 0 && (
+                <span className="text-xs text-muted-foreground">
+                  {t("export.multiCamera.selectedCount", {
+                    selected: selectedCameraCount,
+                    total: availableCameraIds.length,
+                  })}
+                </span>
+              )}
+            </div>
             <div className="text-xs text-muted-foreground">
               {t("export.multiCamera.cameraSelectionHelp")}
             </div>
+            {!isEventsLoading && availableCameraIds.length > 0 && (
+              <div className="relative" ref={cameraMenuRef}>
+                <Command
+                  shouldFilter={false}
+                  className="overflow-visible rounded-md border bg-secondary/40"
+                >
+                  <CommandInput
+                    value={cameraSearch}
+                    onValueChange={setCameraSearch}
+                    onFocus={() => setCameraMenuOpen(true)}
+                    onBlur={handleCameraInputBlur}
+                    placeholder={t("export.multiCamera.searchOrSelectGroup")}
+                  />
+                  {/* Hide the actions/groups menu while a search query is
+                      active so it doesn't cover the filtered camera cards. */}
+                  {cameraMenuOpen && cameraSearch.trim().length === 0 && (
+                    <CommandList className="absolute top-full z-10 mt-1 max-h-72 w-full rounded-md border bg-background shadow-md">
+                      <CommandGroup>
+                        <CommandItem
+                          value="action:select-all"
+                          className="cursor-pointer"
+                          onSelect={() =>
+                            applyCameraSelection(availableCameraIds)
+                          }
+                        >
+                          <span>{t("export.multiCamera.selectAll")}</span>
+                          <span className="ml-auto text-xs text-muted-foreground">
+                            {availableCameraIds.length}
+                          </span>
+                        </CommandItem>
+                        <CommandItem
+                          value="action:clear"
+                          className="cursor-pointer"
+                          onSelect={() => applyCameraSelection([])}
+                        >
+                          {t("export.multiCamera.clearSelection")}
+                        </CommandItem>
+                        <CommandItem
+                          value="action:activity"
+                          className="cursor-pointer"
+                          onSelect={() => applyCameraSelection(activeCameraIds)}
+                        >
+                          <span>
+                            {t("export.multiCamera.selectWithActivity")}
+                          </span>
+                          <span className="ml-auto text-xs text-muted-foreground">
+                            {activeCameraIds.length}
+                          </span>
+                        </CommandItem>
+                      </CommandGroup>
+                      {cameraGroups.length > 0 && (
+                        <>
+                          <CommandSeparator />
+                          <CommandGroup
+                            heading={t("export.multiCamera.selectGroup")}
+                          >
+                            {cameraGroups.map((group) => (
+                              <CommandItem
+                                key={group.name}
+                                value={`group:${group.name}`}
+                                className="cursor-pointer"
+                                onSelect={() =>
+                                  applyCameraSelection(group.cameras)
+                                }
+                              >
+                                <IconRenderer
+                                  icon={LuIcons[group.icon]}
+                                  className="mr-2 size-4 text-secondary-foreground"
+                                />
+                                <span className="truncate">{group.name}</span>
+                                <span className="ml-auto text-xs text-muted-foreground">
+                                  {group.cameras.length}
+                                </span>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </>
+                      )}
+                    </CommandList>
+                  )}
+                </Command>
+              </div>
+            )}
             <div
               className={cn(
                 "scrollbar-container space-y-2",
-                isDesktop && "max-h-64 overflow-y-auto pr-1",
+                isDesktop && "max-h-64 overflow-y-auto p-0.5 pr-1",
               )}
             >
               {isEventsLoading && (
@@ -924,7 +1099,14 @@ export function ExportContent({
                   {t("export.multiCamera.noCameras")}
                 </div>
               )}
-              {cameraActivities.map((activity) => {
+              {!isEventsLoading &&
+                cameraActivities.length > 0 &&
+                filteredCameraActivities.length === 0 && (
+                  <div className="px-2 py-4 text-sm text-muted-foreground">
+                    {t("export.multiCamera.noMatchingCameras")}
+                  </div>
+                )}
+              {filteredCameraActivities.map((activity) => {
                 const isSelected = selectedCameraIds.includes(activity.camera);
 
                 return (
@@ -981,7 +1163,7 @@ export function ExportContent({
           </div>
 
           <div className="space-y-2">
-            <Label className="text-sm text-secondary-foreground">
+            <Label className="text-sm text-primary">
               {t("export.multiCamera.nameLabel")}
             </Label>
             <Input
@@ -994,7 +1176,7 @@ export function ExportContent({
 
           {isAdmin && (
             <div className="space-y-2">
-              <Label className="text-sm text-secondary-foreground">
+              <Label className="text-sm text-primary">
                 {t("export.case.label")}
               </Label>
               <Select

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -1197,14 +1197,7 @@ function LifecycleIconRow({
                           backgroundColor: `rgb(${color})`,
                         }}
                       />
-                      <span
+                      <span>{item.data?.zones_friendly_names?.[zidx]}</span>
-                        className={cn(
-                          item.data?.zones_friendly_names?.[zidx] === zone &&
-                            "smart-capitalize",
-                        )}
-                      >
-                        {item.data?.zones_friendly_names?.[zidx]}
-                      </span>
                     </Badge>
                   );
                 })}

web/src/hooks/use-zone-friendly-name.ts

@@ -7,12 +7,12 @@ export function resolveZoneName(
   zoneId: string,
   cameraId?: string,
 ) {
-  if (!config) return String(zoneId).replace(/_/g, " ");
+  if (!config) return String(zoneId);
 
   if (cameraId) {
     const camera = config.cameras?.[String(cameraId)];
     const zone = camera?.zones?.[zoneId];
-    return zone?.friendly_name || String(zoneId).replace(/_/g, " ");
+    return zone?.friendly_name || String(zoneId);
   }
 
   for (const camKey in config.cameras) {
@@ -21,12 +21,12 @@ export function resolveZoneName(
     if (!cam?.zones) continue;
     if (Object.prototype.hasOwnProperty.call(cam.zones, zoneId)) {
       const zone = cam.zones[zoneId];
-      return zone?.friendly_name || String(zoneId).replace(/_/g, " ");
+      return zone?.friendly_name || String(zoneId);
     }
   }
 
-  // Fallback: return a cleaned-up zoneId string
+  // Fallback: display the raw zone id verbatim (no friendly_name available)
-  return String(zoneId).replace(/_/g, " ");
+  return String(zoneId);
 }
 
 export function useZoneFriendlyName(zoneId: string, cameraId?: string): string {