Handle huge superchat list #224

ui/component/channelThumbnail/view.jsx

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

ui/component/commentsList/index.js

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

ui/component/commentsList/view.jsx

@@ -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={
+        commentIsMine={comment.channel_id && myChannelIds && myChannelIds.includes(comment.channel_id)}
-          comment.channel_id && myChannels && myChannels.some(({ claim_id }) => claim_id === comment.channel_id)
-        }
         linkedCommentId={linkedCommentId}
         isPinned={comment.is_pinned}
         supportAmount={comment.support_amount}

ui/component/livestreamComments/index.js

@@ -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,
+  selectSuperChatsForUri,
-  makeSelectSuperChatTotalAmountForUri,
+  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),
+  superChats: selectSuperChatsForUri(state, props.uri),
-  superChatsTotalAmount: makeSelectSuperChatTotalAmountForUri(props.uri)(state),
+  superChatsTotalAmount: selectSuperChatTotalAmountForUri(state, props.uri),
-  myChannels: selectMyChannelClaims(state),
+  myChannelIds: selectMyClaimIdsRaw(state),
 });
 
 export default connect(select, {
@@ -28,4 +29,5 @@ export default connect(select, {
   doCommentSocketDisconnect,
   doCommentList,
   doSuperChatList,
+  doResolveUris,
 })(LivestreamComments);

ui/component/livestreamComments/view.jsx

@@ -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) {
+    return myChannelIds ? myChannelIds.includes(channelId) : false;
-      for (let i = 0; i < myChannels.length; i++) {
-        if (myChannels[i].claim_id === channelId) {
-          return true;
-        }
-      }
-    }
-    return 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

ui/redux/reducers/claims.js

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

ui/redux/selectors/claims.js

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

ui/redux/selectors/comments.js

@@ -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) {
+          if (myClaimIds && myClaimIds.size > 0) {
-            const claimIsMine = channelClaim.is_my_output || myClaims.has(channelClaim.claim_id);
+            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) =>
+export const selectSuperChatDataForUri = (state: State, uri: string) => {
-  createSelector(selectSuperchatsByUri, (byUri) => {
+  const byUri = selectSuperchatsByUri(state);
-    return byUri[uri];
+  return byUri[uri];
-  });
+};
 
-export const makeSelectSuperChatsForUri = (uri: string) =>
+export const selectSuperChatsForUri = (state: State, uri: string) => {
-  createSelector(makeSelectSuperChatDataForUri(uri), (superChatData) => {
+  const superChatData = selectSuperChatDataForUri(state, uri);
-    if (!superChatData) {
+  return superChatData ? superChatData.comments : undefined;
-      return undefined;
+};
-    }
 
-    return superChatData.comments;
+export const selectSuperChatTotalAmountForUri = (state: State, uri: string) => {
-  });
+  const superChatData = selectSuperChatDataForUri(state, uri);
-
+  return superChatData ? superChatData.totalAmount : 0;
-export const makeSelectSuperChatTotalAmountForUri = (uri: string) =>
+};
-  createSelector(makeSelectSuperChatDataForUri(uri), (superChatData) => {
-    if (!superChatData) {
-      return 0;
-    }
-
-    return superChatData.totalAmount;
-  });

ui/scss/component/_livestream.scss

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