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

256 lines
9.6 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2018-11-26 02:21:25 +01:00
import * as ICONS from 'constants/icons';
2019-06-17 22:32:38 +02:00
import * as SETTINGS from 'constants/settings';
2019-08-21 22:54:44 +02:00
import * as PAGES from 'constants/pages';
import React, { Fragment } from 'react';
2019-06-17 22:32:38 +02:00
import { withRouter } from 'react-router';
2019-08-27 16:43:42 +02:00
import classnames from 'classnames';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
import LbcSymbol from 'component/common/lbc-symbol';
import WunderBar from 'component/wunderbar';
2019-06-17 22:32:38 +02:00
import Icon from 'component/common/icon';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
2019-08-27 16:43:42 +02:00
import Tooltip from 'component/common/tooltip';
// @if TARGET='app'
import { IS_MAC } from 'component/app/view';
// @endif
2019-10-09 18:34:18 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
balance: string,
2019-06-11 20:10:58 +02:00
roundedBalance: number,
2019-11-14 15:34:55 +01:00
history: { push: string => void, goBack: () => void, goForward: () => void, location: { pathname: string } },
2019-06-17 22:32:38 +02:00
currentTheme: string,
automaticDarkModeEnabled: boolean,
setClientSetting: (string, boolean | string) => void,
hideBalance: boolean,
2019-08-21 22:54:44 +02:00
email: ?string,
authenticated: boolean,
2019-10-28 15:04:37 +01:00
authHeader: boolean,
syncError: ?string,
2019-09-26 18:07:11 +02:00
signOut: () => void,
2019-12-18 06:27:08 +01:00
openMobileNavigation: () => void,
2020-01-03 20:11:47 +01:00
openChannelCreate: () => void,
2018-03-26 23:32:43 +02:00
};
const Header = (props: Props) => {
2019-08-21 22:54:44 +02:00
const {
roundedBalance,
history,
setClientSetting,
currentTheme,
automaticDarkModeEnabled,
hideBalance,
email,
authenticated,
2019-10-28 15:04:37 +01:00
authHeader,
2019-09-26 18:07:11 +02:00
signOut,
syncError,
2019-12-18 06:27:08 +01:00
openMobileNavigation,
2020-01-03 20:11:47 +01:00
openChannelCreate,
2019-08-21 22:54:44 +02:00
} = props;
2019-11-22 22:13:00 +01:00
// on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
2019-11-14 01:33:36 +01:00
const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
const isAuthPage = history.location.pathname.includes(PAGES.AUTH);
2019-11-14 01:33:36 +01:00
// Sign out if they click the "x" when they are on the password prompt
2020-01-20 17:47:03 +01:00
const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
const homeButtonNavigationProps = isVerifyPage ? {} : authHeader ? authHeaderAction : { navigate: '/' };
const closeButtonNavigationProps = authHeader ? authHeaderAction : { onClick: () => history.goBack() };
2018-03-26 23:32:43 +02:00
2019-06-17 22:32:38 +02:00
function handleThemeToggle() {
if (automaticDarkModeEnabled) {
setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false);
}
if (currentTheme === 'dark') {
setClientSetting(SETTINGS.THEME, 'light');
} else {
setClientSetting(SETTINGS.THEME, 'dark');
}
}
2018-03-26 23:32:43 +02:00
2019-09-26 18:07:11 +02:00
function getWalletTitle() {
return hideBalance ? (
__('Wallet')
) : (
<React.Fragment>
{roundedBalance} <LbcSymbol />
</React.Fragment>
);
2019-08-21 22:54:44 +02:00
}
2017-06-06 23:19:12 +02:00
return (
<header
className={classnames('header', {
2019-10-28 15:04:37 +01:00
'header--minimal': authHeader,
2019-11-22 22:13:00 +01:00
// @if TARGET='web'
'header--noauth-web': !authenticated,
// @endif
// @if TARGET='app'
'header--mac': IS_MAC,
// @endif
})}
>
2019-06-11 20:10:58 +02:00
<div className="header__contents">
<div className="header__navigation">
2019-09-30 23:48:30 +02:00
<Button
className="header__navigation-item header__navigation-item--lbry"
label={__('LBRY')}
icon={ICONS.LBRY}
2020-01-02 23:46:04 +01:00
onClick={() => window.scrollTo(0, 0)}
2019-10-28 15:04:37 +01:00
{...homeButtonNavigationProps}
2019-09-30 23:48:30 +02:00
/>
2019-08-27 16:43:42 +02:00
{/* @if TARGET='app' */}
2019-10-28 15:04:37 +01:00
{!authHeader && (
2019-08-27 16:43:42 +02:00
<div className="header__navigation-arrows">
<Button
className="header__navigation-item header__navigation-item--back"
description={__('Navigate back')}
onClick={() => history.goBack()}
icon={ICONS.ARROW_LEFT}
iconSize={18}
/>
<Button
className="header__navigation-item header__navigation-item--forward"
description={__('Navigate forward')}
onClick={() => history.goForward()}
icon={ICONS.ARROW_RIGHT}
iconSize={18}
/>
</div>
)}
{/* @endif */}
2019-11-14 15:34:55 +01:00
{!authHeader && <WunderBar />}
2019-06-11 20:10:58 +02:00
</div>
2019-08-27 16:43:42 +02:00
2019-10-28 15:04:37 +01:00
{!authHeader ? (
2019-11-22 22:13:00 +01:00
<div className={classnames('header__menu', { 'header__menu--with-balance': !IS_WEB || authenticated })}>
{(!IS_WEB || authenticated) && (
2019-08-27 16:43:42 +02:00
<Fragment>
2020-01-02 17:30:27 +01:00
<Button
navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()}
/>
2019-08-27 16:43:42 +02:00
<Menu>
2019-11-22 22:13:00 +01:00
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
2020-01-03 17:43:51 +01:00
<Icon size={18} icon={ICONS.PUBLISH} />
2019-08-27 16:43:42 +02:00
</MenuButton>
<MenuList className="menu__list--header">
2020-01-03 20:11:47 +01:00
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Publish')}
2020-01-02 17:30:27 +01:00
</MenuItem>
2020-01-03 20:11:47 +01:00
<MenuItem className="menu__link" onSelect={openChannelCreate}>
2020-01-03 17:43:51 +01:00
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('New Channel')}
</MenuItem>
</MenuList>
</Menu>
<Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
<Icon size={18} icon={ICONS.ACCOUNT} />
</MenuButton>
<MenuList className="menu__list--header">
2020-01-02 17:30:27 +01:00
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISHED}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
2020-01-02 23:30:58 +01:00
{__('Publishes')}
</MenuItem>
2020-01-03 01:06:45 +01:00
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNELS}`)}>
2020-01-02 23:30:58 +01:00
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('Channels')}
2019-08-27 16:43:42 +02:00
</MenuItem>
2020-01-02 17:30:27 +01:00
{/* @if TARGET='app' */}
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.LIBRARY}`)}>
2020-01-02 17:30:27 +01:00
<Icon aria-hidden icon={ICONS.LIBRARY} />
2020-01-02 23:30:58 +01:00
{__('Library')}
2019-08-27 16:43:42 +02:00
</MenuItem>
2020-01-02 17:30:27 +01:00
{/* @endif */}
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
<Icon aria-hidden icon={ICONS.FEATURED} />
{__('Rewards')}
</MenuItem>
2020-01-03 17:43:51 +01:00
{/* Commented out until new invite system is implemented */}
2020-01-14 21:44:07 +01:00
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
2020-01-02 17:30:27 +01:00
<Icon aria-hidden icon={ICONS.INVITE} />
2020-01-14 21:44:07 +01:00
{__('Invites')}
</MenuItem>
2020-01-02 17:30:27 +01:00
2019-09-26 18:07:11 +02:00
{authenticated ? (
<MenuItem onSelect={signOut}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
2019-08-27 16:43:42 +02:00
</MenuItem>
) : (
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
2019-11-14 15:34:55 +01:00
<Icon aria-hidden icon={ICONS.SIGN_IN} />
{__('Sign In')}
</MenuItem>
2019-08-27 16:43:42 +02:00
)}
</MenuList>
</Menu>
</Fragment>
2019-11-22 22:13:00 +01:00
)}
<Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
<Icon size={18} icon={ICONS.SETTINGS} />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
<Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
{__('Settings')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
<Icon aria-hidden icon={ICONS.HELP} />
{__('Help')}
</MenuItem>
<MenuItem className="menu__link" onSelect={handleThemeToggle}>
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
{currentTheme === 'light' ? __('Dark') : __('Light')}
</MenuItem>
</MenuList>
</Menu>
{IS_WEB && !authenticated && (
2019-11-14 15:34:55 +01:00
<Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign In')} />
2019-08-27 16:43:42 +02:00
)}
</div>
2019-11-14 15:34:55 +01:00
) : (
!isVerifyPage && (
<div className="header__menu">
{/* Add an empty span here so we can use the same style as above */}
{/* This pushes the close button to the right side */}
<span />
<Tooltip label={__('Go Back')}>
2019-11-22 22:13:00 +01:00
<Button button="link" icon={ICONS.REMOVE} {...closeButtonNavigationProps} />
2019-11-14 15:34:55 +01:00
</Tooltip>
</div>
)
2019-08-27 16:43:42 +02:00
)}
2019-12-18 06:27:08 +01:00
{!authenticated && !isAuthPage && (
2019-12-18 06:27:08 +01:00
<Button
button="primary"
label={__('Sign In')}
className="header__menu--mobile"
onClick={() => history.push(`/$/${PAGES.AUTH}`)}
/>
)}
<Button onClick={openMobileNavigation} icon={ICONS.MENU} iconSize={24} className="header__menu--mobile" />
2017-06-06 23:19:12 +02:00
</div>
</header>
);
2017-06-06 06:21:55 +02:00
};
2019-06-17 22:32:38 +02:00
export default withRouter(Header);