administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 17:47:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

tweaks to keep motion review as-is

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-29 08:05:32 -05:00
parent b5be4ad88f
commit ff27612ed8
4 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/timeline/MotionReviewTimeline.tsx
View File

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

5
web/src/components/timeline/MotionSegment.tsx
View File

@ -25,6 +25,7 @@ type MotionSegmentProps = {
setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>; setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void; scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
dense: boolean; dense: boolean;
alwaysShowMotionLine?: boolean;
}; };
export function MotionSegment({ export function MotionSegment({
@ -44,6 +45,7 @@ export function MotionSegment({
setHandlebarTime, setHandlebarTime,
scrollToSegment, scrollToSegment,
dense, dense,
alwaysShowMotionLine = false,
}: MotionSegmentProps) { }: MotionSegmentProps) {
const severityType = "all"; const severityType = "all";
const { getSeverity, getReviewed, displaySeverityType } = const { getSeverity, getReviewed, displaySeverityType } =
@ -235,7 +237,8 @@ export function MotionSegment({
{(hasRecording || {(hasRecording ||
firstHalfSegmentWidth > 0 || 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="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 w-[20px] flex-row justify-center pt-[1px] md:w-[40px]">
<div className="mb-[1px] flex justify-center"> <div className="mb-[1px] flex justify-center">

4
web/src/components/timeline/VirtualizedMotionSegments.tsx
View File

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

18
web/src/views/events/EventView.tsx
View File

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