// @flow import * as ICONS from 'constants/icons'; import { SETTINGS } from 'lbry-redux'; import * as PAGES from 'constants/pages'; import React from 'react'; import { withRouter } from 'react-router'; import classnames from 'classnames'; import Button from 'component/button'; import WunderBar from 'component/wunderbar'; import Icon from 'component/common/icon'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import Tooltip from 'component/common/tooltip'; import NavigationButton from 'component/navigationButton'; import { LOGO_TITLE } from 'config'; import { useIsMobile } from 'effects/use-screensize'; import NotificationBubble from 'component/notificationBubble'; import NotificationHeaderButton from 'component/notificationHeaderButton'; import ChannelThumbnail from 'component/channelThumbnail'; // @if TARGET='app' import { remote } from 'electron'; import { IS_MAC } from 'component/app/view'; // @endif type Props = { user: ?User, balance: string, roundedBalance: number, history: { entities: {}[], goBack: () => void, goForward: () => void, index: number, length: number, location: { pathname: string }, push: string => void, replace: string => void, }, currentTheme: string, automaticDarkModeEnabled: boolean, setClientSetting: (string, boolean | string, ?boolean) => void, hideBalance: boolean, email: ?string, authenticated: boolean, authHeader: boolean, backout: { backLabel?: string, backNavDefault?: string, title: string, simpleTitle: string, // Just use the same value as `title` if `title` is already short (~< 10 chars), unless you have a better idea for title overlfow on mobile }, syncError: ?string, emailToVerify?: string, signOut: () => void, openChannelCreate: () => void, openSignOutModal: () => void, clearEmailEntry: () => void, clearPasswordEntry: () => void, hasNavigated: boolean, sidebarOpen: boolean, setSidebarOpen: boolean => void, isAbsoluteSideNavHidden: boolean, hideCancel: boolean, myChannels: ?Array, }; const Header = (props: Props) => { const { roundedBalance, history, setClientSetting, currentTheme, automaticDarkModeEnabled, hideBalance, email, authenticated, authHeader, signOut, syncError, openSignOutModal, clearEmailEntry, clearPasswordEntry, emailToVerify, backout, sidebarOpen, setSidebarOpen, isAbsoluteSideNavHidden, user, hideCancel, myChannels, } = props; const isMobile = useIsMobile(); // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY); const isSignUpPage = history.location.pathname.includes(PAGES.AUTH); const isSignInPage = history.location.pathname.includes(PAGES.AUTH_SIGNIN); const isPwdResetPage = history.location.pathname.includes(PAGES.AUTH_PASSWORD_RESET); const hasBackout = Boolean(backout); const { backLabel, backNavDefault, title: backTitle, simpleTitle: simpleBackTitle } = backout || {}; const notificationsEnabled = user && user.experimental_ui; let channelUrl; if (myChannels && myChannels.length === 1) { const channel = myChannels[0]; channelUrl = channel.permanent_url || channel.canonical_url; } // Sign out if they click the "x" when they are on the password prompt const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' }; const homeButtonNavigationProps = isVerifyPage ? {} : authHeader ? authHeaderAction : { navigate: '/' }; const closeButtonNavigationProps = { onClick: () => { clearEmailEntry(); clearPasswordEntry(); if (syncError) { signOut(); } if (isSignInPage && !emailToVerify) { history.goBack(); } else if (isSignUpPage) { history.goBack(); } else if (isPwdResetPage) { history.goBack(); } else { history.push('/'); } }, }; function onBackout(e) { const { history, hasNavigated } = props; const { goBack, replace } = history; window.removeEventListener('popstate', onBackout); if (e.type !== 'popstate') { // if not initiated by pop (back button) if (hasNavigated && !backNavDefault) { goBack(); } else { replace(backNavDefault || `/`); } } } React.useEffect(() => { if (hasBackout) { window.addEventListener('popstate', onBackout); return () => window.removeEventListener('popstate', onBackout); } }, [hasBackout]); function handleThemeToggle() { if (automaticDarkModeEnabled) { setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false); } if (currentTheme === 'dark') { setClientSetting(SETTINGS.THEME, 'light', true); } else { setClientSetting(SETTINGS.THEME, 'dark', true); } } function getWalletTitle() { return hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance; } return (
{ remote.getCurrentWindow().maximize(); }} // @endif >
{!authHeader && backout ? (
) : ( <>
{!authHeader && ( )}
{!authHeader && !backout ? (
{(!IS_WEB || authenticated) && (
)}
) : ( !isVerifyPage && !hideCancel && (
{/* Add an empty span here so we can use the same style as above */} {/* This pushes the close button to the right side */}
) )} )}
); }; export default withRouter(Header);