ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message List: Scroll to the first unread message in background mode (#3462)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-07-05 13:15:28 +02:00
parent b39b3de86b
commit d7a788c112
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/middle/MessageList.tsx
View File

@ -50,6 +50,7 @@ import {
isChatWithRepliesBot, isChatWithRepliesBot,
isChatGroup, isChatGroup,
isLocalMessageId, isLocalMessageId,
getMessageHtmlId,
} from '../../global/helpers'; } from '../../global/helpers';
import { orderBy } from '../../util/iteratees'; import { orderBy } from '../../util/iteratees';
import { debounce, onTickEnd } from '../../util/schedulers'; import { debounce, onTickEnd } from '../../util/schedulers';
@ -393,6 +394,9 @@ const MessageList: FC<OwnProps & StateProps> = ({
const container = containerRef.current!; const container = containerRef.current!;
listItemElementsRef.current = Array.from(container.querySelectorAll<HTMLDivElement>('.message-list-item')); listItemElementsRef.current = Array.from(container.querySelectorAll<HTMLDivElement>('.message-list-item'));
const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1]; const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1];
const firstUnreadElement = memoFirstUnreadIdRef.current
? container.querySelector<HTMLDivElement>(`#${getMessageHtmlId(memoFirstUnreadIdRef.current)}`)
: undefined;
const hasLastMessageChanged = ( const hasLastMessageChanged = (
messageIds && prevMessageIds && messageIds[messageIds.length - 1] !== prevMessageIds[prevMessageIds.length - 1] messageIds && prevMessageIds && messageIds[messageIds.length - 1] !== prevMessageIds[prevMessageIds.length - 1]
@ -437,14 +441,16 @@ const MessageList: FC<OwnProps & StateProps> = ({
const isAtBottom = isViewportNewest && prevIsViewportNewest && bottomOffset <= BOTTOM_THRESHOLD; const isAtBottom = isViewportNewest && prevIsViewportNewest && bottomOffset <= BOTTOM_THRESHOLD;
const isAlreadyFocusing = messageIds && memoFocusingIdRef.current === messageIds[messageIds.length - 1]; const isAlreadyFocusing = messageIds && memoFocusingIdRef.current === messageIds[messageIds.length - 1];
// Animate incoming message // Animate incoming message, but if app is in background mode, scroll to the first unread
if (wasMessageAdded && isAtBottom && !isAlreadyFocusing && !isBackgroundModeActive()) { if (wasMessageAdded && isAtBottom && !isAlreadyFocusing) {
// Break out of `forceLayout` // Break out of `forceLayout`
requestMeasure(() => { requestMeasure(() => {
const shouldScrollToBottom = !isBackgroundModeActive() || !firstUnreadElement;
animateScroll( animateScroll(
container, container,
lastItemElement!, shouldScrollToBottom ? lastItemElement! : firstUnreadElement!,
'end', shouldScrollToBottom ? 'end' : 'start',
BOTTOM_FOCUS_MARGIN, BOTTOM_FOCUS_MARGIN,
undefined, undefined,
undefined, undefined,

4
src/components/middle/hooks/useMessageObservers.ts
View File

@ -6,7 +6,7 @@ import type { PinnedIntersectionChangedCallback } from './usePinnedMessage';
import { IS_ANDROID } from '../../../util/windowEnvironment'; import { IS_ANDROID } from '../../../util/windowEnvironment';
import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver'; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
import useBackgroundMode from '../../../hooks/useBackgroundMode'; import useBackgroundMode, { isBackgroundModeActive } from '../../../hooks/useBackgroundMode';
import useAppLayout from '../../../hooks/useAppLayout'; import useAppLayout from '../../../hooks/useAppLayout';
const INTERSECTION_THROTTLE_FOR_READING = 150; const INTERSECTION_THROTTLE_FOR_READING = 150;
@ -33,7 +33,7 @@ export default function useMessageObservers(
rootRef: containerRef, rootRef: containerRef,
throttleMs: INTERSECTION_THROTTLE_FOR_READING, throttleMs: INTERSECTION_THROTTLE_FOR_READING,
}, (entries) => { }, (entries) => {
if (type !== 'thread') { if (type !== 'thread' || isBackgroundModeActive()) {
return; return;
} }