UI tweaks and bugfixes (#10775)

* fix wrong segments when changing filters in motion only mode

* pixel alignment, better outlines, and more figma matching

* fix stats from crashing the ui

* separate layout from aspect classes

* check for invalid value

* avoid undefined classnames

web/src/hooks/use-draggable-element.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { useTimelineUtils } from "./use-timeline-utils";
@@ -23,6 +23,7 @@ type DraggableElementProps = {
   setIsDragging: React.Dispatch<React.SetStateAction<boolean>>;
   setDraggableElementPosition?: React.Dispatch<React.SetStateAction<number>>;
   dense: boolean;
+  timelineSegments: ReactNode[];
 };
 
 function useDraggableElement({
@@ -45,6 +46,7 @@ function useDraggableElement({
   setIsDragging,
   setDraggableElementPosition,
   dense,
+  timelineSegments,
 }: DraggableElementProps) {
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
   const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
@@ -213,10 +215,10 @@ function useDraggableElement({
   );
 
   useEffect(() => {
-    if (timelineRef.current) {
+    if (timelineRef.current && timelineSegments.length) {
       setSegments(Array.from(timelineRef.current.querySelectorAll(".segment")));
     }
-  }, [timelineRef, segmentDuration, timelineDuration, timelineCollapsed]);
+  }, [timelineRef, timelineCollapsed, timelineSegments]);
 
   useEffect(() => {
     let animationFrameId: number | null = null;
@@ -426,7 +428,13 @@ function useDraggableElement({
   ]);
 
   useEffect(() => {
-    if (timelineRef.current && draggableElementTime && timelineCollapsed) {
+    if (
+      timelineRef.current &&
+      draggableElementTime &&
+      timelineCollapsed &&
+      timelineSegments &&
+      segments
+    ) {
       setFullTimelineHeight(timelineRef.current.scrollHeight);
       const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
 
@@ -452,14 +460,30 @@ function useDraggableElement({
             if (setDraggableElementTime) {
               setDraggableElementTime(searchTime);
             }
-            break;
+            return;
+          }
+        }
+      }
+      if (!segmentElement) {
+        // segment still not found, just start at the beginning of the timeline or at now()
+        if (segments?.length) {
+          const searchTime = parseInt(
+            segments[0].getAttribute("data-segment-id") || "0",
+            10,
+          );
+          if (setDraggableElementTime) {
+            setDraggableElementTime(searchTime);
+          }
+        } else {
+          if (setDraggableElementTime) {
+            setDraggableElementTime(timelineStartAligned);
           }
         }
       }
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timelineCollapsed]);
+  }, [timelineCollapsed, segments]);
 
   useEffect(() => {
     if (timelineRef.current && segments) {

web/src/hooks/use-stats.ts

@@ -37,9 +37,11 @@ export default function useStats(stats: FrigateStats | undefined) {
     // check camera cpu usages
     Object.entries(stats["cameras"]).forEach(([name, cam]) => {
       const ffmpegAvg = parseFloat(
-        stats["cpu_usages"][cam["ffmpeg_pid"]].cpu_average,
+        stats["cpu_usages"][cam["ffmpeg_pid"]]?.cpu_average,
+      );
+      const detectAvg = parseFloat(
+        stats["cpu_usages"][cam["pid"]]?.cpu_average,
       );
-      const detectAvg = parseFloat(stats["cpu_usages"][cam["pid"]].cpu_average);
 
       if (!isNaN(ffmpegAvg) && ffmpegAvg >= 20.0) {
         problems.push({