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

Merge pull request #6508 from saltrafael/live_comments

Browse source 
Fix 'Recent Comments' button for livestreams
This commit is contained in:
Dispatch 2021-07-20 12:33:52 -07:00 committed by GitHub
commit e138673d27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -55,6 +55,9 @@ export default function LivestreamComments(props: Props) {
const commentsLength = comments && comments.length; const commentsLength = comments && comments.length;
const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? comments : superChats; const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? comments : superChats;
const discussionElement = document.querySelector('.livestream__comments');
const commentElement = document.querySelector('.livestream-comment');
// todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
function isMyComment(channelId: string) { function isMyComment(channelId: string) {
if (myChannels != null && channelId != null) { if (myChannels != null && channelId != null) {
@ -81,19 +84,16 @@ export default function LivestreamComments(props: Props) {
}; };
}, [claimId, uri, doCommentList, doSuperChatList, doCommentSocketConnect, doCommentSocketDisconnect]); }, [claimId, uri, doCommentList, doSuperChatList, doCommentSocketConnect, doCommentSocketDisconnect]);
React.useEffect(() => { const handleScroll = React.useCallback(() => {
const discussionElement = document.querySelector('.livestream__comments');
const commentElement = document.querySelector('.livestream-comment');
function handleScroll() {
if (discussionElement) { if (discussionElement) {
const negativeCommentHeight = commentElement && -1 * commentElement.offsetHeight; const negativeCommentHeight = commentElement && -1 * commentElement.offsetHeight;
const isAtRecent = negativeCommentHeight && discussionElement.scrollTop >= negativeCommentHeight; const isAtRecent = negativeCommentHeight && discussionElement.scrollTop >= negativeCommentHeight;
setScrollBottom(isAtRecent); setScrollBottom(isAtRecent);
} }
} }, [commentElement, discussionElement]);
React.useEffect(() => {
if (discussionElement) { if (discussionElement) {
discussionElement.addEventListener('scroll', handleScroll); discussionElement.addEventListener('scroll', handleScroll);
@ -113,15 +113,17 @@ export default function LivestreamComments(props: Props) {
return () => discussionElement.removeEventListener('scroll', handleScroll); return () => discussionElement.removeEventListener('scroll', handleScroll);
} }
}, [commentsLength, performedInitialScroll, setPerformedInitialScroll, setScrollBottom]); }, [commentsLength, discussionElement, handleScroll, performedInitialScroll, setPerformedInitialScroll]);
if (!claim) { if (!claim) {
return null; return null;
} }
function scrollBack() { function scrollBack() {
const element = document.querySelector('.livestream__comments'); if (discussionElement) {
if (element) element.scrollTop = 0; discussionElement.scrollTop = 0;
setScrollBottom(true);
}
} }
return ( return (
@ -209,7 +211,7 @@ export default function LivestreamComments(props: Props) {
button="alt" button="alt"
className="livestream__comments-scroll__down" className="livestream__comments-scroll__down"
label={__('Recent Comments')} label={__('Recent Comments')}
onClick={() => scrollBack()} onClick={scrollBack}
/> />
)} )}