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

new homepage searches, always show sidebar

Browse source
This commit is contained in:
Jeremy Kauffman 2020-04-02 13:02:12 -04:00 committed by Jeremy Kauffman
parent 3e8745be90
commit 2b042d1d97
5 changed files with 140 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,4 @@
import { connect } from 'react-redux';
import { selectUserVerifiedEmail } from 'lbryinc';
import Page from './view';
const select = state => ({
authenticated: Boolean(selectUserVerifiedEmail(state)),
});
export default connect(select)(Page);
export default connect()(Page);

6
ui/component/page/view.jsx
View file

@ -12,20 +12,18 @@ type Props = {
autoUpdateDownloaded: boolean,
isUpgradeAvailable: boolean,
authPage: boolean,
authenticated: boolean,
noHeader: boolean,
};
function Page(props: Props) {
const { children, className, authPage = false, authenticated, noHeader } = props;
const obscureSideNavigation = IS_WEB ? !authenticated : false;
const { children, className, authPage = false, noHeader } = props;
return (
<Fragment>
{!noHeader && <Header authHeader={authPage} />}
<div className={classnames('main-wrapper__inner')}>
<main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
{!authPage && !noHeader && <SideNavigation obscureSideNavigation={obscureSideNavigation} />}
{!authPage && !noHeader && <SideNavigation />}
</div>
</Fragment>
);

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

@ -19,7 +19,6 @@ type Props = {
subscriptions: Array<Subscription>,
followedTags: Array<Tag>,
email: ?string,
obscureSideNavigation: boolean,
uploadCount: number,
sticky: boolean,
expanded: boolean,
@ -31,7 +30,6 @@ function SideNavigation(props: Props) {
const {
subscriptions,
followedTags,
obscureSideNavigation,
uploadCount,
doSignOut,
email,
@ -46,6 +44,9 @@ function SideNavigation(props: Props) {
getSideInformation(pathname)
);
const isPersonalized = !IS_WEB || isAuthenticated;
const requireAuthOnPersonalizedActions = IS_WEB;
function getSideInformation(path) {
switch (path) {
case `/$/${PAGES.CHANNELS_FOLLOWING}`:
@ -64,12 +65,13 @@ function SideNavigation(props: Props) {
setSideInformation(sideInfo);
}, [pathname, setSideInformation]);
function buildLink(path, label, icon, onClick) {
function buildLink(path, label, icon, onClick, requiresAuth = false) {
return {
navigate: path ? `$/${path}` : '/',
label,
icon,
onClick,
requiresAuth,
};
}
@ -82,12 +84,6 @@ function SideNavigation(props: Props) {
<div>{children}</div>
);
// @if TARGET='web'
if (obscureSideNavigation) {
return <Ads />;
}
// @endif
return (
<Wrapper>
<nav className="navigation">
@ -100,10 +96,16 @@ function SideNavigation(props: Props) {
...buildLink(null, __('Home'), ICONS.HOME),
},
{
...buildLink(PAGES.CHANNELS_FOLLOWING, __('Following'), ICONS.SUBSCRIBE),
...buildLink(
PAGES.CHANNELS_FOLLOWING,
__('Following'),
ICONS.SUBSCRIBE,
null,
requireAuthOnPersonalizedActions
),
},
{
...buildLink(PAGES.TAGS_FOLLOWING, __('Your Tags'), ICONS.TAG),
...buildLink(PAGES.TAGS_FOLLOWING, __('Your Tags'), ICONS.TAG, null, requireAuthOnPersonalizedActions),
},
{
...buildLink(PAGES.DISCOVER, __('All Content'), ICONS.DISCOVER),
@ -123,6 +125,7 @@ function SideNavigation(props: Props) {
)}
{expanded &&
isPersonalized &&
[
{
...buildLink(PAGES.CHANNELS, __('Channels'), ICONS.CHANNEL),
@ -176,7 +179,7 @@ function SideNavigation(props: Props) {
)}
</ul>
{sideInformation === SHOW_TAGS && (
{sideInformation === SHOW_TAGS && !expanded && isPersonalized && (
<ul className="navigation__secondary navigation-links--small tags--vertical">
{followedTags.map(({ name }, key) => (
<li className="navigation-link__wrapper" key={name}>
@ -186,7 +189,7 @@ function SideNavigation(props: Props) {
</ul>
)}
{sideInformation === SHOW_CHANNELS && (
{sideInformation === SHOW_CHANNELS && !expanded && isPersonalized && (
<ul className="navigation__secondary navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="navigation-link__wrapper">
@ -201,6 +204,9 @@ function SideNavigation(props: Props) {
</ul>
)}
</nav>
// @if TARGET='web'
{!isAuthenticated && !expanded && <Ads />}
// @endif
</Wrapper>
);
}

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

@ -27,24 +27,13 @@ type RowDataItem = {
function HomePage(props: Props) {
const { followedTags, subscribedChannels, authenticated } = props;
const showAuthenticatedRows = authenticated || !IS_WEB;
const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
let rowData: Array<RowDataItem> = [];
if (!showAuthenticatedRows) {
rowData.push({
title: 'Top Channels On LBRY',
link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${
CS.FRESH_ALL
}`,
options: {
orderBy: ['effective_amount'],
claimType: ['channel'],
},
});
}
if (showAuthenticatedRows) {
if (subscribedChannels && subscribedChannels.length > 0) {
// if you are following channels, always show that first
if (showPersonalizedChannels) {
let releaseTime = `>${Math.floor(
moment()
.subtract(1, 'year')
@ -80,30 +69,7 @@ function HomePage(props: Props) {
});
}
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)}`,
link: `/$/${PAGES.DISCOVER}?t=${tag.name}`,
options: {
pageSize: 4,
tags: [tag.name],
claimType: ['stream'],
},
}));
rowData.push(...followedRows);
}
if (followedTags.length > 4) {
if (showPersonalizedTags && !showIndividualTags) {
rowData.push({
title: 'Trending For Your Tags',
link: `/$/${PAGES.TAGS_FOLLOWING}`,
@ -113,25 +79,72 @@ function HomePage(props: Props) {
},
});
}
if (showPersonalizedTags && showIndividualTags) {
followedTags.forEach((tag: Tag) => {
rowData.push({
title: `Trending for #${toCapitalCase(tag.name)}`,
link: `/$/${PAGES.DISCOVER}?t=${tag.name}`,
options: {
pageSize: 4,
tags: [tag.name],
claimType: ['stream'],
},
});
});
}
// Everyone
rowData.push(
{
title: 'Top Content Last Week',
link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_WEEK}`,
rowData.push({
title: 'Top Content from Today',
link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_DAY}`,
options: {
pageSize: showPersonalizedChannels || showPersonalizedTags ? 4 : 8,
orderBy: ['effective_amount'],
pageSize: 4,
claimType: ['stream'],
releaseTime: `>${Math.floor(
moment()
.subtract(1, 'week')
.subtract(1, 'day')
.startOf('day')
.unix()
)}`,
},
});
rowData.push({
title: 'Trending On LBRY',
link: `/$/${PAGES.DISCOVER}`,
options: {
pageSize: showPersonalizedChannels || showPersonalizedTags ? 4 : 8,
},
});
if (!showPersonalizedChannels) {
rowData.push({
title: 'Top Channels On LBRY',
link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
options: {
orderBy: ['effective_amount'],
claimType: ['channel'],
},
});
}
rowData.push(
{
title: 'Trending Classics',
link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TRENDING}&${CS.FRESH_KEY}=${CS.FRESH_WEEK}`,
options: {
pageSize: 4,
claimType: ['stream'],
releaseTime: `<${Math.floor(
moment()
.subtract(6, 'month')
.startOf('day')
.unix()
)}`,
},
}
/* the cagematch will return in some form! - Jeremy
{
title: '#HomePageCageMatch',
link: `/$/${PAGES.DISCOVER}?t=homepagecagematch&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${
@ -158,28 +171,9 @@ function HomePage(props: Props) {
.unix()
)}`,
},
}
} */
);
if (!showAuthenticatedRows) {
rowData.push({
title: '#lbry',
link: `/$/${PAGES.DISCOVER}?t=lbry&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
options: {
tags: ['lbry'],
orderBy: ['effective_amount'],
pageSize: 4,
},
});
}
if (showAuthenticatedRows) {
rowData.push({
title: 'Trending On LBRY',
link: `/$/${PAGES.DISCOVER}`,
});
}
rowData.push({
title: 'Latest From @lbrycast',
link: `/@lbrycast:4`,

4
ui/scss/component/_navigation.scss
View file

@ -9,6 +9,10 @@
}
}
.navigation + .ads-wrapper {
margin-top: var(--spacing-large);
}
.navigation__secondary {
margin-top: var(--spacing-large);
}