Fix timeline overlay for in progress events

blakeblackshear · Dec 4, 2023 · 91571e6 · 91571e6
1 parent eed08f5
commit 91571e6
Showing 1 changed file with 42 additions and 31 deletions.
diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
@@ -13,6 +13,7 @@ import DeliveryTruckIcon from '../icons/DeliveryTruck';
 import ZoneIcon from '../icons/Zone';
 import { useMemo, useState } from 'preact/hooks';
 import Button from './Button';
+import { useCallback } from 'react';
 
 export default function TimelineSummary({ event, onFrameSelected }) {
   const { data: eventTimeline } = useSWR([
@@ -34,36 +35,47 @@ export default function TimelineSummary({ event, onFrameSelected }) {
 
   const [timeIndex, setTimeIndex] = useState(-1);
 
-  const recordingParams = {
-    before: event.end_time || Date.now(),
-    after: event.start_time,
-  };
+  const recordingParams = useMemo(() => {
+    if (!event.end_time) {
+      return {
+        after: event.start_time,
+      };
+    }
+
+    return {
+      before: event.end_time,
+      after: event.start_time,
+    };
+  }, [event]);
   const { data: recordings } = useSWR([`${event.camera}/recordings`, recordingParams], { revalidateOnFocus: false });
 
   // calculates the seek seconds by adding up all the seconds in the segments prior to the playback time
-  const getSeekSeconds = (seekUnix) => {
-    if (!recordings) {
-      return 0;
-    }
-
-    let seekSeconds = 0;
-    recordings.every((segment) => {
-      // if the next segment is past the desired time, stop calculating
-      if (segment.start_time > seekUnix) {
-        return false;
+  const getSeekSeconds = useCallback(
+    (seekUnix) => {
+      if (!recordings) {
+        return 0;
       }
 
-      if (segment.end_time < seekUnix) {
-        seekSeconds += segment.end_time - segment.start_time;
-        return true;
-      }
+      let seekSeconds = 0;
+      recordings.every((segment) => {
+        // if the next segment is past the desired time, stop calculating
+        if (segment.start_time > seekUnix) {
+          return false;
+        }
+
+        if (segment.end_time < seekUnix) {
+          seekSeconds += segment.end_time - segment.start_time;
+          return true;
+        }
 
-      seekSeconds += segment.end_time - segment.start_time - (segment.end_time - seekUnix);
-      return true;
-    });
+        seekSeconds += segment.end_time - segment.start_time - (segment.end_time - seekUnix);
+        return true;
+      });
 
-    return seekSeconds;
-  };
+      return seekSeconds;
+    },
+    [recordings]
+  );
 
   const onSelectMoment = async (index) => {
     setTimeIndex(index);
@@ -169,14 +181,13 @@ function getTimelineItemDescription(config, timelineItem, event) {
         time_format: config.ui.time_format,
       })}`;
     case 'attribute':
-      return `${timelineItem.data.attribute.replaceAll("_", " ")} detected for ${event.label} at ${formatUnixTimestampToDateTime(
-        timelineItem.timestamp,
-        {
-          date_style: 'short',
-          time_style: 'medium',
-          time_format: config.ui.time_format,
-        }
-      )}`;
+      return `${timelineItem.data.attribute.replaceAll('_', ' ')} detected for ${
+        event.label
+      } at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {
+        date_style: 'short',
+        time_style: 'medium',
+        time_format: config.ui.time_format,
+      })}`;
     case 'gone':
       return `${event.label} left at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {
         date_style: 'short',