Fix layout shifting (#10313)

* Fix layout shifting

* Change value for current data

* Fix motion scrubbing lockout

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;
       }
 

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
 

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<string[]>([]);
@@ -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" && (
           <DetectionReview
             contentRef={contentRef}
-            currentItems={currentItems}
             reviewItems={reviewItems}
             relevantPreviews={relevantPreviews}
             selectedReviews={selectedReviews}
@@ -284,7 +273,6 @@ export default function EventView({
 
 type DetectionReviewProps = {
   contentRef: MutableRefObject<HTMLDivElement | null>;
-  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<number>();
@@ -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 (