LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Livestream category improvements #7115

Merged
infinite-persistence merged 15 commits from ip/category.livestream into master 2021-09-24 16:26:22 +02:00
Conversation 11 Commits 15 Files changed 25 +631 -528
25 changed files with 631 additions and 528 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
flow-typed/livestream.js vendored
View file

@ -24,4 +24,18 @@ declare type LivestreamReplayData = Array<LivestreamReplayItem>;
declare type LivestreamState = {
fetchingById: {},
viewersById: {},
fetchingActiveLivestreams: boolean,
activeLivestreams: ?LivestreamInfo,
activeLivestreamsLastFetchedDate: number,
activeLivestreamsLastFetchedOptions: {},
}
declare type LivestreamInfo = {
[/* creatorId */ string]: {
live: boolean,
viewCount: number,
creatorId: string,
latestClaimId: string,
latestClaimUri: string,
}
}

4
ui/component/claimList/index.js
View file

@ -1,12 +1,10 @@
import { connect } from 'react-redux';
import ClaimList from './view';
import { SETTINGS, selectClaimSearchByQuery, selectClaimsByUri } from 'lbry-redux';
import { SETTINGS } from 'lbry-redux';
import { makeSelectClientSetting } from 'redux/selectors/settings';
const select = (state) => ({
searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
claimSearchByQuery: selectClaimSearchByQuery(state),
claimsByUri: selectClaimsByUri(state),
});
export default connect(select)(ClaimList);

32
ui/component/claimList/view.jsx
View file

@ -9,7 +9,6 @@ import { FormField } from 'component/common/form';
import usePersistedState from 'effects/use-persisted-state';
import debounce from 'util/debounce';
import ClaimPreviewTile from 'component/claimPreviewTile';
import { prioritizeActiveLivestreams } from 'component/claimTilesDiscover/view';
const DEBOUNCE_SCROLL_HANDLER_MS = 150;
const SORT_NEW = 'new';
@ -17,6 +16,7 @@ const SORT_OLD = 'old';
type Props = {
uris: Array<string>,
prefixUris?: Array<string>,
header: Node | boolean,
headerAltControls: Node,
loading: boolean,
@ -41,9 +41,6 @@ type Props = {
hideMenu?: boolean,
claimSearchByQuery: { [string]: Array<string> },
claimsByUri: { [string]: any },
liveLivestreamsFirst?: boolean,
livestreamMap?: { [string]: any },
searchOptions?: any,
collectionId?: string,
showNoSourceClaims?: boolean,
onClick?: (e: any, claim?: ?Claim, index?: number) => void,
@ -53,6 +50,7 @@ export default function ClaimList(props: Props) {
const {
activeUri,
uris,
prefixUris,
headerAltControls,
loading,
persistedStorageKey,
@ -73,37 +71,25 @@ export default function ClaimList(props: Props) {
renderProperties,
searchInLanguage,
hideMenu,
claimSearchByQuery,
claimsByUri,
liveLivestreamsFirst,
livestreamMap,
searchOptions,
collectionId,
showNoSourceClaims,
onClick,
} = props;
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
// Exclude prefix uris in these results variables. We don't want to show
// anything if the search failed or timed out.
const timedOut = uris === null;
const urisLength = (uris && uris.length) || 0;
const liveUris = [];
if (liveLivestreamsFirst && livestreamMap) {
prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery, searchOptions);
}
const tileUris = (prefixUris || []).concat(uris);
const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? tileUris : tileUris.slice().reverse())) || [];
const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? uris : uris.slice().reverse())) || [];
const noResultMsg = searchInLanguage
? __('No results. Contents may be hidden by the Language filter.')
: __('No results');
const resolveLive = (index) => {
if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
return true;
}
return undefined;
};
function handleSortChange() {
setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
}
@ -138,13 +124,12 @@ export default function ClaimList(props: Props) {
return tileLayout && !header ? (
<section className="claim-grid">
{urisLength > 0 &&
uris.map((uri, index) => (
tileUris.map((uri) => (
<ClaimPreviewTile
key={uri}
uri={uri}
showHiddenByUser={showHiddenByUser}
properties={renderProperties}
live={resolveLive(index)}
collectionId={collectionId}
showNoSourceClaims={showNoSourceClaims}
/>
@ -216,7 +201,6 @@ export default function ClaimList(props: Props) {
// https://github.com/lbryio/lbry-redux/blob/master/src/redux/actions/publish.js#L74-L79
return claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch';
}}
live={resolveLive(index)}
onClick={(e, claim, index) => handleClaimClicked(e, claim, index)}
/>
</React.Fragment>

96
ui/component/claimListDiscover/view.jsx
View file

@ -13,11 +13,12 @@ import ClaimPreview from 'component/claimPreview';
import ClaimPreviewTile from 'component/claimPreviewTile';
import I18nMessage from 'component/i18nMessage';
import ClaimListHeader from 'component/claimListHeader';
import useFetchViewCount from 'effects/use-fetch-view-count';
import { useIsLargeScreen } from 'effects/use-screensize';
import { getLivestreamOnlyOptions } from 'util/search';
type Props = {
uris: Array<string>,
prefixUris?: Array<string>,
name?: string,
type: string,
pageSize?: number,
@ -31,7 +32,6 @@ type Props = {
includeSupportAction?: boolean,
infiniteScroll?: Boolean,
isChannel?: boolean,
liveLivestreamsFirst?: boolean,
personalView: boolean,
showHeader: boolean,
showHiddenByUser?: boolean,
@ -64,7 +64,6 @@ type Props = {
channelIds?: Array<string>,
claimIds?: Array<string>,
subscribedChannels: Array<Subscription>,
livestreamMap?: { [string]: any },
header?: Node,
headerLabel?: string | Node,
@ -137,6 +136,7 @@ function ClaimListDiscover(props: Props) {
injectedItem,
feeAmount,
uris,
prefixUris,
tileLayout,
hideFilters = false,
claimIds,
@ -148,8 +148,6 @@ function ClaimListDiscover(props: Props) {
releaseTime,
scrollAnchor,
showHiddenByUser = false,
liveLivestreamsFirst,
livestreamMap,
hasSource,
hasNoSource,
isChannel = false,
@ -380,9 +378,9 @@ function ClaimListDiscover(props: Props) {
const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
const mainSearchKey = createNormalizedClaimSearchKey(options);
let claimSearchResult = claimSearchByQuery[mainSearchKey];
const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[mainSearchKey];
const searchKey = createNormalizedClaimSearchKey(options);
const claimSearchResult = claimSearchByQuery[searchKey];
const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[searchKey];
// uncomment to fix an item on a page
// const fixUri = 'lbry://@corbettreport#0/lbryodysee#5';
@ -400,14 +398,6 @@ function ClaimListDiscover(props: Props) {
// claimSearchResult.splice(2, 0, fixUri);
// }
const livestreamSearchKey = liveLivestreamsFirst
? createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options))
: undefined;
const livestreamSearchResult = livestreamSearchKey && claimSearchByQuery[livestreamSearchKey];
const [finalUris, setFinalUris] = React.useState(
getFinalUrisInitialState(history.action === 'POP', claimSearchResult)
);
const [prevOptions, setPrevOptions] = React.useState(null);
if (!isJustScrollingToNewPage(prevOptions, options)) {
@ -469,6 +459,8 @@ function ClaimListDiscover(props: Props) {
</div>
);
const renderUris = uris || claimSearchResult;
// **************************************************************************
// Helpers
// **************************************************************************
@ -514,41 +506,6 @@ function ClaimListDiscover(props: Props) {
}
}
function urisEqual(prev: Array<string>, next: Array<string>) {
if (!prev || !next) {
// From 'ClaimList', "null" and "undefined" have special meaning,
// so we can't just compare array length here.
// - null = "timed out"
// - undefined = "no result".
return prev === next;
}
return prev.length === next.length && prev.every((value, index) => value === next[index]);
}
function getFinalUrisInitialState(isNavigatingBack, claimSearchResult) {
if (isNavigatingBack && claimSearchResult && claimSearchResult.length > 0) {
return claimSearchResult;
} else {
return [];
}
}
function fetchViewCountForUris(uris) {
const claimIds = [];
if (uris) {
uris.forEach((uri) => {
if (claimsByUri[uri]) {
claimIds.push(claimsByUri[uri].claim_id);
}
});
}
if (claimIds.length > 0) {
doFetchViewCount(claimIds.join(','));
}
}
function resolveOrderByOption(orderBy: string | Array<string>, sortBy: string | Array<string>) {
const order_by =
orderBy === CS.ORDER_BY_TRENDING
@ -567,38 +524,15 @@ function ClaimListDiscover(props: Props) {
// **************************************************************************
// **************************************************************************
useFetchViewCount(fetchViewCount, renderUris, claimsByUri, doFetchViewCount);
React.useEffect(() => {
if (shouldPerformSearch) {
const searchOptions = JSON.parse(optionsStringForEffect);
doClaimSearch(searchOptions);
if (liveLivestreamsFirst && options.page === 1) {
doClaimSearch(getLivestreamOnlyOptions(searchOptions));
}
}
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, forceRefresh]);
// Resolve 'finalUri'
React.useEffect(() => {
if (uris) {
if (!urisEqual(uris, finalUris)) {
setFinalUris(uris);
}
} else {
// Wait until all queries are done before updating the uris to avoid layout shifts.
const pending = claimSearchResult === undefined || (liveLivestreamsFirst && livestreamSearchResult === undefined);
if (!pending && !urisEqual(claimSearchResult, finalUris)) {
setFinalUris(claimSearchResult);
}
}
}, [uris, claimSearchResult, finalUris, setFinalUris, liveLivestreamsFirst, livestreamSearchResult]);
React.useEffect(() => {
if (fetchViewCount) {
fetchViewCountForUris(finalUris);
}
}, [finalUris]); // eslint-disable-line react-hooks/exhaustive-deps
const headerToUse = header || (
<ClaimListHeader
channelIds={channelIds}
@ -636,7 +570,8 @@ function ClaimListDiscover(props: Props) {
<ClaimList
tileLayout
loading={loading}
uris={finalUris}
uris={renderUris}
prefixUris={prefixUris}
onScrollBottom={handleScrollBottom}
page={page}
pageSize={dynamicPageSize}
@ -645,8 +580,6 @@ function ClaimListDiscover(props: Props) {
includeSupportAction={includeSupportAction}
injectedItem={injectedItem}
showHiddenByUser={showHiddenByUser}
liveLivestreamsFirst={liveLivestreamsFirst}
livestreamMap={livestreamMap}
searchOptions={options}
showNoSourceClaims={showNoSourceClaims}
empty={empty}
@ -670,7 +603,8 @@ function ClaimListDiscover(props: Props) {
<ClaimList
type={type}
loading={loading}
uris={finalUris}
uris={renderUris}
prefixUris={prefixUris}
onScrollBottom={handleScrollBottom}
page={page}
pageSize={dynamicPageSize}
@ -679,8 +613,6 @@ function ClaimListDiscover(props: Props) {
includeSupportAction={includeSupportAction}
injectedItem={injectedItem}
showHiddenByUser={showHiddenByUser}
liveLivestreamsFirst={liveLivestreamsFirst}
livestreamMap={livestreamMap}
searchOptions={options}
showNoSourceClaims={hasNoSource || showNoSourceClaims}
empty={empty}

2
ui/component/claimPreview/index.js
View file

@ -20,6 +20,7 @@ import {
} from 'lbry-redux';
import { selectMutedChannels, makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
import { selectShowMatureContent } from 'redux/selectors/settings';
import { makeSelectHasVisitedUri } from 'redux/selectors/content';
import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
@ -56,6 +57,7 @@ const select = (state, props) => {
streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
collectionUris: makeSelectUrlsForCollectionId(props.collectionId)(state),
collectionIndex: makeSelectIndexForUrlInCollection(props.uri, props.collectionId)(state),

10
ui/component/claimPreview/view.jsx
View file

@ -80,7 +80,7 @@ type Props = {
repostUrl?: string,
hideMenu?: boolean,
isLivestream?: boolean,
live?: boolean,
isLivestreamActive: boolean,
collectionId?: string,
editCollection: (string, CollectionEditParams) => void,
isCollectionMine: boolean,
@ -145,7 +145,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
hideMenu = false,
// repostUrl,
isLivestream, // need both? CHECK
live,
isLivestreamActive,
collectionId,
collectionIndex,
editCollection,
@ -336,7 +336,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
}
let liveProperty = null;
if (live === true) {
if (isLivestreamActive === true) {
liveProperty = (claim) => <>LIVE</>;
}
@ -349,7 +349,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
'claim-preview__wrapper--channel': isChannelUri && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
'claim-preview__wrapper--small': type === 'small',
'claim-preview__live': live,
'claim-preview__live': isLivestreamActive,
'claim-preview__active': active,
})}
>
@ -386,7 +386,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
)}
</div>
{/* @endif */}
{!isLivestream && (
{(!isLivestream || isLivestreamActive) && (
<div className="claim-preview__file-property-overlay">
<PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
</div>

2
ui/component/claimPreviewTile/index.js
View file

@ -13,6 +13,7 @@ import {
} from 'lbry-redux';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
import { selectShowMatureContent } from 'redux/selectors/settings';
import ClaimPreviewTile from './view';
import formatMediaDuration from 'util/formatMediaDuration';
@ -36,6 +37,7 @@ const select = (state, props) => {
showMature: selectShowMatureContent(state),
isMature: makeSelectClaimIsNsfw(props.uri)(state),
isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
};
};

8
ui/component/claimPreviewTile/view.jsx
View file

@ -48,10 +48,10 @@ type Props = {
showMature: boolean,
showHiddenByUser?: boolean,
properties?: (Claim) => void,
live?: boolean,
collectionId?: string,
showNoSourceClaims?: boolean,
isLivestream: boolean,
isLivestreamActive: boolean,
};
// preview image cards used in related video functionality
@ -75,9 +75,9 @@ function ClaimPreviewTile(props: Props) {
showMature,
showHiddenByUser,
properties,
live,
showNoSourceClaims,
isLivestream,
isLivestreamActive,
collectionId,
mediaDuration,
} = props;
@ -192,7 +192,7 @@ function ClaimPreviewTile(props: Props) {
}
let liveProperty = null;
if (live === true) {
if (isLivestreamActive === true) {
liveProperty = (claim) => <>LIVE</>;
}
@ -201,7 +201,7 @@ function ClaimPreviewTile(props: Props) {
onClick={handleClick}
className={classnames('card claim-preview--tile', {
'claim-preview__wrapper--channel': isChannel,
'claim-preview__live': live,
'claim-preview__live': isLivestreamActive,
})}
>
<NavLink {...navLinkProps} role="none" tabIndex={-1} aria-hidden>

113
ui/component/claimTilesDiscover/index.js
View file

@ -1,19 +1,26 @@
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import {
doClaimSearch,
selectClaimSearchByQuery,
selectFetchingClaimSearchByQuery,
SETTINGS,
selectClaimsByUri,
splitBySeparator,
MATURE_TAGS,
} from 'lbry-redux';
import { doFetchViewCount } from 'lbryinc';
import { doToggleTagFollowDesktop } from 'redux/actions/tags';
import { makeSelectClientSetting, selectShowMatureContent } from 'redux/selectors/settings';
import { selectModerationBlockList } from 'redux/selectors/comments';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
import * as CS from 'constants/claim_search';
import ClaimListDiscover from './view';
const select = (state) => ({
const select = (state, props) => {
return {
claimSearchByQuery: selectClaimSearchByQuery(state),
claimsByUri: selectClaimsByUri(state),
fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
@ -21,7 +28,9 @@ const select = (state) => ({
hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
mutedUris: selectMutedChannels(state),
blockedUris: selectModerationBlockList(state),
});
options: resolveSearchOptions({ pageSize: 8, ...props }),
};
};
const perform = {
doClaimSearch,
@ -29,4 +38,102 @@ const perform = {
doFetchViewCount,
};
export default connect(select, perform)(ClaimListDiscover);
export default withRouter(connect(select, perform)(ClaimListDiscover));
// ****************************************************************************
// ****************************************************************************
function resolveSearchOptions(props) {
const {
pageSize,
claimType,
tags,
showNsfw,
languages,
channelIds,
mutedUris,
blockedUris,
orderBy,
streamTypes,
hasNoSource,
hasSource,
releaseTime,
feeAmount,
limitClaimsPerChannel,
hideReposts,
timestamp,
claimIds,
location,
} = props;
const mutedAndBlockedChannelIds = Array.from(
new Set((mutedUris || []).concat(blockedUris || []).map((uri) => splitBySeparator(uri)[1]))
);
const urlParams = new URLSearchParams(location.search);
const feeAmountInUrl = urlParams.get('fee_amount');
const feeAmountParam = feeAmountInUrl || feeAmount;
let streamTypesParam;
if (streamTypes) {
streamTypesParam = streamTypes;
} else if (SIMPLE_SITE && !hasNoSource && streamTypes !== null) {
streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
}
const options = {
page_size: pageSize,
claim_type: claimType || ['stream', 'repost', 'channel'],
// 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,
channel_ids: channelIds || [],
not_channel_ids: mutedAndBlockedChannelIds,
order_by: orderBy || ['trending_group', 'trending_mixed'],
stream_types: streamTypesParam,
};
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;
}
if (releaseTime) {
options.release_time = releaseTime;
}
if (feeAmountParam) {
options.fee_amount = feeAmountParam;
}
if (limitClaimsPerChannel) {
options.limit_claims_per_channel = limitClaimsPerChannel;
}
// https://github.com/lbryio/lbry-desktop/issues/3774
if (hideReposts) {
if (Array.isArray(options.claim_type)) {
options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
} else {
options.claim_type = ['stream', 'channel'];
}
}
if (claimType) {
options.claim_type = claimType;
}
if (timestamp) {
options.timestamp = timestamp;
}
if (claimIds) {
options.claim_ids = claimIds;
}
return options;
}

399
ui/component/claimTilesDiscover/view.jsx
View file

@ -1,83 +1,41 @@
// @flow
import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
import * as CS from 'constants/claim_search';
import type { Node } from 'react';
import React from 'react';
import { createNormalizedClaimSearchKey, MATURE_TAGS, splitBySeparator } from 'lbry-redux';
import { createNormalizedClaimSearchKey } from 'lbry-redux';
import ClaimPreviewTile from 'component/claimPreviewTile';
import { useHistory } from 'react-router';
import { getLivestreamOnlyOptions } from 'util/search';
import useFetchViewCount from 'effects/use-fetch-view-count';
/**
* 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;
type SearchOptions = {
page_size: number,
no_totals: boolean,
any_tags: Array<string>,
channel_ids: Array<string>,
claim_ids?: Array<string>,
not_channel_ids: Array<string>,
not_tags: Array<string>,
order_by: Array<string>,
languages?: Array<string>,
release_time?: string,
claim_type?: string | Array<string>,
timestamp?: string,
fee_amount?: string,
limit_claims_per_channel?: number,
stream_types?: Array<string>,
has_source?: boolean,
has_no_source?: boolean,
};
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.
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) {
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);
}
});
}
function urisEqual(prev: ?Array<string>, next: ?Array<string>) {
if (!prev || !next) {
// ClaimList: "null" and "undefined" have special meaning,
// so we can't just compare array length here.
// - null = "timed out"
// - undefined = "no result".
return prev === next;
}
// 3. Finalize uris by putting live livestreams in front.
const newUris = liveUris.concat(uris.filter((uri) => !liveUris.includes(uri)));
uris.splice(0, uris.length, ...newUris);
// $FlowFixMe - already checked for null above.
return prev.length === next.length && prev.every((value, index) => value === next[index]);
}
// ****************************************************************************
@ -88,8 +46,6 @@ type Props = {
prefixUris?: Array<string>,
pinUrls?: Array<string>,
uris: Array<string>,
liveLivestreamsFirst?: boolean,
livestreamMap?: { [string]: any },
showNoSourceClaims?: boolean,
renderProperties?: (Claim) => ?Node,
fetchViewCount?: boolean,
@ -109,6 +65,7 @@ type Props = {
hasSource?: boolean,
hasNoSource?: boolean,
// --- select ---
location: { search: string },
claimSearchByQuery: { [string]: Array<string> },
claimsByUri: { [string]: any },
fetchingClaimSearchByQuery: { [string]: boolean },
@ -116,6 +73,7 @@ type Props = {
hideReposts: boolean,
mutedUris: Array<string>,
blockedUris: Array<string>,
options: SearchOptions,
// --- perform ---
doClaimSearch: ({}) => void,
doFetchViewCount: (claimIdCsv: string) => void,
@ -126,234 +84,72 @@ function ClaimTilesDiscover(props: Props) {
doClaimSearch,
claimSearchByQuery,
claimsByUri,
showNsfw,
hideReposts,
fetchViewCount,
// Below are options to pass that are forwarded to claim_search
tags,
channelIds,
claimIds,
orderBy,
pageSize = 8,
releaseTime,
languages,
claimType,
streamTypes,
timestamp,
feeAmount,
limitClaimsPerChannel,
fetchingClaimSearchByQuery,
hasSource,
hasNoSource,
renderProperties,
blockedUris,
mutedUris,
liveLivestreamsFirst,
livestreamMap,
pinUrls,
prefixUris,
showNoSourceClaims,
doFetchViewCount,
pageSize = 8,
options,
} = props;
const { location } = useHistory();
const urlParams = new URLSearchParams(location.search);
const feeAmountInUrl = urlParams.get('fee_amount');
const feeAmountParam = feeAmountInUrl || feeAmount;
const mutedAndBlockedChannelIds = Array.from(
new Set(mutedUris.concat(blockedUris).map((uri) => splitBySeparator(uri)[1]))
);
const liveUris = [];
let streamTypesParam;
if (streamTypes) {
streamTypesParam = streamTypes;
} else if (SIMPLE_SITE && !hasNoSource && streamTypes !== null) {
streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
}
const [prevUris, setPrevUris] = React.useState([]);
const options: {
page_size: number,
no_totals: boolean,
any_tags: Array<string>,
channel_ids: Array<string>,
claim_ids?: Array<string>,
not_channel_ids: Array<string>,
not_tags: Array<string>,
order_by: Array<string>,
languages?: Array<string>,
release_time?: string,
claim_type?: string | Array<string>,
timestamp?: string,
fee_amount?: string,
limit_claims_per_channel?: number,
stream_types?: Array<string>,
has_source?: boolean,
has_no_source?: boolean,
} = {
page_size: pageSize,
claim_type: claimType || ['stream', 'repost', 'channel'],
// 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,
channel_ids: channelIds || [],
not_channel_ids: mutedAndBlockedChannelIds,
order_by: orderBy || ['trending_group', 'trending_mixed'],
stream_types: streamTypesParam,
};
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;
}
if (releaseTime) {
options.release_time = releaseTime;
}
if (feeAmountParam) {
options.fee_amount = feeAmountParam;
}
if (limitClaimsPerChannel) {
options.limit_claims_per_channel = limitClaimsPerChannel;
}
// https://github.com/lbryio/lbry-desktop/issues/3774
if (hideReposts) {
if (Array.isArray(options.claim_type)) {
options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
} else {
options.claim_type = ['stream', 'channel'];
}
}
if (claimType) {
options.claim_type = claimType;
}
if (timestamp) {
options.timestamp = timestamp;
}
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);
}
const searchKey = createNormalizedClaimSearchKey(options);
const fetchingClaimSearch = fetchingClaimSearchByQuery[searchKey];
const claimSearchUris = claimSearchByQuery[searchKey] || [];
// 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;
const shouldPerformSearch = !fetchingClaimSearch && claimSearchUris.length === 0;
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;
}
}
const uris = (prefixUris || []).concat(claimSearchUris);
const modifiedUris = uris ? uris.slice() : [];
const fixUris = pinUrls || [];
if (pinUrls && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') {
fixUris.forEach((fixUri) => {
if (modifiedUris.indexOf(fixUri) !== -1) {
modifiedUris.splice(modifiedUris.indexOf(fixUri), 1);
if (pinUrls && uris && uris.length > 2 && window.location.pathname === '/') {
pinUrls.forEach((pin) => {
if (uris.indexOf(pin) !== -1) {
uris.splice(uris.indexOf(pin), 1);
} else {
modifiedUris.pop();
uris.pop();
}
});
modifiedUris.splice(2, 0, ...fixUris);
uris.splice(2, 0, ...pinUrls);
}
// **************************************************************************
// **************************************************************************
function resolveLive(index) {
if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
return true;
}
return undefined;
if (uris.length > 0 && uris.length < pageSize && shouldPerformSearch) {
// prefixUri and pinUrls might already be present while waiting for the
// remaining claim_search results. Fill the space to prevent layout shifts.
uris.push(...Array(pageSize - uris.length).fill(''));
}
function fetchViewCountForUris(uris) {
const claimIds = [];
if (uris) {
uris.forEach((uri) => {
if (claimsByUri[uri]) {
claimIds.push(claimsByUri[uri].claim_id);
}
});
}
if (claimIds.length > 0) {
doFetchViewCount(claimIds.join(','));
}
}
// **************************************************************************
// **************************************************************************
useFetchViewCount(fetchViewCount, uris, claimsByUri, doFetchViewCount);
// Run `doClaimSearch`
React.useEffect(() => {
if (shouldPerformSearch) {
const searchOptions = JSON.parse(optionsStringForEffect);
doClaimSearch(searchOptions);
if (liveLivestreamsFirst) {
doClaimSearch(getLivestreamOnlyOptions(searchOptions));
}
}
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, liveLivestreamsFirst]);
React.useEffect(() => {
if (JSON.stringify(prevUris) !== JSON.stringify(uris) && !shouldPerformSearch) {
// Stash new results for next render cycle:
setPrevUris(uris);
// Fetch view count:
if (fetchViewCount) {
fetchViewCountForUris(uris);
}
}
}, [shouldPerformSearch, prevUris, uris]); // eslint-disable-line react-hooks/exhaustive-deps
// **************************************************************************
// **************************************************************************
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
return (
<ul className="claim-grid">
{modifiedUris && modifiedUris.length
? modifiedUris.map((uri, index) => (
{uris && uris.length
? uris.map((uri, i) => {
if (uri) {
return (
<ClaimPreviewTile
showNoSourceClaims={hasNoSource || showNoSourceClaims}
key={uri}
uri={uri}
properties={renderProperties}
live={resolveLive(index)}
/>
))
);
} else {
return <ClaimPreviewTile showNoSourceClaims={hasNoSource || showNoSourceClaims} key={i} placeholder />;
}
})
: new Array(pageSize)
.fill(1)
.map((x, i) => (
@ -362,4 +158,75 @@ function ClaimTilesDiscover(props: Props) {
</ul>
);
}
export default ClaimTilesDiscover;
export default React.memo<Props>(ClaimTilesDiscover, areEqual);
function debug_trace(val) {
if (process.env.DEBUG_TRACE) console.log(`Render due to: ${val}`);
}
function areEqual(prev: Props, next: Props) {
const prevOptions: SearchOptions = prev.options;
const nextOptions: SearchOptions = next.options;
const prevSearchKey = createNormalizedClaimSearchKey(prevOptions);
const nextSearchKey = createNormalizedClaimSearchKey(nextOptions);
// "Pause" render when fetching to solve the layout-shift problem in #5979
// (previous solution used a stashed copy of the rendered uris while fetching
// to make it stay still).
// This version works as long as we are not doing anything during a fetch,
// such as showing a spinner.
const nextCsFetch = next.fetchingClaimSearchByQuery[nextSearchKey];
if (nextCsFetch) {
return true;
}
// --- Deep-compare ---
if (prev.claimSearchByQuery[prevSearchKey] !== next.claimSearchByQuery[nextSearchKey]) {
debug_trace('claimSearchByQuery');
return false;
}
if (prev.fetchingClaimSearchByQuery[prevSearchKey] !== next.fetchingClaimSearchByQuery[nextSearchKey]) {
debug_trace('fetchingClaimSearchByQuery');
return false;
}
const ARRAY_KEYS = ['prefixUris', 'channelIds', 'mutedUris', 'blockedUris'];
for (let i = 0; i < ARRAY_KEYS.length; ++i) {
const key = ARRAY_KEYS[i];
if (!urisEqual(prev[key], next[key])) {
debug_trace(`${key}`);
return false;
}
}
// --- Default the rest(*) to shallow-compare ---
// (*) including new props introduced in the future, in case developer forgets
// to update this function. Better to render more than miss an important one.
const KEYS_TO_IGNORE = [
...ARRAY_KEYS,
'claimSearchByQuery',
'fetchingClaimSearchByQuery',
'location',
'history',
'match',
'claimsByUri',
'options',
'doClaimSearch',
'doToggleTagFollowDesktop',
];
const propKeys = Object.keys(next);
for (let i = 0; i < propKeys.length; ++i) {
const pk = propKeys[i];
if (!KEYS_TO_IGNORE.includes(pk) && prev[pk] !== next[pk]) {
debug_trace(`${pk}`);
return false;
}
}
return true;
}

4
ui/constants/action_types.js
View file

@ -352,3 +352,7 @@ export const FETCH_NO_SOURCE_CLAIMS_STARTED = 'FETCH_NO_SOURCE_CLAIMS_STARTED';
export const FETCH_NO_SOURCE_CLAIMS_COMPLETED = 'FETCH_NO_SOURCE_CLAIMS_COMPLETED';
export const FETCH_NO_SOURCE_CLAIMS_FAILED = 'FETCH_NO_SOURCE_CLAIMS_FAILED';
export const VIEWERS_RECEIVED = 'VIEWERS_RECEIVED';
export const FETCH_ACTIVE_LIVESTREAMS_STARTED = 'FETCH_ACTIVE_LIVESTREAMS_STARTED';
export const FETCH_ACTIVE_LIVESTREAMS_FAILED = 'FETCH_ACTIVE_LIVESTREAMS_FAILED';
export const FETCH_ACTIVE_LIVESTREAMS_SKIPPED = 'FETCH_ACTIVE_LIVESTREAMS_SKIPPED';
export const FETCH_ACTIVE_LIVESTREAMS_COMPLETED = 'FETCH_ACTIVE_LIVESTREAMS_COMPLETED';

24
ui/effects/use-fetch-view-count.js Normal file
View file

@ -0,0 +1,24 @@
// @flow
import { useState, useEffect } from 'react';
export default function useFetchViewCount(
shouldFetch: ?boolean,
uris: Array<string>,
claimsByUri: any,
doFetchViewCount: (string) => void
) {
const [fetchedUris, setFetchedUris] = useState([]);
useEffect(() => {
if (shouldFetch && uris && uris.length > 0) {
const urisToFetch = uris.filter((uri) => uri && !fetchedUris.includes(uri) && Boolean(claimsByUri[uri]));
if (urisToFetch.length > 0) {
const claimIds = urisToFetch.map((uri) => claimsByUri[uri].claim_id);
doFetchViewCount(claimIds.join(','));
setFetchedUris([...fetchedUris, ...urisToFetch]);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [uris]);
}

55
ui/effects/use-get-livestreams.js
View file

@ -1,55 +0,0 @@
// @flow
import React from 'react';
import { LIVESTREAM_LIVE_API } from 'constants/livestream';
/**
* Gets latest livestream info list. Returns null (instead of a blank object)
* when there are no active livestreams.
*
* @param minViewers
* @param refreshMs
* @returns {{livestreamMap: null, loading: boolean}}
*/
export default function useGetLivestreams(minViewers: number = 0, refreshMs: number = 0) {
const [loading, setLoading] = React.useState(true);
const [livestreamMap, setLivestreamMap] = React.useState(null);
React.useEffect(() => {
function checkCurrentLivestreams() {
fetch(LIVESTREAM_LIVE_API)
.then((res) => res.json())
.then((res) => {
setLoading(false);
if (!res.data) {
setLivestreamMap(null);
return;
}
const livestreamMap = res.data.reduce((acc, curr) => {
if (curr.viewCount >= minViewers) {
acc[curr.claimId] = curr;
}
return acc;
}, {});
setLivestreamMap(livestreamMap);
})
.catch((err) => {
setLoading(false);
});
}
checkCurrentLivestreams();
if (refreshMs > 0) {
let fetchInterval = setInterval(checkCurrentLivestreams, refreshMs);
return () => {
if (fetchInterval) {
clearInterval(fetchInterval);
}
};
}
}, []);
return { livestreamMap, loading };
}

9
ui/page/channelsFollowing/index.js
View file

@ -1,13 +1,18 @@
import { connect } from 'react-redux';
import { SETTINGS } from 'lbry-redux';
import { doFetchActiveLivestreams } from 'redux/actions/livestream';
import { selectActiveLivestreams } from 'redux/selectors/livestream';
import { selectSubscriptions } from 'redux/selectors/subscriptions';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import ChannelsFollowingPage from './view';
const select = state => ({
const select = (state) => ({
subscribedChannels: selectSubscriptions(state),
tileLayout: makeSelectClientSetting(SETTINGS.TILE_LAYOUT)(state),
activeLivestreams: selectActiveLivestreams(state),
});
export default connect(select)(ChannelsFollowingPage);
export default connect(select, {
doFetchActiveLivestreams,
})(ChannelsFollowingPage);

18
ui/page/channelsFollowing/view.jsx
View file

@ -9,24 +9,32 @@ import ClaimListDiscover from 'component/claimListDiscover';
import Page from 'component/page';
import Button from 'component/button';
import Icon from 'component/common/icon';
import useGetLivestreams from 'effects/use-get-livestreams';
import { splitBySeparator } from 'lbry-redux';
import { getLivestreamUris } from 'util/livestream';
type Props = {
subscribedChannels: Array<Subscription>,
tileLayout: boolean,
activeLivestreams: ?LivestreamInfo,
doFetchActiveLivestreams: () => void,
};
function ChannelsFollowingPage(props: Props) {
const { subscribedChannels, tileLayout } = props;
const { subscribedChannels, tileLayout, activeLivestreams, doFetchActiveLivestreams } = props;
const hasSubsribedChannels = subscribedChannels.length > 0;
const { livestreamMap } = useGetLivestreams();
const channelIds = subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1]);
React.useEffect(() => {
doFetchActiveLivestreams();
}, []);
return !hasSubsribedChannels ? (
<ChannelsFollowingDiscoverPage />
) : (
<Page noFooter fullWidthPage={tileLayout}>
<ClaimListDiscover
prefixUris={getLivestreamUris(activeLivestreams, channelIds)}
hideAdvancedFilter={SIMPLE_SITE}
streamType={SIMPLE_SITE ? CS.CONTENT_ALL : undefined}
tileLayout={tileLayout}
@ -37,7 +45,7 @@ function ChannelsFollowingPage(props: Props) {
</span>
}
defaultOrderBy={CS.ORDER_BY_NEW}
channelIds={subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1])}
channelIds={channelIds}
meta={
<Button
icon={ICONS.SEARCH}
@ -46,8 +54,6 @@ function ChannelsFollowingPage(props: Props) {
navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
/>
}
liveLivestreamsFirst
livestreamMap={livestreamMap}
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
hasSource
/>

4
ui/page/discover/index.js
View file

@ -1,6 +1,8 @@
import * as CS from 'constants/claim_search';
import { connect } from 'react-redux';
import { makeSelectClaimForUri, doResolveUri, SETTINGS } from 'lbry-redux';
import { doFetchActiveLivestreams } from 'redux/actions/livestream';
import { selectActiveLivestreams } from 'redux/selectors/livestream';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import { selectFollowedTags } from 'redux/selectors/tags';
import { doToggleTagFollowDesktop } from 'redux/actions/tags';
@ -18,10 +20,12 @@ const select = (state, props) => {
repostedClaim: repostedUri ? makeSelectClaimForUri(repostedUri)(state) : null,
isAuthenticated: selectUserVerifiedEmail(state),
tileLayout: makeSelectClientSetting(SETTINGS.TILE_LAYOUT)(state),
activeLivestreams: selectActiveLivestreams(state),
};
};
export default connect(select, {
doToggleTagFollowDesktop,
doResolveUri,
doFetchActiveLivestreams,
})(Tags);

132
ui/page/discover/view.jsx
View file

@ -8,15 +8,17 @@ import Page from 'component/page';
import ClaimListDiscover from 'component/claimListDiscover';
import Button from 'component/button';
import useHover from 'effects/use-hover';
import { useIsMobile } from 'effects/use-screensize';
import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
import analytics from 'analytics';
import HiddenNsfw from 'component/common/hidden-nsfw';
import Icon from 'component/common/icon';
import Ads from 'web/component/ads';
import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage';
import useGetLivestreams from 'effects/use-get-livestreams';
import moment from 'moment';
import { getLivestreamUris } from 'util/livestream';
const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
type Props = {
location: { search: string },
@ -28,6 +30,8 @@ type Props = {
isAuthenticated: boolean,
dynamicRouteProps: RowDataItem,
tileLayout: boolean,
activeLivestreams: ?LivestreamInfo,
doFetchActiveLivestreams: (orderBy?: Array<string>, pageSize?: number, forceFetch?: boolean) => void,
};
function DiscoverPage(props: Props) {
@ -40,12 +44,14 @@ function DiscoverPage(props: Props) {
doResolveUri,
isAuthenticated,
tileLayout,
activeLivestreams,
doFetchActiveLivestreams,
dynamicRouteProps,
} = props;
const buttonRef = useRef();
const isHovering = useHover(buttonRef);
const isMobile = useIsMobile();
const { livestreamMap } = useGetLivestreams();
const isLargeScreen = useIsLargeScreen();
const urlParams = new URLSearchParams(search);
const claimType = urlParams.get('claim_type');
@ -58,6 +64,8 @@ function DiscoverPage(props: Props) {
// Eventually allow more than one tag on this page
// Restricting to one to make follow/unfollow simpler
const tag = (tags && tags[0]) || null;
const channelIds =
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined;
const isFollowing = followedTags.map(({ name }) => name).includes(tag);
let label = isFollowing ? __('Following --[button label indicating a channel has been followed]--') : __('Follow');
@ -65,6 +73,46 @@ function DiscoverPage(props: Props) {
label = __('Unfollow');
}
const initialLivestreamTileLimit = getPageSize(DEFAULT_LIVESTREAM_TILE_LIMIT);
const [showViewMoreLivestreams, setShowViewMoreLivestreams] = React.useState(!dynamicRouteProps);
const livestreamUris = getLivestreamUris(activeLivestreams, channelIds);
const useDualList = showViewMoreLivestreams && livestreamUris.length > initialLivestreamTileLimit;
function getElemMeta() {
return !dynamicRouteProps ? (
<a
className="help"
href="https://lbry.com/faq/trending"
title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
>
<I18nMessage
tokens={{
lbc: <LbcSymbol />,
}}
>
Results boosted by %lbc%
</I18nMessage>
</a>
) : (
tag && !isMobile && (
<Button
ref={buttonRef}
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
)
);
}
function getPageSize(originalSize) {
return isLargeScreen ? originalSize * (3 / 2) : originalSize;
}
React.useEffect(() => {
if (repostedUri && !repostedClaimIsResolved) {
doResolveUri(repostedUri);
@ -106,16 +154,53 @@ function DiscoverPage(props: Props) {
);
}
React.useEffect(() => {
if (showViewMoreLivestreams) {
doFetchActiveLivestreams(CS.ORDER_BY_TRENDING_VALUE);
} else {
doFetchActiveLivestreams();
}
}, []);
return (
<Page noFooter fullWidthPage={tileLayout}>
{useDualList && (
<>
<ClaimListDiscover
uris={livestreamUris.slice(0, initialLivestreamTileLimit)}
headerLabel={headerLabel}
header={repostedUri ? <span /> : undefined}
tileLayout={repostedUri ? false : tileLayout}
hideAdvancedFilter
hideFilters
infiniteScroll={false}
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
meta={getElemMeta()}
/>
<div className="livestream-list--view-more">
<Button
label={__('Show more livestreams')}
button="link"
iconRight={ICONS.ARROW_RIGHT}
className="claim-grid__title--secondary"
onClick={() => {
doFetchActiveLivestreams();
setShowViewMoreLivestreams(false);
}}
/>
</div>
</>
)}
<ClaimListDiscover
prefixUris={useDualList ? undefined : livestreamUris}
hideAdvancedFilter={SIMPLE_SITE}
hideFilters={SIMPLE_SITE ? !dynamicRouteProps : undefined}
header={repostedUri ? <span /> : undefined}
header={useDualList ? <span /> : repostedUri ? <span /> : undefined}
tileLayout={repostedUri ? false : tileLayout}
defaultOrderBy={SIMPLE_SITE ? (dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING) : undefined}
claimType={claimType ? [claimType] : undefined}
headerLabel={headerLabel}
headerLabel={!useDualList && headerLabel}
tags={tags}
hiddenNsfwMessage={<HiddenNsfw type="page" />}
repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
@ -133,47 +218,14 @@ function DiscoverPage(props: Props) {
: undefined
}
feeAmount={SIMPLE_SITE ? !dynamicRouteProps && CS.FEE_AMOUNT_ANY : undefined}
channelIds={
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
}
channelIds={channelIds}
limitClaimsPerChannel={
SIMPLE_SITE
? (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) ||
undefined
: 3
}
meta={
!dynamicRouteProps ? (
<a
className="help"
href="https://lbry.com/faq/trending"
title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
>
<I18nMessage
tokens={{
lbc: <LbcSymbol />,
}}
>
Results boosted by %lbc%
</I18nMessage>
</a>
) : (
tag &&
!isMobile && (
<Button
ref={buttonRef}
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
)
)
}
liveLivestreamsFirst
livestreamMap={livestreamMap}
meta={!useDualList && getElemMeta()}
hasSource
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
/>

7
ui/page/home/index.js
View file

@ -1,4 +1,6 @@
import { connect } from 'react-redux';
import { doFetchActiveLivestreams } from 'redux/actions/livestream';
import { selectActiveLivestreams } from 'redux/selectors/livestream';
import { selectFollowedTags } from 'redux/selectors/tags';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import { selectSubscriptions } from 'redux/selectors/subscriptions';
@ -12,8 +14,11 @@ const select = (state) => ({
authenticated: selectUserVerifiedEmail(state),
showNsfw: selectShowMatureContent(state),
homepageData: selectHomepageData(state),
activeLivestreams: selectActiveLivestreams(state),
});
const perform = {};
const perform = (dispatch) => ({
doFetchActiveLivestreams: () => dispatch(doFetchActiveLivestreams()),
});
export default connect(select, perform)(DiscoverPage);

23
ui/page/home/view.jsx
View file

@ -9,8 +9,8 @@ import ClaimTilesDiscover from 'component/claimTilesDiscover';
import ClaimPreviewTile from 'component/claimPreviewTile';
import Icon from 'component/common/icon';
import WaitUntilOnPage from 'component/common/wait-until-on-page';
import useGetLivestreams from 'effects/use-get-livestreams';
import { GetLinksData } from 'util/buildHomepage';
import { getLivestreamUris } from 'util/livestream';
// @if TARGET='web'
import Pixel from 'web/component/pixel';
@ -23,14 +23,23 @@ type Props = {
subscribedChannels: Array<Subscription>,
showNsfw: boolean,
homepageData: any,
activeLivestreams: any,
doFetchActiveLivestreams: () => void,
};
function HomePage(props: Props) {
const { followedTags, subscribedChannels, authenticated, showNsfw, homepageData } = props;
const {
followedTags,
subscribedChannels,
authenticated,
showNsfw,
homepageData,
activeLivestreams,
doFetchActiveLivestreams,
} = props;
const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
const { livestreamMap } = useGetLivestreams();
const rowData: Array<RowDataItem> = GetLinksData(
homepageData,
@ -52,13 +61,13 @@ function HomePage(props: Props) {
))}
</ul>
);
const claimTiles = (
<ClaimTilesDiscover
{...options}
liveLivestreamsFirst
livestreamMap={livestreamMap}
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
hasSource
prefixUris={getLivestreamUris(activeLivestreams, options.channelIds)}
pinUrls={pinUrls}
/>
);
@ -95,6 +104,10 @@ function HomePage(props: Props) {
);
}
React.useEffect(() => {
doFetchActiveLivestreams();
}, []);
return (
<Page fullWidthPage>
{!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (

88
ui/redux/actions/livestream.js
View file

@ -1,6 +1,7 @@
// @flow
import * as ACTIONS from 'constants/action_types';
import { doClaimSearch } from 'lbry-redux';
import { LIVESTREAM_LIVE_API } from 'constants/livestream';
export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dispatch, getState: GetState) => {
dispatch({
@ -31,3 +32,90 @@ export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dis
});
}
};
const FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS = 5 * 60 * 1000;
export const doFetchActiveLivestreams = (
orderBy: Array<string> = ['release_time'],
pageSize: number = 50,
forceFetch: boolean = false
) => {
return async (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const now = Date.now();
const timeDelta = now - state.livestream.activeLivestreamsLastFetchedDate;
const prevOptions = state.livestream.activeLivestreamsLastFetchedOptions;
const nextOptions = { page_size: pageSize, order_by: orderBy };
const sameOptions = JSON.stringify(prevOptions) === JSON.stringify(nextOptions);
if (!forceFetch && sameOptions && timeDelta < FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS) {
dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_SKIPPED });
return;
}
dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_STARTED });
fetch(LIVESTREAM_LIVE_API)
.then((res) => res.json())
.then((res) => {
if (!res.data) {
dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
return;
}
const activeLivestreams: LivestreamInfo = res.data.reduce((acc, curr) => {
acc[curr.claimId] = {
live: curr.live,
viewCount: curr.viewCount,
creatorId: curr.claimId,
};
return acc;
}, {});
dispatch(
// ** Creators can have multiple livestream claims (each with unique
// chat), and all of them will play the same stream when creator goes
// live. The UI usually just wants to report the latest claim, so we
// query that store it in `latestClaimUri`.
doClaimSearch({
page_size: nextOptions.page_size,
has_no_source: true,
channel_ids: Object.keys(activeLivestreams),
claim_type: ['stream'],
order_by: nextOptions.order_by, // **
limit_claims_per_channel: 1, // **
no_totals: true,
})
)
.then((resolveInfo) => {
Object.values(resolveInfo).forEach((x) => {
// $FlowFixMe
const channelId = x.stream.signing_channel.claim_id;
activeLivestreams[channelId] = {
...activeLivestreams[channelId],
// $FlowFixMe
latestClaimId: x.stream.claim_id,
// $FlowFixMe
latestClaimUri: x.stream.canonical_url,
};
});
dispatch({
type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_COMPLETED,
data: {
activeLivestreams,
activeLivestreamsLastFetchedDate: now,
activeLivestreamsLastFetchedOptions: nextOptions,
},
});
})
.catch(() => {
dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
});
})
.catch((err) => {
dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
});
};
};

20
ui/redux/reducers/livestream.js
View file

@ -5,6 +5,10 @@ import { handleActions } from 'util/redux-utils';
const defaultState: LivestreamState = {
fetchingById: {},
viewersById: {},
fetchingActiveLivestreams: false,
activeLivestreams: null,
activeLivestreamsLastFetchedDate: 0,
activeLivestreamsLastFetchedOptions: {},
};
export default handleActions(
@ -36,6 +40,22 @@ export default handleActions(
newViewersById[claimId] = connected;
return { ...state, viewersById: newViewersById };
},
[ACTIONS.FETCH_ACTIVE_LIVESTREAMS_STARTED]: (state: LivestreamState) => {
return { ...state, fetchingActiveLivestreams: true };
},
[ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED]: (state: LivestreamState) => {
return { ...state, fetchingActiveLivestreams: false };
},
[ACTIONS.FETCH_ACTIVE_LIVESTREAMS_COMPLETED]: (state: LivestreamState, action: any) => {
const { activeLivestreams, activeLivestreamsLastFetchedDate, activeLivestreamsLastFetchedOptions } = action.data;
return {
...state,
fetchingActiveLivestreams: false,
activeLivestreams,
activeLivestreamsLastFetchedDate,
activeLivestreamsLastFetchedOptions,
};
},
},
defaultState
);

20
ui/redux/selectors/livestream.js
View file

@ -40,3 +40,23 @@ export const makeSelectPendingLivestreamsForChannelId = (channelId: string) =>
claim.signing_channel.claim_id === channelId
);
});
export const selectActiveLivestreams = createSelector(selectState, (state) => state.activeLivestreams);
export const makeSelectIsActiveLivestream = (uri: string) =>
createSelector(selectState, (state) => {
const activeLivestreamValues = (state.activeLivestreams && Object.values(state.activeLivestreams)) || [];
// $FlowFixMe
return Boolean(activeLivestreamValues.find((v) => v.latestClaimUri === uri));
});
export const makeSelectActiveLivestreamUris = (uri: string) =>
createSelector(selectState, (state) => {
const activeLivestreamValues = (state.activeLivestreams && Object.values(state.activeLivestreams)) || [];
const uris = [];
activeLivestreamValues.forEach((v) => {
// $FlowFixMe
if (v.latestClaimUri) uris.push(v.latestClaimUri);
});
return uris;
});

6
ui/scss/component/_livestream.scss
View file

@ -459,3 +459,9 @@ $recent-msg-button__height: 2rem;
}
}
}
.livestream-list--view-more {
display: flex;
align-items: flex-end;
margin-bottom: var(--spacing-m);
}

24
ui/util/livestream.js Normal file
View file

@ -0,0 +1,24 @@
// @flow
/**
* Helper to extract livestream claim uris from the output of
* `selectActiveLivestreams`.
*
* @param activeLivestreams Object obtained from `selectActiveLivestreams`.
* @param channelIds List of channel IDs to filter the results with.
* @returns {[]|Array<*>}
*/
export function getLivestreamUris(activeLivestreams: ?LivestreamInfo, channelIds: ?Array<string>) {
let values = (activeLivestreams && Object.values(activeLivestreams)) || [];
if (channelIds && channelIds.length > 0) {
// $FlowFixMe
values = values.filter((v) => channelIds.includes(v.creatorId) && Boolean(v.latestClaimUri));
} else {
// $FlowFixMe
values = values.filter((v) => Boolean(v.latestClaimUri));
}
// $FlowFixMe
return values.map((v) => v.latestClaimUri);
}

19
ui/util/search.js
View file

@ -21,25 +21,6 @@ export function createNormalizedSearchKey(query: string) {
return normalizedQuery;
}
/**
* Returns the "livestream only" version of the given 'options'.
*
* Currently, the 'has_source' attribute is being used to identify livestreams.
*
* @param options
* @returns {*}
*/
export function getLivestreamOnlyOptions(options: any) {
const newOptions = Object.assign({}, options);
delete newOptions.has_source;
delete newOptions.stream_types;
newOptions.has_no_source = true;
newOptions.claim_type = ['stream'];
newOptions.page_size = 50;
newOptions.order_by = ['release_time'];
return newOptions;
}
/**
* getUriForSearchTerm
* @param term