feat: use intersection observable api to detect if should auto scroll

Author: KatoakDR

electron/renderer/components/game-content/game-content.tsx

@@ -4,6 +4,7 @@ import { useObservable, useSubscription } from 'observable-hooks';
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as rxjs from 'rxjs';
+import { useIsElementVisible } from '../../hooks/is-element-visible';
 import type { GameLogLine } from '../../types/game.types';
 
 export interface GameContentProps {
@@ -143,43 +144,19 @@ export const GameContent: React.FC<GameContentProps> = (
   });
 
   const scrollableRef = useRef<HTMLDivElement>(null);
-  const scrollBottomRef = useRef<HTMLDivElement>(null);
+  const scrollTargetRef = useRef<HTMLDivElement>(null);
 
-  const [autoScrollEnabled, setAutoScrollEnabled] = useState<boolean>(
-    enableScrollToNewLogLines
-  );
-
-  useEffect(() => {
-    if (!enableScrollToNewLogLines) {
-      return;
-    }
-
-    let scrollableElmt = scrollableRef.current;
-
-    const onScroll = () => {
-      scrollableElmt = scrollableRef.current;
-
-      if (!scrollableElmt) {
-        return;
-      }
-
-      const { scrollTop, scrollHeight, clientHeight } = scrollableElmt;
-      const difference = scrollHeight - clientHeight - scrollTop;
-      const enableAutoScroll = difference <= clientHeight;
-
-      setAutoScrollEnabled(enableAutoScroll);
-    };
-
-    scrollableElmt?.addEventListener('scroll', onScroll);
-
-    return () => {
-      scrollableElmt?.removeEventListener('scroll', onScroll);
-    };
-  }, [enableScrollToNewLogLines]);
+  const [isScrollTargetVisible] = useIsElementVisible({
+    root: scrollableRef.current,
+    target: scrollTargetRef.current,
+    threshold: 0.8,
+  });
 
   useEffect(() => {
-    if (autoScrollEnabled) {
-      scrollBottomRef.current?.scrollIntoView({
+    // If the user is scrolled to the bottom, then continue
+    // to scroll to the bottom as new log lines are added.
+    if (enableScrollToNewLogLines && isScrollTargetVisible) {
+      scrollTargetRef.current?.scrollIntoView({
         behavior: 'instant',
         block: 'end',
         inline: 'nearest',
@@ -203,7 +180,7 @@ export const GameContent: React.FC<GameContentProps> = (
         );
       })}
       <EuiSpacer size="s" />
-      <div ref={scrollBottomRef} />
+      <div ref={scrollTargetRef} />
     </EuiPanel>
   );
 };

electron/renderer/hooks/is-element-visible.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export interface UseIsElementVisibleOptions {
+  /**
+   * Where to attach the observer.
+   * The target must be a child of this element.
+   */
+  root: Element | null;
+  /**
+   * The element to track its visibility.
+   * The target must be a child of the root element.
+   */
+  target: Element | null;
+  /**
+   * Either a single number or an array of numbers which indicate
+   * at what percentage of the target's visibility the observer's
+   * callback should be executed.
+   *
+   * The values must be in the range of 0.0 and 1.0.
+   *
+   * Default is 1.0
+   */
+  threshold?: number | Array<number>;
+}
+
+export type UseIsElementVisibleResult = [isVisible: boolean];
+
+/**
+ * Hook that implements the Intersection Observer API.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+ */
+export function useIsElementVisible(
+  options: UseIsElementVisibleOptions
+): UseIsElementVisibleResult {
+  const { root, target, threshold = 1 } = options;
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  const onObserveCallback = useCallback<IntersectionObserverCallback>(
+    (entries: Array<IntersectionObserverEntry>) => {
+      // This hook only observes one target, so we can safely assume
+      // that the first entry is the one we care about.
+      const [entry] = entries;
+      setIsVisible(entry.isIntersecting);
+    },
+    []
+  );
+
+  const observer = useMemo<IntersectionObserver>(() => {
+    const observer = new IntersectionObserver(onObserveCallback, {
+      root,
+      threshold,
+    });
+
+    return observer;
+  }, [root, threshold, onObserveCallback]);
+
+  // For some reason, if we have a dependency array then
+  // the observations stop working. Seems excessive, but
+  // the only way I got this to work is to run on each render.
+  useEffect(() => {
+    if (target) {
+      observer.observe(target);
+    }
+
+    return () => {
+      if (target) {
+        observer.unobserve(target);
+      }
+    };
+  });
+
+  return [isVisible];
+}