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;