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 [isBottomScroll, setIsBottomScroll] = React.useState();
   const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
   const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false);
   const claimId = claim && claim.claim_id;
@@ -79,18 +79,12 @@ export default function LivestreamComments(props: Props) {
   }, [claimId, uri, doCommentList, doSuperChatList, doCommentSocketConnect, doCommentSocketDisconnect]);
 
   React.useEffect(() => {
-    const element = commentsRef.current;
+    const element = document.querySelector('.livestream__comments');
 
     function handleScroll() {
       if (element) {
-        const scrollHeight = element.scrollHeight - element.offsetHeight;
+        const isAtBottom = element.scrollTop >= -100;
-        const isAtBottom = scrollHeight <= element.scrollTop + 100;
+        setIsBottomScroll(isAtBottom);
-
-        if (!isAtBottom) {
-          hasScrolledComments.current = true;
-        } else {
-          hasScrolledComments.current = false;
-        }
       }
     }
 
@@ -100,27 +94,25 @@ export default function LivestreamComments(props: Props) {
       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) {
+          setTimeout(() => (element.scrollTop = element.scrollHeight - element.offsetHeight + 100), 20);
           setPerformedInitialScroll(true);
         }
       }
-      }
-    }
 
-    return () => {
+      return () => element.removeEventListener('scroll', handleScroll);
-      if (element) {
-        element.removeEventListener('scroll', handleScroll);
     }
-    };
+  }, [commentsLength, isBottomScroll, performedInitialScroll, setPerformedInitialScroll, setIsBottomScroll]);
-  }, [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 +191,15 @@ export default function LivestreamComments(props: Props) {
             <div className="main--empty" style={{ flex: 1 }} />
           )}
 
+          {!isBottomScroll && (
+            <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>