fix: DEV-2706: Fix the misalignment between frame numbers (#1022)

* Fix the misalignment between frame numbers

* Remove console.log

* Fix seeker position clamping

Author: nick-skriabin

src/components/Timeline/Seeker.tsx

@@ -69,7 +69,7 @@ export const Seeker: FC<SeekerProps> = ({
     document.addEventListener("mouseup", onMouseUp);
   }, [length]);
 
-  const onSeekerDrag = useCallback((e) => {
+  const onSeekerDrag = useCallback((e: globalThis.MouseEvent) => {
     const indicator = seekerRef.current!;
     const dimensions = rootRef.current!.getBoundingClientRect();
     const indicatorWidth = indicator.clientWidth;
@@ -78,15 +78,21 @@ export const Seeker: FC<SeekerProps> = ({
     const startOffset = startDrag - dimensions.left - (indicatorWidth / 2);
     const parentWidth = dimensions.width;
 
-    onSeek?.(clamp(Math.ceil(length * (startOffset / parentWidth)), 0, parentWidth));
-
-    const onMouseMove = (e: globalThis.MouseEvent) => {
+    const jump = (e: globalThis.MouseEvent) => {
       const limit = parentWidth - indicator.clientWidth;
       const newOffset = clamp(startOffset + (e.pageX - startDrag), 0, limit);
       const percent = newOffset / parentWidth;
+      const newPosition = Math.ceil(length * percent);
 
-      onSeek?.(Math.ceil(length * percent));
+      onSeek?.(newPosition);
     };
+
+    jump(e);
+
+    const onMouseMove = (e: globalThis.MouseEvent) => {
+      jump(e);
+    };
+
     const onMouseUp = () => {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);

src/components/Timeline/SideControls/FramesControl.tsx

@@ -21,14 +21,14 @@ export const FramesControl: FC<TimelineSideControlProps> = ({
           length={duration}
           position={position}
           onChange={(value) => {
-            onPositionChange?.(value > 0 ? value + 1 : value);
+            onPositionChange?.(clamp(value, 0, length));
           }}
           onFinishEditing={() => {
             setInputMode(false);
           }}
         />
       ) : (
-        <>{Math.round(position)} <span>of {Math.round(duration)}</span></>
+        <>{Math.round(position + 1)} <span>of {Math.round(duration)}</span></>
       )}
     </Block>
   );
@@ -61,7 +61,7 @@ const FrameInput: FC<FrameInputProps> = ({ length, position, onChange, onFinishE
     <input
       type="text"
       ref={input}
-      defaultValue={position}
+      defaultValue={position + 1}
       autoFocus
       onFocus={() => input.current?.select()}
       onKeyDown={(e) => {

src/components/Timeline/Timeline.tsx

@@ -64,12 +64,16 @@ const TimelineComponent: FC<TimelineProps> = ({
   });
 
   const setInternalPosition = (newPosition: number) => {
-    const clampedValue = clamp(newPosition, 1, length);
+    setCurrentPosition((currentPosition) => {
+      const clampedValue = clamp(newPosition, 1, length);
 
-    if (clampedValue !== currentPosition) {
-      setCurrentPosition(clampedValue);
-      handlers.onPositionChange?.(clampedValue);
-    }
+      if (clampedValue !== currentPosition) {
+        handlers.onPositionChange?.(clampedValue);
+        return clampedValue;
+      }
+
+      return currentPosition;
+    });
   };
 
   const increasePosition: TimelineControlsStepHandler = (_, stepSize) => {

src/components/Timeline/Views/Frames/Frames.tsx

@@ -272,7 +272,7 @@ export const Frames: FC<TimelineViewProps> = ({
           <Elem
             name="hover"
             style={{ left: roundToStep(hoverOffset, step), marginLeft: timelineStartOffset }}
-            data-frame={toSteps(currentOffsetX + hoverOffset, step)}
+            data-frame={toSteps(currentOffsetX + hoverOffset, step) + 1}
           />
         )}
       </Elem>