From a97244f532816bc32b4df39eaec42e409219ba04 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Thu, 5 Mar 2020 19:00:23 +0800
Subject: [PATCH] debounce thumbnails rendering

---
 src/App.jsx      |  7 ++++---
 src/Timeline.jsx | 12 +++++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e522cd57..86363331 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -634,7 +634,7 @@ const App = memo(() => {
     setThumbnails(v => [...v, thumbnail]);
   }
 
-  useEffect(() => {
+  const [, cancelRenderThumbnails] = useDebounce(() => {
     async function renderThumbnails() {
       if (!thumbnailsEnabled || thumnailsRenderingPromiseRef.current) return;
 
@@ -651,7 +651,7 @@ const App = memo(() => {
     }
 
     if (duration) renderThumbnails();
-  }, [zoomedDuration, duration, filePath, zoomWindowStartTime, thumbnailsEnabled]);
+  }, 500, [zoomedDuration, duration, filePath, zoomWindowStartTime, thumbnailsEnabled]);
 
   // Cleanup removed thumbnails
   useEffect(() => {
@@ -750,7 +750,8 @@ const App = memo(() => {
     cancelReadKeyframeDataDebounce();
 
     setThumbnails([]);
-  }, [cutSegmentsHistory, cancelCutSegmentsDebounce, setCutSegments, cancelWaveformDataDebounce, cancelReadKeyframeDataDebounce]);
+    cancelRenderThumbnails();
+  }, [cutSegmentsHistory, cancelCutSegmentsDebounce, setCutSegments, cancelWaveformDataDebounce, cancelReadKeyframeDataDebounce, cancelRenderThumbnails]);
 
 
   // Cleanup old
diff --git a/src/Timeline.jsx b/src/Timeline.jsx
index d2b4eb22..cfcbe27e 100644
--- a/src/Timeline.jsx
+++ b/src/Timeline.jsx
@@ -67,9 +67,11 @@ const Timeline = memo(({
     return undefined;
   }, [calculateTimelinePos, playerTime, zoom]);
 
-  const zoomWindowStartTime = timelineScrollerRef.current
+  const calcZoomWindowStartTime = useCallback(() => (timelineScrollerRef.current
     ? (timelineScrollerRef.current.scrollLeft / (timelineScrollerRef.current.offsetWidth * zoom)) * duration
-    : 0;
+    : 0), [duration, zoom]);
+
+  // const zoomWindowStartTime = calcZoomWindowStartTime(duration, zoom);
 
   useEffect(() => {
     timelineScrollerSkipEventDebounce.current = debounce(() => {
@@ -93,7 +95,7 @@ const Timeline = memo(({
       suppressScrollerEvents();
       timelineScrollerRef.current.scrollLeft -= timelineScrollerRef.current.offsetWidth * 0.9;
     }
-  }, [currentTimePosPixels, zoomWindowStartTime]);
+  }, [currentTimePosPixels]);
 
   const currentTimeWidth = 1;
 
@@ -121,8 +123,8 @@ const Timeline = memo(({
   }, []);
 
   const onTimelineScroll = useCallback(() => {
-    onZoomWindowStartTimeChange(zoomWindowStartTime);
-  }, [zoomWindowStartTime, onZoomWindowStartTimeChange]);
+    onZoomWindowStartTimeChange(calcZoomWindowStartTime());
+  }, [calcZoomWindowStartTime, onZoomWindowStartTimeChange]);
 
   // Keep cursor in middle while scrolling
   /* const onTimelineScroll = useCallback((e) => {