LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-31 01:11:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Only show when not at most recent comment

Browse source
This commit is contained in:
saltrafael 2021-06-21 10:51:07 -03:00
parent aea22d10ee
commit 52f15df5a3
1 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ui/component/livestreamComments/view.jsx
View file

@ -45,7 +45,7 @@ export default function LivestreamComments(props: Props) {
myChannels, myChannels,
} = props; } = props;
const commentsRef = React.createRef(); const commentsRef = React.createRef();
const [isBottomScroll, setIsBottomScroll] = React.useState(); const [scrollBottom, setScrollBottom] = React.useState(true);
const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT); const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false); const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false);
const claimId = claim && claim.claim_id; const claimId = claim && claim.claim_id;
@ -79,30 +79,33 @@ export default function LivestreamComments(props: Props) {
}, [claimId, uri, doCommentList, doSuperChatList, doCommentSocketConnect, doCommentSocketDisconnect]); }, [claimId, uri, doCommentList, doSuperChatList, doCommentSocketConnect, doCommentSocketDisconnect]);
React.useEffect(() => { React.useEffect(() => {
const element = document.querySelector('.livestream__comments'); const discussionElement = document.querySelector('.livestream__comments');
const commentElement = document.querySelector('.livestream-comment');
function handleScroll() { function handleScroll() {
if (element) { if (discussionElement) {
const isAtBottom = element.scrollTop >= -100; const negativeCommentHeight = (-1 * commentElement.offsetHeight);
setIsBottomScroll(isAtBottom); const isAtRecent = discussionElement.scrollTop >= negativeCommentHeight;
setScrollBottom(isAtRecent);
} }
} }
if (element) { if (discussionElement) {
element.addEventListener('scroll', handleScroll); discussionElement.addEventListener('scroll', handleScroll);
if (commentsLength > 0) { if (commentsLength > 0) {
// Only update comment scroll if the user hasn't scrolled up to view old comments // Only update comment scroll if the user hasn't scrolled up to view old comments
// If they have, do nothing // If they have, do nothing
if (!performedInitialScroll) { if (!performedInitialScroll) {
setTimeout(() => (element.scrollTop = element.scrollHeight - element.offsetHeight + 100), 20); setTimeout(() => (discussionElement.scrollTop = discussionElement.scrollHeight - discussionElement.offsetHeight + 100), 20);
setPerformedInitialScroll(true); setPerformedInitialScroll(true);
} }
} }
return () => element.removeEventListener('scroll', handleScroll); return () => discussionElement.removeEventListener('scroll', handleScroll);
} }
}, [commentsLength, isBottomScroll, performedInitialScroll, setPerformedInitialScroll, setIsBottomScroll]); }, [commentsLength, performedInitialScroll, setPerformedInitialScroll, setScrollBottom]);
if (!claim) { if (!claim) {
return null; return null;
@ -191,7 +194,7 @@ export default function LivestreamComments(props: Props) {
<div className="main--empty" style={{ flex: 1 }} /> <div className="main--empty" style={{ flex: 1 }} />
)} )}
{!isBottomScroll && ( {!scrollBottom && (
<Button <Button
button="alt" button="alt"
className="livestream__comments-scroll__down" className="livestream__comments-scroll__down"