tweak related content view for perf. fix displayed dates.

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);

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 (!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 (
       <View style={relatedContentStyle.container}>
         <Text style={relatedContentStyle.title}>{__('Related Content')}</Text>
+        {isSearching && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
         {recommendedContent &&
           recommendedContent
             .filter(recommendedUri => recommendedUri !== normalizeURI(fullUri))

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);

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) {
+    this.setState({ showRecommended: true });
-      searchRecommended(title);
-    }
   };
 
   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 {
         <View style={filePageStyle.dmcaContainer}>
           <Text style={filePageStyle.dmcaText}>
             {__(
-              '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.',
             )}
           </Text>
           <Link style={filePageStyle.dmcaLink} href="https://lbry.com/faq/dmca" text={__('Read More')} />
@@ -882,6 +882,8 @@ class FilePage extends React.PureComponent {
     return (
       <View style={filePageStyle.pageContainer}>
         {!this.state.fullscreenMode && <UriBar value={uri} navigation={navigation} />}
+        {innerContent}
+
         {this.state.showWebView && isWebViewable && (
           <WebView allowFileAccess source={{ uri: localFileUri }} style={filePageStyle.viewer} />
         )}
@@ -892,7 +894,7 @@ class FilePage extends React.PureComponent {
             renderIndicator={() => null}
           />
         )}
-        {!this.state.showWebView && (
+        {!innerContent && !this.state.showWebView && (
           <View
             style={
               this.state.fullscreenMode ? filePageStyle.innerPageContainerFsMode : filePageStyle.innerPageContainer
@@ -957,7 +959,7 @@ class FilePage extends React.PureComponent {
                 <Icon name={'arrow-left'} size={18} style={filePageStyle.backButtonIcon} />
               </TouchableOpacity>
             </TouchableOpacity>
-            {(this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && (
+            {!innerContent && (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && (
               <View
                 style={playerBgStyle}
                 ref={ref => {
@@ -970,10 +972,10 @@ class FilePage extends React.PureComponent {
                 }}
               />
             )}
-            {(this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && this.state.fullscreenMode && (
+            {!innerContent &&
-              <View style={fsPlayerBgStyle} />
+              (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) &&
-            )}
+              this.state.fullscreenMode && <View style={fsPlayerBgStyle} />}
-            {(this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && (
+            {!innerContent && (this.state.streamingMode || (canLoadMedia && fileInfo && isPlayable)) && (
               <MediaPlayer
                 claim={claim}
                 assignPlayer={ref => {
@@ -998,6 +1000,7 @@ class FilePage extends React.PureComponent {
               />
             )}
 
+            {!innerContent && (
               <ScrollView
                 style={filePageStyle.scrollContainer}
                 contentContainerstyle={showActions ? null : filePageStyle.scrollContent}
@@ -1112,7 +1115,7 @@ class FilePage extends React.PureComponent {
                             normalizeURI(shortChannelUri || fullChannelUri),
                             null,
                             false,
-                          fullChannelUri
+                            fullChannelUri,
                           );
                         }}
                       />
@@ -1125,7 +1128,7 @@ class FilePage extends React.PureComponent {
                     <DateTime
                       style={filePageStyle.publishDate}
                       textStyle={filePageStyle.publishDateText}
-                    uri={uri}
+                      uri={fullUri}
                       formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}
                       show={DateTime.SHOW_DATE}
                     />
@@ -1180,13 +1183,11 @@ class FilePage extends React.PureComponent {
 
                 <View onLayout={this.setRelatedContentPosition} />
 
-              {isSearchingRecommendContent && (
+                {this.state.showRecommended && (
-                <ActivityIndicator size="small" color={Colors.NextLbryGreen} style={filePageStyle.relatedLoading} />
+                  <RelatedContent navigation={navigation} title={title} uri={fullUri} fullUri={fullUri} />
-              )}
-              {!isSearchingRecommendContent && recommendedContent && recommendedContent.length > 0 && (
-                <RelatedContent navigation={navigation} uri={uri} fullUri={fullUri} />
                 )}
               </ScrollView>
+            )}
           </View>
         )}
         {this.state.showTipView && (