From e001f2d2fa1b1e1f776a9f2ef1a4121ef5ddad3c Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sat, 15 Jan 2022 17:12:53 +0700
Subject: [PATCH] show percent when zoomed in #888

---
 src/Timeline.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Timeline.jsx b/src/Timeline.jsx
index 39e8c564..35675497 100644
--- a/src/Timeline.jsx
+++ b/src/Timeline.jsx
@@ -71,6 +71,9 @@ const Timeline = memo(({
 
   const currentTime = getCurrentTime() || 0;
   const displayTime = (hoveringTime != null && isFileOpened && !playing ? hoveringTime : currentTime) + startTimeOffset;
+  const displayTimePercent = useMemo(() => `${Math.round((displayTime / durationSafe) * 100)}%`, [displayTime, durationSafe]);
+
+  const isZoomed = zoom > 1;
 
   const keyframes = neighbouringFrames ? neighbouringFrames.filter(f => f.keyframe) : [];
   // Don't show keyframes if too packed together (at current zoom)
@@ -139,14 +142,14 @@ const Timeline = memo(({
   useEffect(() => {
     suppressScrollerEvents();
 
-    if (zoom > 1) {
+    if (isZoomed) {
       const zoomedTargetWidth = timelineScrollerRef.current.offsetWidth * zoom;
 
       const scrollLeft = Math.max((commandedTimeRef.current / durationSafe) * zoomedTargetWidth - timelineScrollerRef.current.offsetWidth / 2, 0);
       scrollLeftMotion.set(scrollLeft);
       timelineScrollerRef.current.scrollLeft = scrollLeft;
     }
-  }, [zoom, durationSafe, commandedTimeRef, scrollLeftMotion]);
+  }, [zoom, durationSafe, commandedTimeRef, scrollLeftMotion, isZoomed]);
 
 
   useEffect(() => {
@@ -299,7 +302,7 @@ const Timeline = memo(({
 
         <div style={{ position: 'absolute', height: timelineHeight, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none', zIndex: 2 }}>
           <div style={{ background: 'rgba(0,0,0,0.4)', borderRadius: 3, padding: '2px 4px', color: 'rgba(255, 255, 255, 0.8)' }}>
-            {formatTimecode({ seconds: displayTime })}
+            {formatTimecode({ seconds: displayTime })}{isZoomed ? ` ${displayTimePercent}` : ''}
           </div>
         </div>
       </div>