Miscellaneous fixes (0.17 beta) (#21699)

* tracking details tweaks

- fix 4:3 layout
- get and use aspect of record stream if different from detect stream

* aspect ratio docs tip

* spacing

* fix

* i18n fix

* additional logs on ffmpeg exit

* improve no camera view

instead of showing an "add camera" message, show a specific message for empty camera groups when frigate already has cameras added

* add note about separate onvif accounts in some camera firmware

* clarify review summary report docs

* review settings tweaks

- remove horizontal divider
- update description language for switches
- keep save button disabled until review classification settings change

* use correct Toaster component from shadcn

* clarify support for intel b-series (battlemage) gpus

* add clarifying comment to dummy camera docs

web/src/views/settings/CameraManagementView.tsx

@@ -1,6 +1,6 @@
 import Heading from "@/components/ui/heading";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Toaster } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
 import { Button } from "@/components/ui/button";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";

web/src/views/settings/CameraReviewSettingsView.tsx

@@ -1,6 +1,7 @@
 import Heading from "@/components/ui/heading";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { Toaster, toast } from "sonner";
+import { toast } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
 import {
   Form,
   FormControl,
@@ -158,11 +159,12 @@ export default function CameraReviewSettingsView({
         });
       }
       setChangedValue(true);
+      setUnsavedChanges(true);
       setSelectDetections(isChecked as boolean);
     },
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [watchedAlertsZones],
+    [watchedAlertsZones, setUnsavedChanges],
   );
 
   const saveToConfig = useCallback(
@@ -197,6 +199,8 @@ export default function CameraReviewSettingsView({
                 position: "top-center",
               },
             );
+            setChangedValue(false);
+            setUnsavedChanges(false);
             updateConfig();
           } else {
             toast.error(
@@ -229,7 +233,14 @@ export default function CameraReviewSettingsView({
           setIsLoading(false);
         });
     },
-    [updateConfig, setIsLoading, selectedCamera, cameraConfig, t],
+    [
+      updateConfig,
+      setIsLoading,
+      selectedCamera,
+      cameraConfig,
+      t,
+      setUnsavedChanges,
+    ],
   );
 
   const onCancel = useCallback(() => {
@@ -495,6 +506,7 @@ export default function CameraReviewSettingsView({
                                         )}
                                         onCheckedChange={(checked) => {
                                           setChangedValue(true);
+                                          setUnsavedChanges(true);
                                           return checked
                                             ? field.onChange([
                                                 ...field.value,
@@ -600,6 +612,8 @@ export default function CameraReviewSettingsView({
                                             zone.name,
                                           )}
                                           onCheckedChange={(checked) => {
+                                            setChangedValue(true);
+                                            setUnsavedChanges(true);
                                             return checked
                                               ? field.onChange([
                                                   ...field.value,
@@ -699,7 +713,6 @@ export default function CameraReviewSettingsView({
                   )}
                 />
               </div>
-              <Separator className="my-2 flex bg-secondary" />
 
               <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
                 <Button
@@ -712,7 +725,7 @@ export default function CameraReviewSettingsView({
                 </Button>
                 <Button
                   variant="select"
-                  disabled={isLoading}
+                  disabled={!changedValue || isLoading}
                   className="flex flex-1"
                   aria-label={t("button.save", { ns: "common" })}
                   type="submit"

web/src/views/settings/FrigatePlusSettingsView.tsx

@@ -1,7 +1,7 @@
 import Heading from "@/components/ui/heading";
 import { Label } from "@/components/ui/label";
 import { useCallback, useContext, useEffect, useState } from "react";
-import { Toaster } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
 import { Separator } from "../../components/ui/separator";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { toast } from "sonner";

web/src/views/settings/TriggerView.tsx

@@ -664,9 +664,7 @@ export default function TriggerView({
                     <TableHeader className="sticky top-0 bg-muted/50">
                       <TableRow>
                         <TableHead className="w-4"></TableHead>
-                        <TableHead>
-                          {t("name", { ns: "triggers.table.name" })}
-                        </TableHead>
+                        <TableHead>{t("triggers.table.name")}</TableHead>
                         <TableHead>{t("triggers.table.type")}</TableHead>
                         <TableHead>
                           {t("triggers.table.lastTriggered")}

web/src/views/settings/UiSettingsView.tsx

@@ -2,7 +2,7 @@ import Heading from "@/components/ui/heading";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { useCallback, useContext, useEffect } from "react";
-import { Toaster } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { Separator } from "../../components/ui/separator";
 import { Button } from "../../components/ui/button";