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

FAB: Scroll button not showing next to the Sponsored Message (#5161)

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-11-27 20:33:28 +04:00
parent 3f3b50bc6d
commit 46c0dcb945
3 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/middle/MessageListContent.tsx
View File

@ -296,15 +296,6 @@ const MessageListContent: FC<OwnProps> = ({
{withHistoryTriggers && <div ref={backwardsTriggerRef} key="backwards-trigger" className="backwards-trigger" />} {withHistoryTriggers && <div ref={backwardsTriggerRef} key="backwards-trigger" className="backwards-trigger" />}
{shouldRenderBotInfo && <MessageListBotInfo isInMessageList key={`bot_info_${chatId}`} chatId={chatId} />} {shouldRenderBotInfo && <MessageListBotInfo isInMessageList key={`bot_info_${chatId}`} chatId={chatId} />}
{dateGroups.flat()} {dateGroups.flat()}
{areAdsEnabled && isViewportNewest && (
<SponsoredMessage
key={chatId}
chatId={chatId}
containerRef={containerRef}
observeIntersectionForLoading={observeIntersectionForLoading}
observeIntersectionForPlaying={observeIntersectionForPlaying}
/>
)}
{withHistoryTriggers && ( {withHistoryTriggers && (
<div <div
ref={forwardsTriggerRef} ref={forwardsTriggerRef}
@ -317,6 +308,15 @@ const MessageListContent: FC<OwnProps> = ({
key="fab-trigger" key="fab-trigger"
className="fab-trigger" className="fab-trigger"
/> />
{areAdsEnabled && isViewportNewest && (
<SponsoredMessage
key={chatId}
chatId={chatId}
containerRef={containerRef}
observeIntersectionForLoading={observeIntersectionForLoading}
observeIntersectionForPlaying={observeIntersectionForPlaying}
/>
)}
</div> </div>
); );
}; };

8
src/components/middle/hooks/useScrollHooks.ts
View File

@ -66,12 +66,12 @@ export default function useScrollHooks(
} }
const container = containerRef.current; const container = containerRef.current;
if (!container) { const fabTrigger = fabTriggerRef.current;
return; if (!container || !fabTrigger) return;
}
const { offsetHeight, scrollHeight, scrollTop } = container; const { offsetHeight, scrollHeight, scrollTop } = container;
const scrollBottom = Math.round(scrollHeight - scrollTop - offsetHeight); const fabOffsetTop = fabTrigger.offsetTop;
const scrollBottom = Math.round(fabOffsetTop - scrollTop - offsetHeight);
const isNearBottom = scrollBottom <= FAB_THRESHOLD; const isNearBottom = scrollBottom <= FAB_THRESHOLD;
const isAtBottom = scrollBottom <= NOTCH_THRESHOLD; const isAtBottom = scrollBottom <= NOTCH_THRESHOLD;

4
src/components/middle/message/SponsoredMessage.tsx
View File

@ -83,9 +83,9 @@ const SponsoredMessage: FC<OwnProps & StateProps> = ({
const lang = useOldLang(); const lang = useOldLang();
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const ref = useRef<HTMLDivElement>(null);
// eslint-disable-next-line no-null/no-null
const contentRef = useRef<HTMLDivElement>(null); const contentRef = useRef<HTMLDivElement>(null);
// eslint-disable-next-line no-null/no-null
const ref = useRef<HTMLDivElement>(null);
const shouldObserve = Boolean(message); const shouldObserve = Boolean(message);
const { isMobile } = useAppLayout(); const { isMobile } = useAppLayout();