From 5f6010bbd0d406d991ba6a0850087a3fb162c435 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sat, 19 Jun 2021 00:25:33 +0300 Subject: [PATCH] Message List: Do not mark messages read when in background (another attempt) --- src/components/middle/MessageList.tsx | 3 ++ src/components/middle/MessageScroll.tsx | 30 +++++++------------ .../middle/message/MessageContextMenu.tsx | 8 +---- src/hooks/useHeavyAnimationCheck.ts | 6 ++-- src/hooks/useIntersectionObserver.ts | 14 +++++---- 5 files changed, 27 insertions(+), 34 deletions(-) diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index 443b0f4a1..0c7d66c95 100644 --- a/src/components/middle/MessageList.tsx +++ b/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 = ({ } }); + useBackgroundMode(freezeForReading, unfreezeForReading); + useOnChange(() => { memoFocusingIdRef.current = focusingId; diff --git a/src/components/middle/MessageScroll.tsx b/src/components/middle/MessageScroll.tsx index 250c7f491..16a78a48e 100644 --- a/src/components/middle/MessageScroll.tsx +++ b/src/components/middle/MessageScroll.tsx @@ -1,7 +1,5 @@ import { MutableRefObject } from 'react'; -import React, { - FC, useCallback, useEffect, useRef, -} from '../../lib/teact/teact'; +import React, { FC, useCallback, 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 = ({ containerRef, className, @@ -49,10 +44,6 @@ const MessageScroll: FC = ({ const fabTriggerRef = useRef(null); const toggleScrollTools = useCallback(() => { - if (areToolsFrozen) { - return; - } - if (!messageIds || !messageIds.length) { onFabToggle(false); onNotchToggle(false); @@ -118,35 +109,34 @@ const MessageScroll: FC = ({ 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 (
diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx index 377744ba6..e10907af2 100644 --- a/src/components/middle/message/MessageContextMenu.tsx +++ b/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 = ({ @@ -81,10 +79,6 @@ const MessageContextMenu: FC = ({ onCloseAnimationEnd, onCopyLink, }) => { - useEffect(() => { - dispatchHeavyAnimationEvent(ANIMATION_DURATION); - }, [isOpen]); - const copyOptions = getMessageCopyOptions(message, onClose, canCopyLink ? onCopyLink : undefined); const getTriggerElement = useCallback(() => { diff --git a/src/hooks/useHeavyAnimationCheck.ts b/src/hooks/useHeavyAnimationCheck.ts index a362c5a6b..8060fa863 100644 --- a/src/hooks/useHeavyAnimationCheck.ts +++ b/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)); - isAnimating = true; + if (!isAnimating) { + isAnimating = true; + document.dispatchEvent(new Event(ANIMATION_START_EVENT)); + } if (timeout) { clearTimeout(timeout); diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts index 42cc5045a..8bb940955 100644 --- a/src/hooks/useIntersectionObserver.ts +++ b/src/hooks/useIntersectionObserver.ts @@ -41,19 +41,23 @@ export function useIntersectionObserver({ }, rootCallback?: RootCallback): Response { const controllerRef = useRef(); const rootCallbackRef = useRef(); - const isFrozenRef = useRef(); + const freezeFlagsRef = useRef(0); const onUnfreezeRef = useRef(); 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(); };