From 3a511d0647be049b2c3bb769e0a59e7f349046cd Mon Sep 17 00:00:00 2001 From: Rafael Date: Mon, 7 Feb 2022 14:05:34 -0300 Subject: [PATCH] Fix recent comments --- ui/component/commentCreate/view.jsx | 3 -- .../common/form-components/form-field.jsx | 14 +------ ui/component/livestreamChatLayout/view.jsx | 42 +++++++++---------- ui/scss/component/_livestream-chat.scss | 9 +--- 4 files changed, 22 insertions(+), 46 deletions(-) diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 7772bf22a..3b31bdc54 100644 --- a/ui/component/commentCreate/view.jsx +++ b/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, doFetchCreatorSettings: (channelId: string) => Promise, 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} diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx index 7af5a3018..9de7da802 100644 --- a/ui/component/common/form-components/form-field.jsx +++ b/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 { showSelectors, submitButtonRef, tipModalOpen, - onSlimInputClick, quickActionHandler, setShowSelectors, render, @@ -275,7 +273,6 @@ export class FormField extends React.PureComponent { showSelectors={Boolean(showSelectors)} slimInput={slimInput} tipModalOpen={tipModalOpen} - onSlimInputClick={onSlimInputClick} > {(!slimInput || this.state.drawerOpen) && (label || quickAction) && (
@@ -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 ? ( -
{ - toggleDrawer(); - if (onSlimInputClick) onSlimInputClick(); - }} - > +
{children}
) : ( diff --git a/ui/component/livestreamChatLayout/view.jsx b/ui/component/livestreamChatLayout/view.jsx index 0011e3812..f47662d45 100644 --- a/ui/component/livestreamChatLayout/view.jsx +++ b/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) {
); } - + console.log(hasRecentComments); return (
{!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}
- { - restoreScrollPos(); - setInputDrawerOpen(!inputDrawerOpen); - }} - /> +
diff --git a/ui/scss/component/_livestream-chat.scss b/ui/scss/component/_livestream-chat.scss index 90ace0e3a..eea756754 100644 --- a/ui/scss/component/_livestream-chat.scss +++ b/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 {