tweaks and add ability enable disabled cameras

more backend changes required
2026-03-10 10:33:11 +03:00 · 2026-02-13 21:49:29 -06:00 · 2026-02-13 21:49:29 -06:00 · c62e0d3f46
commit c62e0d3f46
parent 6cd914951d
5 changed files with 180 additions and 34 deletions
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@ -17,13 +17,13 @@
  },
  "menu": {
    "general": "General",
-    "globalConfig": "Global Config",
+    "globalConfig": "Global configuration",
    "system": "System",
    "integrations": "Integrations",
-    "cameras": "Camera Configuration",
+    "cameras": "Camera configuration",
    "ui": "UI",
    "profileSettings": "Profile Settings",
-    "globalDetect": "Object Detection",
+    "globalDetect": "Object detection",
    "globalRecording": "Recording",
    "globalSnapshots": "Snapshots",
    "globalFfmpeg": "FFmpeg",
@ -47,13 +47,13 @@
    "systemDetectorHardware": "Detector hardware",
    "systemDetectionModel": "Detection model",
    "systemMqtt": "MQTT",
-    "integrationSemanticSearch": "Semantic Search",
+    "integrationSemanticSearch": "Semantic search",
    "integrationGenerativeAi": "Generative AI",
    "integrationFaceRecognition": "Face recognition",
-    "integrationLpr": "License Plate Recognition",
+    "integrationLpr": "License plate recognition",
    "integrationObjectClassification": "Object classification",
    "integrationAudioTranscription": "Audio transcription",
-    "cameraDetect": "Object Detection",
+    "cameraDetect": "Object detection",
    "cameraFfmpeg": "FFmpeg",
    "cameraRecording": "Recording",
    "cameraSnapshots": "Snapshots",
@ -66,7 +66,7 @@
    "cameraLivePlayback": "Live playback",
    "cameraBirdseye": "Birdseye",
    "cameraFaceRecognition": "Face recognition",
-    "cameraLpr": "License Plate Recognition",
+    "cameraLpr": "License plate recognition",
    "cameraMqttConfig": "MQTT",
    "cameraOnvif": "ONVIF",
    "cameraUi": "Camera UI",
@ -75,7 +75,7 @@
    "cameraManagement": "Management",
    "cameraReview": "Review",
    "masksAndZones": "Masks / Zones",
-    "motionTuner": "Motion Tuner",
+    "motionTuner": "Motion tuner",
    "enrichments": "Enrichments",
    "users": "Users",
    "roles": "Roles",
@ -426,7 +426,11 @@
    "backToSettings": "Back to Camera Settings",
    "streams": {
      "title": "Enable / Disable Cameras",
-      "desc": "Temporarily disable a camera until Frigate restarts. Disabling a camera completely stops Frigate's processing of this camera's streams. Detection, recording, and debugging will be unavailable.<br /> <em>Note: This does not disable go2rtc restreams.</em>"
+      "enableLabel": "Enabled cameras",
+      "enableDesc": "Temporarily disable an enabled camera until Frigate restarts. Disabling a camera completely stops Frigate's processing of this camera's streams. Detection, recording, and debugging will be unavailable.<br /> <em>Note: This does not disable go2rtc restreams.</em>",
+      "disableLabel": "Disabled cameras",
+      "disableDesc": "Enable a camera that is currently not visible in the UI and disabled in the configuration. A restart of Frigate is required after enabling.",
+      "enableSuccess": "Enabled {{cameraName}} in configuration"
    },
    "cameraConfig": {
      "add": "Add Camera",
--- a/web/src/components/config-form/theme/components/index.tsx
+++ b/web/src/components/config-form/theme/components/index.tsx
@ -118,7 +118,7 @@ export function AdvancedCollapsible({
        <Button
          variant="ghost"
          size={effectiveSize}
-          className="w-full justify-start gap-2 pl-0"
+          className="w-full justify-start gap-2 pl-0 hover:bg-transparent"
        >
          {open ? (
            <LuChevronDown className="h-4 w-4" />
@ -128,7 +128,7 @@ export function AdvancedCollapsible({
          {label}
        </Button>
      </CollapsibleTrigger>
-      <CollapsibleContent className="mt-2 space-y-4 rounded-lg border border-border/60 bg-background_alt/70 p-4">
+      <CollapsibleContent className="mt-2 space-y-4 rounded-lg border border-border/60 bg-secondary/40 p-4">
        {children}
      </CollapsibleContent>
    </Collapsible>
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@ -585,9 +585,7 @@ function MobileMenuItem({
      }}
    >
      <div className="w-full">
-        {label ?? (
-          <div className="smart-capitalize">{t("menu." + item.key)}</div>
-        )}
+        {label ?? <div>{t("menu." + item.key)}</div>}
      </div>
      <LuChevronRight className="size-4" />
    </div>
@ -1048,7 +1046,7 @@ export default function Settings() {

      return (
        <div className="flex w-full items-center justify-between pr-4 md:pr-0">
-          <div className="smart-capitalize">{t("menu." + key)}</div>
+          <div>{t("menu." + key)}</div>
          {(showOverrideDot || showUnsavedDot) && (
            <div className="ml-2 flex items-center gap-2">
              {showOverrideDot && (
@ -1104,9 +1102,7 @@ export default function Settings() {
                  <div key={group.label} className="mb-3">
                    {filteredItems.length > 1 && (
                      <h3 className="mb-2 ml-2 text-sm font-medium text-secondary-foreground">
-                        <div className="smart-capitalize">
-                          {t("menu." + group.label)}
-                        </div>
+                        <div>{t("menu." + group.label)}</div>
                      </h3>
                    )}
                    {filteredItems.map((item) => (
@ -1275,7 +1271,7 @@ export default function Settings() {
  return (
    <div className="flex h-full flex-col">
      <Toaster position="top-center" />
-      <div className="flex items-center justify-between border-b border-secondary p-3">
+      <div className="flex min-h-16 items-center justify-between border-b border-secondary p-3">
        <Heading as="h3" className="mb-0">
          {t("menu.settings", { ns: "common" })}
        </Heading>
@ -1393,9 +1389,7 @@ export default function Settings() {
                              : "text-sidebar-foreground/80",
                          )}
                        >
-                          <div className="smart-capitalize">
-                            {t("menu." + group.label)}
-                          </div>
+                          <div>{t("menu." + group.label)}</div>
                        </SidebarGroupLabel>
                        <SidebarMenuSub className="mx-2 border-0">
                          {filteredItems.map((item) => (
--- a/web/src/views/settings/CameraManagementView.tsx
+++ b/web/src/views/settings/CameraManagementView.tsx
@ -1,6 +1,11 @@
 import Heading from "@/components/ui/heading";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { SettingsGroupCard } from "@/components/card/SettingsGroupCard";
+import {
+  CONTROL_COLUMN_CLASS_NAME,
+  SettingsGroupCard,
+  SPLIT_ROW_CLASS_NAME,
+} from "@/components/card/SettingsGroupCard";
+import { toast } from "sonner";
 import { Toaster } from "@/components/ui/sonner";
 import { Button } from "@/components/ui/button";
 import useSWR from "swr";
@ -15,6 +20,9 @@ import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import { Switch } from "@/components/ui/switch";
 import { Trans } from "react-i18next";
 import { useEnabledState } from "@/api/ws";
+import { Label } from "@/components/ui/label";
+import axios from "axios";
+import ActivityIndicator from "@/components/indicators/activity-indicator";

 type CameraManagementViewProps = {
  setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
@ -37,9 +45,20 @@ export default function CameraManagementView({
  const [showWizard, setShowWizard] = useState(false);

  // List of cameras for dropdown
-  const cameras = useMemo(() => {
+  const enabledCameras = useMemo(() => {
    if (config) {
-      return Object.keys(config.cameras).sort();
+      return Object.keys(config.cameras)
+        .filter((camera) => config.cameras[camera].enabled_in_config)
+        .sort();
+    }
+    return [];
+  }, [config]);
+
+  const disabledCameras = useMemo(() => {
+    if (config) {
+      return Object.keys(config.cameras)
+        .filter((camera) => !config.cameras[camera].enabled_in_config)
+        .sort();
    }
    return [];
  }, [config]);
@ -82,7 +101,7 @@ export default function CameraManagementView({
                  {t("cameraManagement.addCamera")}
                </Button>

-                {cameras.length > 0 && (
+                {enabledCameras.length > 0 && (
                  <SettingsGroupCard
                    title={
                      <Trans ns="views/settings">
@ -90,14 +109,22 @@ export default function CameraManagementView({
                      </Trans>
                    }
                  >
-                    <div className="space-y-4">
-                      <div className="max-w-md text-sm text-muted-foreground">
-                        <Trans ns="views/settings">
-                          cameraManagement.streams.desc
-                        </Trans>
+                    <div className={SPLIT_ROW_CLASS_NAME}>
+                      <div className="space-y-1.5">
+                        <Label
+                          className="cursor-pointer"
+                          htmlFor={"enabled-cameras-switch"}
+                        >
+                          {t("cameraManagement.streams.enableLabel")}
+                          <p className="hidden text-sm text-muted-foreground md:block">
+                            <Trans ns="views/settings">
+                              cameraManagement.streams.enableDesc
+                            </Trans>
+                          </p>
+                        </Label>
                      </div>
                      <div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
-                        {cameras.map((camera) => (
+                        {enabledCameras.map((camera) => (
                          <div
                            key={camera}
                            className="flex flex-row items-center justify-between"
@ -107,7 +134,48 @@ export default function CameraManagementView({
                          </div>
                        ))}
                      </div>
+                      <p className="text-sm text-muted-foreground md:hidden">
+                        <Trans ns="views/settings">
+                          cameraManagement.streams.enableDesc
+                        </Trans>
+                      </p>
                    </div>
+                    {disabledCameras.length > 0 && (
+                      <div className={SPLIT_ROW_CLASS_NAME}>
+                        <div className="space-y-1.5">
+                          <Label
+                            className="cursor-pointer"
+                            htmlFor={"disabled-cameras-switch"}
+                          >
+                            {t("cameraManagement.streams.disableLabel")}
+                          </Label>
+                          <p className="hidden text-sm text-muted-foreground md:block">
+                            {t("cameraManagement.streams.disableDesc")}
+                          </p>
+                        </div>
+                        <div
+                          className={`${CONTROL_COLUMN_CLASS_NAME} space-y-1.5`}
+                        >
+                          <div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
+                            {disabledCameras.map((camera) => (
+                              <div
+                                key={camera}
+                                className="flex flex-row items-center justify-between"
+                              >
+                                <CameraNameLabel camera={camera} />
+                                <CameraConfigEnableSwitch
+                                  cameraName={camera}
+                                  onConfigChanged={updateConfig}
+                                />
+                              </div>
+                            ))}
+                          </div>
+                          <p className="text-sm text-muted-foreground md:hidden">
+                            {t("cameraManagement.streams.disableDesc")}
+                          </p>
+                        </div>
+                      </div>
+                    )}
                  </SettingsGroupCard>
                )}
              </div>
@ -169,3 +237,79 @@ function CameraEnableSwitch({ cameraName }: CameraEnableSwitchProps) {
    </div>
  );
 }
+
+function CameraConfigEnableSwitch({
+  cameraName,
+  onConfigChanged,
+}: CameraEnableSwitchProps & {
+  onConfigChanged: () => Promise<unknown>;
+}) {
+  const { t } = useTranslation(["common", "views/settings"]);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const onCheckedChange = useCallback(
+    async (isChecked: boolean) => {
+      if (!isChecked || isSaving) {
+        return;
+      }
+
+      setIsSaving(true);
+
+      try {
+        await axios.put("config/set", {
+          requires_restart: 0,
+          config_data: {
+            cameras: {
+              [cameraName]: {
+                enabled: true,
+              },
+            },
+          },
+          update_topic: `config/cameras/${cameraName}/enabled`,
+        });
+
+        await onConfigChanged();
+
+        toast.success(
+          t("cameraManagement.streams.enableSuccess", {
+            ns: "views/settings",
+            cameraName,
+          }),
+          {
+            position: "top-center",
+          },
+        );
+      } catch (error) {
+        const errorMessage =
+          axios.isAxiosError(error) &&
+          (error.response?.data?.message || error.response?.data?.detail)
+            ? error.response?.data?.message || error.response?.data?.detail
+            : t("toast.save.error.noMessage", { ns: "common" });
+
+        toast.error(
+          t("toast.save.error.title", { errorMessage, ns: "common" }),
+          {
+            position: "top-center",
+          },
+        );
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [cameraName, isSaving, onConfigChanged, t],
+  );
+
+  return (
+    <div className="flex flex-row items-center">
+      {isSaving ? (
+        <ActivityIndicator className="h-5 w-8" size={16} />
+      ) : (
+        <Switch
+          id={`camera-enabled-${cameraName}`}
+          checked={false}
+          onCheckedChange={onCheckedChange}
+        />
+      )}
+    </div>
+  );
+}
--- a/web/src/views/settings/UiSettingsView.tsx
+++ b/web/src/views/settings/UiSettingsView.tsx
@ -25,6 +25,7 @@ import {
  DESCRIPTION_CLASS_NAME,
  CONTROL_COLUMN_CLASS_NAME,
 } from "@/components/card/SettingsGroupCard";
+import Heading from "@/components/ui/heading";

 const WEEK_STARTS_ON = ["Sunday", "Monday"];

@ -209,9 +210,12 @@ export default function UiSettingsView() {
  ];

  return (
-    <div className="flex size-full flex-col md:flex-row md:pb-8">
+    <div className="flex size-full flex-col md:pb-8">
      <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+      <Heading as="h4" className="mb-3">
+        {t("general.title")}
+      </Heading>
+      <div className="scrollbar-container mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2">
        <div className="w-full max-w-5xl space-y-6">
          <SettingsGroupCard title={t("general.liveDashboard.title")}>
            <div className="space-y-6">