Limit to 10 superchats initially; batch-resolve when opening full list.
This commit is contained in:
parent
a65e68d023
commit
17903f6c15
3 changed files with 70 additions and 6 deletions
|
@ -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);
|
||||
|
|
|
@ -27,11 +27,13 @@ type Props = {
|
|||
doSuperChatList: (string) => void,
|
||||
superChats: Array<Comment>,
|
||||
myChannelIds: ?Array<string>,
|
||||
doResolveUris: (Array<string>, 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;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
@ -214,7 +253,7 @@ export default function LivestreamComments(props: Props) {
|
|||
{viewMode === VIEW_MODE_CHAT && superChatsByTipAmount && hasSuperChats && (
|
||||
<div className="livestream-superchats__wrapper">
|
||||
<div className="livestream-superchats__inner">
|
||||
{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) {
|
|||
</SuperChatWrapper>
|
||||
);
|
||||
})}
|
||||
{showMoreSuperChatsButton && (
|
||||
<Button
|
||||
title={__('Show More...')}
|
||||
button="inverse"
|
||||
className="close-button"
|
||||
onClick={() => {
|
||||
resolveSuperChat();
|
||||
setViewMode(VIEW_MODE_SUPER_CHAT);
|
||||
}}
|
||||
icon={ICONS.MORE}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
@ -301,8 +352,14 @@ export default function LivestreamComments(props: Props) {
|
|||
/>
|
||||
))}
|
||||
|
||||
{/* listing comments on top of eachother */}
|
||||
{viewMode === VIEW_MODE_SUPER_CHAT && resolvingSuperChat && (
|
||||
<div className="main--empty">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === VIEW_MODE_SUPER_CHAT &&
|
||||
!resolvingSuperChat &&
|
||||
superChatsReversed &&
|
||||
superChatsReversed.map((comment) => (
|
||||
<LivestreamComment
|
||||
|
|
|
@ -297,6 +297,11 @@ $recent-msg-button__height: 2rem;
|
|||
|
||||
.livestream-superchats__inner {
|
||||
display: flex;
|
||||
|
||||
.close-button {
|
||||
padding-left: var(--spacing-m);
|
||||
padding-right: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.livestream-superchat {
|
||||
|
|
Loading…
Reference in a new issue