diff --git a/src/component/relatedContent/index.js b/src/component/relatedContent/index.js index 7dd415c..6cb46de 100644 --- a/src/component/relatedContent/index.js +++ b/src/component/relatedContent/index.js @@ -1,25 +1,27 @@ import { connect } from 'react-redux'; import { doResolveUris, + doSearch, makeSelectClaimForUri, makeSelectRecommendedContentForUri, - makeSelectTitleForUri, + selectResolvingUris, selectIsSearching, } from 'lbry-redux'; import RelatedContent from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), - recommendedContent: makeSelectRecommendedContentForUri(props.uri)(state), - title: makeSelectTitleForUri(props.uri)(state), isSearching: selectIsSearching(state), + recommendedContent: makeSelectRecommendedContentForUri(props.uri)(state), + resolvingUris: selectResolvingUris(state), }); const perform = dispatch => ({ resolveUris: uris => dispatch(doResolveUris(uris)), + searchRecommended: query => dispatch(doSearch(query, 20, undefined, true)), }); export default connect( select, - perform + perform, )(RelatedContent); diff --git a/src/component/relatedContent/view.js b/src/component/relatedContent/view.js index 8f626f8..639587c 100644 --- a/src/component/relatedContent/view.js +++ b/src/component/relatedContent/view.js @@ -8,20 +8,54 @@ import fileListStyle from 'styles/fileList'; import relatedContentStyle from 'styles/relatedContent'; export default class RelatedContent extends React.PureComponent { + state = { + resolveStarted: false, + }; + componentDidMount() { + const { title, searchRecommended } = this.props; + if (title) { + searchRecommended(title); + } + } + + shouldComponentUpdate(nextProps, nextState) { + const { isSearching, recommendedContent } = nextProps; + return isSearching || (!isSearching && this.allContentResolved()); + } + + allContentResolved() { + const { recommendedContent, resolvingUris } = this.props; + if (recommendedContent) { + let allResolved = true; + recommendedContent.forEach(uri => { + allResolved = allResolved && !resolvingUris.includes(uri); + }); + return allResolved; + } + + return false; + } + + componentDidUpdate() { const { resolveUris, recommendedContent } = this.props; - if (recommendedContent && recommendedContent.length > 0) { - // batch resolve the uris - resolveUris(recommendedContent); + if (!this.state.resolveStarted) { + this.setState({ resolveStarted: true }, () => { + if (recommendedContent && recommendedContent.length > 0) { + // batch resolve the uris + resolveUris(recommendedContent); + } + }); } } render() { - const { recommendedContent, navigation, uri, fullUri } = this.props; + const { isSearching, recommendedContent, navigation, uri, fullUri } = this.props; return ( {__('Related Content')} + {isSearching && } {recommendedContent && recommendedContent .filter(recommendedUri => recommendedUri !== normalizeURI(fullUri)) diff --git a/src/page/file/index.js b/src/page/file/index.js index 36dd480..099079a 100644 --- a/src/page/file/index.js +++ b/src/page/file/index.js @@ -9,7 +9,6 @@ import { doDeletePurchasedUri, doResolveUri, doResolveUris, - doSearch, doSendTip, doToast, makeSelectIsUriResolving, @@ -19,7 +18,6 @@ import { makeSelectContentPositionForUri, makeSelectContentTypeForUri, makeSelectMetadataForUri, - makeSelectRecommendedContentForUri, makeSelectStreamingUrlForUri, makeSelectThumbnailForUri, makeSelectTitleForUri, @@ -29,7 +27,6 @@ import { selectPurchasedUris, selectFailedPurchaseUris, selectPurchaseUriErrorMessage, - selectResolvingUris, selectIsSearching, } from 'lbry-redux'; import { @@ -72,8 +69,6 @@ const select = (state, props) => { streamingUrl: makeSelectStreamingUrlForUri(contentUri)(state), thumbnail: makeSelectThumbnailForUri(contentUri)(state), title: makeSelectTitleForUri(contentUri)(state), - recommendedContent: makeSelectRecommendedContentForUri(contentUri)(state), - resolvingUris: selectResolvingUris(state), isSearchingRecommendContent: selectIsSearching(state), viewCount: makeSelectViewCountForUri(contentUri)(state), }; @@ -98,7 +93,6 @@ const perform = dispatch => ({ deletePurchasedUri: uri => dispatch(doDeletePurchasedUri(uri)), resolveUri: uri => dispatch(doResolveUri(uri)), resolveUris: uris => dispatch(doResolveUris(uris)), - 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)), @@ -108,5 +102,5 @@ const perform = dispatch => ({ export default connect( select, - perform + perform, )(FilePage); diff --git a/src/page/file/view.js b/src/page/file/view.js index 0cc1156..4f991d7 100644 --- a/src/page/file/view.js +++ b/src/page/file/view.js @@ -87,6 +87,7 @@ class FilePage extends React.PureComponent { playerHeight: 0, uri: null, uriVars: null, + showRecommended: false, stopDownloadConfirmed: false, streamingMode: false, viewCountFetched: false, @@ -339,7 +340,7 @@ class FilePage extends React.PureComponent { }, }, ], - { cancelable: true } + { cancelable: true }, ); }; @@ -375,7 +376,7 @@ class FilePage extends React.PureComponent { }, }, ], - { cancelable: true } + { cancelable: true }, ); }; @@ -524,7 +525,6 @@ class FilePage extends React.PureComponent { }; onPlaybackStarted = () => { - const { searchRecommended, title } = this.props; let timeToStartMillis, timeToStart; if (this.startTime) { timeToStartMillis = Date.now() - this.startTime; @@ -544,9 +544,7 @@ class FilePage extends React.PureComponent { NativeModules.Firebase.track('play', payload); // only fetch recommended content after playback has started - if (title) { - searchRecommended(title); - } + this.setState({ showRecommended: true }); }; onPlaybackFinished = () => { @@ -652,7 +650,7 @@ class FilePage extends React.PureComponent { () => { purchaseUri(claim.permanent_url, costInfo, true); NativeModules.UtilityModule.checkDownloads(); - } + }, ); }; @@ -689,7 +687,7 @@ class FilePage extends React.PureComponent { ], showImageViewer: true, }, - () => pushDrawerStack(Constants.DRAWER_ROUTE_FILE_VIEW) + () => pushDrawerStack(Constants.DRAWER_ROUTE_FILE_VIEW), ); } } @@ -700,7 +698,7 @@ class FilePage extends React.PureComponent { { showWebView: true, }, - () => pushDrawerStack(Constants.DRAWER_ROUTE_FILE_VIEW) + () => pushDrawerStack(Constants.DRAWER_ROUTE_FILE_VIEW), ); } } @@ -737,6 +735,8 @@ class FilePage extends React.PureComponent { const myChannelUris = channels ? channels.map(channel => channel.permanent_url) : []; const ownedClaim = myClaimUris.includes(uri) || myChannelUris.includes(uri); + console.log('calling render...'); + let innerContent = null; if ((isResolvingUri && !claim) || !claim) { return ( @@ -794,7 +794,7 @@ class FilePage extends React.PureComponent { {__( - 'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.' + 'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.', )} @@ -882,6 +882,8 @@ class FilePage extends React.PureComponent { return ( {!this.state.fullscreenMode && } + {innerContent} + {this.state.showWebView && isWebViewable && ( )} @@ -892,7 +894,7 @@ class FilePage extends React.PureComponent { renderIndicator={() => null} /> )} - {!this.state.showWebView && ( + {!innerContent && !this.state.showWebView && ( - {(this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && ( + {!innerContent && (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && ( { @@ -970,10 +972,10 @@ class FilePage extends React.PureComponent { }} /> )} - {(this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && this.state.fullscreenMode && ( - - )} - {(this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && ( + {!innerContent && + (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && + this.state.fullscreenMode && } + {!innerContent && (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && ( { @@ -998,195 +1000,194 @@ class FilePage extends React.PureComponent { /> )} - { - this.scrollView = ref; - }} - > - this.setState({ showDescription: !this.state.showDescription })} + {!innerContent && ( + { + this.scrollView = ref; + }} > - - - - {title} - - {isRewardContent && } - - - - - - {viewCount === 1 && __('%view% view', { view: viewCount })} - {viewCount > 1 && __('%view% views', { view: viewCount })} - - - - - - - - {__('Share')} - - - this.setState({ showTipView: true })} + this.setState({ showDescription: !this.state.showDescription })} > - - {__('Tip')} - - - {!canEdit && !isPlayable && ( - - {!fileInfo || - (fileInfo.written_bytes <= 0 && !completed && ( - - - {__('Download')} - - ))} - - {!completed && - fileInfo && - !fileInfo.stopped && - fileInfo.written_bytes > 0 && - fileInfo.written_bytes < fileInfo.total_bytes && - !this.state.stopDownloadConfirmed && ( - - - {__('Stop')} - - )} - - {completed && fileInfo && fileInfo.written_bytes >= fileInfo.total_bytes && ( - - - {__('Open')} - - )} + + + + {title} + + {isRewardContent && } + + + + + + {viewCount === 1 && __('%view% view', { view: viewCount })} + {viewCount > 1 && __('%view% views', { view: viewCount })} + - )} + + + + + + {__('Share')} + - {!canEdit && ( Linking.openURL(`https://lbry.com/dmca/${claim.claim_id}`)} + onPress={() => this.setState({ showTipView: true })} > - - {__('Report')} + + {__('Tip')} - )} - {canEdit && ( - - - {__('Edit')} - - )} + {!canEdit && !isPlayable && ( + + {!fileInfo || + (fileInfo.written_bytes <= 0 && !completed && ( + + + {__('Download')} + + ))} - {(completed || canEdit) && ( - - - {__('Delete')} - - )} - + {!completed && + fileInfo && + !fileInfo.stopped && + fileInfo.written_bytes > 0 && + fileInfo.written_bytes < fileInfo.total_bytes && + !this.state.stopDownloadConfirmed && ( + + + {__('Stop')} + + )} - - - {channelName && ( - { - navigateToUri( - navigation, - normalizeURI(shortChannelUri || fullChannelUri), - null, - false, - fullChannelUri - ); - }} - /> - )} - {!channelName && ( - - {__('Anonymous')} - - )} - - - - {false && ((isPlayable && !fileInfo) || (isPlayable && fileInfo && !fileInfo.download_path)) && ( -