From 58239af8bb4dd7a114c7b466be56d9a34947e17b Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Fri, 17 Nov 2023 13:01:28 +0100
Subject: [PATCH] fix: distinguish user initiated scroll (#596)

---
 .../src/common/hooks/useFollowComponent.ts    |  5 +++--
 .../client/src/features/operator/Operator.tsx | 20 +++++++++----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/common/hooks/useFollowComponent.ts b/apps/client/src/common/hooks/useFollowComponent.ts
index f26ef07c0..cd6660251 100644
--- a/apps/client/src/common/hooks/useFollowComponent.ts
+++ b/apps/client/src/common/hooks/useFollowComponent.ts
@@ -21,7 +21,7 @@ interface UseFollowComponentProps {
   scrollRef: MutableRefObject<HTMLElement | null>;
   doFollow: boolean;
   topOffset?: number;
-  setScrollFlag?: () => void;
+  setScrollFlag?: (newValue: boolean) => void;
 }
 
 export default function useFollowComponent(props: UseFollowComponentProps) {
@@ -34,14 +34,15 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
     }
 
     if (followRef.current && scrollRef.current) {
+      setScrollFlag?.(true);
       // Use requestAnimationFrame to ensure the component is fully loaded
       window.requestAnimationFrame(() => {
-        setScrollFlag?.();
         scrollToComponent(
           followRef as MutableRefObject<HTMLElement>,
           scrollRef as MutableRefObject<HTMLElement>,
           topOffset,
         );
+        setScrollFlag?.(false);
       });
     }
 
diff --git a/apps/client/src/features/operator/Operator.tsx b/apps/client/src/features/operator/Operator.tsx
index 0393bec3b..b6dc72c5c 100644
--- a/apps/client/src/features/operator/Operator.tsx
+++ b/apps/client/src/features/operator/Operator.tsx
@@ -12,6 +12,7 @@ import { useOperator } from '../../common/hooks/useSocket';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
 import useUserFields from '../../common/hooks-query/useUserFields';
+import { debounce } from '../../common/utils/debounce';
 import { isStringBoolean } from '../../common/utils/viewUtils';
 
 import FollowButton from './follow-button/FollowButton';
@@ -32,7 +33,6 @@ export default function Operator() {
   const featureData = useOperator();
   const [searchParams] = useSearchParams();
 
-  const isAutomatedScroll = useRef(false);
   const [lockAutoScroll, setLockAutoScroll] = useState(false);
   const selectedRef = useRef<HTMLDivElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -41,7 +41,6 @@ export default function Operator() {
     scrollRef: scrollRef,
     doFollow: !lockAutoScroll,
     topOffset: selectedOffset,
-    setScrollFlag: () => (isAutomatedScroll.current = true),
   });
 
   // Set window title
@@ -65,13 +64,8 @@ export default function Operator() {
     setLockAutoScroll(false);
   };
 
-  const handleScroll = () => {
-    // prevent considering automated scrolls as user scrolls
-    if (isAutomatedScroll.current) {
-      isAutomatedScroll.current = false;
-      return;
-    }
-
+  // prevent considering automated scrolls as user scrolls
+  const handleUserScroll = () => {
     if (selectedRef?.current && scrollRef?.current) {
       const selectedRect = selectedRef.current.getBoundingClientRect();
       const scrollerRect = scrollRef.current.getBoundingClientRect();
@@ -82,6 +76,7 @@ export default function Operator() {
       }
     }
   };
+  const debouncedHandleScroll = debounce(handleUserScroll, 1000);
 
   const missingData = !data || !userFields || !projectData;
   const isLoading = status === 'loading' || userFieldsStatus === 'loading' || projectDataStatus === 'loading';
@@ -119,7 +114,12 @@ export default function Operator() {
         lastId={lastEvent?.id}
       />
 
-      <div className={style.operatorEvents} onScroll={handleScroll} ref={scrollRef}>
+      <div
+        className={style.operatorEvents}
+        onWheel={debouncedHandleScroll}
+        onTouchMove={debouncedHandleScroll}
+        ref={scrollRef}
+      >
         {data.map((entry) => {
           if (isOntimeEvent(entry)) {
             const isSelected = featureData.selectedEventId === entry.id;