lbry-desktop/ui/component/recommendedContent/view.jsx

84 lines
1.8 KiB
React
Raw Normal View History

// @flow
import React from 'react';
2019-06-19 07:05:43 +02:00
import ClaimList from 'component/claimList';
import Ads from 'web/component/ads';
2020-04-29 21:31:11 +02:00
import Card from 'component/common/card';
2020-01-28 23:05:44 +01:00
type Options = {
related_to: string,
nsfw?: boolean,
};
type Props = {
uri: string,
2019-04-24 16:02:08 +02:00
claim: ?StreamClaim,
2018-08-03 20:28:11 +02:00
recommendedContent: Array<string>,
isSearching: boolean,
2020-01-28 23:05:44 +01:00
search: (string, Options) => void,
mature: boolean,
2020-03-26 22:47:07 +01:00
isAuthenticated: boolean,
};
2018-08-14 05:52:09 +02:00
export default class RecommendedContent extends React.PureComponent<Props> {
2018-08-03 20:28:11 +02:00
constructor() {
super();
2018-08-09 18:41:14 +02:00
this.didSearch = undefined;
2018-08-03 20:28:11 +02:00
}
componentDidMount() {
2018-08-03 20:28:11 +02:00
this.getRecommendedContent();
}
2018-08-03 20:28:11 +02:00
componentDidUpdate(prevProps: Props) {
const { claim, uri } = this.props;
2018-08-03 20:28:11 +02:00
if (uri !== prevProps.uri) {
2018-08-09 18:41:14 +02:00
this.didSearch = false;
2018-08-03 20:28:11 +02:00
}
2018-08-09 18:41:14 +02:00
if (claim && !this.didSearch) {
2018-08-03 20:28:11 +02:00
this.getRecommendedContent();
}
}
2018-08-03 20:28:11 +02:00
getRecommendedContent() {
const { claim, search, mature } = this.props;
if (claim && claim.value && claim.claim_id) {
const options: Options = { size: 20, related_to: claim.claim_id, isBackgroundSearch: true };
2020-01-28 23:05:44 +01:00
if (claim && !mature) {
options['nsfw'] = false;
}
2019-04-24 16:02:08 +02:00
const { title } = claim.value;
2020-01-28 23:05:44 +01:00
if (title && options) {
search(title, options);
2019-04-24 16:02:08 +02:00
this.didSearch = true;
}
}
2018-08-03 20:28:11 +02:00
}
2018-08-09 18:41:14 +02:00
didSearch: ?boolean;
2018-08-03 20:28:11 +02:00
render() {
2020-03-26 22:47:07 +01:00
const { recommendedContent, isSearching, isAuthenticated } = this.props;
return (
2020-04-29 21:31:11 +02:00
<Card
isBodyList
title={__('Related')}
body={
<ClaimList
isCardBody
type="small"
loading={isSearching}
uris={recommendedContent}
injectedItem={!isAuthenticated && IS_WEB && <Ads type="video" small />}
empty={__('No related content found')}
/>
}
2020-01-02 21:36:03 +01:00
/>
);
}
}