src/component/claimResultItem/index.js

@@ -12,7 +12,7 @@ import {
 } from 'lbry-redux';
 import { selectBlackListedOutpoints, selectFilteredOutpoints, selectRewardContentClaimIds } from 'lbryinc';
 import { selectShowNsfw } from 'redux/selectors/settings';
-import FileResultItem from './view';
+import ClaimResultItem from './view';
 
 const select = (state, props) => ({
   blackListedOutpoints: selectBlackListedOutpoints(state),
@@ -37,4 +37,4 @@ const perform = dispatch => ({
 export default connect(
   select,
   perform,
-)(FileResultItem);
+)(ClaimResultItem);

src/component/claimResultItem/view.js

@@ -15,17 +15,27 @@ import Link from 'component/link';
 import NsfwOverlay from 'component/nsfwOverlay';
 import ProgressBar from 'component/progressBar';
 import fileListStyle from 'styles/fileList';
+import seedrandom from 'seedrandom';
 
-class FileResultItem extends React.PureComponent {
+class ClaimResultItem extends React.PureComponent {
   state = {
     autoStyle: null,
   };
 
   componentDidMount() {
-    this.setState({
-      autoStyle:
-        ChannelIconItem.AUTO_THUMB_STYLES[Math.floor(Math.random() * ChannelIconItem.AUTO_THUMB_STYLES.length)],
-    });
+    const { result } = this.props;
+
+    if (!result || !result.name || !result.claimId) {
+      this.setState({
+        autoStyle:
+          ChannelIconItem.AUTO_THUMB_STYLES[Math.floor(Math.random() * ChannelIconItem.AUTO_THUMB_STYLES.length)],
+      });
+    } else {
+      // result property set, use deterministic random style
+      const rng = seedrandom(normalizeURI(`${result.name}#${result.claimId}`));
+      const index = Math.floor(rng.quick() * ChannelIconItem.AUTO_THUMB_STYLES.length);
+      this.setState({ autoStyle: ChannelIconItem.AUTO_THUMB_STYLES[index] });
+    }
   }
 
   onPressHandler = () => {
@@ -169,4 +179,4 @@ class FileResultItem extends React.PureComponent {
   }
 }
 
-export default FileResultItem;
+export default ClaimResultItem;

src/component/relatedContent/view.js

@@ -4,7 +4,7 @@ import { normalizeURI } from 'lbry-redux';
 import { navigateToUri } from 'utils/helper';
 import Colors from 'styles/colors';
 import FileListItem from 'component/fileListItem';
-import FileResultItem from 'component/fileResultItem';
+import ClaimResultItem from 'component/claimResultItem';
 import fileListStyle from 'styles/fileList';
 import relatedContentStyle from 'styles/relatedContent';
 
@@ -30,7 +30,7 @@ export default class RelatedContent extends React.PureComponent {
         {isSearching && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
         {recommendedContent &&
           recommendedContent.map(result => (
-            <FileResultItem
+            <ClaimResultItem
               style={fileListStyle.item}
               key={result.claimId}
               result={result}

src/page/search/view.js

@@ -15,7 +15,7 @@ import Colors from 'styles/colors';
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import PageHeader from 'component/pageHeader';
 import FileListItem from 'component/fileListItem';
-import FileResultItem from 'component/fileResultItem';
+import ClaimResultItem from 'component/claimResultItem';
 import FloatingWalletBalance from 'component/floatingWalletBalance';
 import UriBar from 'component/uriBar';
 import searchStyle from 'styles/search';
@@ -213,7 +213,12 @@ class SearchPage extends React.PureComponent {
             ListEmptyComponent={!isSearching ? this.listEmptyComponent() : null}
             ListHeaderComponent={this.listHeaderComponent(this.state.showTagResult, this.state.currentQuery)}
             renderItem={({ item }) => (
-              <FileResultItem key={item.claimId} result={item} style={searchStyle.resultItem} navigation={navigation} />
+              <ClaimResultItem
+                key={item.claimId}
+                result={item}
+                style={searchStyle.resultItem}
+                navigation={navigation}
+              />
             )}
           />
         )}