From 540a33fcdcaeb89ffadf558e92a1997886552b0e Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 29 Feb 2024 12:36:05 -0700
Subject: [PATCH] reduce preview calculations on rerenders

---
 .../components/player/PreviewThumbnailPlayer.tsx  | 15 +++++++++++++--
 web/src/views/events/EventView.tsx                | 10 +---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 79282bd7d..b8a2d322c 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -32,7 +32,7 @@ import { useSwipeable } from "react-swipeable";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
-  relevantPreview?: Preview;
+  allPreviews?: Preview[];
   autoPlayback?: boolean;
   setReviewed?: (reviewId: string) => void;
   onTimeUpdate?: (time: number | undefined) => void;
@@ -49,7 +49,7 @@ type Preview = {
 
 export default function PreviewThumbnailPlayer({
   review,
-  relevantPreview,
+  allPreviews,
   setReviewed,
   onClick,
   onTimeUpdate,
@@ -87,6 +87,17 @@ export default function PreviewThumbnailPlayer({
 
   // playback
 
+  const relevantPreview = useMemo(
+    () =>
+      Object.values(allPreviews || []).find(
+        (preview) =>
+          preview.camera == review.camera &&
+          preview.start < review.start_time &&
+          preview.end > review.end_time,
+      ),
+    [allPreviews],
+  );
+
   const playingBack = useMemo(() => playback, [playback]);
 
   const onPlayback = useCallback(
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 2860e515e..b0c0f78b7 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -305,14 +305,6 @@ export default function EventView({
               currentItems.map((value, segIdx) => {
                 const lastRow = segIdx == reviewItems[severity].length - 1;
                 const selected = selectedReviews.includes(value.id);
-                const relevantPreview = Object.values(
-                  relevantPreviews || [],
-                ).find(
-                  (preview) =>
-                    preview.camera == value.camera &&
-                    preview.start < value.start_time &&
-                    preview.end > value.end_time,
-                );
 
                 return (
                   <div
@@ -328,7 +320,7 @@ export default function EventView({
                     <div className="aspect-video rounded-lg overflow-hidden">
                       <PreviewThumbnailPlayer
                         review={value}
-                        relevantPreview={relevantPreview}
+                        allPreviews={relevantPreviews}
                         setReviewed={markItemAsReviewed}
                         onTimeUpdate={setPreviewTime}
                         onClick={onSelectReview}