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

472 lines
14 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2020-08-10 22:47:39 +02:00
import type { Node } from 'react';
2019-03-28 17:53:13 +01:00
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
2019-09-26 18:07:11 +02:00
import React from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2020-05-21 17:38:28 +02:00
import classnames from 'classnames';
2020-11-10 06:21:04 +01:00
import Icon from 'component/common/icon';
2020-08-10 22:47:39 +02:00
import NotificationBubble from 'component/notificationBubble';
2020-11-10 06:21:04 +01:00
import I18nMessage from 'component/i18nMessage';
import { PINNED_LABEL_1, PINNED_URI_1, PINNED_URI_2, PINNED_LABEL_2, SIMPLE_SITE } from 'config';
// @if TARGET='app'
import { IS_MAC } from 'component/app/view';
// @endif
2020-01-03 20:11:47 +01:00
2020-08-10 22:47:39 +02:00
const ESCAPE_KEY_CODE = 27;
const BACKSLASH_KEY_CODE = 220;
2020-08-11 22:32:03 +02:00
2020-08-21 17:18:47 +02:00
const HOME = {
title: 'Home',
link: `/`,
2020-08-21 17:18:47 +02:00
icon: ICONS.HOME,
onClick: () => {
if (window.location.pathname === '/') window.location.reload();
},
2020-08-21 17:18:47 +02:00
};
const RECENT_FROM_FOLLOWING = {
title: 'Following --[sidebar button]--',
link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
2020-08-21 17:18:47 +02:00
icon: ICONS.SUBSCRIBE,
};
2018-03-26 23:32:43 +02:00
type Props = {
2019-06-11 20:10:58 +02:00
subscriptions: Array<Subscription>,
followedTags: Array<Tag>,
2019-08-21 22:54:44 +02:00
email: ?string,
uploadCount: number,
2019-12-18 06:27:08 +01:00
doSignOut: () => void,
2020-08-10 22:47:39 +02:00
sidebarOpen: boolean,
setSidebarOpen: (boolean) => void,
2020-08-10 22:47:39 +02:00
isMediumScreen: boolean,
isOnFilePage: boolean,
unseenCount: number,
2020-05-21 17:38:28 +02:00
purchaseSuccess: boolean,
doClearPurchasedUriSuccess: () => void,
2020-08-11 22:32:03 +02:00
user: ?User,
homepageData: any,
};
type SideNavLink = {
title: string,
link?: string,
onClick?: () => any,
icon: string,
extra?: Node,
hideForUnauth?: boolean,
2018-03-26 23:32:43 +02:00
};
2020-01-02 17:30:27 +01:00
function SideNavigation(props: Props) {
2019-12-18 06:27:08 +01:00
const {
subscriptions,
followedTags,
2020-08-20 17:10:29 +02:00
doSignOut,
2019-12-18 06:27:08 +01:00
email,
2020-05-21 17:38:28 +02:00
purchaseSuccess,
doClearPurchasedUriSuccess,
2020-08-10 22:47:39 +02:00
sidebarOpen,
setSidebarOpen,
isMediumScreen,
isOnFilePage,
unseenCount,
homepageData,
2020-08-11 22:32:03 +02:00
user,
2019-12-18 06:27:08 +01:00
} = props;
2020-08-20 17:10:29 +02:00
const { EXTRA_SIDEBAR_LINKS } = homepageData;
const FULL_LINKS: Array<SideNavLink> = [
{
title: 'Your Tags',
link: `/$/${PAGES.TAGS_FOLLOWING}`,
icon: ICONS.TAG,
hideForUnauth: true,
},
{
title: 'Discover',
link: `/$/${PAGES.DISCOVER}`,
icon: ICONS.DISCOVER,
},
{
title: IS_WEB ? 'Purchased' : 'Library',
link: `/$/${PAGES.LIBRARY}`,
icon: ICONS.PURCHASED,
hideForUnauth: true,
},
];
2020-08-20 17:10:29 +02:00
const MOBILE_LINKS: Array<SideNavLink> = [
{
title: 'Notifications',
link: `/$/${PAGES.NOTIFICATIONS}`,
icon: ICONS.NOTIFICATION,
extra: <NotificationBubble inline />,
hideForUnauth: true,
},
2020-08-20 17:10:29 +02:00
{
title: 'Upload',
link: `/$/${PAGES.UPLOAD}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.PUBLISH,
},
{
title: 'New Channel',
link: `/$/${PAGES.CHANNEL_NEW}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.CHANNEL,
hideForUnauth: true,
},
{
title: 'Uploads',
link: `/$/${PAGES.UPLOADS}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.PUBLISH,
hideForUnauth: true,
},
{
title: 'Channels',
link: `/$/${PAGES.CHANNELS}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.CHANNEL,
hideForUnauth: true,
},
{
title: 'Creator Analytics',
link: `/$/${PAGES.CREATOR_DASHBOARD}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.ANALYTICS,
hideForUnauth: true,
},
{
title: 'Wallet',
link: `/$/${PAGES.WALLET}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.WALLET,
hideForUnauth: true,
},
{
title: 'Rewards',
2020-11-10 18:21:31 +01:00
link: `/$/${PAGES.REWARDS}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.REWARDS,
hideForUnauth: true,
},
{
title: 'Invites',
link: `/$/${PAGES.INVITE}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.INVITE,
hideForUnauth: true,
},
{
title: 'Settings',
link: `/$/${PAGES.SETTINGS}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.SETTINGS,
hideForUnauth: true,
},
{
title: 'Help',
link: `/$/${PAGES.HELP}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.HELP,
hideForUnauth: true,
},
{
title: 'Sign Out',
2020-08-20 17:10:29 +02:00
onClick: doSignOut,
icon: ICONS.SIGN_OUT,
hideForUnauth: true,
},
];
const UNAUTH_LINKS: Array<SideNavLink> = [
2020-08-20 17:10:29 +02:00
{
title: 'Log In',
link: `/$/${PAGES.AUTH_SIGNIN}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.SIGN_IN,
},
{
title: 'Sign Up',
link: `/$/${PAGES.AUTH}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.SIGN_UP,
},
{
title: 'Settings',
link: `/$/${PAGES.SETTINGS}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.SETTINGS,
},
{
title: 'Help',
link: `/$/${PAGES.HELP}`,
2020-08-20 17:10:29 +02:00
icon: ICONS.HELP,
},
];
if (PINNED_URI_1 && PINNED_LABEL_1) {
MOBILE_LINKS.push({
title: PINNED_LABEL_1,
2020-11-10 18:21:31 +01:00
link: PINNED_URI_1,
icon: ICONS.PINNED,
});
}
if (PINNED_URI_2 && PINNED_LABEL_2) {
MOBILE_LINKS.push({
title: PINNED_LABEL_2,
2020-11-10 18:21:31 +01:00
link: PINNED_URI_2,
icon: ICONS.PINNED,
});
}
2020-08-11 22:32:03 +02:00
const notificationsEnabled = user && user.experimental_ui;
2019-12-18 06:27:08 +01:00
const isAuthenticated = Boolean(email);
// SIDE LINKS: FOLLOWING, HOME, [FULL,] [EXTRA]
let SIDE_LINKS: Array<SideNavLink> = [];
SIDE_LINKS.push(HOME);
SIDE_LINKS.push(RECENT_FROM_FOLLOWING);
if (EXTRA_SIDEBAR_LINKS) {
2020-11-10 19:58:14 +01:00
SIDE_LINKS.push(...EXTRA_SIDEBAR_LINKS);
}
if (!SIMPLE_SITE) {
SIDE_LINKS.push(...FULL_LINKS);
}
2020-11-16 20:26:23 +01:00
2020-05-21 17:38:28 +02:00
const [pulseLibrary, setPulseLibrary] = React.useState(false);
const isPersonalized = !IS_WEB || isAuthenticated;
2020-08-10 22:47:39 +02:00
const isAbsolute = isOnFilePage || isMediumScreen;
2020-08-11 22:32:03 +02:00
const microNavigation = !sidebarOpen || isMediumScreen;
const subLinks = email
? MOBILE_LINKS.filter((link) => {
2020-08-11 22:32:03 +02:00
if (!notificationsEnabled && link.icon === ICONS.NOTIFICATION) {
return false;
}
return true;
})
: UNAUTH_LINKS;
2020-05-21 17:38:28 +02:00
React.useEffect(() => {
if (purchaseSuccess) {
setPulseLibrary(true);
let timeout = setTimeout(() => {
setPulseLibrary(false);
doClearPurchasedUriSuccess();
}, 2500);
return () => clearTimeout(timeout);
}
}, [setPulseLibrary, purchaseSuccess, doClearPurchasedUriSuccess]);
2020-08-10 22:47:39 +02:00
React.useEffect(() => {
function handleKeydown(e: SyntheticKeyboardEvent<*>) {
if (e.keyCode === ESCAPE_KEY_CODE && isAbsolute) {
setSidebarOpen(false);
} else if (e.keyCode === BACKSLASH_KEY_CODE) {
const hasActiveInput = document.querySelector('input:focus');
if (!hasActiveInput) {
setSidebarOpen(!sidebarOpen);
}
}
}
window.addEventListener('keydown', handleKeydown);
return () => window.removeEventListener('keydown', handleKeydown);
}, [sidebarOpen, setSidebarOpen, isAbsolute]);
2019-04-19 23:15:41 +02:00
2020-11-10 06:21:04 +01:00
const unAuthNudge = (
<div className="navigation__auth-nudge">
<span>
<I18nMessage tokens={{ lbc: <Icon icon={ICONS.LBC} /> }}>
Sign up to earn %lbc% for you and your favorite creators.
</I18nMessage>
</span>
<Button button="secondary" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}?src=sidenav_nudge`} />
2020-11-10 06:21:04 +01:00
</div>
);
2020-11-10 17:10:09 +01:00
const helpLinks = (
<ul className="navigation__tertiary navigation-links--small">
<li className="navigation-link">
<Button label={__('About --[link title in Sidebar or Footer]--')} href="https://lbry.com/about" />
</li>
<li className="navigation-link">
<Button label={__('FAQ')} href="https://odysee.com/@OdyseeHelp:b" />
</li>
<li className="navigation-link">
<Button label={__('Support')} href="https://lbry.com/support" />
</li>
<li className="navigation-link">
<Button label={__('Terms')} href="https://lbry.com/termsofservice" />
</li>
<li className="navigation-link">
<Button label={__('Privacy Policy')} href="https://lbry.com/privacy" />
</li>
</ul>
);
2020-01-24 19:31:49 +01:00
return (
2020-08-11 22:32:03 +02:00
<div
className={classnames('navigation__wrapper', {
'navigation__wrapper--micro': microNavigation && !isOnFilePage,
'navigation__wrapper--absolute': isAbsolute,
})}
>
2020-08-10 22:47:39 +02:00
{!isOnFilePage && (
<nav
className={classnames('navigation', {
'navigation--micro': microNavigation,
// @if TARGET='app'
'navigation--mac': IS_MAC,
// @endif
})}
>
2020-08-26 23:16:45 +02:00
<div>
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
{SIDE_LINKS.map((linkProps) => {
// $FlowFixMe
const { hideForUnauth, ...passedProps } = linkProps;
2020-08-26 23:16:45 +02:00
return !email && linkProps.hideForUnauth && IS_WEB ? null : (
2020-12-17 19:43:47 +01:00
<li key={linkProps.link}>
2020-08-11 22:32:03 +02:00
<Button
{...passedProps}
label={__(linkProps.title)}
title={__(linkProps.title)}
// $FlowFixMe
navigate={linkProps.route || linkProps.link}
2020-08-11 22:32:03 +02:00
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unseenCount > 0,
2020-08-11 22:32:03 +02:00
})}
activeClass="navigation-link--active"
/>
{linkProps.extra && linkProps.extra}
2020-08-11 22:32:03 +02:00
</li>
);
})}
2020-08-10 22:47:39 +02:00
</ul>
2020-08-26 23:16:45 +02:00
{sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
<ul className="navigation__secondary navigation-links">
2020-08-10 22:47:39 +02:00
{subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="navigation-link__wrapper">
<Button
navigate={uri}
label={channelName}
className="navigation-link"
activeClass="navigation-link--active"
/>
2019-12-19 21:43:49 +01:00
</li>
2020-08-10 22:47:39 +02:00
))}
</ul>
2019-12-19 21:43:49 +01:00
)}
{!SIMPLE_SITE && sidebarOpen && isPersonalized && followedTags && followedTags.length > 0 && (
2020-09-08 21:46:06 +02:00
<ul className="navigation__secondary navigation-links navigation-links--small">
{followedTags.map(({ name }, key) => (
<li key={name} className="navigation-link__wrapper">
<Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" />
</li>
))}
</ul>
)}
2020-11-10 06:21:04 +01:00
2020-12-04 15:12:16 +01:00
{!isAuthenticated && sidebarOpen && unAuthNudge}
2020-08-26 23:16:45 +02:00
</div>
2020-11-10 17:10:09 +01:00
{SIMPLE_SITE && sidebarOpen && helpLinks}
2020-08-26 23:16:45 +02:00
</nav>
)}
{(isOnFilePage || isMediumScreen) && sidebarOpen && (
<>
<nav
className={classnames('navigation--absolute', {
// @if TARGET='app'
'navigation--mac': IS_MAC,
// @endif
})}
>
<div>
<ul className="navigation-links--absolute">
{SIDE_LINKS.map((linkProps) => {
// $FlowFixMe
const { hideForUnauth, link, route, ...passedProps } = linkProps;
return !email && linkProps.hideForUnauth && IS_WEB ? null : (
2020-12-17 19:43:47 +01:00
<li key={route || link}>
2020-08-26 23:16:45 +02:00
<Button
{...passedProps}
navigate={route || link}
label={__(linkProps.title)}
title={__(linkProps.title)}
2020-08-26 23:16:45 +02:00
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unseenCount > 0,
2020-08-26 23:16:45 +02:00
})}
activeClass="navigation-link--active"
/>
{linkProps.extra && linkProps.extra}
2020-08-26 23:16:45 +02:00
</li>
);
})}
</ul>
<ul className="navigation-links--absolute mobile-only">
{subLinks.map((linkProps) => {
2020-08-26 23:16:45 +02:00
const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : (
2020-12-17 19:43:47 +01:00
<li key={linkProps.title} className="mobile-only">
2020-08-26 23:16:45 +02:00
<Button
{...passedProps}
navigate={linkProps.link}
label={__(linkProps.title)}
title={__(linkProps.title)}
2020-08-26 23:16:45 +02:00
className="navigation-link"
activeClass="navigation-link--active"
/>
{linkProps.extra}
</li>
);
})}
</ul>
{sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
<ul className="navigation__secondary navigation-links">
2020-08-26 23:16:45 +02:00
{subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="navigation-link__wrapper">
<Button
navigate={uri}
label={channelName}
className="navigation-link"
activeClass="navigation-link--active"
/>
</li>
))}
</ul>
)}
{!SIMPLE_SITE && sidebarOpen && isPersonalized && followedTags && followedTags.length > 0 && (
2020-09-08 21:46:06 +02:00
<ul className="navigation__secondary navigation-links navigation-links--small">
{followedTags.map(({ name }, key) => (
<li key={name} className="navigation-link__wrapper">
<Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" />
</li>
))}
</ul>
)}
2020-11-10 06:21:04 +01:00
{!isAuthenticated && unAuthNudge}
2020-11-10 17:10:09 +01:00
{SIMPLE_SITE && helpLinks}
2020-08-26 23:16:45 +02:00
</div>
2020-08-10 22:47:39 +02:00
</nav>
<div
className={classnames('navigation__overlay', {
// @if TARGET='app'
'navigation__overlay--mac': IS_MAC,
// @endif
})}
onClick={() => setSidebarOpen(false)}
/>
2020-08-10 22:47:39 +02:00
</>
)}
2020-08-11 22:32:03 +02:00
</div>
2019-06-11 20:10:58 +02:00
);
}
2018-03-26 23:32:43 +02:00
2020-08-10 22:47:39 +02:00
export default SideNavigation;