Message List: Do not mark messages read when in background (another attempt)

src/components/middle/MessageList.tsx

@@ -54,6 +54,7 @@ import fastSmoothScroll, { isAnimatingScroll } from '../../util/fastSmoothScroll
 import renderText from '../common/helpers/renderText';
 import useLang, { LangFn } from '../../hooks/useLang';
 import useWindowSize from '../../hooks/useWindowSize';
+import useBackgroundMode from '../../hooks/useBackgroundMode';
 
 import Loading from '../ui/Loading';
 import MessageScroll from './MessageScroll';
@@ -227,6 +228,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
     }
   });
 
+  useBackgroundMode(freezeForReading, unfreezeForReading);
+
   useOnChange(() => {
     memoFocusingIdRef.current = focusingId;
 

src/components/middle/MessageScroll.tsx

@@ -1,7 +1,5 @@
 import { MutableRefObject } from 'react';
-import React, {
+import React, { FC, useCallback, useRef } from '../../lib/teact/teact';
-  FC, useCallback, useEffect, useRef,
-} from '../../lib/teact/teact';
 
 import { MESSAGE_LIST_SENSITIVE_AREA } from '../../config';
 import resetScroll from '../../util/resetScroll';
@@ -25,9 +23,6 @@ type OwnProps = {
 const FAB_THRESHOLD = 50;
 const TOOLS_FREEZE_TIMEOUT = 100;
 
-// Local flag is used because `freeze/unfreeze` methods are controlled by heavy animation
-let areToolsFrozen = false;
-
 const MessageScroll: FC<OwnProps> = ({
   containerRef,
   className,
@@ -49,10 +44,6 @@ const MessageScroll: FC<OwnProps> = ({
   const fabTriggerRef = useRef<HTMLDivElement>(null);
 
   const toggleScrollTools = useCallback(() => {
-    if (areToolsFrozen) {
-      return;
-    }
-
     if (!messageIds || !messageIds.length) {
       onFabToggle(false);
       onNotchToggle(false);
@@ -118,35 +109,34 @@ const MessageScroll: FC<OwnProps> = ({
 
   const {
     observe: observeIntersectionForNotch,
+    freeze: freezeForNotch,
+    unfreeze: unfreezeForNotch,
   } = useIntersectionObserver({
     rootRef: containerRef,
   }, toggleScrollTools);
 
   useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
 
-  // Do not load more and show FAB when focusing
+  const isFocusing = Boolean(focusingId);
   useOnChange(() => {
-    if (focusingId) {
+    if (isFocusing) {
       freezeForLoadMore();
-      freezeForFab();
     } else {
-      unfreezeForFab();
       unfreezeForLoadMore();
     }
-  }, [focusingId]);
+  }, [isFocusing]);
 
   // Workaround for FAB and notch flickering with tall incoming message
   useOnChange(() => {
-    areToolsFrozen = true;
+    freezeForFab();
+    freezeForNotch();
 
     setTimeout(() => {
-      areToolsFrozen = false;
+      unfreezeForNotch();
+      unfreezeForFab();
     }, TOOLS_FREEZE_TIMEOUT);
   }, [messageIds]);
 
-  // Workaround for stuck FAB when many unread messages
-  useEffect(toggleScrollTools, [firstUnreadId]);
-
   return (
     <div className={className} teactFastList>
       <div ref={backwardsTriggerRef} key="backwards-trigger" className="backwards-trigger" />

src/components/middle/message/MessageContextMenu.tsx

@@ -1,11 +1,10 @@
-import React, { FC, useCallback, useEffect } from '../../../lib/teact/teact';
+import React, { FC, useCallback } from '../../../lib/teact/teact';
 
 import { ApiMessage } from '../../../api/types';
 import { IAnchorPosition } from '../../../types';
 
 import { getMessageCopyOptions } from './helpers/copyOptions';
 import useContextMenuPosition from '../../../hooks/useContextMenuPosition';
-import { dispatchHeavyAnimationEvent } from '../../../hooks/useHeavyAnimationCheck';
 import useLang from '../../../hooks/useLang';
 
 import Menu from '../../ui/Menu';
@@ -46,7 +45,6 @@ type OwnProps = {
   onCopyLink?: () => void;
 };
 
-const ANIMATION_DURATION = 200;
 const SCROLLBAR_WIDTH = 10;
 
 const MessageContextMenu: FC<OwnProps> = ({
@@ -81,10 +79,6 @@ const MessageContextMenu: FC<OwnProps> = ({
   onCloseAnimationEnd,
   onCopyLink,
 }) => {
-  useEffect(() => {
-    dispatchHeavyAnimationEvent(ANIMATION_DURATION);
-  }, [isOpen]);
-
   const copyOptions = getMessageCopyOptions(message, onClose, canCopyLink ? onCopyLink : undefined);
 
   const getTriggerElement = useCallback(() => {

src/hooks/useHeavyAnimationCheck.ts

@@ -7,8 +7,10 @@ let timeout: number | undefined;
 let isAnimating = false;
 
 export const dispatchHeavyAnimationEvent = (duration: number) => {
-  document.dispatchEvent(new Event(ANIMATION_START_EVENT));
+  if (!isAnimating) {
-  isAnimating = true;
+    isAnimating = true;
+    document.dispatchEvent(new Event(ANIMATION_START_EVENT));
+  }
 
   if (timeout) {
     clearTimeout(timeout);

src/hooks/useIntersectionObserver.ts

@@ -41,19 +41,23 @@ export function useIntersectionObserver({
 }, rootCallback?: RootCallback): Response {
   const controllerRef = useRef<IntersectionController>();
   const rootCallbackRef = useRef<RootCallback>();
-  const isFrozenRef = useRef<boolean>();
+  const freezeFlagsRef = useRef(0);
   const onUnfreezeRef = useRef<NoneToVoidFunction>();
 
   rootCallbackRef.current = rootCallback;
 
   const freeze = useCallback(() => {
-    isFrozenRef.current = true;
+    freezeFlagsRef.current++;
   }, []);
 
   const unfreeze = useCallback(() => {
-    isFrozenRef.current = false;
+    if (!freezeFlagsRef.current) {
+      return;
+    }
 
-    if (onUnfreezeRef.current) {
+    freezeFlagsRef.current--;
+
+    if (!freezeFlagsRef.current && onUnfreezeRef.current) {
       onUnfreezeRef.current();
       onUnfreezeRef.current = undefined;
     }
@@ -104,7 +108,7 @@ export function useIntersectionObserver({
           entriesAccumulator.set(entry.target, entry);
         });
 
-        if (isFrozenRef.current) {
+        if (freezeFlagsRef.current) {
           onUnfreezeRef.current = () => {
             observerCallback();
           };