Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-08-22 13:47:29 +02:00
Code Issues Projects Releases Wiki Activity

Remove redundant settings from tabs

Browse Source
This commit is contained in:
Nicolas Mowen 2025-03-21 07:58:46 -06:00
parent 3d605b75a6
commit d6ac368a71
1 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/pages/Settings.tsx
View File

@ -47,9 +47,9 @@ import { useIsAdmin } from "@/hooks/use-is-admin";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const allSettingsViews = [ const allSettingsViews = [
"uiSettings", "ui",
"classificationSettings", "classification",
"cameraSettings", "cameras",
"masksAndZones", "masksAndZones",
"motionTuner", "motionTuner",
"debug", "debug",
@ -61,7 +61,7 @@ type SettingsType = (typeof allSettingsViews)[number];
export default function Settings() { export default function Settings() {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation(["views/settings"]);
const [page, setPage] = useState<SettingsType>("uiSettings"); const [page, setPage] = useState<SettingsType>("ui");
const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100); const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
const tabsRef = useRef<HTMLDivElement | null>(null); const tabsRef = useRef<HTMLDivElement | null>(null);
@ -73,7 +73,7 @@ export default function Settings() {
const isAdmin = useIsAdmin(); const isAdmin = useIsAdmin();
const allowedViewsForViewer: SettingsType[] = ["uiSettings", "debug"]; const allowedViewsForViewer: SettingsType[] = ["ui", "debug"];
const visibleSettingsViews = !isAdmin const visibleSettingsViews = !isAdmin
? allowedViewsForViewer ? allowedViewsForViewer
: allSettingsViews; : allSettingsViews;
@ -135,10 +135,7 @@ export default function Settings() {
const firstEnabledCamera = const firstEnabledCamera =
cameras.find((cam) => cameraEnabledStates[cam.name]) || cameras[0]; cameras.find((cam) => cameraEnabledStates[cam.name]) || cameras[0];
setSelectedCamera(firstEnabledCamera.name); setSelectedCamera(firstEnabledCamera.name);
} else if ( } else if (!cameraEnabledStates[selectedCamera] && page !== "cameras") {
!cameraEnabledStates[selectedCamera] &&
page !== "cameraSettings"
) {
// Switch to first enabled camera if current one is disabled, unless on "camera settings" page // Switch to first enabled camera if current one is disabled, unless on "camera settings" page
const firstEnabledCamera = const firstEnabledCamera =
cameras.find((cam) => cameraEnabledStates[cam.name]) || cameras[0]; cameras.find((cam) => cameraEnabledStates[cam.name]) || cameras[0];
@ -167,8 +164,8 @@ export default function Settings() {
useSearchEffect("page", (page: string) => { useSearchEffect("page", (page: string) => {
if (allSettingsViews.includes(page as SettingsType)) { if (allSettingsViews.includes(page as SettingsType)) {
// Restrict viewer to UI settings // Restrict viewer to UI settings
if (!isAdmin && !["uiSettings", "debug"].includes(page)) { if (!isAdmin && !["ui", "debug"].includes(page)) {
setPage("uiSettings"); setPage("ui");
} else { } else {
setPage(page as SettingsType); setPage(page as SettingsType);
} }
@ -203,8 +200,8 @@ export default function Settings() {
onValueChange={(value: SettingsType) => { onValueChange={(value: SettingsType) => {
if (value) { if (value) {
// Restrict viewer navigation // Restrict viewer navigation
if (!isAdmin && !["uiSettings", "debug"].includes(value)) { if (!isAdmin && !["ui", "debug"].includes(value)) {
setPageToggle("uiSettings"); setPageToggle("ui");
} else { } else {
setPageToggle(value); setPageToggle(value);
} }
@ -214,7 +211,7 @@ export default function Settings() {
{visibleSettingsViews.map((item) => ( {visibleSettingsViews.map((item) => (
<ToggleGroupItem <ToggleGroupItem
key={item} key={item}
className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "uiSettings" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`} className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "ui" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
value={item} value={item}
data-nav-item={item} data-nav-item={item}
aria-label={t("selectItem", { aria-label={t("selectItem", {
@ -230,7 +227,7 @@ export default function Settings() {
</div> </div>
</ScrollArea> </ScrollArea>
{(page == "debug" || {(page == "debug" ||
page == "cameraSettings" || page == "cameras" ||
page == "masksAndZones" || page == "masksAndZones" ||
page == "motionTuner") && ( page == "motionTuner") && (
<div className="ml-2 flex flex-shrink-0 items-center gap-2"> <div className="ml-2 flex flex-shrink-0 items-center gap-2">
@ -251,14 +248,14 @@ export default function Settings() {
)} )}
</div> </div>
<div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24"> <div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
{page == "uiSettings" && <UiSettingsView />} {page == "ui" && <UiSettingsView />}
{page == "classificationSettings" && ( {page == "classification" && (
<ClassificationSettingsView setUnsavedChanges={setUnsavedChanges} /> <ClassificationSettingsView setUnsavedChanges={setUnsavedChanges} />
)} )}
{page == "debug" && ( {page == "debug" && (
<ObjectSettingsView selectedCamera={selectedCamera} /> <ObjectSettingsView selectedCamera={selectedCamera} />
)} )}
{page == "cameraSettings" && ( {page == "cameras" && (
<CameraSettingsView <CameraSettingsView
selectedCamera={selectedCamera} selectedCamera={selectedCamera}
setUnsavedChanges={setUnsavedChanges} setUnsavedChanges={setUnsavedChanges}
@ -363,7 +360,7 @@ function CameraSelectButton({
<div className="flex flex-col gap-2.5"> <div className="flex flex-col gap-2.5">
{allCameras.map((item) => { {allCameras.map((item) => {
const isEnabled = cameraEnabledStates[item.name]; const isEnabled = cameraEnabledStates[item.name];
const isCameraSettingsPage = currentPage === "cameraSettings"; const isCameraSettingsPage = currentPage === "cameras";
return ( return (
<FilterSwitch <FilterSwitch
key={item.name} key={item.name}