Incremental livestream performance fixes (#307)

ui/component/channelMentionSuggestions/index.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
+import { MAX_LIVESTREAM_COMMENTS } from 'constants/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
-import { selectSubscriptions } from 'redux/selectors/subscriptions';
+import { selectSubscriptionUris } from 'redux/selectors/subscriptions';
 import { withRouter } from 'react-router';
 import { makeSelectClaimForUri } from 'redux/selectors/claims';
 import { doResolveUris } from 'redux/actions/claims';
@@ -8,8 +9,12 @@ import { selectTopLevelCommentsForUri } from 'redux/selectors/comments';
 import ChannelMentionSuggestions from './view';
 
 const select = (state, props) => {
-  const subscriptionUris = selectSubscriptions(state).map(({ uri }) => uri);
-  const topLevelComments = selectTopLevelCommentsForUri(state, props.uri);
+  const subscriptionUris = selectSubscriptionUris(state);
+  const topLevelComments = selectTopLevelCommentsForUri(
+    state,
+    props.uri,
+    props.isLivestream ? MAX_LIVESTREAM_COMMENTS : -1
+  );
 
   const commentorUris = [];
   // Avoid repeated commentors

ui/component/fileSubtitle/view.jsx

@@ -8,12 +8,11 @@ import ClaimPreviewReset from 'component/claimPreviewReset';
 type Props = {
   uri: string,
   livestream?: boolean,
-  activeViewers?: number,
   isLive?: boolean,
 };
 
 function FileSubtitle(props: Props) {
-  const { uri, livestream = false, activeViewers, isLive = false } = props;
+  const { uri, livestream = false, isLive = false } = props;
 
   return (
     <>
@@ -21,7 +20,7 @@ function FileSubtitle(props: Props) {
         <div className="file__viewdate">
           {livestream ? <span>{__('Right now')}</span> : <DateTime uri={uri} show={DateTime.SHOW_DATE} />}
 
-          <FileViewCount uri={uri} livestream={livestream} activeViewers={activeViewers} isLive={isLive} />
+          <FileViewCount uri={uri} livestream={livestream} isLive={isLive} />
         </div>
 
         <FileActions uri={uri} hideRepost={livestream} livestream={livestream} />

ui/component/fileTitleSection/index.js

@@ -1,19 +1,16 @@
 import { connect } from 'react-redux';
 import { doFetchSubCount, selectSubCountForUri } from 'lbryinc';
-import { selectTitleForUri, makeSelectClaimForUri } from 'redux/selectors/claims';
+import { selectTitleForUri, selectClaimForUri } from 'redux/selectors/claims';
 import { makeSelectInsufficientCreditsForUri } from 'redux/selectors/content';
-import { makeSelectViewersForId } from 'redux/selectors/livestream';
 import FileTitleSection from './view';
 
 const select = (state, props) => {
-  const claim = makeSelectClaimForUri(props.uri)(state);
-  const viewers = claim && makeSelectViewersForId(claim.claim_id)(state);
+  const claim = selectClaimForUri(state, props.uri);
   const channelClaimId = claim && claim.signing_channel ? claim.signing_channel.claim_id : undefined;
   const channelUri = claim && claim.signing_channel ? claim.signing_channel.canonical_url : undefined;
   const subCount = channelUri && selectSubCountForUri(state, channelUri);
 
   return {
-    viewers,
     isInsufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
     title: selectTitleForUri(state, props.uri),
     channelClaimId,

ui/component/fileTitleSection/view.jsx

@@ -21,7 +21,6 @@ type Props = {
   isNsfwBlocked: boolean,
   livestream?: boolean,
   isLive?: boolean,
-  viewers?: number,
   subCount: number,
   channelClaimId?: string,
   fetchSubCount: (string) => void,
@@ -35,7 +34,6 @@ function FileTitleSection(props: Props) {
     isNsfwBlocked,
     livestream = false,
     isLive = false,
-    viewers,
     subCount,
     channelClaimId,
     fetchSubCount,
@@ -66,7 +64,7 @@ function FileTitleSection(props: Props) {
         body={
           <React.Fragment>
             <ClaimInsufficientCredits uri={uri} />
-            <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} activeViewers={viewers} />
+            <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} />
           </React.Fragment>
         }
         actions={

ui/component/fileViewCount/index.js

@@ -1,13 +1,18 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'redux/selectors/claims';
+import { selectClaimIdForUri } from 'redux/selectors/claims';
+import { selectViewersForId } from 'redux/selectors/livestream';
 import { doFetchViewCount, selectViewCountForUri } from 'lbryinc';
 import { doAnalyticsView } from 'redux/actions/app';
 import FileViewCount from './view';
 
-const select = (state, props) => ({
-  claim: makeSelectClaimForUri(props.uri)(state),
-  viewCount: selectViewCountForUri(state, props.uri),
-});
+const select = (state, props) => {
+  const claimId = selectClaimIdForUri(state, props.uri);
+  return {
+    claimId,
+    viewCount: selectViewCountForUri(state, props.uri),
+    activeViewers: props.livestream && props.isLive && claimId ? selectViewersForId(state, claimId) : undefined,
+  };
+};
 
 const perform = (dispatch) => ({
   fetchViewCount: (claimId) => dispatch(doFetchViewCount(claimId)),

ui/component/fileViewCount/view.jsx

@@ -4,20 +4,19 @@ import React from 'react';
 import HelpLink from 'component/common/help-link';
 
 type Props = {
-  claim: ?StreamClaim,
+  livestream?: boolean,
+  isLive?: boolean,
+  // --- redux ---
+  claimId: ?string,
   fetchViewCount: (string) => void,
-  fetchingViewCount: boolean,
   uri: string,
   viewCount: string,
-  livestream?: boolean,
   activeViewers?: number,
-  isLive?: boolean,
   doAnalyticsView: (string) => void,
 };
 
 function FileViewCount(props: Props) {
-  const { claim, uri, fetchViewCount, viewCount, livestream, activeViewers, isLive = false, doAnalyticsView } = props;
-  const claimId = claim && claim.claim_id;
+  const { claimId, uri, fetchViewCount, viewCount, livestream, activeViewers, isLive = false, doAnalyticsView } = props;
 
   React.useEffect(() => {
     if (livestream) {

ui/component/livestreamComments/index.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { MAX_LIVESTREAM_COMMENTS } from 'constants/livestream';
 import { doResolveUris } from 'redux/actions/claims';
 import { selectClaimForUri, selectMyClaimIdsRaw } from 'redux/selectors/claims';
 import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
@@ -10,9 +11,8 @@ import {
   selectSuperChatTotalAmountForUri,
   selectPinnedCommentsForUri,
 } from 'redux/selectors/comments';
-import LivestreamComments from './view';
 
-const MAX_LIVESTREAM_COMMENTS = 75;
+import LivestreamComments from './view';
 
 const select = (state, props) => ({
   claim: selectClaimForUri(state, props.uri),

ui/component/livestreamComments/view.jsx

@@ -16,7 +16,6 @@ import { parseSticker } from 'util/comments';
 type Props = {
   uri: string,
   claim: ?StreamClaim,
-  activeViewers: number,
   embed?: boolean,
   doCommentSocketConnect: (string, string) => void,
   doCommentSocketDisconnect: (string) => void,

ui/constants/livestream.js

@@ -3,3 +3,5 @@ export const LIVESTREAM_LIVE_API = 'https://api.live.odysee.com/v1/odysee/live';
 export const LIVESTREAM_REPLAY_API = 'https://api.live.odysee.com/v1/replays/odysee';
 export const LIVESTREAM_RTMP_URL = 'rtmp://stream.odysee.com/live';
 export const LIVESTREAM_KILL = 'https://api.stream.odysee.com/stream/kill';
+
+export const MAX_LIVESTREAM_COMMENTS = 75;

ui/redux/selectors/comments.js

@@ -51,12 +51,11 @@ export const selectCommentsByUri = createSelector(selectState, (state) => {
 
 export const selectPinnedCommentsById = (state: State) => selectState(state).pinnedCommentsById;
 export const selectPinnedCommentsForUri = createCachedSelector(
-  selectCommentsByUri,
+  selectClaimIdForUri,
   selectCommentsById,
   selectPinnedCommentsById,
   (state, uri) => uri,
-  (byUri, byId, pinnedCommentsById, uri) => {
-    const claimId = byUri[uri];
+  (claimId, byId, pinnedCommentsById, uri) => {
     const pinnedCommentIds = pinnedCommentsById && pinnedCommentsById[claimId];
     const pinnedComments = [];
 
@@ -199,10 +198,9 @@ export const selectFetchingBlockedWords = (state: State) => selectState(state).f
 export const selectCommentsForUri = createCachedSelector(
   (state, uri) => uri,
   selectCommentsByClaimId,
-  selectCommentsByUri,
+  selectClaimIdForUri,
   ...Object.values(filterCommentsDepOnList),
-  (uri, byClaimId, byUri, ...filterInputs) => {
-    const claimId = byUri[uri];
+  (uri, byClaimId, claimId, ...filterInputs) => {
     const comments = byClaimId && byClaimId[claimId];
     return filterComments(comments, claimId, filterInputs);
   }
@@ -212,22 +210,18 @@ export const selectTopLevelCommentsForUri = createCachedSelector(
   (state, uri) => uri,
   (state, uri, maxCount) => maxCount,
   selectTopLevelCommentsByClaimId,
-  selectCommentsByUri,
+  selectClaimIdForUri,
   ...Object.values(filterCommentsDepOnList),
-  (uri, maxCount = -1, byClaimId, byUri, ...filterInputs) => {
-    const claimId = byUri[uri];
+  (uri, maxCount = -1, byClaimId, claimId, ...filterInputs) => {
     const comments = byClaimId && byClaimId[claimId];
-    const filtered = filterComments(comments, claimId, filterInputs);
-    return maxCount > 0 ? filtered.slice(0, maxCount) : filtered;
+    if (comments) {
+      return filterComments(maxCount > 0 ? comments.slice(0, maxCount) : comments, claimId, filterInputs);
+    } else {
+      return [];
+    }
   }
 )((state, uri, maxCount = -1) => `${String(uri)}:${maxCount}`);
 
-export const makeSelectTopLevelTotalCommentsForUri = (uri: string) =>
-  createSelector(selectState, selectCommentsByUri, (state, byUri) => {
-    const claimId = byUri[uri];
-    return state.topLevelTotalCommentsById[claimId] || 0;
-  });
-
 export const makeSelectTopLevelTotalPagesForUri = (uri: string) =>
   createSelector(selectState, selectCommentsByUri, (state, byUri) => {
     const claimId = byUri[uri];

ui/redux/selectors/livestream.js

@@ -29,8 +29,10 @@ export const selectViewersById = (state: State) => selectState(state).viewersByI
 export const makeSelectIsFetchingLivestreams = (channelId: string) =>
   createSelector(selectFetchingLivestreams, (fetchingLivestreams) => Boolean(fetchingLivestreams[channelId]));
 
-export const makeSelectViewersForId = (channelId: string) =>
-  createSelector(selectViewersById, (viewers) => viewers[channelId]);
+export const selectViewersForId = (state: State, channelId: string) => {
+  const viewers = selectViewersById(state);
+  return viewers[channelId];
+};
 
 export const makeSelectPendingLivestreamsForChannelId = (channelId: string) =>
   createSelector(selectPendingClaims, (pendingClaims) => {

ui/redux/selectors/subscriptions.js

@@ -20,6 +20,11 @@ export const selectSubscriptions = createSelector(
   (state) => state.subscriptions && state.subscriptions.sort((a, b) => a.channelName.localeCompare(b.channelName))
 );
 
+export const selectSubscriptionUris = createSelector(
+  selectSubscriptions,
+  (subscriptions) => subscriptions && subscriptions.map((sub) => sub.uri)
+);
+
 export const selectFollowing = createSelector(selectState, (state) => state.following && state.following);
 
 // Fetching list of users subscriptions