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

Message List: Fix loading media after focusing

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-06-21 03:36:00 +03:00
parent 94cffb0c0c
commit 9364d96d33
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,6 +162,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
const [hasFocusing, setHasFocusing] = useState<boolean>(Boolean(focusingId)); const [hasFocusing, setHasFocusing] = useState<boolean>(Boolean(focusingId));
const areMessagesLoaded = Boolean(messageIds); const areMessagesLoaded = Boolean(messageIds);
const isFocusing = Boolean(focusingId);
useOnChange(() => { useOnChange(() => {
// We only need it first time when message list appears // We only need it first time when message list appears
if (areMessagesLoaded) { if (areMessagesLoaded) {
@ -232,15 +234,17 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
useOnChange(() => { useOnChange(() => {
memoFocusingIdRef.current = focusingId; memoFocusingIdRef.current = focusingId;
}, [focusingId]);
if (focusingId) { useOnChange(() => {
if (isFocusing) {
freezeForMedia(); freezeForMedia();
freezeForReading(); freezeForReading();
} else { } else {
unfreezeForReading(); unfreezeForReading();
unfreezeForMedia(); unfreezeForMedia();
} }
}, [focusingId]); }, [isFocusing]);
const { observe: observeIntersectionForAnimatedStickers } = useIntersectionObserver({ const { observe: observeIntersectionForAnimatedStickers } = useIntersectionObserver({
rootRef: containerRef, rootRef: containerRef,
@ -541,7 +545,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
containerRef={containerRef} containerRef={containerRef}
className="messages-container" className="messages-container"
messageIds={messageIds || [lastMessage!.id]} messageIds={messageIds || [lastMessage!.id]}
focusingId={focusingId} isFocusing={isFocusing}
loadMoreForwards={loadMoreForwards} loadMoreForwards={loadMoreForwards}
loadMoreBackwards={loadMoreBackwards} loadMoreBackwards={loadMoreBackwards}
isViewportNewest={isViewportNewest} isViewportNewest={isViewportNewest}

5
src/components/middle/MessageScroll.tsx
View File

@ -10,7 +10,7 @@ type OwnProps = {
containerRef: MutableRefObject<HTMLDivElement | null>; containerRef: MutableRefObject<HTMLDivElement | null>;
className: string; className: string;
messageIds: number[]; messageIds: number[];
focusingId?: number; isFocusing: boolean;
loadMoreForwards?: NoneToVoidFunction; loadMoreForwards?: NoneToVoidFunction;
loadMoreBackwards?: NoneToVoidFunction; loadMoreBackwards?: NoneToVoidFunction;
isViewportNewest?: boolean; isViewportNewest?: boolean;
@ -27,7 +27,7 @@ const MessageScroll: FC<OwnProps> = ({
containerRef, containerRef,
className, className,
messageIds, messageIds,
focusingId, isFocusing,
loadMoreForwards, loadMoreForwards,
loadMoreBackwards, loadMoreBackwards,
isViewportNewest, isViewportNewest,
@ -117,7 +117,6 @@ const MessageScroll: FC<OwnProps> = ({
useOnIntersect(fabTriggerRef, observeIntersectionForNotch); useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
const isFocusing = Boolean(focusingId);
useOnChange(() => { useOnChange(() => {
if (isFocusing) { if (isFocusing) {
freezeForLoadMore(); freezeForLoadMore();