0ab5ca080e
## Issue In the `Autoplay` case, if the `WaitUntilOnPage` has already opened the gates previously, the next video's Related will be loaded regardless of scroll position. ## Changes Add a `lastUpdateDate` prop to `WaitUntilOnPage` to allow the parent to reset the gating state. I don't really like the `lastUpdateDate` prop since it's purpose is not intuitive. Is there a standard way to do a "one-time trigger" from the parent?
89 lines
2 KiB
JavaScript
89 lines
2 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import ClaimList from 'component/claimList';
|
|
import Ads from 'web/component/ads';
|
|
import Card from 'component/common/card';
|
|
import WaitUntilOnPage from 'component/common/wait-until-on-page';
|
|
|
|
type Options = {
|
|
related_to: string,
|
|
nsfw?: boolean,
|
|
};
|
|
|
|
type Props = {
|
|
uri: string,
|
|
claim: ?StreamClaim,
|
|
recommendedContent: Array<string>,
|
|
isSearching: boolean,
|
|
search: (string, Options) => void,
|
|
mature: boolean,
|
|
isAuthenticated: boolean,
|
|
};
|
|
|
|
export default class RecommendedContent extends React.PureComponent<Props> {
|
|
constructor() {
|
|
super();
|
|
|
|
this.didSearch = undefined;
|
|
this.lastReset = undefined;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getRecommendedContent();
|
|
}
|
|
|
|
componentDidUpdate(prevProps: Props) {
|
|
const { claim, uri } = this.props;
|
|
|
|
if (uri !== prevProps.uri) {
|
|
this.didSearch = false;
|
|
this.lastReset = Date.now();
|
|
}
|
|
|
|
if (claim && !this.didSearch) {
|
|
this.getRecommendedContent();
|
|
}
|
|
}
|
|
|
|
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 };
|
|
if (claim && !mature) {
|
|
options['nsfw'] = false;
|
|
}
|
|
const { title } = claim.value;
|
|
if (title && options) {
|
|
search(title, options);
|
|
this.didSearch = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
didSearch: ?boolean;
|
|
lastReset: ?any;
|
|
|
|
render() {
|
|
const { recommendedContent, isSearching, isAuthenticated } = this.props;
|
|
|
|
return (
|
|
<Card
|
|
isBodyList
|
|
title={__('Related')}
|
|
body={
|
|
<WaitUntilOnPage lastUpdateDate={this.lastReset}>
|
|
<ClaimList
|
|
isCardBody
|
|
type="small"
|
|
loading={isSearching}
|
|
uris={recommendedContent}
|
|
injectedItem={!isAuthenticated && IS_WEB && <Ads type="video" small />}
|
|
empty={__('No related content found')}
|
|
/>
|
|
</WaitUntilOnPage>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
}
|