diff --git a/ui/component/claimTilesDiscover/index.js b/ui/component/claimTilesDiscover/index.js index bd7b92db2..8e210f9f0 100644 --- a/ui/component/claimTilesDiscover/index.js +++ b/ui/component/claimTilesDiscover/index.js @@ -1,5 +1,11 @@ import { connect } from 'react-redux'; -import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearchByQuery, SETTINGS } from 'lbry-redux'; +import { + doClaimSearch, + selectClaimSearchByQuery, + selectFetchingClaimSearchByQuery, + SETTINGS, + selectClaimsByUri, +} from 'lbry-redux'; import { doToggleTagFollowDesktop } from 'redux/actions/tags'; import { makeSelectClientSetting, selectShowMatureContent } from 'redux/selectors/settings'; import { selectModerationBlockList } from 'redux/selectors/comments'; @@ -8,6 +14,7 @@ import ClaimListDiscover from './view'; const select = (state) => ({ claimSearchByQuery: selectClaimSearchByQuery(state), + claimsByUri: selectClaimsByUri(state), fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state), showNsfw: selectShowMatureContent(state), hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state), diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx index 544f538b2..8ab754962 100644 --- a/ui/component/claimTilesDiscover/view.jsx +++ b/ui/component/claimTilesDiscover/view.jsx @@ -20,6 +20,9 @@ type Props = { fetchingClaimSearchByQuery: { [string]: boolean, }, + claimsByUri: { + [string]: any, + }, // claim search options are below tags: Array, blockedUris: Array, @@ -37,12 +40,16 @@ type Props = { limitClaimsPerChannel?: number, hasNoSource?: boolean, renderProperties?: (Claim) => ?Node, + // Passing in 'livestreamMap' indicates that we want to sort "live" + // livestreams first, and also embelish the "live" tiles. + livestreamMap?: { [string]: any }, }; function ClaimTilesDiscover(props: Props) { const { doClaimSearch, claimSearchByQuery, + claimsByUri, showNsfw, hideReposts, // Below are options to pass that are forwarded to claim_search @@ -64,6 +71,7 @@ function ClaimTilesDiscover(props: Props) { renderProperties, blockedUris, mutedUris, + livestreamMap, } = props; const { location } = useHistory(); @@ -71,6 +79,7 @@ function ClaimTilesDiscover(props: Props) { const feeAmountInUrl = urlParams.get('fee_amount'); const feeAmountParam = feeAmountInUrl || feeAmount; const mutedAndBlockedChannelIds = Array.from(new Set(mutedUris.concat(blockedUris).map((uri) => uri.split('#')[1]))); + const liveUris = []; const options: { page_size: number, @@ -145,7 +154,30 @@ function ClaimTilesDiscover(props: Props) { } const claimSearchCacheQuery = createNormalizedClaimSearchKey(options); - const uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []); + let uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []); + + // Push active livestreams to the front: + if (livestreamMap) { + const liveChannelIds = Object.keys(livestreamMap); + + uris.forEach((uri) => { + const claim = claimsByUri[uri]; + if ( + claim && + claim.value_type === 'stream' && + claim.value.source === undefined && + claim.signing_channel && + liveChannelIds.includes(claim.signing_channel.claim_id) + ) { + liveUris.push(uri); + // This live channel has been accounted for, so ignore it's older livestreams: + liveChannelIds.splice(liveChannelIds.indexOf(claim.signing_channel.claim_id), 1); + } + }); + + uris = liveUris.concat(uris.filter((uri) => !liveUris.includes(uri))); + } + // Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time const optionsStringForEffect = JSON.stringify(options); const isLoading = fetchingClaimSearchByQuery[claimSearchCacheQuery]; @@ -158,10 +190,19 @@ function ClaimTilesDiscover(props: Props) { } }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]); + const resolveLive = (index) => { + if (livestreamMap && index < liveUris.length) { + return true; + } + return undefined; + }; + return ( ); diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx index 59859abd7..fb74dec3f 100644 --- a/ui/page/home/view.jsx +++ b/ui/page/home/view.jsx @@ -9,6 +9,7 @@ import ClaimTilesDiscover from 'component/claimTilesDiscover'; import Icon from 'component/common/icon'; import I18nMessage from 'component/i18nMessage'; import LbcSymbol from 'component/common/lbc-symbol'; +import useGetLivestreams from 'effects/use-get-livestreams'; type Props = { authenticated: boolean, @@ -24,6 +25,7 @@ function HomePage(props: Props) { const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0; const showIndividualTags = showPersonalizedTags && followedTags.length < 5; const { default: getHomepage } = homepageData; + const { livestreamMap } = useGetLivestreams(0); const rowData: Array = getHomepage( authenticated, @@ -91,7 +93,7 @@ function HomePage(props: Props) { )} - + {(route || link) && (