Optimize makeSelectClaimIsNsfw (and it's surrounding friends)

ui/component/claimPreview/index.js

@@ -4,7 +4,6 @@ import {
   makeSelectIsUriResolving,
   selectClaimIsMine,
   makeSelectClaimIsPending,
-  makeSelectClaimIsNsfw,
   makeSelectReflectingClaimForUri,
   makeSelectClaimWasPurchased,
   makeSelectClaimIsStreamPlaceholder,
@@ -26,6 +25,7 @@ import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
+import { isClaimNsfw } from 'util/claim';
 import ClaimPreview from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
 
@@ -45,7 +45,7 @@ const select = (state, props) => {
     claimIsMine: props.uri && selectClaimIsMine(state, claim),
     isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
     isResolvingRepost: props.uri && makeSelectIsUriResolving(props.repostUrl)(state),
-    nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
+    nsfw: claim ? isClaimNsfw(claim) : false,
     banState: selectBanStateForUri(state, props.uri),
     hasVisitedUri: props.uri && makeSelectHasVisitedUri(props.uri)(state),
     isSubscribed: props.uri && selectIsSubscribedForUri(state, props.uri),

ui/component/claimPreviewTile/index.js

@@ -4,7 +4,6 @@ import {
   makeSelectIsUriResolving,
   getThumbnailFromClaim,
   makeSelectTitleForUri,
-  makeSelectClaimIsNsfw,
   makeSelectClaimIsStreamPlaceholder,
   selectDateForUri,
 } from 'redux/selectors/claims';
@@ -13,6 +12,7 @@ import { doResolveUri } from 'redux/actions/claims';
 import { selectViewCountForUri, selectBanStateForUri } from 'lbryinc';
 import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
+import { isClaimNsfw } from 'util/claim';
 import ClaimPreviewTile from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
 
@@ -30,7 +30,7 @@ const select = (state, props) => {
     title: props.uri && makeSelectTitleForUri(props.uri)(state),
     banState: selectBanStateForUri(state, props.uri),
     showMature: selectShowMatureContent(state),
-    isMature: makeSelectClaimIsNsfw(props.uri)(state),
+    isMature: claim ? isClaimNsfw(claim) : false,
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
     isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
     viewCount: selectViewCountForUri(state, props.uri),

ui/component/collectionPreviewTile/index.js

@@ -4,7 +4,7 @@ import {
   getThumbnailFromClaim,
   makeSelectTitleForUri,
   makeSelectChannelForClaimUri,
-  makeSelectClaimIsNsfw,
+  selectClaimIsNsfwForUri,
   selectClaimIdForUri,
   makeSelectClaimForClaimId,
 } from 'redux/selectors/claims';
@@ -46,7 +46,7 @@ const select = (state, props) => {
     filteredOutpoints: selectFilteredOutpoints(state),
     blockedChannelUris: selectMutedChannels(state),
     showMature: selectShowMatureContent(state),
-    isMature: makeSelectClaimIsNsfw(collectionUri)(state),
+    isMature: selectClaimIsNsfwForUri(state, collectionUri),
   };
 };
 

ui/component/fileRenderFloating/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { makeSelectTitleForUri, makeSelectClaimIsNsfw, makeSelectClaimWasPurchased } from 'redux/selectors/claims';
+import { makeSelectTitleForUri, selectClaimIsNsfwForUri, makeSelectClaimWasPurchased } from 'redux/selectors/claims';
 import { makeSelectFileInfoForUri, makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
 import {
   makeSelectNextUrlForCollectionAndUrl,
@@ -32,7 +32,7 @@ const select = (state, props) => {
     playingUri,
     title: makeSelectTitleForUri(uri)(state),
     fileInfo: makeSelectFileInfoForUri(uri)(state),
-    mature: makeSelectClaimIsNsfw(uri)(state),
+    mature: selectClaimIsNsfwForUri(state, uri),
     isFloating: makeSelectIsPlayerFloating(props.location)(state),
     streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
     floatingPlayerEnabled: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),

ui/component/fileRenderInitiator/index.js

@@ -10,7 +10,7 @@ import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { withRouter } from 'react-router';
 import {
   makeSelectIsPlaying,
-  makeSelectShouldObscurePreview,
+  selectShouldObscurePreviewForUri,
   makeSelectInsufficientCreditsForUri,
   makeSelectFileRenderModeForUri,
 } from 'redux/selectors/content';
@@ -25,7 +25,7 @@ const select = (state, props) => {
   return {
     claimThumbnail: selectThumbnailForUri(state, props.uri),
     fileInfo: makeSelectFileInfoForUri(props.uri)(state),
-    obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
+    obscurePreview: selectShouldObscurePreviewForUri(state, props.uri),
     isPlaying: makeSelectIsPlaying(props.uri)(state),
     insufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
     autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state),

ui/component/recommendedContent/index.js

@@ -1,14 +1,14 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri } from 'redux/selectors/claims';
 import { doFetchRecommendedContent } from 'redux/actions/search';
-import { makeSelectRecommendedContentForUri, selectIsSearching } from 'redux/selectors/search';
+import { selectRecommendedContentForUri, selectIsSearching } from 'redux/selectors/search';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import RecommendedContent from './view';
 
 const select = (state, props) => {
   const claim = makeSelectClaimForUri(props.uri)(state);
   const { claim_id: claimId } = claim;
-  const recommendedContentUris = makeSelectRecommendedContentForUri(props.uri)(state);
+  const recommendedContentUris = selectRecommendedContentForUri(state, props.uri);
   const nextRecommendedUri = recommendedContentUris && recommendedContentUris[0];
 
   return {

ui/component/viewers/videoViewer/index.js

@@ -16,7 +16,7 @@ import {
 import { selectVolume, selectMute } from 'redux/selectors/app';
 import { savePosition, clearPosition, doPlayUri, doSetPlayingUri } from 'redux/actions/content';
 import { makeSelectContentPositionForUri, makeSelectIsPlayerFloating, selectPlayingUri } from 'redux/selectors/content';
-import { makeSelectRecommendedContentForUri } from 'redux/selectors/search';
+import { selectRecommendedContentForUri } from 'redux/selectors/search';
 import VideoViewer from './view';
 import { withRouter } from 'react-router';
 import { doClaimEligiblePurchaseRewards } from 'redux/actions/rewards';
@@ -44,7 +44,7 @@ const select = (state, props) => {
     nextRecommendedUri = makeSelectNextUrlForCollectionAndUrl(collectionId, uri)(state);
     previousListUri = makeSelectPreviousUrlForCollectionAndUrl(collectionId, uri)(state);
   } else {
-    const recommendedContent = makeSelectRecommendedContentForUri(uri)(state);
+    const recommendedContent = selectRecommendedContentForUri(state, uri);
     nextRecommendedUri = recommendedContent && recommendedContent[0];
   }
 

ui/page/file/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { doSetContentHistoryItem, doSetPrimaryUri, clearPosition } from 'redux/actions/content';
 import { withRouter } from 'react-router-dom';
 import {
-  makeSelectClaimIsNsfw,
+  selectClaimIsNsfwForUri,
   makeSelectTagInClaimOrChannelForUri,
   makeSelectClaimIsStreamPlaceholder,
 } from 'redux/selectors/claims';
@@ -27,7 +27,7 @@ const select = (state, props) => {
     linkedCommentId: urlParams.get('lc'),
     costInfo: makeSelectCostInfoForUri(props.uri)(state),
     obscureNsfw: !selectShowMatureContent(state),
-    isMature: makeSelectClaimIsNsfw(props.uri)(state),
+    isMature: selectClaimIsNsfwForUri(state, props.uri),
     fileInfo: makeSelectFileInfoForUri(props.uri)(state),
     renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
     videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),

ui/redux/actions/search.js

@@ -1,7 +1,7 @@
 // @flow
 import * as ACTIONS from 'constants/action_types';
 import { selectShowMatureContent } from 'redux/selectors/settings';
-import { makeSelectClaimForUri, makeSelectClaimIsNsfw } from 'redux/selectors/claims';
+import { selectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
 import { doResolveUris } from 'redux/actions/claims';
 import { buildURI, isURIValid } from 'util/lbryURI';
 import { batchActions } from 'util/batch-actions';
@@ -131,9 +131,9 @@ export const doUpdateSearchOptions = (newOptions: SearchOptions, additionalOptio
 
 export const doFetchRecommendedContent = (uri: string) => (dispatch: Dispatch, getState: GetState) => {
   const state = getState();
-  const claim = makeSelectClaimForUri(uri)(state);
+  const claim = selectClaimForUri(state, uri);
   const matureEnabled = selectShowMatureContent(state);
-  const claimIsMature = makeSelectClaimIsNsfw(uri)(state);
+  const claimIsMature = selectClaimIsNsfwForUri(state, uri);
 
   if (claim && claim.value && claim.claim_id) {
     const options: SearchOptions = getRecommendationSearchOptions(matureEnabled, claimIsMature, claim.claim_id);

ui/redux/selectors/claims.js

@@ -570,21 +570,16 @@ export const makeSelectOmittedCountForChannel = (uri: string) =>
     }
   );
 
-export const makeSelectClaimIsNsfw = (uri: string) =>
+export const selectClaimIsNsfwForUri = createCachedSelector(
-  createSelector(
+  selectClaimForUri,
-    makeSelectClaimForUri(uri),
+  // Eventually these will come from some list of tags that are considered adult
-    // Eventually these will come from some list of tags that are considered adult
+  // Or possibly come from users settings of what tags they want to hide
-    // Or possibly come from users settings of what tags they want to hide
+  // For now, there is just a hard coded list of tags inside `isClaimNsfw`
-    // For now, there is just a hard coded list of tags inside `isClaimNsfw`
+  // selectNaughtyTags(),
-    // selectNaughtyTags(),
+  (claim: Claim) => {
-    (claim: Claim) => {
+    return claim ? isClaimNsfw(claim) : false;
-      if (!claim) {
+  }
-        return false;
+)((state, uri) => String(uri));
-      }
-
-      return isClaimNsfw(claim);
-    }
-  );
 
 // Returns the associated channel uri for a given claim uri
 // accepts a regular claim uri lbry://something

ui/redux/selectors/content.js

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 import {
   makeSelectClaimForUri,
   selectClaimsByUri,
-  makeSelectClaimIsNsfw,
+  selectClaimIsNsfwForUri,
   makeSelectClaimIsMine,
   makeSelectContentTypeForUri,
 } from 'redux/selectors/claims';
@@ -85,10 +85,11 @@ export const selectRecentHistory = createSelector(selectHistory, (history) => {
   return history.slice(0, RECENT_HISTORY_AMOUNT);
 });
 
-export const makeSelectShouldObscurePreview = (uri: string) =>
+export const selectShouldObscurePreviewForUri = (state: State, uri: string) => {
-  createSelector(selectShowMatureContent, makeSelectClaimIsNsfw(uri), (showMatureContent, isClaimMature) => {
+  const showMatureContent = selectShowMatureContent(state);
-    return isClaimMature && !showMatureContent;
+  const isClaimMature = selectClaimIsNsfwForUri(state, uri);
-  });
+  return isClaimMature && !showMatureContent;
+};
 
 // should probably be in lbry-redux, yarn link was fighting me
 export const makeSelectFileExtensionForUri = (uri: string) =>

ui/redux/selectors/search.js

@@ -6,13 +6,14 @@ import {
   selectClaimsByUri,
   makeSelectClaimForUri,
   makeSelectClaimForClaimId,
-  makeSelectClaimIsNsfw,
+  selectClaimIsNsfwForUri,
   makeSelectPendingClaimForUri,
   makeSelectIsUriResolving,
 } from 'redux/selectors/claims';
 import { parseURI } from 'util/lbryURI';
 import { isClaimNsfw } from 'util/claim';
 import { createSelector } from 'reselect';
+import { createCachedSelector } from 're-reselect';
 import { createNormalizedSearchKey, getRecommendationSearchOptions } from 'util/search';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectHistory } from 'redux/selectors/content';
@@ -51,98 +52,98 @@ export const makeSelectHasReachedMaxResultsLength = (query: string): ((state: St
     return hasReachedMaxResultsLength[query];
   });
 
-export const makeSelectRecommendedContentForUri = (uri: string) =>
+export const selectRecommendedContentForUri = createCachedSelector(
-  createSelector(
+  (state, uri) => uri,
-    selectHistory,
+  selectHistory,
-    selectClaimsByUri,
+  selectClaimsByUri,
-    selectShowMatureContent,
+  selectShowMatureContent,
-    selectMutedChannels,
+  selectMutedChannels,
-    selectAllCostInfoByUri,
+  selectAllCostInfoByUri,
-    selectSearchResultByQuery,
+  selectSearchResultByQuery,
-    makeSelectClaimIsNsfw(uri),
+  selectClaimIsNsfwForUri, // (state, uri)
-    (history, claimsByUri, matureEnabled, blockedChannels, costInfoByUri, searchUrisByQuery, isMature) => {
+  (uri, history, claimsByUri, matureEnabled, blockedChannels, costInfoByUri, searchUrisByQuery, isMature) => {
-      const claim = claimsByUri[uri];
+    const claim = claimsByUri[uri];
 
-      if (!claim) return;
+    if (!claim) return;
 
-      let recommendedContent;
+    let recommendedContent;
-      // always grab the claimId - this value won't change for filtering
+    // always grab the claimId - this value won't change for filtering
-      const currentClaimId = claim.claim_id;
+    const currentClaimId = claim.claim_id;
 
-      const { title } = claim.value;
+    const { title } = claim.value;
 
-      if (!title) return;
+    if (!title) return;
 
-      const options: {
+    const options: {
-        size: number,
+      size: number,
-        nsfw?: boolean,
+      nsfw?: boolean,
-        isBackgroundSearch?: boolean,
+      isBackgroundSearch?: boolean,
-      } = { size: 20, nsfw: matureEnabled, isBackgroundSearch: true };
+    } = { size: 20, nsfw: matureEnabled, isBackgroundSearch: true };
 
-      if (SIMPLE_SITE) {
+    if (SIMPLE_SITE) {
-        options[SEARCH_OPTIONS.CLAIM_TYPE] = SEARCH_OPTIONS.INCLUDE_FILES;
+      options[SEARCH_OPTIONS.CLAIM_TYPE] = SEARCH_OPTIONS.INCLUDE_FILES;
-        options[SEARCH_OPTIONS.MEDIA_VIDEO] = true;
+      options[SEARCH_OPTIONS.MEDIA_VIDEO] = true;
-        options[SEARCH_OPTIONS.PRICE_FILTER_FREE] = true;
+      options[SEARCH_OPTIONS.PRICE_FILTER_FREE] = true;
-      }
-      if (matureEnabled || (!matureEnabled && !isMature)) {
-        options[SEARCH_OPTIONS.RELATED_TO] = claim.claim_id;
-      }
-
-      const searchQuery = getSearchQueryString(title.replace(/\//, ' '), options);
-      const normalizedSearchQuery = createNormalizedSearchKey(searchQuery);
-
-      let searchResult = searchUrisByQuery[normalizedSearchQuery];
-
-      if (searchResult) {
-        // Filter from recommended: The same claim and blocked channels
-        recommendedContent = searchResult['uris'].filter((searchUri) => {
-          const searchClaim = claimsByUri[searchUri];
-
-          if (!searchClaim) return;
-
-          const signingChannel = searchClaim && searchClaim.signing_channel;
-          const channelUri = signingChannel && signingChannel.canonical_url;
-          const blockedMatch = blockedChannels.some((blockedUri) => blockedUri.includes(channelUri));
-
-          let isEqualUri;
-          try {
-            const { claimId: searchId } = parseURI(searchUri);
-            isEqualUri = searchId === currentClaimId;
-          } catch (e) {}
-
-          return !isEqualUri && !blockedMatch;
-        });
-
-        // Claim to play next: playable and free claims not played before in history
-        const nextUriToPlay = recommendedContent.filter((nextRecommendedUri) => {
-          const costInfo = costInfoByUri[nextRecommendedUri] && costInfoByUri[nextRecommendedUri].cost;
-          const recommendedClaim = claimsByUri[nextRecommendedUri];
-          const isVideo = recommendedClaim && recommendedClaim.value && recommendedClaim.value.stream_type === 'video';
-          const isAudio = recommendedClaim && recommendedClaim.value && recommendedClaim.value.stream_type === 'audio';
-
-          let historyMatch = false;
-          try {
-            const { claimId: nextRecommendedId } = parseURI(nextRecommendedUri);
-
-            historyMatch = history.some(
-              (historyItem) =>
-                (claimsByUri[historyItem.uri] && claimsByUri[historyItem.uri].claim_id) === nextRecommendedId
-            );
-          } catch (e) {}
-
-          return !historyMatch && costInfo === 0 && (isVideo || isAudio);
-        })[0];
-
-        const index = recommendedContent.indexOf(nextUriToPlay);
-        if (index > 0) {
-          const a = recommendedContent[0];
-          recommendedContent[0] = nextUriToPlay;
-          recommendedContent[index] = a;
-        }
-      }
-      return recommendedContent;
     }
-  );
+    if (matureEnabled || (!matureEnabled && !isMature)) {
+      options[SEARCH_OPTIONS.RELATED_TO] = claim.claim_id;
+    }
+
+    const searchQuery = getSearchQueryString(title.replace(/\//, ' '), options);
+    const normalizedSearchQuery = createNormalizedSearchKey(searchQuery);
+
+    let searchResult = searchUrisByQuery[normalizedSearchQuery];
+
+    if (searchResult) {
+      // Filter from recommended: The same claim and blocked channels
+      recommendedContent = searchResult['uris'].filter((searchUri) => {
+        const searchClaim = claimsByUri[searchUri];
+
+        if (!searchClaim) return;
+
+        const signingChannel = searchClaim && searchClaim.signing_channel;
+        const channelUri = signingChannel && signingChannel.canonical_url;
+        const blockedMatch = blockedChannels.some((blockedUri) => blockedUri.includes(channelUri));
+
+        let isEqualUri;
+        try {
+          const { claimId: searchId } = parseURI(searchUri);
+          isEqualUri = searchId === currentClaimId;
+        } catch (e) {}
+
+        return !isEqualUri && !blockedMatch;
+      });
+
+      // Claim to play next: playable and free claims not played before in history
+      const nextUriToPlay = recommendedContent.filter((nextRecommendedUri) => {
+        const costInfo = costInfoByUri[nextRecommendedUri] && costInfoByUri[nextRecommendedUri].cost;
+        const recommendedClaim = claimsByUri[nextRecommendedUri];
+        const isVideo = recommendedClaim && recommendedClaim.value && recommendedClaim.value.stream_type === 'video';
+        const isAudio = recommendedClaim && recommendedClaim.value && recommendedClaim.value.stream_type === 'audio';
+
+        let historyMatch = false;
+        try {
+          const { claimId: nextRecommendedId } = parseURI(nextRecommendedUri);
+
+          historyMatch = history.some(
+            (historyItem) =>
+              (claimsByUri[historyItem.uri] && claimsByUri[historyItem.uri].claim_id) === nextRecommendedId
+          );
+        } catch (e) {}
+
+        return !historyMatch && costInfo === 0 && (isVideo || isAudio);
+      })[0];
+
+      const index = recommendedContent.indexOf(nextUriToPlay);
+      if (index > 0) {
+        const a = recommendedContent[0];
+        recommendedContent[0] = nextUriToPlay;
+        recommendedContent[index] = a;
+      }
+    }
+    return recommendedContent;
+  }
+)((state, uri) => String(uri));
 
 export const makeSelectRecommendedRecsysIdForClaimId = (claimId: string) =>
   createSelector(

web/component/ads/index.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
 import { selectTheme } from 'redux/selectors/settings';
-import { makeSelectClaimForUri, makeSelectClaimIsNsfw } from 'redux/selectors/claims';
+import { makeSelectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
 import Ads from './view';
+
 const select = (state, props) => ({
   theme: selectTheme(state),
   claim: makeSelectClaimForUri(props.uri)(state),
-  isMature: makeSelectClaimIsNsfw(props.uri)(state),
+  isMature: selectClaimIsNsfwForUri(state, props.uri),
 });
 
 export default connect(select)(Ads);