No recordings indicator on History timeline (#20715)

* black background

* fix backend logic

* fixes

* ensure data being sent to api is segment aligned

* tweak

* tweaks to keep motion review as-is

* fix for half segment fractional seconds when using zooming

web/src/views/events/EventView.tsx

@@ -895,11 +895,20 @@ function MotionReview({
 
   // motion data
 
+  const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
+    {
+      segmentDuration,
+    },
+  );
+
+  const alignedAfter = alignStartDateToTimeline(timeRange.after);
+  const alignedBefore = alignEndDateToTimeline(timeRange.before);
+
   const { data: motionData } = useSWR<MotionData[]>([
     "review/activity/motion",
     {
-      before: timeRange.before,
-      after: timeRange.after,
+      before: alignedBefore,
+      after: alignedAfter,
       scale: segmentDuration / 2,
       cameras: filter?.cameras?.join(",") ?? null,
     },
@@ -1006,10 +1015,6 @@ function MotionReview({
     }
   }, [playing, playbackRate, nextTimestamp, setPlaying, timeRange]);
 
-  const { alignStartDateToTimeline } = useTimelineUtils({
-    segmentDuration,
-  });
-
   const getDetectionType = useCallback(
     (cameraName: string) => {
       if (motionOnly) {
@@ -1159,6 +1164,7 @@ function MotionReview({
             dense={isMobileOnly}
             isZooming={false}
             zoomDirection={null}
+            alwaysShowMotionLine={true}
           />
         ) : (
           <Skeleton className="size-full" />