Fix recent comments

ui/component/commentCreate/view.jsx

@@ -52,7 +52,6 @@ type Props = {
   supportDisabled: boolean,
   uri: string,
   disableInput?: boolean,
-  onSlimInputClick?: () => void,
   createComment: (string, string, string, ?string, ?string, ?string, boolean) => Promise<any>,
   doFetchCreatorSettings: (channelId: string) => Promise<any>,
   doToast: ({ message: string }) => void,
@@ -84,7 +83,6 @@ export function CommentCreate(props: Props) {
     supportDisabled,
     uri,
     disableInput,
-    onSlimInputClick,
     createComment,
     doFetchCreatorSettings,
     doToast,
@@ -527,7 +525,6 @@ export function CommentCreate(props: Props) {
             }}
             handleSubmit={handleCreateComment}
             slimInput={isMobile}
-            onSlimInputClick={onSlimInputClick}
             commentSelectorsProps={commentSelectorsProps}
             submitButtonRef={buttonRef}
             setShowSelectors={setShowSelectors}

ui/component/common/form-components/form-field.jsx

@@ -49,7 +49,6 @@ type Props = {
   showSelectors?: boolean,
   submitButtonRef?: any,
   tipModalOpen?: boolean,
-  onSlimInputClick?: () => void,
   onChange?: (any) => any,
   setShowSelectors?: (boolean) => void,
   quickActionHandler?: (any) => any,
@@ -118,7 +117,6 @@ export class FormField extends React.PureComponent<Props, State> {
       showSelectors,
       submitButtonRef,
       tipModalOpen,
-      onSlimInputClick,
       quickActionHandler,
       setShowSelectors,
       render,
@@ -275,7 +273,6 @@ export class FormField extends React.PureComponent<Props, State> {
                 showSelectors={Boolean(showSelectors)}
                 slimInput={slimInput}
                 tipModalOpen={tipModalOpen}
-                onSlimInputClick={onSlimInputClick}
               >
                 {(!slimInput || this.state.drawerOpen) && (label || quickAction) && (
                   <div className="form-field__two-column">
@@ -364,7 +361,6 @@ type TextareaWrapperProps = {
   showSelectors?: boolean,
   commentSelectorsProps?: any,
   tipModalOpen?: boolean,
-  onSlimInputClick?: () => void,
   toggleDrawer: () => void,
   closeSelector?: () => void,
 };
@@ -377,7 +373,6 @@ function TextareaWrapper(wrapperProps: TextareaWrapperProps) {
     commentSelectorsProps,
     showSelectors,
     tipModalOpen,
-    onSlimInputClick,
     toggleDrawer,
     closeSelector,
   } = wrapperProps;
@@ -385,18 +380,11 @@ function TextareaWrapper(wrapperProps: TextareaWrapperProps) {
   function handleCloseAll() {
     toggleDrawer();
     if (closeSelector) closeSelector();
-    if (onSlimInputClick) onSlimInputClick();
   }
 
   return slimInput ? (
     !isDrawerOpen ? (
-      <div
+      <div role="button" onClick={toggleDrawer}>
-        role="button"
-        onClick={() => {
-          toggleDrawer();
-          if (onSlimInputClick) onSlimInputClick();
-        }}
-      >
         {children}
       </div>
     ) : (

ui/component/livestreamChatLayout/view.jsx

@@ -73,9 +73,6 @@ export default function LivestreamChatLayout(props: Props) {
   const discussionElement = isMobile ? mobileElement : webElement;
   const allCommentsElem = document.querySelectorAll('.livestream__comment');
   const lastCommentElem = allCommentsElem && allCommentsElem[allCommentsElem.length - 1];
-  const minScrollPos =
-    discussionElement && lastCommentElem && discussionElement.scrollHeight - lastCommentElem.offsetHeight * 2;
-  const minOffset = discussionElement && minScrollPos && discussionElement.scrollHeight - minScrollPos;
 
   const [viewMode, setViewMode] = React.useState(VIEW_MODES.CHAT);
   const [scrollPos, setScrollPos] = React.useState(0);
@@ -85,16 +82,18 @@ export default function LivestreamChatLayout(props: Props) {
   const [chatHidden, setChatHidden] = React.useState(false);
   const [didInitialScroll, setDidInitialScroll] = React.useState(false);
   const [bottomScrollTop, setBottomScrollTop] = React.useState(0);
-  const [inputDrawerOpen, setInputDrawerOpen] = React.useState(false);
+  const [minScrollHeight, setMinScrollHeight] = React.useState(0);
 
-  const recentScrollPos = isMobile ? (bottomScrollTop > 0 && minOffset ? bottomScrollTop - minOffset : 0) : 0;
   const claimId = claim && claim.claim_id;
   const commentsToDisplay = viewMode === VIEW_MODES.CHAT ? commentsByChronologicalOrder : superChatsByAmount;
   const commentsLength = commentsToDisplay && commentsToDisplay.length;
   const pinnedComment = pinnedComments.length > 0 ? pinnedComments[0] : null;
   const { superChatsChannelUrls, superChatsFiatAmount, superChatsLBCAmount } = getTipValues(superChatsByAmount);
   const hasRecentComments = Boolean(
-    scrollPos && (!isMobile || recentScrollPos) && scrollPos < recentScrollPos && viewMode === VIEW_MODES.CHAT
+    (scrollPos || scrollPos === 0) &&
+      (!isMobile || minScrollHeight) &&
+      scrollPos < minScrollHeight &&
+      viewMode === VIEW_MODES.CHAT
   );
 
   const restoreScrollPos = React.useCallback(() => {
@@ -150,9 +149,18 @@ export default function LivestreamChatLayout(props: Props) {
     function handleScroll() {
       if (discussionElement) {
         const scrollTop = discussionElement.scrollTop;
+
         if (!scrollPos || scrollTop !== scrollPos) {
           setScrollPos(scrollTop);
         }
+
+        if (isMobile) {
+          const pos = lastCommentElem && bottomScrollTop - lastCommentElem.getBoundingClientRect().height;
+
+          if (!minScrollHeight || minScrollHeight !== pos) {
+            setMinScrollHeight(pos);
+          }
+        }
       }
     }
 
@@ -160,19 +168,19 @@ export default function LivestreamChatLayout(props: Props) {
       discussionElement.addEventListener('scroll', handleScroll);
       return () => discussionElement.removeEventListener('scroll', handleScroll);
     }
-  }, [discussionElement, scrollPos, viewMode]);
+  }, [bottomScrollTop, discussionElement, isMobile, lastCommentElem, minScrollHeight, scrollPos]);
 
   // Retain scrollPos=0 when receiving new messages.
   React.useEffect(() => {
     if (discussionElement && commentsLength > 0) {
       // Only update comment scroll if the user hasn't scrolled up to view old comments
       // $FlowFixMe
-      if (scrollPos && (!isMobile || recentScrollPos) && scrollPos >= recentScrollPos) {
+      if (scrollPos && (!isMobile || minScrollHeight) && scrollPos >= minScrollHeight) {
         // +ve scrollPos: not scrolled (Usually, there'll be a few pixels beyond 0).
         // -ve scrollPos: user scrolled.
         const timer = setTimeout(() => {
           // Use a timer here to ensure we reset after the new comment has been rendered.
-          discussionElement.scrollTop = !isMobile ? 0 : discussionElement.scrollHeight + 999;
+          restoreScrollPos();
         }, COMMENT_SCROLL_TIMEOUT);
         return () => clearTimeout(timer);
       }
@@ -252,7 +260,7 @@ export default function LivestreamChatLayout(props: Props) {
       </div>
     );
   }
-
+  console.log(hasRecentComments);
   return (
     <div className={classnames('card livestream__chat', { 'livestream__chat--popout': isPopoutWindow })}>
       {!hideHeader && (
@@ -345,7 +353,7 @@ export default function LivestreamChatLayout(props: Props) {
             uri={uri}
             commentsToDisplay={commentsToDisplay}
             isMobile={isMobile}
-            restoreScrollPos={!hasRecentComments && !inputDrawerOpen && restoreScrollPos}
+            restoreScrollPos={!hasRecentComments && restoreScrollPos}
           />
         )}
 
@@ -360,17 +368,7 @@ export default function LivestreamChatLayout(props: Props) {
         ) : null}
 
         <div className="livestream__comment-create">
-          <CommentCreate
+          <CommentCreate isLivestream bottom embed={embed} uri={uri} onDoneReplying={restoreScrollPos} />
-            isLivestream
-            bottom
-            embed={embed}
-            uri={uri}
-            onDoneReplying={restoreScrollPos}
-            onSlimInputClick={() => {
-              restoreScrollPos();
-              setInputDrawerOpen(!inputDrawerOpen);
-            }}
-          />
         </div>
       </div>
     </div>

ui/scss/component/_livestream-chat.scss

@@ -147,18 +147,11 @@ $recent-msg-button__height: 2rem;
   font-size: var(--font-xsmall);
   padding: var(--spacing-xxs) var(--spacing-s);
   opacity: 0.9;
+  bottom: var(--spacing-xxs);
 
   &:hover {
     opacity: 1;
   }
-
-  @media (min-width: $breakpoint-small) {
-    margin-bottom: var(--spacing-xs);
-  }
-
-  @media (max-width: $breakpoint-small) {
-    bottom: var(--spacing-xxs);
-  }
 }
 
 .livestream__comment-create {