lbry-desktop/ui/page/home/view.jsx

250 lines
6.8 KiB
React
Raw Normal View History

2020-01-02 17:30:27 +01:00
// @flow
2020-01-20 17:47:03 +01:00
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
2020-03-09 19:33:58 +01:00
import * as CS from 'constants/claim_search';
2020-01-02 17:30:27 +01:00
import React from 'react';
2020-01-20 17:47:03 +01:00
import moment from 'moment';
2020-01-02 17:30:27 +01:00
import Page from 'component/page';
2020-01-20 17:47:03 +01:00
import Button from 'component/button';
import ClaimTilesDiscover from 'component/claimTilesDiscover';
import Icon from 'component/common/icon';
2020-02-17 20:12:28 +01:00
import I18nMessage from 'component/i18nMessage';
2020-01-20 17:47:03 +01:00
import { parseURI } from 'lbry-redux';
import { toCapitalCase } from 'util/string';
2020-01-02 17:30:27 +01:00
2020-01-20 17:47:03 +01:00
type Props = {
authenticated: boolean,
followedTags: Array<Tag>,
subscribedChannels: Array<Subscription>,
};
2020-01-02 17:30:27 +01:00
2020-01-20 17:47:03 +01:00
type RowDataItem = {
title: string,
link?: string,
help?: any,
options?: {},
};
function HomePage(props: Props) {
const { followedTags, subscribedChannels, authenticated } = props;
2020-01-22 17:14:36 +01:00
const showAuthenticatedRows = authenticated || !IS_WEB;
2020-01-20 17:47:03 +01:00
let rowData: Array<RowDataItem> = [];
2020-01-22 17:14:36 +01:00
if (!showAuthenticatedRows) {
2020-02-10 19:59:53 +01:00
rowData.push({
title: 'Top Channels On LBRY',
2020-03-10 15:54:22 +01:00
link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${
CS.FRESH_ALL
}`,
2020-02-10 19:59:53 +01:00
options: {
orderBy: ['effective_amount'],
2020-02-26 23:03:54 +01:00
claimType: ['channel'],
2020-01-20 17:47:03 +01:00
},
2020-02-10 19:59:53 +01:00
});
2020-01-20 17:47:03 +01:00
}
2020-01-22 17:14:36 +01:00
if (showAuthenticatedRows) {
2020-01-20 17:47:03 +01:00
if (subscribedChannels && subscribedChannels.length > 0) {
let releaseTime = `>${Math.floor(
moment()
.subtract(1, 'year')
.startOf('week')
.unix()
)}`;
// Warning - hack below
// If users are following more than 20 channels or tags, limit results to stuff less than 6 months old
// This helps with timeout issues for users that are following a ton of stuff
// https://github.com/lbryio/lbry-sdk/issues/2420
if (subscribedChannels.length > 20) {
releaseTime = `>${Math.floor(
moment()
.subtract(6, 'months')
.startOf('week')
.unix()
)}`;
}
2020-01-20 17:47:03 +01:00
rowData.push({
title: 'Recent From Following',
link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
options: {
orderBy: ['release_time'],
releaseTime: releaseTime,
2020-01-20 17:47:03 +01:00
pageSize: subscribedChannels.length > 3 ? 8 : 4,
channelIds: subscribedChannels.map(subscription => {
const { channelClaimId } = parseURI(subscription.uri);
return channelClaimId;
}),
},
});
}
if (followedTags.length === 0) {
rowData.push({
title: 'Trending On LBRY',
link: `/$/${PAGES.DISCOVER}`,
options: {
pageSize: subscribedChannels.length > 0 ? 4 : 8,
},
});
}
if (followedTags.length > 0 && followedTags.length < 5) {
const followedRows = followedTags.map((tag: Tag) => ({
title: `Trending for #${toCapitalCase(tag.name)}`,
2020-02-28 16:11:55 +01:00
link: `/$/${PAGES.DISCOVER}?t=${tag.name}`,
2020-01-20 17:47:03 +01:00
options: {
pageSize: 4,
tags: [tag.name],
claimType: ['stream'],
2020-01-20 17:47:03 +01:00
},
}));
rowData.push(...followedRows);
}
if (followedTags.length > 4) {
rowData.push({
title: 'Trending For Your Tags',
link: `/$/${PAGES.TAGS_FOLLOWING}`,
options: {
tags: followedTags.map(tag => tag.name),
claimType: ['stream'],
2020-01-20 17:47:03 +01:00
},
});
}
}
// Everyone
rowData.push(
{
title: 'Top Content Last Week',
2020-03-09 19:33:58 +01:00
link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_WEEK}`,
2020-01-20 17:47:03 +01:00
options: {
orderBy: ['effective_amount'],
pageSize: 4,
2020-02-26 23:03:54 +01:00
claimType: ['stream'],
2020-01-20 17:47:03 +01:00
releaseTime: `>${Math.floor(
moment()
.subtract(1, 'week')
.startOf('day')
2020-01-20 17:47:03 +01:00
.unix()
)}`,
},
},
{
title: '#HomePageCageMatch',
2020-03-09 19:33:58 +01:00
link: `/$/${PAGES.DISCOVER}?t=homepagecagematch&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${
CS.FRESH_ALL
}`,
2020-01-20 17:47:03 +01:00
help: (
<div className="claim-grid__help">
<Icon
icon={ICONS.HELP}
tooltip
customTooltipText={__(
'This is an experiment, and may be removed in the future. Publish something with the #homepagecagematch tag to battle for the top spot on the home page!'
)}
/>
</div>
),
options: {
tags: ['homepagecagematch'],
orderBy: ['effective_amount'],
timestamp: `>${Math.floor(
moment()
.subtract(1, 'week')
.startOf('day')
2020-01-20 17:47:03 +01:00
.unix()
)}`,
},
}
);
2020-01-22 17:14:36 +01:00
if (!showAuthenticatedRows) {
2020-01-20 17:47:03 +01:00
rowData.push({
title: '#lbry',
2020-03-09 19:33:58 +01:00
link: `/$/${PAGES.DISCOVER}?t=lbry&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
2020-01-20 17:47:03 +01:00
options: {
tags: ['lbry'],
orderBy: ['effective_amount'],
pageSize: 4,
},
});
}
2020-01-22 17:14:36 +01:00
if (showAuthenticatedRows) {
2020-01-20 17:47:03 +01:00
rowData.push({
title: 'Trending On LBRY',
link: `/$/${PAGES.DISCOVER}`,
});
}
2020-02-06 21:11:00 +01:00
rowData.push({
title: 'Latest From @lbrycast',
link: `/@lbrycast:4`,
options: {
orderBy: ['release_time'],
pageSize: 4,
channelIds: ['4c29f8b013adea4d5cca1861fb2161d5089613ea'],
},
});
2020-01-20 17:47:03 +01:00
rowData.push({
title: 'Latest From @lbry',
link: `/@lbry:3f`,
options: {
orderBy: ['release_time'],
pageSize: 4,
channelIds: ['3fda836a92faaceedfe398225fb9b2ee2ed1f01a'],
},
});
2020-01-02 17:30:27 +01:00
return (
<Page>
2020-02-17 20:12:28 +01:00
{(authenticated || !IS_WEB) && !subscribedChannels.length && (
<div className="notice-message">
<h1 className="section__title">{__('LBRY Works Better If You Are Following Channels')}</h1>
<p className="section__subtitle">
<I18nMessage
tokens={{
discover_channels_link: (
<Button
button="link"
navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
label={__('Find new channels to follow')}
/>
),
}}
>
You aren't currently following any channels. %discover_channels_link%.
</I18nMessage>
</p>
</div>
)}
2020-01-20 17:47:03 +01:00
{rowData.map(({ title, link, help, options = {} }) => (
<div key={title} className="claim-grid__wrapper">
<h1 className="section__actions">
{link ? (
<Button
className="claim-grid__title"
button="link"
navigate={link}
iconRight={ICONS.ARROW_RIGHT}
label={title}
/>
) : (
<span className="claim-grid__title">{title}</span>
)}
{help}
</h1>
<ClaimTilesDiscover {...options} />
</div>
))}
2020-01-02 17:30:27 +01:00
</Page>
);
}
export default HomePage;