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,11 @@
 import { connect } from 'react-redux';
 import {
+  doResolveUris,
   makeSelectClaimForUri,
   makeSelectRecommendedContentForUri,
   makeSelectTitleForUri,
   selectIsSearching,
 } from 'lbry-redux';
-import { doNativeSearch } from 'redux/actions/performance';
 import RelatedContent from './view';
 
 const select = (state, props) => ({
@@ -16,7 +16,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

@@ -8,6 +8,7 @@ import {
   doPurchaseUri,
   doDeletePurchasedUri,
   doResolveUri,
+  doSearch,
   doSendTip,
   doToast,
   makeSelectIsUriResolving,
@@ -17,6 +18,7 @@ import {
   makeSelectContentPositionForUri,
   makeSelectContentTypeForUri,
   makeSelectMetadataForUri,
+  makeSelectRecommendedContentForUri,
   makeSelectStreamingUrlForUri,
   makeSelectThumbnailForUri,
   makeSelectTitleForUri,
@@ -26,6 +28,7 @@ import {
   selectPurchasedUris,
   selectFailedPurchaseUris,
   selectPurchaseUriErrorMessage,
+  selectIsSearching,
 } from 'lbry-redux';
 import {
   doClaimEligiblePurchaseRewards,
@@ -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(doSearch(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} />
+
+                {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/redux/actions/performance.js

@@ -1,95 +0,0 @@
-// @flow
-import { NativeModules } from 'react-native';
-import {
-  ACTIONS,
-  batchActions,
-  buildURI,
-  doResolveUri,
-  doUpdateSearchQuery,
-  makeSelectSearchUris,
-  selectSuggestions,
-  makeSelectQueryWithOptions,
-  selectSearchValue,
-} from 'lbry-redux';
-
-let CONNECTION_STRING = 'https://lighthouse.lbry.com/';
-
-const handleNativeFetchResponse = str => {
-  const json = JSON.parse(str);
-  if (json.error) {
-    return Promise.reject(new Error(json.error));
-  }
-
-  return Promise.resolve(json);
-};
-
-// Use a native asyncTask to call the lighthouse api
-export const doNativeSearch = (
-  rawQuery: string, // pass in a query if you don't want to search for what's in the search bar
-  size: ?number, // only pass in if you don't want to use the users setting (ex: related content)
-  from: ?number,
-  isBackgroundSearch: boolean = false
-) => (dispatch: Dispatch, getState: GetState) => {
-  const query = rawQuery.replace(/^lbry:\/\//i, '').replace(/\//, ' ');
-
-  if (!query) {
-    dispatch({
-      type: ACTIONS.SEARCH_FAIL,
-    });
-    return;
-  }
-
-  const state = getState();
-  const queryWithOptions = makeSelectQueryWithOptions(query, size, from, isBackgroundSearch)(state);
-
-  // If we have already searched for something, we don't need to do anything
-  const urisForQuery = makeSelectSearchUris(queryWithOptions)(state);
-  if (urisForQuery && !!urisForQuery.length) {
-    return;
-  }
-
-  dispatch({
-    type: ACTIONS.SEARCH_START,
-  });
-
-  // If the user is on the file page with a pre-populated uri and they select
-  // the search option without typing anything, searchQuery will be empty
-  // We need to populate it so the input is filled on the search page
-  // isBackgroundSearch means the search is happening in the background, don't update the search query
-  if (!state.search.searchQuery && !isBackgroundSearch) {
-    dispatch(doUpdateSearchQuery(query));
-  }
-
-  const url = `${CONNECTION_STRING}search?${queryWithOptions}`;
-  NativeModules.Requests.get(url)
-    .then(handleNativeFetchResponse)
-    .then((data: Array<{ name: String, claimId: string }>) => {
-      const uris = [];
-      const actions = [];
-
-      data.forEach(result => {
-        if (result.name) {
-          const uri = buildURI({
-            claimName: result.name,
-            claimId: result.claimId,
-          });
-          actions.push(doResolveUri(uri));
-          uris.push(uri);
-        }
-      });
-
-      actions.push({
-        type: ACTIONS.SEARCH_SUCCESS,
-        data: {
-          query: queryWithOptions,
-          uris,
-        },
-      });
-      dispatch(batchActions(...actions));
-    })
-    .catch(e => {
-      dispatch({
-        type: ACTIONS.SEARCH_FAIL,
-      });
-    });
-};

src/styles/filePage.js

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