diff --git a/ui/component/fileRenderFloating/index.js b/ui/component/fileRenderFloating/index.js index 4f2a2f37b..106a369af 100644 --- a/ui/component/fileRenderFloating/index.js +++ b/ui/component/fileRenderFloating/index.js @@ -1,5 +1,11 @@ import { connect } from 'react-redux'; -import { makeSelectFileInfoForUri, makeSelectTitleForUri, makeSelectStreamingUrlForUri, SETTINGS } from 'lbry-redux'; +import { + makeSelectFileInfoForUri, + makeSelectTitleForUri, + makeSelectStreamingUrlForUri, + makeSelectClaimIsNsfw, + SETTINGS, +} from 'lbry-redux'; import { makeSelectIsPlayerFloating, selectPrimaryUri, @@ -8,6 +14,7 @@ import { } from 'redux/selectors/content'; import { makeSelectClientSetting } from 'redux/selectors/settings'; import { doSetPlayingUri } from 'redux/actions/content'; +import { doFetchRecommendedContent } from 'redux/actions/search'; import { withRouter } from 'react-router'; import FileRenderFloating from './view'; @@ -22,6 +29,7 @@ const select = (state, props) => { playingUri, title: makeSelectTitleForUri(uri)(state), fileInfo: makeSelectFileInfoForUri(uri)(state), + mature: makeSelectClaimIsNsfw(props.uri)(state), isFloating: makeSelectIsPlayerFloating(props.location)(state), streamingUrl: makeSelectStreamingUrlForUri(uri)(state), floatingPlayerEnabled: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state), @@ -30,8 +38,9 @@ const select = (state, props) => { }; }; -const perform = dispatch => ({ +const perform = (dispatch) => ({ closeFloatingPlayer: () => dispatch(doSetPlayingUri({ uri: null })), + doFetchRecommendedContent: (uri, mature) => dispatch(doFetchRecommendedContent(uri, mature)), }); export default withRouter(connect(select, perform)(FileRenderFloating)); diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index bc022e16e..24c1002bc 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/ui/component/fileRenderFloating/view.jsx @@ -22,6 +22,7 @@ export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper'; type Props = { isFloating: boolean, fileInfo: FileListItem, + mature: boolean, uri: string, streamingUrl?: string, title: ?string, @@ -31,11 +32,13 @@ type Props = { playingUri: ?PlayingUri, primaryUri: ?string, videoTheaterMode: boolean, + doFetchRecommendedContent: (string, boolean) => void, }; export default function FileRenderFloating(props: Props) { const { fileInfo, + mature, uri, streamingUrl, title, @@ -46,6 +49,7 @@ export default function FileRenderFloating(props: Props) { playingUri, primaryUri, videoTheaterMode, + doFetchRecommendedContent, } = props; const { location: { pathname }, @@ -201,6 +205,12 @@ export default function FileRenderFloating(props: Props) { }; }, [uri]); + useEffect(() => { + if (isFloating) { + doFetchRecommendedContent(uri, mature); + } + }, [uri, mature, isFloating]); + if (!isPlayable || !uri || (isFloating && (isMobile || !floatingPlayerEnabled))) { return null; } diff --git a/ui/component/recommendedContent/index.js b/ui/component/recommendedContent/index.js index c6cedd6b5..63059b4c8 100644 --- a/ui/component/recommendedContent/index.js +++ b/ui/component/recommendedContent/index.js @@ -1,13 +1,12 @@ import { connect } from 'react-redux'; -import { makeSelectClaimForUri, makeSelectClaimIsNsfw } from 'lbry-redux'; -import { doSearch } from 'redux/actions/search'; +import { makeSelectClaimIsNsfw } from 'lbry-redux'; +import { doFetchRecommendedContent } from 'redux/actions/search'; import { makeSelectRecommendedContentForUri, selectIsSearching } from 'redux/selectors/search'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; import { makeSelectNextUnplayedRecommended } from 'redux/selectors/content'; import RecommendedVideos from './view'; const select = (state, props) => ({ - claim: makeSelectClaimForUri(props.uri)(state), mature: makeSelectClaimIsNsfw(props.uri)(state), recommendedContent: makeSelectRecommendedContentForUri(props.uri)(state), nextRecommendedUri: makeSelectNextUnplayedRecommended(props.uri)(state), @@ -16,7 +15,7 @@ const select = (state, props) => ({ }); const perform = (dispatch) => ({ - search: (query, options) => dispatch(doSearch(query, options)), + doFetchRecommendedContent: (uri, mature) => dispatch(doFetchRecommendedContent(uri, mature)), }); export default connect(select, perform)(RecommendedVideos); diff --git a/ui/component/recommendedContent/view.jsx b/ui/component/recommendedContent/view.jsx index 54e089a6c..99c659c0a 100644 --- a/ui/component/recommendedContent/view.jsx +++ b/ui/component/recommendedContent/view.jsx @@ -6,44 +6,29 @@ import Ads from 'web/component/ads'; import Card from 'component/common/card'; import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize'; -type Options = { - related_to: string, - nsfw?: boolean, -}; - type Props = { uri: string, - claim: ?StreamClaim, recommendedContent: Array, nextRecommendedUri: string, isSearching: boolean, - search: (string, Options) => void, + doFetchRecommendedContent: (string, boolean) => void, mature: boolean, isAuthenticated: boolean, }; export default function RecommendedContent(props: Props) { - const { uri, claim, search, mature, recommendedContent, nextRecommendedUri, isSearching, isAuthenticated } = props; + const { + uri, + doFetchRecommendedContent, + mature, + recommendedContent, + nextRecommendedUri, + isSearching, + isAuthenticated, + } = props; const isMobile = useIsMobile(); const isMedium = useIsMediumScreen(); - const stringifiedClaim = JSON.stringify(claim); - const getRecommendedContent = React.useCallback(() => { - if (stringifiedClaim) { - const jsonClaim = JSON.parse(stringifiedClaim); - if (jsonClaim && jsonClaim.value && jsonClaim.claim_id) { - const options: Options = { size: 20, related_to: jsonClaim.claim_id, isBackgroundSearch: true }; - if (jsonClaim && !mature) { - options['nsfw'] = false; - } - const { title } = jsonClaim.value; - if (title && options) { - search(title, options); - } - } - } - }, [stringifiedClaim, mature, search]); - function reorderList(recommendedContent) { let newList = recommendedContent; if (newList) { @@ -61,8 +46,8 @@ export default function RecommendedContent(props: Props) { } React.useEffect(() => { - getRecommendedContent(); - }, [uri, getRecommendedContent]); + doFetchRecommendedContent(uri, mature); + }, [uri, mature, doFetchRecommendedContent]); return ( ( const uris = []; const actions = []; - data.forEach(result => { + data.forEach((result) => { if (result) { const { name, claimId } = result; const urlObj: LbryUrlObj = {}; @@ -88,7 +88,7 @@ export const doSearch = (rawQuery: string, searchOptions: SearchOptions) => ( }); dispatch(batchActions(...actions)); }) - .catch(e => { + .catch((e) => { dispatch({ type: ACTIONS.SEARCH_FAIL, }); @@ -113,4 +113,20 @@ export const doUpdateSearchOptions = (newOptions: SearchOptions, additionalOptio } }; +export const doFetchRecommendedContent = (uri: string, mature: boolean) => (dispatch: Dispatch, getState: GetState) => { + const state = getState(); + const claim = makeSelectClaimForUri(uri)(state); + + if (claim && claim.value && claim.claim_id) { + const options: SearchOptions = { size: 20, related_to: claim.claim_id, isBackgroundSearch: true }; + if (!mature) { + options['nsfw'] = false; + } + const { title } = claim.value; + if (title && options) { + dispatch(doSearch(title, options)); + } + } +}; + export { lighthouse };