diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx index 9fb8dbdc0..4136aa4b3 100644 --- a/web/src/components/timeline/MotionReviewTimeline.tsx +++ b/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(null); const selectedTimelineRef = timelineRef || internalTimelineRef; @@ -222,6 +224,7 @@ export function MotionReviewTimeline({ motionOnly={motionOnly} getMotionSegmentValue={getMotionSegmentValue} getRecordingAvailability={getRecordingAvailability} + alwaysShowMotionLine={alwaysShowMotionLine} /> ); diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx index 11eb68a37..90ce5e1a5 100644 --- a/web/src/components/timeline/MotionSegment.tsx +++ b/web/src/components/timeline/MotionSegment.tsx @@ -25,6 +25,7 @@ type MotionSegmentProps = { setHandlebarTime?: React.Dispatch>; 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) && (
diff --git a/web/src/components/timeline/VirtualizedMotionSegments.tsx b/web/src/components/timeline/VirtualizedMotionSegments.tsx index 9d6b3a6f1..f868e158f 100644 --- a/web/src/components/timeline/VirtualizedMotionSegments.tsx +++ b/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} />
); @@ -221,6 +224,7 @@ export const VirtualizedMotionSegments = forwardRef< dense, timestampSpread, visibleRange.start, + alwaysShowMotionLine, ], ); diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx index bcc2859b9..2737b7be0 100644 --- a/web/src/views/events/EventView.tsx +++ b/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([ "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} /> ) : (