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

600 lines
21 KiB
React
Raw Normal View History

2019-06-11 20:10:58 +02:00
// @flow
2019-06-17 22:32:38 +02:00
import type { Node } from 'react';
2020-01-02 17:30:27 +01:00
import classnames from 'classnames';
import React, { Fragment, useEffect, useState } from 'react';
2019-07-17 22:49:06 +02:00
import { withRouter } from 'react-router';
import * as CS from 'constants/claim_search';
2019-07-31 21:07:26 +02:00
import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux';
2019-06-11 20:10:58 +02:00
import { FormField } from 'component/common/form';
import Button from 'component/button';
2019-07-17 22:49:06 +02:00
import moment from 'moment';
2019-06-19 07:05:43 +02:00
import ClaimList from 'component/claimList';
2019-06-27 08:18:45 +02:00
import ClaimPreview from 'component/claimPreview';
2019-07-17 22:49:06 +02:00
import { toCapitalCase } from 'util/string';
import I18nMessage from 'component/i18nMessage';
import * as ICONS from 'constants/icons';
2019-06-11 20:10:58 +02:00
type Props = {
uris: Array<string>,
2019-07-01 03:52:38 +02:00
subscribedChannels: Array<Subscription>,
2019-07-11 20:06:25 +02:00
doClaimSearch: ({}) => void,
2019-06-11 20:10:58 +02:00
loading: boolean,
2019-07-17 22:49:06 +02:00
personalView: boolean,
doToggleTagFollowDesktop: string => void,
2019-06-17 22:32:38 +02:00
meta?: Node,
showNsfw: boolean,
2020-02-20 13:30:27 +01:00
showReposts: boolean,
2019-07-17 22:49:06 +02:00
history: { action: string, push: string => void, replace: string => void },
location: { search: string, pathname: string },
claimSearchByQuery: {
[string]: Array<string>,
},
hiddenUris: Array<string>,
hiddenNsfwMessage?: Node,
2020-01-02 17:30:27 +01:00
channelIds?: Array<string>,
tags: string, // these are just going to be string. pass a CSV if you want multi
defaultTags: string,
orderBy?: Array<string>,
defaultOrderBy?: string,
freshness?: string,
defaultFreshness?: string,
2020-02-11 20:04:51 +01:00
header?: Node,
2020-01-02 21:36:03 +01:00
headerLabel?: string | Node,
2020-02-11 20:04:51 +01:00
name?: string,
hideBlock?: boolean,
hideFilter?: boolean,
claimType?: Array<string>,
defaultClaimType?: Array<string>,
streamType?: string | Array<string>,
defaultStreamType?: string | Array<string>,
2020-02-11 20:04:51 +01:00
renderProperties?: Claim => Node,
2020-02-12 19:59:48 +01:00
includeSupportAction?: boolean,
pageSize?: number,
followedTags?: Array<Tag>,
2019-06-11 20:10:58 +02:00
};
2019-06-19 07:05:43 +02:00
function ClaimListDiscover(props: Props) {
2019-07-17 22:49:06 +02:00
const {
doClaimSearch,
claimSearchByQuery,
tags,
defaultTags,
2019-07-17 22:49:06 +02:00
loading,
meta,
2020-01-02 17:30:27 +01:00
channelIds,
2019-07-17 22:49:06 +02:00
showNsfw,
// showReposts,
2019-07-17 22:49:06 +02:00
history,
location,
hiddenUris,
hiddenNsfwMessage,
2020-02-11 20:04:51 +01:00
defaultOrderBy,
orderBy,
2020-01-02 21:36:03 +01:00
headerLabel,
2020-02-11 20:04:51 +01:00
header,
name,
2020-02-21 17:33:14 +01:00
claimType,
2020-02-26 19:39:03 +01:00
pageSize,
hideBlock,
defaultClaimType,
streamType,
defaultStreamType,
freshness,
2020-02-27 23:15:17 +01:00
defaultFreshness = CS.FRESH_WEEK,
2020-02-11 20:04:51 +01:00
renderProperties,
2020-02-12 19:59:48 +01:00
includeSupportAction,
hideFilter,
followedTags,
2019-07-17 22:49:06 +02:00
} = props;
const didNavigateForward = history.action === 'PUSH';
const { search } = location;
const [page, setPage] = useState(1);
const [forceRefresh, setForceRefresh] = useState();
const [expanded, setExpanded] = useState(false);
const followed = (followedTags && followedTags.map(t => t.name)) || [];
2019-07-17 22:49:06 +02:00
const urlParams = new URLSearchParams(search);
const tagsParam = // can be 'x,y,z' or 'x' or ['x','y'] or CS.CONSTANT
(tags && getParamFromTags(tags)) ||
(urlParams.get(CS.TAGS_KEY) !== null && urlParams.get(CS.TAGS_KEY)) ||
(defaultTags && getParamFromTags(defaultTags));
const orderParam = orderBy || urlParams.get(CS.ORDER_BY_KEY) || defaultOrderBy || CS.ORDER_BY_TRENDING;
2020-02-27 23:15:17 +01:00
const freshnessParam = freshness || urlParams.get(CS.FRESH_KEY) || defaultFreshness;
const contentTypeParam = urlParams.get(CS.CONTENT_KEY);
const claimTypeParam =
claimType || (CS.CLAIM_TYPES.includes(contentTypeParam) && contentTypeParam) || defaultClaimType || null;
const streamTypeParam =
streamType || (CS.FILE_TYPES.includes(contentTypeParam) && contentTypeParam) || defaultStreamType || null;
const durationParam = urlParams.get(CS.DURATION_KEY) || null;
const showDuration = !(claimType && claimType === CS.CLAIM_CHANNEL);
const isFiltered = () =>
Boolean(
urlParams.get(CS.FRESH_KEY) ||
urlParams.get(CS.CONTENT_KEY) ||
urlParams.get(CS.DURATION_KEY) ||
urlParams.get(CS.TAGS_KEY)
);
useEffect(() => {
if (isFiltered()) setExpanded(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
2019-07-17 22:49:06 +02:00
const options: {
page_size: number,
page: number,
no_totals: boolean,
any_tags?: Array<string>,
not_tags: Array<string>,
2019-07-17 22:49:06 +02:00
channel_ids: Array<string>,
not_channel_ids: Array<string>,
2019-07-17 22:49:06 +02:00
order_by: Array<string>,
release_time?: string,
claim_type?: Array<string>,
2020-02-11 20:04:51 +01:00
name?: string,
duration?: string,
stream_types?: any,
2019-07-17 22:49:06 +02:00
} = {
page_size: pageSize || CS.PAGE_SIZE,
2019-07-17 22:49:06 +02:00
page,
2020-02-11 20:04:51 +01:00
name,
claim_type: claimType || undefined,
2019-07-17 22:49:06 +02: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,
2020-01-02 17:30:27 +01:00
channel_ids: channelIds || [],
not_channel_ids:
// If channelIds were passed in, we don't need not_channel_ids
!channelIds && hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : [],
2019-07-17 22:49:06 +02:00
not_tags: !showNsfw ? MATURE_TAGS : [],
order_by:
orderParam === CS.ORDER_BY_TRENDING
? CS.ORDER_BY_TRENDING_VALUE
: orderParam === CS.ORDER_BY_NEW
? CS.ORDER_BY_NEW_VALUE
: CS.ORDER_BY_TOP_VALUE, // Sort by top
2019-07-17 22:49:06 +02:00
};
if (orderParam === CS.ORDER_BY_TOP && freshnessParam !== CS.FRESH_ALL) {
2019-07-17 22:49:06 +02:00
options.release_time = `>${Math.floor(
moment()
.subtract(1, freshnessParam)
.startOf('hour')
.unix()
)}`;
} else if (orderParam === CS.ORDER_BY_NEW || orderParam === CS.ORDER_BY_TRENDING) {
2020-01-24 17:32:13 +01:00
// Warning - hack below
// If users are following more than 10 channels or tags, limit results to stuff less than a year old
// For more than 20, drop it down to 6 months
2020-01-24 16:16:25 +01:00
// This helps with timeout issues for users that are following a ton of stuff
2020-01-24 17:32:13 +01:00
// https://github.com/lbryio/lbry-sdk/issues/2420
if (
(options.channel_ids && options.channel_ids.length > 20) ||
(options.any_tags && options.any_tags.length > 20)
) {
options.release_time = `>${Math.floor(
moment()
.subtract(3, CS.FRESH_MONTH)
.startOf('week')
.unix()
)}`;
} else if (
(options.channel_ids && options.channel_ids.length > 10) ||
(options.any_tags && options.any_tags.length > 10)
) {
options.release_time = `>${Math.floor(
moment()
.subtract(1, CS.FRESH_YEAR)
.startOf('week')
.unix()
)}`;
} else {
// Hack for at least the New page until https://github.com/lbryio/lbry-sdk/issues/2591 is fixed
options.release_time = `<${Math.floor(
moment()
.startOf('minute')
.unix()
)}`;
}
2019-07-17 22:49:06 +02:00
}
2020-01-02 17:30:27 +01:00
if (durationParam) {
if (durationParam === CS.DURATION_SHORT) {
options.duration = '<=1800';
} else if (durationParam === CS.DURATION_LONG) {
options.duration = '>=1800';
}
}
if (streamTypeParam) {
if (streamTypeParam !== CS.CONTENT_ALL) {
options.stream_types = [streamTypeParam];
}
}
if (claimTypeParam) {
if (claimTypeParam !== CS.CONTENT_ALL) {
if (Array.isArray(claimTypeParam)) {
options.claim_type = claimTypeParam;
} else {
options.claim_type = [claimTypeParam];
}
}
}
if (tagsParam) {
if (tagsParam !== CS.TAGS_ALL && tagsParam !== '') {
if (tagsParam === CS.TAGS_FOLLOWED) {
options.any_tags = followed;
} else if (Array.isArray(tagsParam)) {
options.any_tags = tagsParam;
} else {
options.any_tags = tagsParam.split(',');
}
}
}
2020-02-28 23:36:22 +01:00
// https://github.com/lbryio/lbry-desktop/issues/3774
// if (!showReposts) {
// if (Array.isArray(options.claim_type)) {
// options.claim_type = options.claim_type.filter(claimType => claimType !== 'repost');
// } else {
// options.claim_type = ['stream', 'channel'];
// }
// }
2020-02-21 17:33:14 +01:00
const hasMatureTags = tagsParam && tagsParam.split(',').some(t => MATURE_TAGS.includes(t));
2019-07-31 21:07:26 +02:00
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
2020-01-02 17:30:27 +01:00
const uris = claimSearchByQuery[claimSearchCacheQuery] || [];
2019-07-23 10:05:51 +02:00
const shouldPerformSearch =
2020-01-02 17:30:27 +01:00
uris.length === 0 ||
didNavigateForward ||
(!loading && uris.length < CS.PAGE_SIZE * page && uris.length % CS.PAGE_SIZE === 0);
2019-07-31 21:07:26 +02:00
// Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
2019-07-17 22:49:06 +02:00
const optionsStringForEffect = JSON.stringify(options);
const noResults = (
<div>
<p>
<I18nMessage
tokens={{
again: (
<Button
button="link"
label={__('try again in a few seconds.')}
onClick={() => setForceRefresh(Date.now())}
/>
),
}}
>
Sorry, your request returned no results or timed out. Modify your options or %again%
</I18nMessage>
</p>
<p>
<I18nMessage
tokens={{
2019-12-05 19:38:11 +01:00
contact_support: <Button button="link" label={__('contact support')} href="https://lbry.com/faq/support" />,
}}
>
2019-12-05 19:38:11 +01:00
If you continue to have issues, please %contact_support%.
</I18nMessage>
</p>
</div>
);
function handleChange(change) {
const url = buildUrl(change);
setPage(1);
2019-07-17 22:49:06 +02:00
history.push(url);
}
2019-07-01 03:52:38 +02:00
function getParamFromTags(t) {
if (t === CS.TAGS_ALL || t === CS.TAGS_FOLLOWED) {
return t;
} else if (Array.isArray(t)) {
return t.join(',');
}
}
function buildUrl(delta) {
const newUrlParams = new URLSearchParams();
CS.KEYS.forEach(k => {
// $FlowFixMe append() can't take null as second arg, but get() can return null
if (urlParams.get(k) !== null) newUrlParams.append(k, urlParams.get(k));
});
switch (delta.key) {
case CS.ORDER_BY_KEY:
newUrlParams.set(CS.ORDER_BY_KEY, delta.value);
break;
case CS.FRESH_KEY:
2020-02-27 23:15:17 +01:00
if (delta.value === defaultFreshness || delta.value === CS.FRESH_DEFAULT) {
newUrlParams.delete(CS.FRESH_KEY);
} else {
newUrlParams.set(CS.FRESH_KEY, delta.value);
}
break;
case CS.CONTENT_KEY:
if (delta.value === CS.CLAIM_CHANNEL || delta.value === CS.CLAIM_REPOST) {
newUrlParams.delete(CS.DURATION_KEY);
newUrlParams.set(CS.CONTENT_KEY, delta.value);
} else if (delta.value === CS.CONTENT_ALL) {
newUrlParams.delete(CS.CONTENT_KEY);
} else {
newUrlParams.set(CS.CONTENT_KEY, delta.value);
}
break;
case CS.DURATION_KEY:
if (delta.value === CS.DURATION_ALL) {
newUrlParams.delete(CS.DURATION_KEY);
} else {
newUrlParams.set(CS.DURATION_KEY, delta.value);
}
break;
case CS.TAGS_KEY:
if (delta.value === CS.TAGS_ALL) {
if (defaultTags === CS.TAGS_ALL) {
newUrlParams.delete(CS.TAGS_KEY);
} else {
newUrlParams.set(CS.TAGS_KEY, delta.value);
}
} else if (delta.value === CS.TAGS_FOLLOWED) {
if (defaultTags === CS.TAGS_FOLLOWED) {
newUrlParams.delete(CS.TAGS_KEY);
} else {
newUrlParams.set(CS.TAGS_KEY, delta.value); // redundant but special
}
} else {
newUrlParams.set(CS.TAGS_KEY, delta.value);
}
break;
}
return `?${newUrlParams.toString()}`;
}
2019-07-17 22:49:06 +02:00
function handleScrollBottom() {
if (!loading) {
setPage(page + 1);
2019-07-17 22:49:06 +02:00
}
}
useEffect(() => {
if (shouldPerformSearch) {
const searchOptions = JSON.parse(optionsStringForEffect);
doClaimSearch(searchOptions);
}
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, forceRefresh]);
2019-07-17 22:49:06 +02:00
2020-02-11 20:04:51 +01:00
const defaultHeader = (
2019-07-21 23:31:22 +02:00
<Fragment>
<div className={'claim-search__wrapper'}>
<div className={'claim-search__top'}>
<div className={'claim-search__top-row'}>
{CS.ORDER_BY_TYPES.map(type => (
<Button
key={type}
button="alt"
onClick={e =>
handleChange({
key: CS.ORDER_BY_KEY,
value: type,
})
}
className={classnames(`button-toggle button-toggle--${type}`, {
'button-toggle--active': orderParam === type,
})}
disabled={orderBy}
icon={toCapitalCase(type)}
label={__(toCapitalCase(type))}
/>
))}
</div>
<div>
{!hideFilter && (
<Button
button={'alt'}
aria-label={__('More')}
className={classnames(`button-toggle button-toggle--top button-toggle--more`, {
'button-toggle--custom': isFiltered(),
})}
icon={toCapitalCase(ICONS.SLIDERS)}
onClick={() => setExpanded(!expanded)}
/>
)}
</div>
</div>
{expanded && (
<>
<div className={classnames('card--inline', `claim-search__menus`)}>
{/* FRESHNESS FIELD */}
{orderParam === CS.ORDER_BY_TOP && (
<div className={'claim-search__input-container'}>
<FormField
2020-02-27 23:15:17 +01:00
className={classnames('claim-search__dropdown', {
'claim-search__dropdown--selected': freshnessParam !== defaultFreshness,
})}
type="select"
name="trending_time"
label={__('How Fresh')}
value={freshnessParam}
onChange={e =>
handleChange({
key: CS.FRESH_KEY,
value: e.target.value,
})
}
>
{CS.FRESH_TYPES.map(time => (
<option key={time} value={time}>
{/* i18fixme */}
{time === CS.FRESH_DAY && __('Today')}
{time !== CS.FRESH_ALL &&
time !== CS.FRESH_DEFAULT &&
time !== CS.FRESH_DAY &&
__('This ' + toCapitalCase(time)) /* yes, concat before i18n, since it is read from const */}
{time === CS.FRESH_ALL && __('All time')}
{time === CS.FRESH_DEFAULT && __('Default')}
</option>
))}
</FormField>
</div>
)}
{/* CONTENT_TYPES FIELD */}
{!claimType && (
<div
className={classnames('claim-search__input-container', {
'claim-search__input-container--selected': contentTypeParam,
})}
>
<FormField
className={classnames('claim-search__dropdown', {
'claim-search__dropdown--selected': contentTypeParam,
})}
type="select"
name="claimType"
label={__('Content Type')}
value={contentTypeParam || CS.CONTENT_ALL}
onChange={e =>
handleChange({
key: CS.CONTENT_KEY,
value: e.target.value,
})
}
>
{CS.CONTENT_TYPES.map(type => {
if (type !== CS.CLAIM_CHANNEL || (type === CS.CLAIM_CHANNEL && !channelIds)) {
return (
<option key={type} value={type}>
{/* i18fixme */}
{type === CS.CLAIM_CHANNEL && __('Channel')}
{type === CS.CLAIM_REPOST && __('Repost')}
{type === CS.FILE_VIDEO && __('Video')}
{type === CS.FILE_AUDIO && __('Audio')}
{type === CS.FILE_IMAGE && __('Image')}
{type === CS.FILE_MODEL && __('Model')}
{type === CS.FILE_BINARY && __('Other')}
{type === CS.FILE_DOCUMENT && __('Document')}
{type === CS.CONTENT_ALL && __('Any')}
</option>
);
}
})}
</FormField>
</div>
)}
{/* DURATIONS FIELD */}
{showDuration && (
<div className={'claim-search__input-container'}>
<FormField
className={classnames('claim-search__dropdown', {
'claim-search__dropdown--selected': durationParam,
})}
label={__('Duration')}
type="select"
name="duration"
disabled={
!(
contentTypeParam === null ||
streamTypeParam === CS.FILE_AUDIO ||
streamTypeParam === CS.FILE_VIDEO
)
}
value={durationParam || CS.DURATION_ALL}
onChange={e =>
handleChange({
key: CS.DURATION_KEY,
value: e.target.value,
})
}
>
{CS.DURATION_TYPES.map(dur => (
<option key={dur} value={dur}>
{/* i18fixme */}
{dur === CS.DURATION_SHORT && __('Short')}
{dur === CS.DURATION_LONG && __('Long')}
{dur === CS.DURATION_ALL && __('Any')}
</option>
))}
</FormField>
</div>
)}
{/* TAGS FIELD */}
{!tags && (
<div className={'claim-search__input-container'}>
<FormField
className={classnames('claim-search__dropdown', {
'claim-search__dropdown--selected':
((!defaultTags || defaultTags === CS.TAGS_ALL) && tagsParam && tagsParam !== CS.TAGS_ALL) ||
(defaultTags === CS.TAGS_FOLLOWED && tagsParam !== CS.TAGS_FOLLOWED),
})}
label={__('Tags')}
type="select"
name="tags"
value={tagsParam || CS.TAGS_ALL}
onChange={e =>
handleChange({
key: CS.TAGS_KEY,
value: e.target.value,
})
}
>
{[
CS.TAGS_ALL,
CS.TAGS_FOLLOWED,
...followed,
...(followed.includes(tagsParam) || tagsParam === CS.TAGS_ALL || tagsParam === CS.TAGS_FOLLOWED
? []
: [tagsParam]), // if they unfollow while filtered, add Other
].map(tag => (
<option
key={tag}
value={tag}
className={classnames({
'claim-search__input-special': !followed.includes(tag),
})}
>
{followed.includes(tag) && typeof tag === 'string' && toCapitalCase(__(tag))}
{tag === CS.TAGS_ALL && __('Any')}
{tag === CS.TAGS_FOLLOWED && __('Following')}
{!followed.includes(tag) && tag !== CS.TAGS_ALL && tag !== CS.TAGS_FOLLOWED && __('Other')}
</option>
))}
</FormField>
</div>
)}
</div>
</>
)}
</div>
2020-01-02 17:30:27 +01:00
{hasMatureTags && hiddenNsfwMessage}
2019-07-21 23:31:22 +02:00
</Fragment>
2019-06-11 20:10:58 +02:00
);
return (
2020-01-02 21:36:03 +01:00
<React.Fragment>
2019-06-19 07:05:43 +02:00
<ClaimList
2019-07-23 10:05:51 +02:00
id={claimSearchCacheQuery}
2019-06-17 22:32:38 +02:00
loading={loading}
uris={uris}
2020-02-11 20:04:51 +01:00
header={header || defaultHeader}
2020-01-02 21:36:03 +01:00
headerLabel={headerLabel}
2019-07-01 03:52:38 +02:00
headerAltControls={meta}
2019-07-17 22:49:06 +02:00
onScrollBottom={handleScrollBottom}
2019-07-01 06:35:36 +02:00
page={page}
pageSize={CS.PAGE_SIZE}
2020-01-02 17:30:27 +01:00
empty={noResults}
2020-02-11 20:04:51 +01:00
renderProperties={renderProperties}
2020-02-12 19:59:48 +01:00
includeSupportAction={includeSupportAction}
hideBlock={hideBlock}
2019-06-17 22:32:38 +02:00
/>
2019-06-27 08:18:45 +02:00
2020-01-02 21:36:03 +01:00
<div className="card">
{loading && new Array(CS.PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
2020-01-02 21:36:03 +01:00
</div>
</React.Fragment>
2019-06-11 20:10:58 +02:00
);
}
2019-07-17 22:49:06 +02:00
export default withRouter(ClaimListDiscover);