diff --git a/src/component/fileResultItem/index.js b/src/component/claimResultItem/index.js similarity index 95% rename from src/component/fileResultItem/index.js rename to src/component/claimResultItem/index.js index f1bff41..4a44701 100644 --- a/src/component/fileResultItem/index.js +++ b/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); diff --git a/src/component/fileResultItem/view.js b/src/component/claimResultItem/view.js similarity index 89% rename from src/component/fileResultItem/view.js rename to src/component/claimResultItem/view.js index ecf2e8c..1f55801 100644 --- a/src/component/fileResultItem/view.js +++ b/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; diff --git a/src/component/relatedContent/view.js b/src/component/relatedContent/view.js index e0830f4..f5ab361 100644 --- a/src/component/relatedContent/view.js +++ b/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 && } {recommendedContent && recommendedContent.map(result => ( - ( - + )} /> )}