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" />

web/src/views/recording/RecordingView.tsx

@@ -56,6 +56,7 @@ import { useFullscreen } from "@/hooks/use-fullscreen";
 import { useTimezone } from "@/hooks/use-date-utils";
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { useTranslation } from "react-i18next";
+import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import {
   Tooltip,
   TooltipContent,
@@ -908,12 +909,20 @@ function Timeline({
   });
 
   // motion data
+  const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
+    {
+      segmentDuration: zoomSettings.segmentDuration,
+    },
+  );
+
+  const alignedAfter = alignStartDateToTimeline(timeRange.after);
+  const alignedBefore = alignEndDateToTimeline(timeRange.before);
 
   const { data: motionData, isLoading } = useSWR<MotionData[]>([
     "review/activity/motion",
     {
-      before: timeRange.before,
-      after: timeRange.after,
+      before: alignedBefore,
+      after: alignedAfter,
       scale: Math.round(zoomSettings.segmentDuration / 2),
       cameras: mainCamera,
     },
@@ -922,9 +931,9 @@ function Timeline({
   const { data: noRecordings } = useSWR<RecordingSegment[]>([
     "recordings/unavailable",
     {
-      before: timeRange.before,
-      after: timeRange.after,
-      scale: Math.round(zoomSettings.segmentDuration / 2),
+      before: alignedBefore,
+      after: alignedAfter,
+      scale: Math.round(zoomSettings.segmentDuration),
       cameras: mainCamera,
     },
   ]);