LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Merge pull request #6268 from saltrafael/scrollback

Browse source 
Button to scroll to recent live chats (scroll to bottom)
This commit is contained in:
Dispatch 2021-06-22 07:29:21 -07:00 committed by GitHub
commit f6176f048d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,7 +45,7 @@ export default function LivestreamComments(props: Props) {
myChannels,
} = props;
const commentsRef = React.createRef();
const hasScrolledComments = React.useRef();
const [scrollBottom, setScrollBottom] = React.useState(true);
const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false);
const claimId = claim && claim.claim_id;
@ -79,48 +79,43 @@ export default function LivestreamComments(props: Props) {
}, [claimId, uri, doCommentList, doSuperChatList, doCommentSocketConnect, doCommentSocketDisconnect]);
React.useEffect(() => {
const element = commentsRef.current;
const discussionElement = document.querySelector('.livestream__comments');
const commentElement = document.querySelector('.livestream-comment');
function handleScroll() {
if (element) {
const scrollHeight = element.scrollHeight - element.offsetHeight;
const isAtBottom = scrollHeight <= element.scrollTop + 100;
if (discussionElement) {
const negativeCommentHeight = commentElement && (-1 * commentElement.offsetHeight);
const isAtRecent = negativeCommentHeight && (discussionElement.scrollTop >= negativeCommentHeight);
if (!isAtBottom) {
hasScrolledComments.current = true;
} else {
hasScrolledComments.current = false;
}
setScrollBottom(isAtRecent);
}
}
if (element) {
element.addEventListener('scroll', handleScroll);
if (discussionElement) {
discussionElement.addEventListener('scroll', handleScroll);
if (commentsLength > 0) {
// Only update comment scroll if the user hasn't scrolled up to view old comments
// If they have, do nothing
if (!hasScrolledComments.current || !performedInitialScroll) {
setTimeout(() => (element.scrollTop = element.scrollHeight - element.offsetHeight + 100), 20);
if (!performedInitialScroll) {
setPerformedInitialScroll(true);
}
if (!performedInitialScroll) {
setTimeout(() => (discussionElement.scrollTop = discussionElement.scrollHeight - discussionElement.offsetHeight + 100), 20);
setPerformedInitialScroll(true);
}
}
}
return () => {
if (element) {
element.removeEventListener('scroll', handleScroll);
}
};
}, [commentsRef, commentsLength, performedInitialScroll]);
return () => discussionElement.removeEventListener('scroll', handleScroll);
}
}, [commentsLength, performedInitialScroll, setPerformedInitialScroll, setScrollBottom]);
if (!claim) {
return null;
}
function scrollBack() {
const element = document.querySelector('.livestream__comments');
if (element) element.scrollTop = 0;
}
return (
<div className="card livestream__discussion">
<div className="card__header--between livestream-discussion__header">
@ -199,6 +194,15 @@ export default function LivestreamComments(props: Props) {
<div className="main--empty" style={{ flex: 1 }} />
)}
{!scrollBottom && (
<Button
button="alt"
className="livestream__comments-scroll__down"
label={__('Recent Comments')}
onClick={() => scrollBack()}
/>
)}
<div className="livestream__comment-create">
<CommentCreate livestream bottom embed={embed} uri={uri} />
</div>