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

156 lines
5.3 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';
2021-07-08 18:21:42 +02:00
import { SITE_NAME, SIMPLE_SITE, DOMAIN, ENABLE_NO_SOURCE_CLAIMS } from 'config';
2020-01-02 17:30:27 +01:00
import React from 'react';
import Page from 'component/page';
2020-01-20 17:47:03 +01:00
import Button from 'component/button';
import ClaimTilesDiscover from 'component/claimTilesDiscover';
2021-06-15 10:24:16 +02:00
import ClaimPreviewTile from 'component/claimPreviewTile';
2020-09-16 19:02:45 +02:00
import Icon from 'component/common/icon';
2021-03-19 21:52:59 +01:00
import I18nMessage from 'component/i18nMessage';
import LbcSymbol from 'component/common/lbc-symbol';
2021-06-15 10:24:16 +02:00
import WaitUntilOnPage from 'component/common/wait-until-on-page';
import useGetLivestreams from 'effects/use-get-livestreams';
import { GetLinksData } from 'util/buildHomepage';
2020-07-23 16:22:57 +02:00
2021-07-14 05:40:49 +02:00
// @if TARGET='web'
import Pixel from 'web/component/pixel';
// @endif
2020-01-20 17:47:03 +01:00
type Props = {
authenticated: boolean,
followedTags: Array<Tag>,
subscribedChannels: Array<Subscription>,
2020-10-13 21:26:59 +02:00
showNsfw: boolean,
homepageData: any,
2020-01-20 17:47:03 +01:00
};
2020-01-02 17:30:27 +01:00
2020-01-20 17:47:03 +01:00
function HomePage(props: Props) {
const { followedTags, subscribedChannels, authenticated, showNsfw, homepageData } = 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();
2020-02-06 21:11:00 +01:00
const rowData: Array<RowDataItem> = GetLinksData(
homepageData,
true,
authenticated,
showPersonalizedChannels,
showPersonalizedTags,
subscribedChannels,
followedTags,
2020-10-13 21:26:59 +02:00
showIndividualTags,
showNsfw
);
2020-01-02 17:30:27 +01:00
2021-07-17 20:55:18 +02:00
function getRowElements(title, route, link, icon, help, options, index, pinUrls) {
2021-06-15 10:24:16 +02:00
const tilePlaceholder = (
<ul className="claim-grid">
{new Array(options.pageSize || 8).fill(1).map((x, i) => (
2021-07-08 18:21:42 +02:00
<ClaimPreviewTile showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS} key={i} placeholder />
2021-06-15 10:24:16 +02:00
))}
</ul>
);
2021-07-08 18:21:42 +02:00
const claimTiles = (
<ClaimTilesDiscover
{...options}
liveLivestreamsFirst
livestreamMap={livestreamMap}
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
hasSource
2021-07-17 20:55:18 +02:00
pinUrls={pinUrls}
pin={route === `/$/${PAGES.GENERAL}`} // use pinUrls here
2021-07-08 18:21:42 +02:00
/>
);
2021-06-15 10:24:16 +02:00
return (
<div key={title} className="claim-grid__wrapper">
{index !== 0 && title && typeof title === 'string' && (
<h1 className="claim-grid__header">
<Button navigate={route || link} button="link">
{icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
<span className="claim-grid__title">{__(title)}</span>
{help}
</Button>
</h1>
)}
{index === 0 && <>{claimTiles}</>}
{index !== 0 && (
<WaitUntilOnPage name={title} placeholder={tilePlaceholder} yOffset={800}>
2021-06-15 10:24:16 +02:00
{claimTiles}
</WaitUntilOnPage>
)}
{(route || link) && (
<Button
className="claim-grid__title--secondary"
button="link"
navigate={route || link}
iconRight={ICONS.ARROW_RIGHT}
label={__('View More')}
/>
)}
</div>
);
}
2020-01-02 17:30:27 +01:00
return (
2020-08-21 17:49:13 +02:00
<Page fullWidthPage>
2021-03-19 21:52:59 +01:00
{IS_WEB && DOMAIN === 'lbry.tv' && (
<div className="notice-message--loud">
<h1 className="section__title">
<I18nMessage
tokens={{
odysee: <Button label={__('odysee.com')} button="link" href="https://odysee.com?src=lbrytv-retired" />,
}}
>
lbry.tv is being retired in favor of %odysee%
</I18nMessage>
</h1>
<p className="section__subtitle">
<I18nMessage
tokens={{
desktop_app: (
<Button label={__('desktop app')} button="link" href="https://lbry.com/get?src=lbrytv-retired" />
),
odysee: <Button label={__('odysee.com')} button="link" href="https://odysee.com?src=lbrytv-retired" />,
credits: <LbcSymbol />,
}}
>
You will have to switch to the %desktop_app% or %odysee% in the near future. Your existing login details
will work on %odysee% and all of your %credits% and other settings will be there.
</I18nMessage>
</p>
</div>
)}
2020-11-10 18:47:31 +01:00
{!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (
2020-02-17 20:12:28 +01:00
<div className="notice-message">
2020-08-21 17:18:47 +02:00
<h1 className="section__title">
{__("%SITE_NAME% is more fun if you're following channels", { SITE_NAME })}
</h1>
<p className="section__actions">
<Button
button="primary"
navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
label={__('Find new channels to follow')}
/>
2020-02-17 20:12:28 +01:00
</p>
</div>
)}
2021-07-17 20:55:18 +02:00
{rowData.map(({ title, route, link, icon, help, pinUrls, options = {} }, index) => {
// add pins here
2021-07-17 20:55:18 +02:00
return getRowElements(title, route, link, icon, help, options, index, pinUrls);
2021-06-15 10:24:16 +02:00
})}
2021-07-14 05:40:49 +02:00
{/* @if TARGET='web' */}
<Pixel type={'retargeting'} />
{/* @endif */}
2020-01-02 17:30:27 +01:00
</Page>
);
}
export default HomePage;