tweaks to keep motion review as-is

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -46,6 +46,7 @@ export type MotionReviewTimelineProps = {
   dense?: boolean;
   isZooming: boolean;
   zoomDirection: TimelineZoomDirection;
+  alwaysShowMotionLine?: boolean;
 };
 
 export function MotionReviewTimeline({
@@ -75,6 +76,7 @@ export function MotionReviewTimeline({
   dense = false,
   isZooming,
   zoomDirection,
+  alwaysShowMotionLine = false,
 }: MotionReviewTimelineProps) {
   const internalTimelineRef = useRef<HTMLDivElement>(null);
   const selectedTimelineRef = timelineRef || internalTimelineRef;
@@ -222,6 +224,7 @@ export function MotionReviewTimeline({
         motionOnly={motionOnly}
         getMotionSegmentValue={getMotionSegmentValue}
         getRecordingAvailability={getRecordingAvailability}
+        alwaysShowMotionLine={alwaysShowMotionLine}
       />
     </ReviewTimeline>
   );

web/src/components/timeline/MotionSegment.tsx

@@ -25,6 +25,7 @@ type MotionSegmentProps = {
   setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
   scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
   dense: boolean;
+  alwaysShowMotionLine?: boolean;
 };
 
 export function MotionSegment({
@@ -44,6 +45,7 @@ export function MotionSegment({
   setHandlebarTime,
   scrollToSegment,
   dense,
+  alwaysShowMotionLine = false,
 }: MotionSegmentProps) {
   const severityType = "all";
   const { getSeverity, getReviewed, displaySeverityType } =
@@ -235,7 +237,8 @@ export function MotionSegment({
 
           {(hasRecording ||
             firstHalfSegmentWidth > 0 ||
-            secondHalfSegmentWidth > 0) && (
+            secondHalfSegmentWidth > 0 ||
+            alwaysShowMotionLine) && (
             <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/VirtualizedMotionSegments.tsx

@@ -25,6 +25,7 @@ type VirtualizedMotionSegmentsProps = {
   motionOnly: boolean;
   getMotionSegmentValue: (timestamp: number) => number;
   getRecordingAvailability: (timestamp: number) => boolean | undefined;
+  alwaysShowMotionLine: boolean;
 };
 
 export interface VirtualizedMotionSegmentsRef {
@@ -57,6 +58,7 @@ export const VirtualizedMotionSegments = forwardRef<
       motionOnly,
       getMotionSegmentValue,
       getRecordingAvailability,
+      alwaysShowMotionLine,
     },
     ref,
   ) => {
@@ -203,6 +205,7 @@ export const VirtualizedMotionSegments = forwardRef<
               setHandlebarTime={setHandlebarTime}
               scrollToSegment={scrollToSegment}
               dense={dense}
+              alwaysShowMotionLine={alwaysShowMotionLine}
             />
           </div>
         );
@@ -221,6 +224,7 @@ export const VirtualizedMotionSegments = forwardRef<
         dense,
         timestampSpread,
         visibleRange.start,
+        alwaysShowMotionLine,
       ],
     );
 

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