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/components/card/EmptyCard.tsx

@@ -35,7 +35,9 @@ export function EmptyCard({
       {icon}
       {TitleComponent}
       {description && (
-        <div className="mb-3 text-secondary-foreground">{description}</div>
+        <div className="mb-3 text-center text-secondary-foreground">
+          {description}
+        </div>
       )}
       {buttonText?.length && (
         <Button size="sm" variant="select">

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

@@ -13,7 +13,7 @@ import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
 import { baseUrl } from "@/api/baseUrl";
 import { REVIEW_PADDING } from "@/types/review";
 import {
-  ASPECT_VERTICAL_LAYOUT,
+  ASPECT_PORTRAIT_LAYOUT,
   ASPECT_WIDE_LAYOUT,
   Recording,
 } from "@/types/record";
@@ -39,6 +39,7 @@ import { useApiHost } from "@/api";
 import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
 import ObjectTrackOverlay from "../ObjectTrackOverlay";
 import { useIsAdmin } from "@/hooks/use-is-admin";
+import { VideoResolutionType } from "@/types/live";
 
 type TrackingDetailsProps = {
   className?: string;
@@ -253,16 +254,25 @@ export function TrackingDetails({
 
   const [timelineSize] = useResizeObserver(timelineContainerRef);
 
+  const [fullResolution, setFullResolution] = useState<VideoResolutionType>({
+    width: 0,
+    height: 0,
+  });
+
   const aspectRatio = useMemo(() => {
     if (!config) {
       return 16 / 9;
     }
 
+    if (fullResolution.width && fullResolution.height) {
+      return fullResolution.width / fullResolution.height;
+    }
+
     return (
       config.cameras[event.camera].detect.width /
       config.cameras[event.camera].detect.height
     );
-  }, [config, event]);
+  }, [config, event, fullResolution]);
 
   const label = event.sub_label
     ? event.sub_label
@@ -460,7 +470,7 @@ export function TrackingDetails({
       return "normal";
     } else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
       return "wide";
-    } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
+    } else if (aspectRatio < ASPECT_PORTRAIT_LAYOUT) {
       return "tall";
     } else {
       return "normal";
@@ -556,6 +566,7 @@ export function TrackingDetails({
                 onSeekToTime={handleSeekToTime}
                 onUploadFrame={onUploadFrameToPlus}
                 onPlaying={() => setIsVideoLoading(false)}
+                setFullResolution={setFullResolution}
                 isDetailMode={true}
                 camera={event.camera}
                 currentTimeOverride={currentTime}
@@ -623,7 +634,7 @@ export function TrackingDetails({
       <div
         className={cn(
           isDesktop && "justify-start overflow-hidden",
-          aspectRatio > 1 && aspectRatio < 1.5
+          aspectRatio > 1 && aspectRatio < ASPECT_PORTRAIT_LAYOUT
             ? "lg:basis-3/5"
             : "lg:basis-2/5",
         )}

web/src/components/settings/CameraEditForm.tsx

@@ -16,7 +16,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, useFieldArray } from "react-hook-form";
 import { z } from "zod";
 import axios from "axios";
-import { toast, Toaster } from "sonner";
+import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
 import { useState, useMemo, useEffect } from "react";
 import { LuTrash2, LuPlus } from "react-icons/lu";
@@ -26,6 +26,7 @@ import useSWR from "swr";
 import { processCameraName } from "@/utils/cameraUtil";
 import { Label } from "@/components/ui/label";
 import { ConfigSetBody } from "@/types/cameraWizard";
+import { Toaster } from "../ui/sonner";
 
 const RoleEnum = z.enum(["audio", "detect", "record"]);
 type Role = z.infer<typeof RoleEnum>;