Fix memo: isLivestream & isLivestreamActive

ui/component/claimPreview/index.js

@@ -6,7 +6,7 @@ import {
   makeSelectClaimIsPending,
   makeSelectReflectingClaimForUri,
   makeSelectClaimWasPurchased,
-  makeSelectClaimIsStreamPlaceholder,
+  isStreamPlaceholderClaim,
   makeSelectTitleForUri,
   selectDateForUri,
 } from 'redux/selectors/claims';
@@ -21,7 +21,7 @@ import { doResolveUri } from 'redux/actions/claims';
 import { doCollectionEdit } from 'redux/actions/collections';
 import { doFileGet } from 'redux/actions/file';
 import { selectBanStateForUri } from 'lbryinc';
-import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
+import { selectIsActiveLivestreamForUri } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
@@ -33,6 +33,7 @@ const select = (state, props) => {
   const claim = props.uri && selectClaimForUri(state, props.uri);
   const media = claim && claim.value && (claim.value.video || claim.value.audio);
   const mediaDuration = media && media.duration && formatMediaDuration(media.duration, { screenReader: true });
+  const isLivestream = isStreamPlaceholderClaim(claim);
 
   return {
     claim,
@@ -51,8 +52,8 @@ const select = (state, props) => {
     isSubscribed: props.uri && selectIsSubscribedForUri(state, props.uri),
     streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
     wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
-    isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
-    isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
+    isLivestream,
+    isLivestreamActive: isLivestream && selectIsActiveLivestreamForUri(state, props.uri),
     isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
     collectionUris: makeSelectUrlsForCollectionId(props.collectionId)(state),
     collectionIndex: makeSelectIndexForUrlInCollection(props.uri, props.collectionId)(state),

ui/component/claimPreviewSubtitle/index.js

@@ -1,10 +1,6 @@
 import * as PAGES from 'constants/pages';
 import { connect } from 'react-redux';
-import {
-  selectClaimForUri,
-  makeSelectClaimIsPending,
-  makeSelectClaimIsStreamPlaceholder,
-} from 'redux/selectors/claims';
+import { selectClaimForUri, makeSelectClaimIsPending, isStreamPlaceholderClaim } from 'redux/selectors/claims';
 import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
 import { push } from 'connected-react-router';
 import ClaimPreviewSubtitle from './view';
@@ -17,7 +13,7 @@ const select = (state, props) => {
   return {
     claim,
     pending: makeSelectClaimIsPending(props.uri)(state),
-    isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+    isLivestream: isStreamPlaceholderClaim(claim),
     subCount: isChannel ? selectSubCountForUri(state, props.uri) : 0,
   };
 };

ui/component/claimPreviewTile/index.js

@@ -4,13 +4,13 @@ import {
   makeSelectIsUriResolving,
   getThumbnailFromClaim,
   makeSelectTitleForUri,
-  makeSelectClaimIsStreamPlaceholder,
+  isStreamPlaceholderClaim,
   selectDateForUri,
 } from 'redux/selectors/claims';
 import { doFileGet } from 'redux/actions/file';
 import { doResolveUri } from 'redux/actions/claims';
 import { selectViewCountForUri, selectBanStateForUri } from 'lbryinc';
-import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
+import { selectIsActiveLivestreamForUri } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { isClaimNsfw } from 'util/claim';
 import ClaimPreviewTile from './view';
@@ -20,6 +20,7 @@ const select = (state, props) => {
   const claim = props.uri && makeSelectClaimForUri(props.uri)(state);
   const media = claim && claim.value && (claim.value.video || claim.value.audio);
   const mediaDuration = media && media.duration && formatMediaDuration(media.duration, { screenReader: true });
+  const isLivestream = isStreamPlaceholderClaim(claim);
 
   return {
     claim,
@@ -31,8 +32,8 @@ const select = (state, props) => {
     banState: selectBanStateForUri(state, props.uri),
     showMature: selectShowMatureContent(state),
     isMature: claim ? isClaimNsfw(claim) : false,
-    isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
-    isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
+    isLivestream,
+    isLivestreamActive: isLivestream && selectIsActiveLivestreamForUri(state, props.uri),
     viewCount: selectViewCountForUri(state, props.uri),
   };
 };

ui/component/claimType/index.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri, makeSelectClaimIsStreamPlaceholder } from 'redux/selectors/claims';
+import { makeSelectClaimForUri, selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
 import FileType from './view';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
-  isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+  isLivestream: selectIsStreamPlaceholderForUri(state, props.uri),
 });
 
 export default connect(select)(FileType);

ui/component/fileActions/index.js

@@ -3,7 +3,7 @@ import {
   selectClaimIsMine,
   selectClaimForUri,
   selectHasChannels,
-  makeSelectClaimIsStreamPlaceholder,
+  selectIsStreamPlaceholderForUri,
   makeSelectTagInClaimOrChannelForUri,
 } from 'redux/selectors/claims';
 import { makeSelectStreamingUrlForUri, makeSelectFileInfoForUri } from 'redux/selectors/file_info';
@@ -27,7 +27,7 @@ const select = (state, props) => {
     renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
     costInfo: makeSelectCostInfoForUri(props.uri)(state),
     hasChannels: selectHasChannels(state),
-    isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+    isLivestreamClaim: selectIsStreamPlaceholderForUri(state, props.uri),
     reactionsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
     streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
   };

ui/component/fileType/index.js

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
 import { makeSelectMediaTypeForUri } from 'redux/selectors/file_info';
-import { makeSelectClaimIsStreamPlaceholder } from 'redux/selectors/claims';
+import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
 import FileType from './view';
 
 const select = (state, props) => ({
   mediaType: makeSelectMediaTypeForUri(props.uri)(state),
-  isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+  isLivestream: selectIsStreamPlaceholderForUri(state, props.uri),
 });
 
 export default connect(select)(FileType);

ui/component/publishFile/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { selectBalance } from 'redux/selectors/wallet';
 import { selectIsStillEditing, makeSelectPublishFormValue } from 'redux/selectors/publish';
 import { doUpdatePublishForm, doClearPublish } from 'redux/actions/publish';
-import { makeSelectClaimIsStreamPlaceholder } from 'redux/selectors/claims';
+import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
 import { doToast } from 'redux/actions/notifications';
 import { selectFfmpegStatus } from 'redux/selectors/settings';
 import PublishPage from './view';
@@ -20,7 +20,7 @@ const select = (state, props) => ({
   size: makeSelectPublishFormValue('fileSize')(state),
   duration: makeSelectPublishFormValue('fileDur')(state),
   isVid: makeSelectPublishFormValue('fileVid')(state),
-  isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+  isLivestreamClaim: selectIsStreamPlaceholderForUri(state, props.uri),
 });
 
 const perform = (dispatch) => ({

ui/component/publishForm/index.js

@@ -15,7 +15,7 @@ import {
   selectIsResolvingPublishUris,
   selectMyClaimForUri,
 } from 'redux/selectors/publish';
-import { makeSelectClaimIsStreamPlaceholder } from 'redux/selectors/claims';
+import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import * as SETTINGS from 'constants/settings';
 import { doClaimInitialRewards } from 'redux/actions/rewards';
@@ -45,7 +45,7 @@ const select = (state) => {
     user: selectUser(state),
     // The winning claim for a short lbry uri
     amountNeededForTakeover: selectTakeOverAmount(state),
-    isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(permanentUrl)(state),
+    isLivestreamClaim: selectIsStreamPlaceholderForUri(state, permanentUrl),
     isPostClaim,
     permanentUrl,
     // My previously published claims under this short lbry uri

ui/modal/modalPublishPreview/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
 import ModalPublishPreview from './view';
 import { makeSelectPublishFormValue, selectPublishFormValues, selectIsStillEditing } from 'redux/selectors/publish';
-import { selectMyChannelClaims, makeSelectClaimIsStreamPlaceholder } from 'redux/selectors/claims';
+import { selectMyChannelClaims, selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
 import * as SETTINGS from 'constants/settings';
 import { selectFfmpegStatus, makeSelectClientSetting } from 'redux/selectors/settings';
 import { doPublishDesktop } from 'redux/actions/publish';
@@ -21,7 +21,7 @@ const select = (state, props) => {
     isStillEditing: selectIsStillEditing(state),
     ffmpegStatus: selectFfmpegStatus(state),
     enablePublishPreview: makeSelectClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW)(state),
-    isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(editingUri)(state),
+    isLivestreamClaim: selectIsStreamPlaceholderForUri(state, editingUri),
   };
 };
 

ui/page/file/index.js

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom';
 import {
   selectClaimIsNsfwForUri,
   makeSelectTagInClaimOrChannelForUri,
-  makeSelectClaimIsStreamPlaceholder,
+  selectIsStreamPlaceholderForUri,
 } from 'redux/selectors/claims';
 import { makeSelectFileInfoForUri } from 'redux/selectors/file_info';
 import { doFetchFileInfo } from 'redux/actions/file_info';
@@ -32,7 +32,7 @@ const select = (state, props) => {
     renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
     videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
     commentsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
-    isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+    isLivestream: selectIsStreamPlaceholderForUri(state, props.uri),
     collection: makeSelectCollectionForId(collectionId)(state),
     collectionId,
     position: makeSelectContentPositionForUri(props.uri)(state),

ui/page/show/index.js

@@ -10,7 +10,7 @@ import {
   makeSelectTitleForUri,
   selectClaimIsMine,
   makeSelectClaimIsPending,
-  makeSelectClaimIsStreamPlaceholder,
+  selectIsStreamPlaceholderForUri,
 } from 'redux/selectors/claims';
 import {
   makeSelectCollectionForId,
@@ -79,7 +79,7 @@ const select = (state, props) => {
     title: makeSelectTitleForUri(uri)(state),
     claimIsMine: selectClaimIsMine(state, claim),
     claimIsPending: makeSelectClaimIsPending(uri)(state),
-    isLivestream: makeSelectClaimIsStreamPlaceholder(uri)(state),
+    isLivestream: selectIsStreamPlaceholderForUri(state, uri),
     collection: makeSelectCollectionForId(collectionId)(state),
     collectionId: collectionId,
     collectionUrls: makeSelectUrlsForCollectionId(collectionId)(state),

ui/redux/selectors/claims.js

@@ -705,14 +705,14 @@ export const makeSelectClaimHasSource = (uri: string) =>
     return Boolean(claim.value.source);
   });
 
-export const makeSelectClaimIsStreamPlaceholder = (uri: string) =>
-  createSelector(makeSelectClaimForUri(uri), (claim) => {
-    if (!claim) {
-      return false;
-    }
+export const isStreamPlaceholderClaim = (claim: ?StreamClaim) => {
+  return claim ? Boolean(claim.value_type === 'stream' && !claim.value.source) : false;
+};
 
-    return Boolean(claim.value_type === 'stream' && !claim.value.source);
-  });
+export const selectIsStreamPlaceholderForUri = (state: State, uri: string) => {
+  const claim = selectClaimForUri(state, uri);
+  return isStreamPlaceholderClaim(claim);
+};
 
 export const selectTotalStakedAmountForChannelUri = createCachedSelector(selectClaimForUri, (claim) => {
   if (!claim || !claim.amount || !claim.meta || !claim.meta.support_amount) {

ui/redux/selectors/livestream.js

@@ -1,5 +1,6 @@
 // @flow
 import { createSelector } from 'reselect';
+import { createCachedSelector } from 're-reselect';
 import { selectMyClaims, selectPendingClaims } from 'redux/selectors/claims';
 
 type State = { livestream: any };
@@ -45,20 +46,16 @@ export const makeSelectPendingLivestreamsForChannelId = (channelId: string) =>
 
 export const selectActiveLivestreams = (state: State) => selectState(state).activeLivestreams;
 
-export const makeSelectIsActiveLivestream = (uri: string) =>
-  createSelector(selectState, (state) => {
-    const activeLivestreamValues = (state.activeLivestreams && Object.values(state.activeLivestreams)) || [];
-    // $FlowFixMe
-    return Boolean(activeLivestreamValues.find((v) => v.latestClaimUri === uri));
-  });
+export const selectIsActiveLivestreamForUri = createCachedSelector(
+  (state, uri) => uri,
+  selectActiveLivestreams,
+  (uri, activeLivestreams) => {
+    if (!uri || !activeLivestreams) {
+      return false;
+    }
 
-export const makeSelectActiveLivestreamUris = (uri: string) =>
-  createSelector(selectState, (state) => {
-    const activeLivestreamValues = (state.activeLivestreams && Object.values(state.activeLivestreams)) || [];
-    const uris = [];
-    activeLivestreamValues.forEach((v) => {
-      // $FlowFixMe
-      if (v.latestClaimUri) uris.push(v.latestClaimUri);
-    });
-    return uris;
-  });
+    const activeLivestreamValues = Object.values(activeLivestreams);
+    // $FlowFixMe - unable to resolve latestClaimUri
+    return activeLivestreamValues.some((v) => v.latestClaimUri === uri);
+  }
+)((state, uri) => String(uri));