LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Handle huge superchat list #224

Browse source
This commit is contained in:
infinite-persistence 2021-11-04 17:03:35 +08:00
commit 21e1af8ce5
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
9 changed files with 108 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/channelThumbnail/view.jsx
View file

@ -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
ui/component/commentsList/index.js
View file

@ -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),

8
ui/component/commentsList/view.jsx
View file

@ -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}

14
ui/component/livestreamComments/index.js
View file

@ -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);

82
ui/component/livestreamComments/view.jsx
View file

@ -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

2
ui/redux/reducers/claims.js
View file

@ -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) } : {}),
});
}

3
ui/redux/selectors/claims.js
View file

@ -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) {

44
ui/redux/selectors/comments.js
View file

@ -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) => {
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;
};

5
ui/scss/component/_livestream.scss
View file

@ -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 {