diff --git a/src/component/fileListItem/view.js b/src/component/fileListItem/view.js
index 08bbfda..797ea8c 100644
--- a/src/component/fileListItem/view.js
+++ b/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);
}
}
diff --git a/src/component/relatedContent/index.js b/src/component/relatedContent/index.js
index 3d75163..bed3f06 100644
--- a/src/component/relatedContent/index.js
+++ b/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(
diff --git a/src/component/relatedContent/view.js b/src/component/relatedContent/view.js
index 0e3a313..b468454 100644
--- a/src/component/relatedContent/view.js
+++ b/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 (
@@ -59,13 +37,11 @@ export default class RelatedContent extends React.PureComponent {
style={fileListStyle.item}
key={recommendedUri}
uri={recommendedUri}
+ batchResolve
navigation={navigation}
autoplay
/>
))}
- {isSearching && (
-
- )}
);
}
diff --git a/src/page/file/index.js b/src/page/file/index.js
index c846935..4d0fe35 100644
--- a/src/page/file/index.js
+++ b/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)),
diff --git a/src/page/file/view.js b/src/page/file/view.js
index 7ad23bb..053d527 100644
--- a/src/page/file/view.js
+++ b/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 {
)}
-
+
+ {isSearchingRecommendContent && (
+
+ )}
+ {!isSearchingRecommendContent && recommendedContent && recommendedContent.length > 0 && (
+
+ )}
)}
diff --git a/src/redux/actions/performance.js b/src/redux/actions/native.js
similarity index 100%
rename from src/redux/actions/performance.js
rename to src/redux/actions/native.js
diff --git a/src/styles/filePage.js b/src/styles/filePage.js
index 58d71eb..77ff2a0 100644
--- a/src/styles/filePage.js
+++ b/src/styles/filePage.js
@@ -435,6 +435,9 @@ const filePageStyle = StyleSheet.create({
fontSize: 16,
marginTop: 4,
},
+ relatedLoading: {
+ marginTop: 16,
+ },
});
export default filePageStyle;