From 14a12c5ad52d11f77db66f2d2a6a96d7c6522db9 Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Thu, 13 Jan 2022 00:38:06 -0600
Subject: [PATCH] fix: bug with timeline shifting

---
 web/src/components/HistoryViewer.jsx | 14 ++++----------
 web/src/components/Timeline.jsx      | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/web/src/components/HistoryViewer.jsx b/web/src/components/HistoryViewer.jsx
index b3207a51a..558b5bff6 100644
--- a/web/src/components/HistoryViewer.jsx
+++ b/web/src/components/HistoryViewer.jsx
@@ -13,7 +13,8 @@ export default function HistoryViewer({ camera }) {
   const apiHost = useApiHost();
   const videoRef = useRef();
 
-  const beginningOfDay = new Date().setHours(0, 0, 0) / 1000;
+  // const beginningOfDay = new Date().setHour(0, 0, 0) / 1000;
+  const beginningOfDay = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
   const { searchString } = useSearchString(200, `camera=${camera}&after=${beginningOfDay}`);
   const { data: events } = useEvents(searchString);
   const [timelineEvents, setTimelineEvents] = useState();
@@ -38,17 +39,11 @@ export default function HistoryViewer({ camera }) {
   };
 
   const handleTimelineChange = (event) => {
-    console.log({ event });
     if (event !== undefined) {
       setCurrentEvent(event);
-      setCurrentEventIndex(event.index);
     }
   };
 
-  const handleVideoTouch = () => {
-    setHideBanner(true);
-  };
-
   const handlePlay = function () {
     videoRef.current.play();
   };
@@ -58,11 +53,11 @@ export default function HistoryViewer({ camera }) {
   };
 
   const handlePrevious = function () {
-    setCurrentEventIndex((index) => index - 1);
+    setCurrentEventIndex(currentEvent.index - 1);
   };
 
   const handleNext = function () {
-    setCurrentEventIndex((index) => index + 1);
+    setCurrentEventIndex(currentEvent.index + 1);
   };
 
   return (
@@ -80,7 +75,6 @@ export default function HistoryViewer({ camera }) {
               ref={videoRef}
               onTimeUpdate={handleTimeUpdate}
               onPause={handlePaused}
-              onClick={handleVideoTouch}
               poster={`${apiHost}/api/events/${currentEvent.id}/snapshot.jpg`}
               preload='none'
               playsInline
diff --git a/web/src/components/Timeline.jsx b/web/src/components/Timeline.jsx
index 33592bda0..378ef9949 100644
--- a/web/src/components/Timeline.jsx
+++ b/web/src/components/Timeline.jsx
@@ -47,20 +47,25 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
     }
   }, [events, timelineOffset]);
 
+  const getCurrentEvent = useCallback(() => {
+    return currentEvent;
+  }, [currentEvent]);
+
   useEffect(() => {
-    if (currentEvent && offset >= 0) {
+    const cEvent = getCurrentEvent();
+    if (cEvent && offset >= 0) {
       setScrollActive(false);
       timelineContainerRef.current.scroll({
-        left: currentEvent.positionX + offset - timelineOffset,
+        left: cEvent.positionX + offset - timelineOffset,
         behavior: 'smooth',
       });
     } else {
       setScrollActive(true);
     }
-  }, [offset, currentEvent, timelineContainerRef]);
+  }, [offset, timelineContainerRef]);
 
   useEffect(() => {
-    if (currentIndex !== undefined && currentIndex !== currentEvent.index) {
+    if (currentIndex !== undefined) {
       const event = timeline[currentIndex];
       setCurrentEvent({
         ...event,
@@ -71,7 +76,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
       });
       timelineContainerRef.current.scroll({ left: event.positionX - timelineOffset, behavior: 'smooth' });
     }
-  }, [currentIndex, timelineContainerRef, timeline, currentEvent]);
+  }, [currentIndex, timelineContainerRef, timeline]);
 
   const checkMarkerForEvent = (markerTime) => {
     if (!scrollActive) {