Handle huge superchat list #224
This commit is contained in:
commit
21e1af8ce5
9 changed files with 108 additions and 58 deletions
|
@ -49,7 +49,7 @@ function ChannelThumbnail(props: Props) {
|
|||
ThumbUploadError,
|
||||
} = props;
|
||||
const [thumbLoadError, setThumbLoadError] = React.useState(ThumbUploadError);
|
||||
const shouldResolve = claim === undefined;
|
||||
const shouldResolve = !isResolving && claim === undefined;
|
||||
const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
|
||||
const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
|
||||
const defaultAvatar = AVATAR_DEFAULT || Gerbil;
|
||||
|
|
|
@ -4,7 +4,7 @@ import {
|
|||
makeSelectClaimForUri,
|
||||
makeSelectClaimIsMine,
|
||||
selectFetchingMyChannels,
|
||||
selectMyChannelClaims,
|
||||
selectMyClaimIdsRaw,
|
||||
} from 'redux/selectors/claims';
|
||||
import {
|
||||
selectTopLevelCommentsForUri,
|
||||
|
@ -35,7 +35,7 @@ const select = (state, props) => {
|
|||
return {
|
||||
topLevelComments,
|
||||
resolvedComments,
|
||||
myChannels: selectMyChannelClaims(state),
|
||||
myChannelIds: selectMyClaimIdsRaw(state),
|
||||
allCommentIds: makeSelectCommentIdsForUri(props.uri)(state),
|
||||
pinnedComments: selectPinnedCommentsForUri(state, props.uri),
|
||||
topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(props.uri)(state),
|
||||
|
|
|
@ -35,7 +35,7 @@ type Props = {
|
|||
uri: string,
|
||||
claim: ?Claim,
|
||||
claimIsMine: boolean,
|
||||
myChannels: ?Array<ChannelClaim>,
|
||||
myChannelIds: ?Array<string>,
|
||||
isFetchingComments: boolean,
|
||||
isFetchingCommentsById: boolean,
|
||||
isFetchingReacts: boolean,
|
||||
|
@ -64,7 +64,7 @@ function CommentList(props: Props) {
|
|||
topLevelTotalPages,
|
||||
claim,
|
||||
claimIsMine,
|
||||
myChannels,
|
||||
myChannelIds,
|
||||
isFetchingComments,
|
||||
isFetchingReacts,
|
||||
linkedCommentId,
|
||||
|
@ -256,9 +256,7 @@ function CommentList(props: Props) {
|
|||
message={comment.comment}
|
||||
timePosted={comment.timestamp * 1000}
|
||||
claimIsMine={claimIsMine}
|
||||
commentIsMine={
|
||||
comment.channel_id && myChannels && myChannels.some(({ claim_id }) => claim_id === comment.channel_id)
|
||||
}
|
||||
commentIsMine={comment.channel_id && myChannelIds && myChannelIds.includes(comment.channel_id)}
|
||||
linkedCommentId={linkedCommentId}
|
||||
isPinned={comment.is_pinned}
|
||||
supportAmount={comment.support_amount}
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { selectClaimForUri, selectMyChannelClaims } from 'redux/selectors/claims';
|
||||
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';
|
||||
import {
|
||||
selectTopLevelCommentsForUri,
|
||||
selectIsFetchingComments,
|
||||
makeSelectSuperChatsForUri,
|
||||
makeSelectSuperChatTotalAmountForUri,
|
||||
selectSuperChatsForUri,
|
||||
selectSuperChatTotalAmountForUri,
|
||||
selectPinnedCommentsForUri,
|
||||
} from 'redux/selectors/comments';
|
||||
import LivestreamComments from './view';
|
||||
|
@ -18,9 +19,9 @@ const select = (state, props) => ({
|
|||
comments: selectTopLevelCommentsForUri(state, props.uri, MAX_LIVESTREAM_COMMENTS),
|
||||
pinnedComments: selectPinnedCommentsForUri(state, props.uri),
|
||||
fetchingComments: selectIsFetchingComments(state),
|
||||
superChats: makeSelectSuperChatsForUri(props.uri)(state),
|
||||
superChatsTotalAmount: makeSelectSuperChatTotalAmountForUri(props.uri)(state),
|
||||
myChannels: selectMyChannelClaims(state),
|
||||
superChats: selectSuperChatsForUri(state, props.uri),
|
||||
superChatsTotalAmount: selectSuperChatTotalAmountForUri(state, props.uri),
|
||||
myChannelIds: selectMyClaimIdsRaw(state),
|
||||
});
|
||||
|
||||
export default connect(select, {
|
||||
|
@ -28,4 +29,5 @@ export default connect(select, {
|
|||
doCommentSocketDisconnect,
|
||||
doCommentList,
|
||||
doSuperChatList,
|
||||
doResolveUris,
|
||||
})(LivestreamComments);
|
||||
|
|
|
@ -26,12 +26,14 @@ type Props = {
|
|||
fetchingComments: boolean,
|
||||
doSuperChatList: (string) => void,
|
||||
superChats: Array<Comment>,
|
||||
myChannels: ?Array<ChannelClaim>,
|
||||
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 {
|
||||
|
@ -45,8 +47,9 @@ export default function LivestreamComments(props: Props) {
|
|||
doCommentList,
|
||||
fetchingComments,
|
||||
doSuperChatList,
|
||||
myChannels,
|
||||
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;
|
||||
|
@ -152,14 +193,7 @@ export default function LivestreamComments(props: Props) {
|
|||
|
||||
// todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
|
||||
function isMyComment(channelId: string) {
|
||||
if (myChannels != null && channelId != null) {
|
||||
for (let i = 0; i < myChannels.length; i++) {
|
||||
if (myChannels[i].claim_id === channelId) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
return myChannelIds ? myChannelIds.includes(channelId) : false;
|
||||
}
|
||||
|
||||
if (!claim) {
|
||||
|
@ -202,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>
|
||||
|
@ -221,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
|
||||
|
@ -260,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>
|
||||
)}
|
||||
|
@ -308,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
|
||||
|
|
|
@ -197,7 +197,7 @@ function handleClaimAction(state: State, action: any): State {
|
|||
claimsByUri: byUri,
|
||||
channelClaimCounts,
|
||||
resolvingUris: Array.from(newResolvingUrls),
|
||||
myClaims: Array.from(myClaimIds),
|
||||
...(!state.myClaims || myClaimIds.size !== state.myClaims.length ? { myClaims: Array.from(myClaimIds) } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -143,6 +143,9 @@ export const makeSelectClaimForUri = (uri: string, returnRepost: boolean = true)
|
|||
}
|
||||
});
|
||||
|
||||
// Returns your claim IDs without handling pending and abandoned claims.
|
||||
export const selectMyClaimIdsRaw = (state: State) => selectState(state).myClaims;
|
||||
|
||||
export const selectMyClaimsRaw = createSelector(selectState, selectClaimsById, (state, byId) => {
|
||||
const ids = state.myClaims;
|
||||
if (!ids) {
|
||||
|
|
|
@ -4,7 +4,7 @@ import { createCachedSelector } from 're-reselect';
|
|||
import { selectMutedChannels } from 'redux/selectors/blocked';
|
||||
import { selectShowMatureContent } from 'redux/selectors/settings';
|
||||
import { selectBlacklistedOutpointMap, selectFilteredOutpointMap } from 'lbryinc';
|
||||
import { selectClaimsById, selectMyActiveClaims } from 'redux/selectors/claims';
|
||||
import { selectClaimsById, selectMyClaimIdsRaw } from 'redux/selectors/claims';
|
||||
import { isClaimNsfw } from 'util/claim';
|
||||
|
||||
type State = { comments: CommentsState };
|
||||
|
@ -180,7 +180,7 @@ export const makeSelectCommentIdsForUri = (uri: string) =>
|
|||
|
||||
const filterCommentsDepOnList = {
|
||||
claimsById: selectClaimsById,
|
||||
myClaims: selectMyActiveClaims,
|
||||
myClaimIds: selectMyClaimIdsRaw,
|
||||
mutedChannels: selectMutedChannels,
|
||||
personalBlockList: selectModerationBlockList,
|
||||
blacklistedMap: selectBlacklistedOutpointMap,
|
||||
|
@ -258,7 +258,7 @@ export const selectRepliesForParentId = createCachedSelector(
|
|||
*
|
||||
* @param comments List of comments to filter.
|
||||
* @param claimId The claim that `comments` reside in.
|
||||
* @oaram filterInputs Values returned by filterCommentsDepOnList.
|
||||
* @param filterInputs Values returned by filterCommentsDepOnList.
|
||||
*/
|
||||
const filterComments = (comments: Array<Comment>, claimId?: string, filterInputs: any) => {
|
||||
const filterProps = filterInputs.reduce(function (acc, cur, i) {
|
||||
|
@ -268,7 +268,7 @@ const filterComments = (comments: Array<Comment>, claimId?: string, filterInputs
|
|||
|
||||
const {
|
||||
claimsById,
|
||||
myClaims,
|
||||
myClaimIds,
|
||||
mutedChannels,
|
||||
personalBlockList,
|
||||
blacklistedMap,
|
||||
|
@ -287,8 +287,8 @@ const filterComments = (comments: Array<Comment>, claimId?: string, filterInputs
|
|||
|
||||
// Return comment if `channelClaim` doesn't exist so the component knows to resolve the author
|
||||
if (channelClaim) {
|
||||
if (myClaims && myClaims.size > 0) {
|
||||
const claimIsMine = channelClaim.is_my_output || myClaims.has(channelClaim.claim_id);
|
||||
if (myClaimIds && myClaimIds.size > 0) {
|
||||
const claimIsMine = channelClaim.is_my_output || myClaimIds.includes(channelClaim.claim_id);
|
||||
if (claimIsMine) {
|
||||
return true;
|
||||
}
|
||||
|
@ -308,7 +308,7 @@ const filterComments = (comments: Array<Comment>, claimId?: string, filterInputs
|
|||
}
|
||||
|
||||
if (claimId) {
|
||||
const claimIdIsMine = myClaims && myClaims.size > 0 && myClaims.has(claimId);
|
||||
const claimIdIsMine = myClaimIds && myClaimIds.size > 0 && myClaimIds.includes(claimId);
|
||||
if (!claimIdIsMine) {
|
||||
if (personalBlockList.includes(comment.channel_url)) {
|
||||
return false;
|
||||
|
@ -368,25 +368,17 @@ export const makeSelectUriIsBlockingOrUnBlocking = (uri: string) =>
|
|||
return blockingByUri[uri] || unBlockingByUri[uri];
|
||||
});
|
||||
|
||||
export const makeSelectSuperChatDataForUri = (uri: string) =>
|
||||
createSelector(selectSuperchatsByUri, (byUri) => {
|
||||
return byUri[uri];
|
||||
});
|
||||
export const selectSuperChatDataForUri = (state: State, uri: string) => {
|
||||
const byUri = selectSuperchatsByUri(state);
|
||||
return byUri[uri];
|
||||
};
|
||||
|
||||
export const makeSelectSuperChatsForUri = (uri: string) =>
|
||||
createSelector(makeSelectSuperChatDataForUri(uri), (superChatData) => {
|
||||
if (!superChatData) {
|
||||
return undefined;
|
||||
}
|
||||
export const selectSuperChatsForUri = (state: State, uri: string) => {
|
||||
const superChatData = selectSuperChatDataForUri(state, uri);
|
||||
return superChatData ? superChatData.comments : undefined;
|
||||
};
|
||||
|
||||
return superChatData.comments;
|
||||
});
|
||||
|
||||
export const makeSelectSuperChatTotalAmountForUri = (uri: string) =>
|
||||
createSelector(makeSelectSuperChatDataForUri(uri), (superChatData) => {
|
||||
if (!superChatData) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return superChatData.totalAmount;
|
||||
});
|
||||
export const selectSuperChatTotalAmountForUri = (state: State, uri: string) => {
|
||||
const superChatData = selectSuperChatDataForUri(state, uri);
|
||||
return superChatData ? superChatData.totalAmount : 0;
|
||||
};
|
||||
|
|
|
@ -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