From a78dec5a7f019d4f41c520793dd6eda39f7ef8da Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Tue, 6 Apr 2021 00:04:56 +0700
Subject: [PATCH] make timeline follow player time also

fixes #676
---
 src/Timeline.jsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/Timeline.jsx b/src/Timeline.jsx
index fb155ae7..1600165d 100644
--- a/src/Timeline.jsx
+++ b/src/Timeline.jsx
@@ -71,11 +71,12 @@ const Timeline = memo(({
   const currentTimePercent = useMemo(() => calculateTimelinePercent(playerTime), [calculateTimelinePercent, playerTime]);
   const commandedTimePercent = useMemo(() => calculateTimelinePercent(commandedTime), [calculateTimelinePercent, commandedTime]);
 
-  const commandedTimePosPixels = useMemo(() => {
-    const pos = calculateTimelinePos(commandedTime);
+  const timeOfInterestPosPixels = useMemo(() => {
+    // https://github.com/mifi/lossless-cut/issues/676
+    const pos = calculateTimelinePos(playerTime);
     if (pos != null && timelineScrollerRef.current) return pos * zoom * timelineScrollerRef.current.offsetWidth;
     return undefined;
-  }, [calculateTimelinePos, commandedTime, zoom]);
+  }, [calculateTimelinePos, playerTime, zoom]);
 
   const calcZoomWindowStartTime = useCallback(() => (timelineScrollerRef.current
     ? (timelineScrollerRef.current.scrollLeft / (timelineScrollerRef.current.offsetWidth * zoom)) * durationSafe
@@ -107,17 +108,17 @@ const Timeline = memo(({
 
   // Pan timeline when cursor moves out of timeline window
   useEffect(() => {
-    if (commandedTimePosPixels == null || timelineScrollerSkipEventRef.current) return;
+    if (timeOfInterestPosPixels == null || timelineScrollerSkipEventRef.current) return;
 
-    if (commandedTimePosPixels > timelineScrollerRef.current.scrollLeft + timelineScrollerRef.current.offsetWidth) {
+    if (timeOfInterestPosPixels > timelineScrollerRef.current.scrollLeft + timelineScrollerRef.current.offsetWidth) {
       const timelineWidth = timelineWrapperRef.current.offsetWidth;
-      const scrollLeft = commandedTimePosPixels - (timelineScrollerRef.current.offsetWidth * 0.1);
+      const scrollLeft = timeOfInterestPosPixels - (timelineScrollerRef.current.offsetWidth * 0.1);
       scrollLeftMotion.set(Math.min(scrollLeft, timelineWidth - timelineScrollerRef.current.offsetWidth));
-    } else if (commandedTimePosPixels < timelineScrollerRef.current.scrollLeft) {
-      const scrollLeft = commandedTimePosPixels - (timelineScrollerRef.current.offsetWidth * 0.9);
+    } else if (timeOfInterestPosPixels < timelineScrollerRef.current.scrollLeft) {
+      const scrollLeft = timeOfInterestPosPixels - (timelineScrollerRef.current.offsetWidth * 0.9);
       scrollLeftMotion.set(Math.max(scrollLeft, 0));
     }
-  }, [commandedTimePosPixels, scrollLeftMotion]);
+  }, [timeOfInterestPosPixels, scrollLeftMotion]);
 
   const currentTimeWidth = 1;