diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx index 4a96bf19c..a7b56964e 100644 --- a/web/src/components/player/DynamicVideoPlayer.tsx +++ b/web/src/components/player/DynamicVideoPlayer.tsx @@ -453,7 +453,7 @@ export class DynamicVideoController { } if (time > this.preview.end) { - if (this.clipChangeLockout) { + if (this.clipChangeLockout && time - this.preview.end < 30) { return; } @@ -470,7 +470,7 @@ export class DynamicVideoController { } if (time < this.preview.start) { - if (this.clipChangeLockout) { + if (this.clipChangeLockout && this.preview.start - time < 30) { return; } diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx index ca7745849..e526fa777 100644 --- a/web/src/components/player/PreviewThumbnailPlayer.tsx +++ b/web/src/components/player/PreviewThumbnailPlayer.tsx @@ -67,10 +67,10 @@ export default function PreviewThumbnailPlayer({ preventScrollOnSwipe: true, }); - const handleSetReviewed = useCallback( - () => setReviewed(review), - [review, setReviewed], - ); + const handleSetReviewed = useCallback(() => { + review.has_been_reviewed = true; + setReviewed(review); + }, [review, setReviewed]); // playback diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx index 9e2ddc8c0..830662045 100644 --- a/web/src/views/events/EventView.tsx +++ b/web/src/views/events/EventView.tsx @@ -133,16 +133,6 @@ export default function EventView({ }; }, [reviews]); - const currentItems = useMemo(() => { - const current = reviewItems[severity]; - - if (!current || current.length == 0) { - return null; - } - - return current; - }, [reviewItems, severity]); - // review interaction const [selectedReviews, setSelectedReviews] = useState([]); @@ -175,7 +165,7 @@ export default function EventView({ const exportReview = useCallback( (id: string) => { - const review = currentItems?.find((seg) => seg.id == id); + const review = reviewItems.all?.find((seg) => seg.id == id); if (!review) { return; @@ -186,7 +176,7 @@ export default function EventView({ { playback: "realtime" }, ); }, - [currentItems], + [reviewItems], ); if (!config) { @@ -254,7 +244,6 @@ export default function EventView({ {severity != "significant_motion" && ( ; - currentItems: ReviewSegment[] | null; reviewItems: { all: ReviewSegment[]; alert: ReviewSegment[]; @@ -303,7 +291,6 @@ type DetectionReviewProps = { }; function DetectionReview({ contentRef, - currentItems, reviewItems, itemsToReview, relevantPreviews, @@ -317,6 +304,23 @@ function DetectionReview({ }: DetectionReviewProps) { const segmentDuration = 60; + // review data + const currentItems = useMemo(() => { + const current = reviewItems[severity]; + + if (!current || current.length == 0) { + return null; + } + + if (filter?.showReviewed != 1) { + return current.filter((seg) => !seg.has_been_reviewed); + } else { + return current; + } + // only refresh when severity or filter changes + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [severity, filter, reviewItems.all.length]); + // preview const [previewTime, setPreviewTime] = useState(); @@ -446,10 +450,6 @@ function DetectionReview({ > {currentItems && currentItems.map((value) => { - if (value.has_been_reviewed && filter?.showReviewed != 1) { - return; - } - const selected = selectedReviews.includes(value.id); return (