From 17903f6c15755f0594b9e9cfe4535b6d7d5d82bd Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 4 Nov 2021 16:01:29 +0800 Subject: [PATCH] Limit to 10 superchats initially; batch-resolve when opening full list. --- ui/component/livestreamComments/index.js | 2 + ui/component/livestreamComments/view.jsx | 69 +++++++++++++++++++++--- ui/scss/component/_livestream.scss | 5 ++ 3 files changed, 70 insertions(+), 6 deletions(-) diff --git a/ui/component/livestreamComments/index.js b/ui/component/livestreamComments/index.js index f6c4cd3f5..d781fac38 100644 --- a/ui/component/livestreamComments/index.js +++ b/ui/component/livestreamComments/index.js @@ -1,4 +1,5 @@ import { connect } from 'react-redux'; +import { doResolveUris } from 'redux/actions/claims'; import { selectClaimForUri, selectMyClaimIdsRaw } from 'redux/selectors/claims'; import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket'; import { doCommentList, doSuperChatList } from 'redux/actions/comments'; @@ -28,4 +29,5 @@ export default connect(select, { doCommentSocketDisconnect, doCommentList, doSuperChatList, + doResolveUris, })(LivestreamComments); diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx index e1313c74f..fa48bacbd 100644 --- a/ui/component/livestreamComments/view.jsx +++ b/ui/component/livestreamComments/view.jsx @@ -27,11 +27,13 @@ type Props = { doSuperChatList: (string) => void, superChats: Array, myChannelIds: ?Array, + doResolveUris: (Array, boolean) => void, }; const VIEW_MODE_CHAT = 'view_chat'; const VIEW_MODE_SUPER_CHAT = 'view_superchat'; const COMMENT_SCROLL_TIMEOUT = 25; +const LARGE_SUPER_CHAT_LIST_THRESHOLD = 20; export default function LivestreamComments(props: Props) { const { @@ -47,6 +49,7 @@ export default function LivestreamComments(props: Props) { doSuperChatList, myChannelIds, superChats: superChatsByTipAmount, + doResolveUris, } = props; let superChatsFiatAmount, superChatsLBCAmount, superChatsTotalAmount, hasSuperChats; @@ -55,10 +58,10 @@ export default function LivestreamComments(props: Props) { const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT); const [scrollPos, setScrollPos] = React.useState(0); const [showPinned, setShowPinned] = React.useState(true); + const [resolvingSuperChat, setResolvingSuperChat] = React.useState(false); const claimId = claim && claim.claim_id; const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length; - // which kind of superchat to display, either const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? commentsByChronologicalOrder : superChatsByTipAmount; const stickerSuperChats = superChatsByTipAmount && superChatsByTipAmount.filter(({ comment }) => Boolean(parseSticker(comment))); @@ -73,6 +76,26 @@ export default function LivestreamComments(props: Props) { } }, [discussionElement]); + const superChatTopTen = React.useMemo(() => { + return superChatsByTipAmount ? superChatsByTipAmount.slice(0, 10) : superChatsByTipAmount; + }, [superChatsByTipAmount]); + + const showMoreSuperChatsButton = + superChatTopTen && superChatsByTipAmount && superChatTopTen.length < superChatsByTipAmount.length; + + function resolveSuperChat() { + if (superChatsByTipAmount && superChatsByTipAmount.length > 0) { + doResolveUris( + superChatsByTipAmount.map((comment) => comment.channel_url || '0'), + true + ); + + if (superChatsByTipAmount.length > LARGE_SUPER_CHAT_LIST_THRESHOLD) { + setResolvingSuperChat(true); + } + } + } + React.useEffect(() => { if (claimId) { doCommentList(uri, '', 1, 75); @@ -121,6 +144,24 @@ export default function LivestreamComments(props: Props) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [commentsLength]); // (Just respond to 'commentsLength' updates and nothing else) + // Stop spinner for resolving superchats + React.useEffect(() => { + if (resolvingSuperChat) { + // The real solution to the sluggishness is to fix the claim store/selectors + // and to paginate the long superchat list. This serves as a band-aid, + // showing a spinner while we batch-resolve. The duration is just a rough + // estimate -- the lag will handle the remaining time. + const timer = setTimeout(() => { + setResolvingSuperChat(false); + // Scroll to the top: + const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0]; + const divHeight = livestreamCommentsDiv.scrollHeight; + livestreamCommentsDiv.scrollTop = divHeight * -1; + }, 1000); + return () => clearTimeout(timer); + } + }, [resolvingSuperChat]); + // sum total amounts for fiat tips and lbc tips if (superChatsByTipAmount) { let fiatAmount = 0; @@ -195,10 +236,8 @@ export default function LivestreamComments(props: Props) { } onClick={() => { + resolveSuperChat(); setViewMode(VIEW_MODE_SUPER_CHAT); - const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0]; - const divHeight = livestreamCommentsDiv.scrollHeight; - livestreamCommentsDiv.scrollTop = divHeight * -1; }} /> @@ -214,7 +253,7 @@ export default function LivestreamComments(props: Props) { {viewMode === VIEW_MODE_CHAT && superChatsByTipAmount && hasSuperChats && (
- {superChatsByTipAmount.map((superChat: Comment) => { + {superChatTopTen.map((superChat: Comment) => { const isSticker = stickerSuperChats && stickerSuperChats.includes(superChat); const SuperChatWrapper = !isSticker @@ -253,6 +292,18 @@ export default function LivestreamComments(props: Props) { ); })} + {showMoreSuperChatsButton && ( +
)} @@ -301,8 +352,14 @@ export default function LivestreamComments(props: Props) { /> ))} - {/* listing comments on top of eachother */} + {viewMode === VIEW_MODE_SUPER_CHAT && resolvingSuperChat && ( +
+ +
+ )} + {viewMode === VIEW_MODE_SUPER_CHAT && + !resolvingSuperChat && superChatsReversed && superChatsReversed.map((comment) => (