refactor and batch-resolve for related content component

src/component/fileListItem/view.js

@@ -40,8 +40,8 @@ class FileListItem extends React.PureComponent {
   };
 
   componentDidMount() {
-    const { claim, resolveUri, uri } = this.props;
-    if (!claim) {
+    const { claim, resolveUri, uri, batchResolve } = this.props;
+    if (!claim && !batchResolve) {
       resolveUri(uri);
     }
   }

src/component/relatedContent/index.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
 import {
+  doResolveUris,
   makeSelectClaimForUri,
   makeSelectRecommendedContentForUri,
   makeSelectTitleForUri,
   selectIsSearching,
 } from 'lbry-redux';
-import { doNativeSearch } from 'redux/actions/performance';
+import { doNativeSearch } from 'redux/actions/native';
 import RelatedContent from './view';
 
 const select = (state, props) => ({
@@ -17,6 +18,7 @@ const select = (state, props) => ({
 
 const perform = dispatch => ({
   search: query => dispatch(doNativeSearch(query, 20, undefined, true)),
+  resolveUris: uris => dispatch(doResolveUris(uris)),
 });
 
 export default connect(

src/component/relatedContent/view.js

@@ -8,45 +8,23 @@ import fileListStyle from 'styles/fileList';
 import relatedContentStyle from 'styles/relatedContent';
 
 export default class RelatedContent extends React.PureComponent {
-  constructor() {
-    super();
-
-    this.didSearch = undefined;
-  }
-
-  componentDidMount() {
-    this.getRecommendedContent();
-  }
+  state = {
+    urlsResolved: false,
+  };
 
   componentDidUpdate(prevProps) {
-    const { claim, uri } = this.props;
+    const { resolveUris, recommendedContent } = this.props;
 
-    if (uri !== prevProps.uri) {
-      this.didSearch = false;
-    }
-
-    if (claim && !this.didSearch) {
-      this.getRecommendedContent();
+    if (recommendedContent && recommendedContent.length > 0 && !this.state.urisResolved) {
+      this.setState({ urisResolved: true }, () => {
+        // batch resolve the uris
+        resolveUris(recommendedContent);
+      });
     }
   }
 
-  getRecommendedContent() {
-    const { search, title } = this.props;
-
-    if (title) {
-      search(title);
-      this.didSearch = true;
-    }
-  }
-
-  didSearch;
-
   render() {
-    const { recommendedContent, isSearching, navigation, uri, fullUri } = this.props;
-
-    if (!isSearching && (!recommendedContent || recommendedContent.length === 0)) {
-      return null;
-    }
+    const { recommendedContent, navigation, uri, fullUri } = this.props;
 
     return (
       <View style={relatedContentStyle.container}>
@@ -59,13 +37,11 @@ export default class RelatedContent extends React.PureComponent {
                 style={fileListStyle.item}
                 key={recommendedUri}
                 uri={recommendedUri}
+                batchResolve
                 navigation={navigation}
                 autoplay
               />
             ))}
-        {isSearching && (
-          <ActivityIndicator size="small" color={Colors.NextLbryGreen} style={relatedContentStyle.loading} />
-        )}
       </View>
     );
   }

src/page/file/index.js

@@ -17,6 +17,7 @@ import {
   makeSelectContentPositionForUri,
   makeSelectContentTypeForUri,
   makeSelectMetadataForUri,
+  makeSelectRecommendedContentForUri,
   makeSelectStreamingUrlForUri,
   makeSelectThumbnailForUri,
   makeSelectTitleForUri,
@@ -26,6 +27,7 @@ import {
   selectPurchasedUris,
   selectFailedPurchaseUris,
   selectPurchaseUriErrorMessage,
+  selectIsSearching,
 } from 'lbry-redux';
 import {
   doClaimEligiblePurchaseRewards,
@@ -42,6 +44,7 @@ import {
   doStopDownloadingFile,
 } from 'redux/actions/file';
 import { doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
+import { doNativeSearch } from 'redux/actions/native';
 import { selectDrawerStack } from 'redux/selectors/drawer';
 import FilePage from './view';
 
@@ -70,6 +73,8 @@ const select = (state, props) => {
     streamingUrl: makeSelectStreamingUrlForUri(contentUri)(state),
     thumbnail: makeSelectThumbnailForUri(contentUri)(state),
     title: makeSelectTitleForUri(contentUri)(state),
+    recommendedContent: makeSelectRecommendedContentForUri(contentUri)(state),
+    isSearchingRecommendContent: selectIsSearching(state),
   };
 };
 
@@ -89,6 +94,7 @@ const perform = dispatch => ({
   purchaseUri: (uri, costInfo, saveFile) => dispatch(doPurchaseUri(uri, costInfo, saveFile)),
   deletePurchasedUri: uri => dispatch(doDeletePurchasedUri(uri)),
   resolveUri: uri => dispatch(doResolveUri(uri)),
+  searchRecommended: query => dispatch(doNativeSearch(query, 20, undefined, true)),
   sendTip: (amount, claimId, isSupport, successCallback, errorCallback) =>
     dispatch(doSendTip(amount, claimId, isSupport, successCallback, errorCallback)),
   setPlayerVisible: () => dispatch(doSetPlayerVisible(true)),

src/page/file/view.js

@@ -85,6 +85,7 @@ class FilePage extends React.PureComponent {
       uriVars: null,
       stopDownloadConfirmed: false,
       streamingMode: false,
+      didSearchRecommended: false,
     };
   }
 
@@ -185,12 +186,25 @@ class FilePage extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    const { claim, contentType, fileInfo, isResolvingUri, resolveUri, navigation } = this.props;
+    const {
+      claim,
+      contentType,
+      fileInfo,
+      isResolvingUri,
+      resolveUri,
+      navigation,
+      searchRecommended,
+      title,
+    } = this.props;
     const { uri } = this.state;
     if (!isResolvingUri && claim === undefined && uri) {
       resolveUri(uri);
     }
 
+    if (title && !this.state.didSearchRecommended) {
+      this.setState({ didSearchRecommended: true }, () => searchRecommended(title));
+    }
+
     // Returned to the page. If mediaLoaded, and currentMediaInfo is different, update
     if (this.state.mediaLoaded && window.currentMediaInfo && window.currentMediaInfo.uri !== this.state.uri) {
       const { metadata } = this.props;
@@ -607,6 +621,8 @@ class FilePage extends React.PureComponent {
       navigation,
       position,
       purchaseUri,
+      isSearchingRecommendContent,
+      recommendedContent,
       thumbnail,
       title,
     } = this.props;
@@ -1105,7 +1121,13 @@ class FilePage extends React.PureComponent {
                 )}
 
                 <View onLayout={this.setRelatedContentPosition} />
-                <RelatedContent navigation={navigation} uri={uri} fullUri={fullUri} />
+
+                {isSearchingRecommendContent && (
+                  <ActivityIndicator size="small" color={Colors.NextLbryGreen} style={filePageStyle.relatedLoading} />
+                )}
+                {!isSearchingRecommendContent && recommendedContent && recommendedContent.length > 0 && (
+                  <RelatedContent navigation={navigation} uri={uri} fullUri={fullUri} />
+                )}
               </ScrollView>
             </View>
           )}

src/styles/filePage.js

@@ -435,6 +435,9 @@ const filePageStyle = StyleSheet.create({
     fontSize: 16,
     marginTop: 4,
   },
+  relatedLoading: {
+    marginTop: 16,
+  },
 });
 
 export default filePageStyle;