Merge pull request #6268 from saltrafael/scrollback

Button to scroll to recent live chats (scroll to bottom)

ui/component/livestreamComments/view.jsx

@@ -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) {
+      if (discussionElement) {
-        const scrollHeight = element.scrollHeight - element.offsetHeight;
+        const negativeCommentHeight = commentElement && (-1 * commentElement.offsetHeight);
-        const isAtBottom = scrollHeight <= element.scrollTop + 100;
+        const isAtRecent = negativeCommentHeight && (discussionElement.scrollTop >= negativeCommentHeight);
 
-        if (!isAtBottom) {
+        setScrollBottom(isAtRecent);
-          hasScrolledComments.current = true;
-        } else {
-          hasScrolledComments.current = false;
-        }
       }
     }
 
-    if (element) {
+    if (discussionElement) {
-      element.addEventListener('scroll', handleScroll);
+      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) {
+        if (!performedInitialScroll) {
-          setTimeout(() => (element.scrollTop = element.scrollHeight - element.offsetHeight + 100), 20);
+          setTimeout(() => (discussionElement.scrollTop = discussionElement.scrollHeight - discussionElement.offsetHeight + 100), 20);
-
+          setPerformedInitialScroll(true);
-          if (!performedInitialScroll) {
-            setPerformedInitialScroll(true);
-          }
         }
       }
-    }
 
-    return () => {
+      return () => discussionElement.removeEventListener('scroll', handleScroll);
-      if (element) {
+    }
-        element.removeEventListener('scroll', handleScroll);
+  }, [commentsLength, performedInitialScroll, setPerformedInitialScroll, setScrollBottom]);
-      }
-    };
-  }, [commentsRef, commentsLength, performedInitialScroll]);
 
   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>