Fix 'Recent Comments' button for livestreams
This commit is contained in:
parent
e6addb8c2a
commit
b5ad359e32
1 changed files with 16 additions and 14 deletions
|
@ -54,6 +54,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) {
|
||||||
|
@ -80,19 +83,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');
|
if (discussionElement) {
|
||||||
const commentElement = document.querySelector('.livestream-comment');
|
const negativeCommentHeight = commentElement && -1 * commentElement.offsetHeight;
|
||||||
|
const isAtRecent = negativeCommentHeight && discussionElement.scrollTop >= negativeCommentHeight;
|
||||||
|
|
||||||
function handleScroll() {
|
setScrollBottom(isAtRecent);
|
||||||
if (discussionElement) {
|
|
||||||
const negativeCommentHeight = commentElement && -1 * commentElement.offsetHeight;
|
|
||||||
const isAtRecent = negativeCommentHeight && discussionElement.scrollTop >= negativeCommentHeight;
|
|
||||||
|
|
||||||
setScrollBottom(isAtRecent);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}, [commentElement, discussionElement]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
if (discussionElement) {
|
if (discussionElement) {
|
||||||
discussionElement.addEventListener('scroll', handleScroll);
|
discussionElement.addEventListener('scroll', handleScroll);
|
||||||
|
|
||||||
|
@ -112,15 +112,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 (
|
||||||
|
@ -206,7 +208,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}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue