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

326 lines
10 KiB
React
Raw Normal View History

2020-01-20 17:47:03 +01:00
// @flow
2021-04-16 04:52:41 +02:00
import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
import * as CS from 'constants/claim_search';
2021-04-23 21:59:48 +02:00
import type { Node } from 'react';
2020-01-20 17:47:03 +01:00
import React from 'react';
2021-07-15 22:22:44 +02:00
import { createNormalizedClaimSearchKey, MATURE_TAGS, splitBySeparator } from 'lbry-redux';
2020-01-20 17:47:03 +01:00
import ClaimPreviewTile from 'component/claimPreviewTile';
2020-05-21 17:38:28 +02:00
import { useHistory } from 'react-router';
import { getLivestreamOnlyOptions } from 'util/search';
2021-05-05 04:36:14 +02:00
/**
* Updates 'uris' by adding and/or moving active livestreams to the front of
* list.
* 'liveUris' is also updated with any entries that were moved to the
* front, for convenience.
*
* @param uris [Ref]
* @param liveUris [Ref]
* @param livestreamMap
* @param claimsByUri
* @param claimSearchByQuery
* @param options
*/
export function prioritizeActiveLivestreams(
uris: Array<string>,
liveUris: Array<string>,
livestreamMap: { [string]: any },
claimsByUri: { [string]: any },
claimSearchByQuery: { [string]: Array<string> },
options: any
) {
if (!livestreamMap || !uris) return;
const claimIsLive = (claim, liveChannelIds) => {
// This function relies on:
// 1. Only 1 actual livestream per channel (i.e. all other livestream-claims
// for that channel actually point to the same source).
// 2. 'liveChannelIds' needs to be pruned after being accounted for,
// otherwise all livestream-claims will be "live" (we'll only take the
// latest one as "live" ).
return (
claim &&
claim.value_type === 'stream' &&
claim.value.source === undefined &&
claim.signing_channel &&
liveChannelIds.includes(claim.signing_channel.claim_id)
);
};
let liveChannelIds = Object.keys(livestreamMap);
// 1. Collect active livestreams from the primary search to put in front.
2021-05-05 04:36:14 +02:00
uris.forEach((uri) => {
const claim = claimsByUri[uri];
if (claimIsLive(claim, liveChannelIds)) {
liveUris.push(uri);
// This live channel has been accounted for, so remove it.
liveChannelIds.splice(liveChannelIds.indexOf(claim.signing_channel.claim_id), 1);
}
});
// 2. Now, repeat on the secondary search.
if (options) {
const livestreamsOnlySearchCacheQuery = createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options));
const livestreamsOnlyUris = claimSearchByQuery[livestreamsOnlySearchCacheQuery];
if (livestreamsOnlyUris) {
2021-05-05 04:36:14 +02:00
livestreamsOnlyUris.forEach((uri) => {
const claim = claimsByUri[uri];
if (!uris.includes(uri) && claimIsLive(claim, liveChannelIds)) {
liveUris.push(uri);
// This live channel has been accounted for, so remove it.
liveChannelIds.splice(liveChannelIds.indexOf(claim.signing_channel.claim_id), 1);
}
});
}
}
// 3. Finalize uris by putting live livestreams in front.
2021-05-05 04:36:14 +02:00
const newUris = liveUris.concat(uris.filter((uri) => !liveUris.includes(uri)));
uris.splice(0, uris.length, ...newUris);
}
// ****************************************************************************
// ClaimTilesDiscover
// ****************************************************************************
2020-01-20 17:47:03 +01:00
type Props = {
2020-04-17 18:21:00 +02:00
prefixUris?: Array<string>,
2020-01-20 17:47:03 +01:00
uris: Array<string>,
doClaimSearch: ({}) => void,
showNsfw: boolean,
hideReposts: boolean,
2021-05-05 04:36:14 +02:00
history: { action: string, push: (string) => void, replace: (string) => void },
claimSearchByQuery: { [string]: Array<string> },
fetchingClaimSearchByQuery: { [string]: boolean },
claimsByUri: { [string]: any },
2020-01-20 17:47:03 +01:00
// claim search options are below
tags: Array<string>,
blockedUris: Array<string>,
mutedUris: Array<string>,
2020-10-05 19:38:40 +02:00
claimIds?: Array<string>,
2020-01-20 17:47:03 +01:00
channelIds?: Array<string>,
pageSize: number,
orderBy?: Array<string>,
releaseTime?: string,
languages?: Array<string>,
claimType?: string | Array<string>,
2021-04-16 04:52:41 +02:00
streamTypes?: Array<string>,
2020-01-20 17:47:03 +01:00
timestamp?: string,
2020-05-21 17:38:28 +02:00
feeAmount?: string,
limitClaimsPerChannel?: number,
hasSource?: boolean,
2021-04-23 21:59:48 +02:00
hasNoSource?: boolean,
2021-05-05 04:36:14 +02:00
renderProperties?: (Claim) => ?Node,
liveLivestreamsFirst?: boolean,
livestreamMap?: { [string]: any },
2021-07-17 20:55:18 +02:00
pinUrls?: Array<string>,
2021-07-08 18:21:42 +02:00
showNoSourceClaims?: boolean,
2020-01-20 17:47:03 +01:00
};
function ClaimTilesDiscover(props: Props) {
const {
doClaimSearch,
claimSearchByQuery,
claimsByUri,
2020-01-20 17:47:03 +01:00
showNsfw,
hideReposts,
2020-01-20 17:47:03 +01:00
// Below are options to pass that are forwarded to claim_search
tags,
channelIds,
2020-10-05 19:38:40 +02:00
claimIds,
2020-01-20 17:47:03 +01:00
orderBy,
pageSize = 8,
releaseTime,
languages,
2020-01-20 17:47:03 +01:00
claimType,
2021-04-16 04:52:41 +02:00
streamTypes,
2020-01-20 17:47:03 +01:00
timestamp,
2020-05-21 17:38:28 +02:00
feeAmount,
limitClaimsPerChannel,
fetchingClaimSearchByQuery,
hasSource,
2021-04-23 21:59:48 +02:00
hasNoSource,
renderProperties,
blockedUris,
mutedUris,
liveLivestreamsFirst,
livestreamMap,
2021-07-17 20:55:18 +02:00
pinUrls,
2021-05-05 04:36:14 +02:00
prefixUris,
2021-07-08 18:21:42 +02:00
showNoSourceClaims,
2020-01-20 17:47:03 +01:00
} = props;
2020-05-21 17:38:28 +02:00
const { location } = useHistory();
const urlParams = new URLSearchParams(location.search);
const feeAmountInUrl = urlParams.get('fee_amount');
const feeAmountParam = feeAmountInUrl || feeAmount;
2021-07-15 22:22:44 +02:00
const mutedAndBlockedChannelIds = Array.from(
new Set(mutedUris.concat(blockedUris).map((uri) => splitBySeparator(uri)[1]))
);
const liveUris = [];
const [prevUris, setPrevUris] = React.useState([]);
2020-01-20 17:47:03 +01:00
const options: {
page_size: number,
no_totals: boolean,
any_tags: Array<string>,
channel_ids: Array<string>,
2020-10-05 19:38:40 +02:00
claim_ids?: Array<string>,
2020-01-20 17:47:03 +01:00
not_channel_ids: Array<string>,
not_tags: Array<string>,
order_by: Array<string>,
languages?: Array<string>,
2020-01-20 17:47:03 +01:00
release_time?: string,
claim_type?: string | Array<string>,
2020-01-20 17:47:03 +01:00
timestamp?: string,
2020-05-21 17:38:28 +02:00
fee_amount?: string,
limit_claims_per_channel?: number,
2020-10-05 19:38:40 +02:00
stream_types?: Array<string>,
has_source?: boolean,
has_no_source?: boolean,
2020-01-20 17:47:03 +01:00
} = {
page_size: pageSize,
claim_type: claimType || undefined,
2020-01-20 17:47:03 +01:00
// no_totals makes it so the sdk doesn't have to calculate total number pages for pagination
// it's faster, but we will need to remove it if we start using total_pages
no_totals: true,
any_tags: tags || [],
not_tags: !showNsfw ? MATURE_TAGS : [],
any_languages: languages,
2020-01-20 17:47:03 +01:00
channel_ids: channelIds || [],
not_channel_ids: mutedAndBlockedChannelIds,
2020-01-20 17:47:03 +01:00
order_by: orderBy || ['trending_group', 'trending_mixed'],
stream_types:
streamTypes === null ? undefined : SIMPLE_SITE && !hasNoSource ? [CS.FILE_VIDEO, CS.FILE_AUDIO] : undefined,
2020-01-20 17:47:03 +01:00
};
2021-04-23 21:59:48 +02:00
if (ENABLE_NO_SOURCE_CLAIMS && hasNoSource) {
options.has_no_source = true;
} else if (hasSource || (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream'))) {
options.has_source = true;
}
2020-01-20 17:47:03 +01:00
if (releaseTime) {
options.release_time = releaseTime;
}
2020-05-21 17:38:28 +02:00
if (feeAmountParam) {
options.fee_amount = feeAmountParam;
}
if (limitClaimsPerChannel) {
options.limit_claims_per_channel = limitClaimsPerChannel;
}
2020-02-28 23:36:22 +01:00
// https://github.com/lbryio/lbry-desktop/issues/3774
if (hideReposts) {
if (Array.isArray(options.claim_type)) {
2021-05-05 04:36:14 +02:00
options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
} else {
options.claim_type = ['stream', 'channel'];
}
}
2020-02-20 13:30:27 +01:00
2020-01-20 17:47:03 +01:00
if (claimType) {
options.claim_type = claimType;
}
2020-02-20 13:30:27 +01:00
2020-01-20 17:47:03 +01:00
if (timestamp) {
options.timestamp = timestamp;
}
2020-10-05 19:38:40 +02:00
if (claimIds) {
options.claim_ids = claimIds;
}
const mainSearchKey = createNormalizedClaimSearchKey(options);
const livestreamSearchKey = liveLivestreamsFirst
? createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options))
: undefined;
let uris = (prefixUris || []).concat(claimSearchByQuery[mainSearchKey] || []);
const isLoading = fetchingClaimSearchByQuery[mainSearchKey];
if (liveLivestreamsFirst && livestreamMap && !isLoading) {
prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery, options);
}
2020-01-20 17:47:03 +01:00
// Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
const optionsStringForEffect = JSON.stringify(options);
const shouldPerformSearch = !isLoading && uris.length === 0;
2020-01-20 17:47:03 +01:00
if (
prefixUris === undefined &&
(claimSearchByQuery[mainSearchKey] === undefined ||
(livestreamSearchKey && claimSearchByQuery[livestreamSearchKey] === undefined))
) {
// This is a new query and we don't have results yet ...
if (prevUris.length !== 0) {
// ... but we have previous results. Use it until new results are here.
uris = prevUris;
}
}
2020-01-20 17:47:03 +01:00
React.useEffect(() => {
if (shouldPerformSearch) {
const searchOptions = JSON.parse(optionsStringForEffect);
doClaimSearch(searchOptions);
if (liveLivestreamsFirst) {
doClaimSearch(getLivestreamOnlyOptions(searchOptions));
}
2020-01-20 17:47:03 +01:00
}
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, liveLivestreamsFirst]);
2020-01-20 17:47:03 +01:00
React.useEffect(() => {
if (JSON.stringify(prevUris) !== JSON.stringify(uris) && !shouldPerformSearch) {
setPrevUris(uris);
}
}, [shouldPerformSearch, prevUris, uris]);
2021-05-05 04:36:14 +02:00
const resolveLive = (index) => {
if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
return true;
}
return undefined;
};
2021-07-17 20:55:18 +02:00
const modifiedUris = uris ? uris.slice() : [];
2021-07-23 04:15:45 +02:00
const fixUris = pinUrls || [];
2021-07-17 20:55:18 +02:00
2021-07-23 04:15:45 +02:00
if (pinUrls && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') {
2021-07-17 20:55:18 +02:00
fixUris.forEach((fixUri) => {
if (modifiedUris.indexOf(fixUri) !== -1) {
modifiedUris.splice(modifiedUris.indexOf(fixUri), 1);
} else {
modifiedUris.pop();
}
});
modifiedUris.splice(2, 0, ...fixUris);
}
2020-01-20 17:47:03 +01:00
return (
<ul className="claim-grid">
2021-07-17 20:55:18 +02:00
{modifiedUris && modifiedUris.length
? modifiedUris.map((uri, index) => (
2021-07-23 04:15:45 +02:00
<ClaimPreviewTile
showNoSourceClaims={hasNoSource || showNoSourceClaims}
key={uri}
uri={uri}
properties={renderProperties}
live={resolveLive(index)}
/>
))
2021-07-08 18:21:42 +02:00
: new Array(pageSize)
.fill(1)
.map((x, i) => (
<ClaimPreviewTile showNoSourceClaims={hasNoSource || showNoSourceClaims} key={i} placeholder />
))}
2020-01-20 17:47:03 +01:00
</ul>
);
}
export default ClaimTilesDiscover;