fix: Improve inViewport detection of replies (#14829)

wireapp · Mar 14, 2023 · e9f5a6c · e9f5a6c
1 parent cdc6d82
commit e9f5a6c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 21 deletions.
diff --git a/src/script/components/utils/InViewport.tsx b/src/script/components/utils/InViewport.tsx
@@ -68,7 +68,6 @@ const InViewport: React.FC<InViewportParams & React.HTMLProps<HTMLDivElement>> =
         inViewport = isInViewport;
         triggerCallbackIfVisible();
       },
-      element.parentElement || undefined,
       requireFullyInView,
       allowBiggerThanViewport,
     );

diff --git a/src/script/util/DOM/overlayedObserver.ts b/src/script/util/DOM/overlayedObserver.ts
@@ -26,7 +26,7 @@ interface OverlayElement {
  * Keeps track of elements that are overlayed by other elements (thus not visible on screen).
  */
 const overlayedElements = new Map<HTMLElement, OverlayElement>();
-let overlayCheckerInterval: number = undefined;
+let overlayCheckerInterval: number | undefined = undefined;
 
 function checkOverlayedElements() {
   overlayedElements.forEach(({onVisible, onChange}, element) => {
@@ -35,7 +35,7 @@ function checkOverlayedElements() {
       return onChange(isVisible);
     }
     if (isVisible) {
-      onVisible();
+      onVisible?.();
       removeElement(element);
     }
   });
@@ -54,7 +54,7 @@ const isOverlayed = (domElement: HTMLElement): boolean => {
   const middlePointX = (box.right + box.left) / 2;
   const middlePointY = (box.bottom + box.top) / 2;
   const elementAtPoint = document.elementFromPoint(middlePointX, middlePointY);
-  return elementAtPoint && domElement !== elementAtPoint && !domElement.contains(elementAtPoint);
+  return !!elementAtPoint && domElement !== elementAtPoint && !domElement.contains(elementAtPoint);
 };
 
 const onElementVisible = (element: HTMLElement, onVisible: () => void) => {

diff --git a/src/script/util/DOM/viewportObserver.ts b/src/script/util/DOM/viewportObserver.ts
@@ -21,16 +21,9 @@ const observedElements = new Map();
 const tolerance = 0.8;
 
 const onIntersect: IntersectionObserverCallback = entries => {
-  entries.forEach(({intersectionRatio, intersectionRect, isIntersecting, target: element, rootBounds}) => {
-    const {onVisible, onChange, requireFullyInView, container, allowBiggerThanViewport} =
-      observedElements.get(element) || {};
-    const isFullyInView = () => {
-      if (container) {
-        const minHeight = Math.min(container.clientHeight, element.clientHeight) * tolerance;
-        return intersectionRect.height >= minHeight;
-      }
-      return intersectionRatio >= tolerance;
-    };
+  entries.forEach(({intersectionRatio, isIntersecting, target: element, rootBounds}) => {
+    const {onVisible, onChange, requireFullyInView, allowBiggerThanViewport} = observedElements.get(element) || {};
+    const isFullyInView = intersectionRatio >= tolerance;
 
     const isBiggerThanRoot = () => {
       return (
@@ -40,7 +33,7 @@ const onIntersect: IntersectionObserverCallback = entries => {
       );
     };
 
-    const isVisible = isIntersecting && (!requireFullyInView || isFullyInView() || isBiggerThanRoot());
+    const isVisible = isIntersecting && (!requireFullyInView || isFullyInView || isBiggerThanRoot());
 
     if (onChange) {
       onChange(isVisible);
@@ -64,16 +57,14 @@ const observer = new IntersectionObserver(onIntersect, options);
  * @param onVisible the callback to call when the element appears
  * @param requireFullyInView should the element be fully in view
  * @param allowBiggerThanViewport should fire when element is bigger than viewport
- * @param container the element containing the element
  */
 const onElementInViewport = (
   element: HTMLElement,
   onVisible: Function,
   requireFullyInView?: boolean,
   allowBiggerThanViewport?: boolean,
-  container?: HTMLElement,
 ): void => {
-  observedElements.set(element, {allowBiggerThanViewport, container, onVisible, requireFullyInView});
+  observedElements.set(element, {allowBiggerThanViewport, onVisible, requireFullyInView});
   return observer.observe(element);
 };
 
@@ -84,17 +75,15 @@ const onElementInViewport = (
  * @param onChange the callback to call when the element intersects or not
  * @param requireFullyInView should the element be fully in view
  * @param allowBiggerThanViewport should fire when element is bigger than viewport
- * @param container the element containing the element
  */
 const trackElement = (
   element: HTMLElement,
   onChange: Function,
-  container?: HTMLElement,
   requireFullyInView = false,
   allowBiggerThanViewport = false,
 ): void => {
   if (element) {
-    observedElements.set(element, {allowBiggerThanViewport, container, onChange, requireFullyInView});
+    observedElements.set(element, {allowBiggerThanViewport, onChange, requireFullyInView});
     return observer.observe(element);
   }
 };