ensure data being sent to api is segment aligned

web/src/components/timeline/MotionSegment.tsx

@@ -233,7 +233,9 @@ export function MotionSegment({
             </>
           )}
 
-          {hasRecording && (
+          {(hasRecording ||
+            firstHalfSegmentWidth > 0 ||
+            secondHalfSegmentWidth > 0) && (
             <div className="absolute left-1/2 z-10 h-[8px] w-[20px] -translate-x-1/2 transform cursor-pointer md:w-[40px]">
               <div className="mb-[1px] flex w-[20px] flex-row justify-center pt-[1px] md:w-[40px]">
                 <div className="mb-[1px] flex justify-center">

web/src/components/timeline/ReviewTimeline.tsx

@@ -402,7 +402,7 @@ export function ReviewTimeline({
                 </div>
               </div>
               {/* TODO: determine if we should keep this tooltip */}
-              {isHandlebarInNoRecordingPeriod && (
+              {false && isHandlebarInNoRecordingPeriod && (
                 <div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 rounded-md bg-destructive/80 px-4 py-1 text-center text-xs text-white shadow-lg">
                   No recordings
                 </div>

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,8 +931,8 @@ function Timeline({
   const { data: noRecordings } = useSWR<RecordingSegment[]>([
     "recordings/unavailable",
     {
-      before: timeRange.before,
-      after: timeRange.after,
+      before: alignedBefore,
+      after: alignedAfter,
       scale: Math.round(zoomSettings.segmentDuration),
       cameras: mainCamera,
     },