Merge pull request #95 from storytold/bug/scrubber-scrolling

Fix scrubber + scrolling

app/modules/LowerPanel/LowerPanel.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback } from "react";
+import React, { UIEvent, UIEventHandler, useCallback } from "react";
 import { useMouseEventsHeight } from "~/pages/PageEnigma/comps/Timeline/utils/useMouseEventsHeight";
 import {
+  currentScroll,
   currentTime,
   overTimeline,
   scale,
@@ -22,7 +23,10 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
   const onTimelineClick = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       if (event.button === 0) {
-        const newTime = Math.round((event.clientX - 92) / 4 / scale.value);
+        console.log("??", event.clientX, event.pageX, currentScroll.value);
+        const newTime = Math.round(
+          (event.clientX + currentScroll.value - 92) / 4 / scale.value,
+        );
         if (newTime < 0) {
           return;
         }
@@ -37,6 +41,10 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
     [],
   );
 
+  const onScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
+    currentScroll.value = event.currentTarget.scrollLeft;
+  }, []);
+
   return (
     <>
       <div
@@ -56,6 +64,7 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
         }}
         onPointerLeave={() => (overTimeline.value = false)}
         onPointerDown={onTimelineClick}
+        onScroll={onScroll}
       >
         {children}
       </div>

app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsAnimation.ts

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { currentTime, filmLength, scale } from "~/pages/PageEnigma/store";
+import {
+  currentScroll,
+  currentTime,
+  filmLength,
+  scale,
+} from "~/pages/PageEnigma/store";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
@@ -21,11 +26,13 @@ export const useMouseEventsAnimation = () => {
         Queue.publish({
           queueName: QueueNames.TO_ENGINE,
           action: toEngineActions.UPDATE_TIME,
-          data: { currentTime: Math.round(time) },
+          data: { currentTime: Math.round(time) + currentScroll.value },
         });
       }
     };
 
+    console.log("scroll", currentScroll.value);
+
     const onMouseMove = (event: MouseEvent) => {
       const delta = Math.round(
         (event.clientX - clientX) / 4 / scale.value + currentTime.value,
@@ -41,7 +48,7 @@ export const useMouseEventsAnimation = () => {
             Queue.publish({
               queueName: QueueNames.TO_ENGINE,
               action: toEngineActions.UPDATE_TIME,
-              data: { currentTime: delta },
+              data: { currentTime: delta + currentScroll.value },
             });
           }
           return delta;

app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts

@@ -38,7 +38,7 @@ export const useMouseEventsClip = (
         if (deltaOffset < min) {
           currOffset.current = min;
         } else if (deltaOffset + currLength.current > max) {
-          currOffset.current = max;
+          currOffset.current = max - currLength.current;
         } else {
           currOffset.current = deltaOffset;
         }

app/pages/PageEnigma/store/timing.ts

@@ -1,3 +1,5 @@
 import { signal } from "@preact/signals-core";
 
 export const currentTime = signal(0);
+
+export const currentScroll = signal(0);